diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js index c5799d97a8064..3bef9ed51083e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -9,7 +9,7 @@ import { ExternalLink, __experimentalTruncate as Truncate, } from '@wordpress/components'; -import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; +import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { pencil } from '@wordpress/icons'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; @@ -26,28 +26,36 @@ import SidebarButton from '../sidebar-button'; import PageDetails from './page-details'; import PageActions from '../page-actions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; +import HomeTemplateDetails from '../sidebar-navigation-screen-template/home-template-details'; -export default function SidebarNavigationScreenPage() { - const navigator = useNavigator(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); +function usePageDetails( postId ) { const { - params: { postId }, - } = useNavigator(); - const { record } = useEntityRecord( 'postType', 'page', postId ); - - const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( + isPostsPage, + record, + featuredMediaSourceUrl, + featuredMediaAltText, + } = useSelect( ( select ) => { const { getEntityRecord } = select( coreStore ); + const siteSettings = getEntityRecord( 'root', 'site' ); + const pageRecord = select( coreStore ).getEntityRecord( + 'postType', + 'page', + postId + ); + // Featured image. - const attachedMedia = record?.featured_media + const attachedMedia = pageRecord?.featured_media ? getEntityRecord( 'postType', 'attachment', - record?.featured_media + pageRecord?.featured_media ) : null; - return { + record: pageRecord, + isPostsPage: + parseInt( postId, 10 ) === siteSettings?.page_for_posts, featuredMediaSourceUrl: attachedMedia?.media_details.sizes?.medium?.source_url || attachedMedia?.source_url, @@ -58,18 +66,81 @@ export default function SidebarNavigationScreenPage() { ), }; }, - [ record ] + [ postId ] + ); + + const title = decodeEntities( + record?.title?.rendered || __( '(no title)' ) ); + const description = isPostsPage + ? __( 'This page displays your latest posts' ) + : ''; const featureImageAltText = featuredMediaAltText ? decodeEntities( featuredMediaAltText ) : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); - return record ? ( - + ) : ( + <> + { !! featuredMediaSourceUrl && ! isPostsPage && ( + +
+ { +
+
) } + { !! record?.excerpt?.rendered && ! isPostsPage && ( + + { stripHTML( record.excerpt.rendered ) } + + ) } + + + ); + + const meta = record?.link ? ( + + { filterURLForDisplay( safeDecodeURIComponent( record.link ) ) } + + ) : null; + + const footer = !! record?.modified ? ( + + ) : null; + + return { title, meta, description, content, footer }; +} + +export default function SidebarNavigationScreenPage() { + const navigator = useNavigator(); + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { + params: { postId }, + } = useNavigator(); + const { title, meta, content, description, footer } = + usePageDetails( postId ); + + return ( + } - meta={ - - { filterURLForDisplay( - safeDecodeURIComponent( record.link ) - ) } - - } - content={ - <> - { !! featuredMediaSourceUrl && ( - -
- { -
-
- ) } - { !! record?.excerpt?.rendered && ( - - { stripHTML( record.excerpt.rendered ) } - - ) } - - - } - footer={ - - } + meta={ meta } + content={ content } + footer={ footer } /> - ) : null; + ); }