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;
+ );
}