DataViews: Add featured image field to the page list (#55246)

Co-authored-by: ntsekouras <ntsekouras@outlook.com>

packages/edit-site/src/components/media/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord } from '@wordpress/core-data';
+
+function Media( { id, size, ...props } ) {
+	const { record: media } = useEntityRecord( 'root', 'media', id );
+	const sizesPerPriority = [ 'large', 'thumbnail' ];
+	const currentSize =
+		size ??
+		sizesPerPriority.find( ( s ) => !! media?.media_details?.sizes[ s ] );
+	const mediaDetails = media?.media_details?.sizes[ currentSize ];
+
+	if ( ! mediaDetails ) {
+		return null;
+	}
+
+	return (
+		<img
+			{ ...props }
+			src={ mediaDetails.source_url }
+			alt={ media.alt_text }
+		/>
+	);
+}
+
+export default Media;

packages/edit-site/src/components/page-pages/index.js

@@ -18,6 +18,7 @@ import Page from '../page';
 import Link from '../routes/link';
 import { DataViews } from '../dataviews';
 import useTrashPostAction from '../actions/trash-post';
+import Media from '../media';
 
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
@@ -34,7 +35,7 @@ export default function PagePages() {
 		},
 		// All fields are visible by default, so it's
 		// better to keep track of the hidden ones.
-		hiddenFields: [ 'date' ],
+		hiddenFields: [ 'date', 'featured-image' ],
 	} );
 	// Request post statuses to get the proper labels.
 	const { records: statuses } = useEntityRecords( 'root', 'status' );
@@ -75,6 +76,20 @@ export default function PagePages() {
 
 	const fields = useMemo(
 		() => [
+			{
+				id: 'featured-image',
+				header: __( 'Featured Image' ),
+				accessorFn: ( page ) => page.featured_media,
+				cell: ( props ) =>
+					!! props.row.original.featured_media ? (
+						<Media
+							className="edit-site-page-pages__featured-image"
+							id={ props.row.original.featured_media }
+							size="thumbnail"
+						/>
+					) : null,
+				enableSorting: false,
+			},
 			{
 				header: __( 'Title' ),
 				id: 'title',
@@ -116,7 +131,7 @@ export default function PagePages() {
 				},
 			},
 			{
-				header: 'Status',
+				header: __( 'Status' ),
 				id: 'status',
 				accessorFn: ( page ) =>
 					postStatuses[ page.status ] ?? page.status,

packages/edit-site/src/components/page-pages/style.scss

@@ -0,0 +1,4 @@
+.edit-site-page-pages__featured-image {
+	border-radius: $radius-block-ui;
+	max-height: 60px;
+}

packages/edit-site/src/style.scss

@@ -11,6 +11,7 @@
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
 @import "./components/page/style.scss";
+@import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";