Showing homepage settings for posts pages that are set as the post pa…

…ge in reading settings
WordPress · Jul 6, 2023 · 6729ca6 · 6729ca6
1 parent 9a45108
commit 6729ca6
Showing 1 changed file with 92 additions and 60 deletions.
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
@@ -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 ? (
-		<SidebarNavigationScreen
-			title={ decodeEntities(
-				record?.title?.rendered || __( '(no title)' )
+	const content = isPostsPage ? (
+		<HomeTemplateDetails />
+	) : (
+		<>
+			{ !! featuredMediaSourceUrl && ! isPostsPage && (
+				<VStack
+					className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
+					alignment="left"
+					spacing={ 2 }
+				>
+					<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
+						<img
+							alt={ featureImageAltText }
+							src={ featuredMediaSourceUrl }
+						/>
+					</div>
+				</VStack>
 			) }
+			{ !! record?.excerpt?.rendered && ! isPostsPage && (
+				<Truncate
+					className="edit-site-sidebar-navigation-screen-page__excerpt"
+					numberOfLines={ 3 }
+				>
+					{ stripHTML( record.excerpt.rendered ) }
+				</Truncate>
+			) }
+			<PageDetails id={ postId } />
+		</>
+	);
+
+	const meta = record?.link ? (
+		<ExternalLink
+			className="edit-site-sidebar-navigation-screen__page-link"
+			href={ record.link }
+		>
+			{ filterURLForDisplay( safeDecodeURIComponent( record.link ) ) }
+		</ExternalLink>
+	) : null;
+
+	const footer = !! record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter
+			lastModifiedDateTime={ 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 (
+		<SidebarNavigationScreen
+			title={ title }
+			description={ description }
 			actions={
 				<>
 					<PageActions
@@ -86,48 +157,9 @@ export default function SidebarNavigationScreenPage() {
 					/>
 				</>
 			}
-			meta={
-				<ExternalLink
-					className="edit-site-sidebar-navigation-screen__page-link"
-					href={ record.link }
-				>
-					{ filterURLForDisplay(
-						safeDecodeURIComponent( record.link )
-					) }
-				</ExternalLink>
-			}
-			content={
-				<>
-					{ !! featuredMediaSourceUrl && (
-						<VStack
-							className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
-							alignment="left"
-							spacing={ 2 }
-						>
-							<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
-								<img
-									alt={ featureImageAltText }
-									src={ featuredMediaSourceUrl }
-								/>
-							</div>
-						</VStack>
-					) }
-					{ !! record?.excerpt?.rendered && (
-						<Truncate
-							className="edit-site-sidebar-navigation-screen-page__excerpt"
-							numberOfLines={ 3 }
-						>
-							{ stripHTML( record.excerpt.rendered ) }
-						</Truncate>
-					) }
-					<PageDetails id={ postId } />
-				</>
-			}
-			footer={
-				<SidebarNavigationScreenDetailsFooter
-					lastModifiedDateTime={ record?.modified }
-				/>
-			}
+			meta={ meta }
+			content={ content }
+			footer={ footer }
 		/>
-	) : null;
+	);
 }