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";