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 b539b82736467e..c5799d97a80645 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 } from '@wordpress/core-data'; +import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { pencil } from '@wordpress/icons'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; @@ -27,26 +27,27 @@ import PageDetails from './page-details'; import PageActions from '../page-actions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; -function usePageDetails( postId ) { - const { record, featuredMediaSourceUrl, featuredMediaAltText } = useSelect( +export default function SidebarNavigationScreenPage() { + const navigator = useNavigator(); + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { + params: { postId }, + } = useNavigator(); + const { record } = useEntityRecord( 'postType', 'page', postId ); + + const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( ( select ) => { const { getEntityRecord } = select( coreStore ); - const pageRecord = select( coreStore ).getEntityRecord( - 'postType', - 'page', - postId - ); - // Featured image. - const attachedMedia = pageRecord?.featured_media + const attachedMedia = record?.featured_media ? getEntityRecord( 'postType', 'attachment', - pageRecord?.featured_media + record?.featured_media ) : null; + return { - record: pageRecord, featuredMediaSourceUrl: attachedMedia?.media_details.sizes?.medium?.source_url || attachedMedia?.source_url, @@ -57,74 +58,18 @@ function usePageDetails( postId ) { ), }; }, - [ postId ] - ); - - const title = decodeEntities( - record?.title?.rendered || __( '(no title)' ) + [ record ] ); const featureImageAltText = featuredMediaAltText ? decodeEntities( featuredMediaAltText ) : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); - const content = ( - <> - { !! featuredMediaSourceUrl && ( - -
- { -
-
- ) } - { !! record?.excerpt?.rendered && ( - - { stripHTML( record.excerpt.rendered ) } - - ) } - - - ); - - const meta = record?.link ? ( - - { filterURLForDisplay( safeDecodeURIComponent( record.link ) ) } - - ) : null; - - const footer = !! record?.modified ? ( - - ) : null; - - return { title, meta, content, footer }; -} - -export default function SidebarNavigationScreenPage() { - const navigator = useNavigator(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { - params: { postId }, - } = useNavigator(); - const { title, meta, content, footer } = usePageDetails( postId ); - - return ( + return record ? ( } - meta={ meta } - content={ content } - footer={ footer } + meta={ + + { filterURLForDisplay( + safeDecodeURIComponent( record.link ) + ) } + + } + content={ + <> + { !! featuredMediaSourceUrl && ( + +
+ { +
+
+ ) } + { !! record?.excerpt?.rendered && ( + + { stripHTML( record.excerpt.rendered ) } + + ) } + + + } + footer={ + + } /> - ); + ) : null; }