diff --git a/packages/edit-site/src/components/media/index.js b/packages/edit-site/src/components/media/index.js
new file mode 100644
index 00000000000000..7120d7c7f56ce7
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default Media;
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index ec27265302748e..e34e4cbac5be30 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/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 ? (
+
+ ) : 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,
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
new file mode 100644
index 00000000000000..82e124b3ac4fe9
--- /dev/null
+++ b/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;
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index e95cd3571c419f..dadbf48d06e64d 100644
--- a/packages/edit-site/src/style.scss
+++ b/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";