Site editor sidebar: add footer to template part and ensure nested te…

…mplate areas display (WordPress#51669) * This commit: - performs `lastModifiedDateTime` check in the generic footer - adds a last modified footer to template parts - ensures we know which default template part areas a template is using, even if those template areas are nested * cha cha chaaaaaaange logs of change * Adding spacing to page details
pewresearch · Jul 13, 2023 · f5c205d · f5c205d
1 parent 632763c
commit f5c205d
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 66 deletions.
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 -   Site editor sidebar: add home template details and controls [#51223](https://github.com/WordPress/gutenberg/pull/51223).
+-   Site editor sidebar: add footer to template part and ensure nested template areas display [#51669](https://github.com/WordPress/gutenberg/pull/51669).
 
 ## 5.12.0 (2023-06-07)
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
@@ -18,22 +18,28 @@ export default function SidebarNavigationScreenDetailsFooter( {
 	lastModifiedDateTime,
 } ) {
 	return (
-		<SidebarNavigationScreenDetailsPanelRow className="edit-site-sidebar-navigation-screen-details-footer">
-			<SidebarNavigationScreenDetailsPanelLabel>
-				{ __( 'Last modified' ) }
-			</SidebarNavigationScreenDetailsPanelLabel>
-			<SidebarNavigationScreenDetailsPanelValue>
-				{ createInterpolateElement(
-					sprintf(
-						/* translators: %s: is the relative time when the post was last modified. */
-						__( '<time>%s</time>' ),
-						humanTimeDiff( lastModifiedDateTime )
-					),
-					{
-						time: <time dateTime={ lastModifiedDateTime } />,
-					}
-				) }
-			</SidebarNavigationScreenDetailsPanelValue>
-		</SidebarNavigationScreenDetailsPanelRow>
+		<>
+			{ lastModifiedDateTime && (
+				<SidebarNavigationScreenDetailsPanelRow className="edit-site-sidebar-navigation-screen-details-footer">
+					<SidebarNavigationScreenDetailsPanelLabel>
+						{ __( 'Last modified' ) }
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: %s: is the relative time when the post was last modified. */
+								__( '<time>%s</time>' ),
+								humanTimeDiff( lastModifiedDateTime )
+							),
+							{
+								time: (
+									<time dateTime={ lastModifiedDateTime } />
+								),
+							}
+						) }
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
+			) }
+		</>
 	);
 }
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
@@ -121,11 +121,9 @@ export default function SidebarNavigationScreenPage() {
 				</>
 			}
 			footer={
-				!! record?.modified && (
-					<SidebarNavigationScreenDetailsFooter
-						lastModifiedDateTime={ record.modified }
-					/>
-				)
+				<SidebarNavigationScreenDetailsFooter
+					lastModifiedDateTime={ record?.modified }
+				/>
 			}
 		/>
 	) : null;

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -139,7 +139,10 @@ export default function PageDetails( { id } ) {
 		[ record?.parent ]
 	);
 	return (
-		<SidebarNavigationScreenDetailsPanel title={ __( 'Details' ) }>
+		<SidebarNavigationScreenDetailsPanel
+			spacing={ 5 }
+			title={ __( 'Details' ) }
+		>
 			{ getPageDetails( {
 				parentTitle,
 				templateTitle,

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js
@@ -19,10 +19,10 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import { useAddedBy } from '../list/added-by';
-
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import TemplatePartNavigationMenus from './template-part-navigation-menus';
 
-function useTemplateTitleAndDescription( postType, postId ) {
+function useTemplateDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
 		postId
@@ -78,7 +78,13 @@ function useTemplateTitleAndDescription( postType, postId ) {
 		</>
 	);
 
-	return { title, description };
+	const footer = !! record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter
+			lastModifiedDateTime={ record.modified }
+		/>
+	) : null;
+
+	return { title, description, footer };
 }
 
 export default function SidebarNavigationScreenTemplatePart() {
@@ -88,7 +94,7 @@ export default function SidebarNavigationScreenTemplatePart() {
 
 	const { record } = useEditedEntityRecord( postType, postId );
 
-	const { title, description } = useTemplateTitleAndDescription(
+	const { title, description, footer } = useTemplateDetails(
 		postType,
 		postId
 	);
@@ -118,6 +124,7 @@ export default function SidebarNavigationScreenTemplatePart() {
 			content={
 				<TemplatePartNavigationMenus menus={ navigationMenuIds } />
 			}
+			footer={ footer }
 		/>
 	);
 }

diff --git a/...ages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/...ages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
@@ -73,19 +73,15 @@ export default function HomeTemplateDetails() {
 		postsPerPage,
 		postsPageTitle,
 		postsPageId,
-		templateRecord,
+		currentTemplateParts,
 	} = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
 			const siteSettings = getEntityRecord( 'root', 'site' );
 			const { getSettings } = unlock( select( editSiteStore ) );
+			const _currentTemplateParts =
+				select( editSiteStore ).getCurrentTemplateTemplateParts();
 			const siteEditorSettings = getSettings();
-			const _templateRecord =
-				select( coreStore ).getEditedEntityRecord(
-					'postType',
-					postType,
-					postId
-				) || EMPTY_OBJECT;
 			const _postsPageRecord = siteSettings?.page_for_posts
 				? select( coreStore ).getEntityRecord(
 						'postType',
@@ -95,13 +91,13 @@ export default function HomeTemplateDetails() {
 				: EMPTY_OBJECT;
 
 			return {
-				templateRecord: _templateRecord,
 				allowCommentsOnNewPosts:
 					siteSettings?.default_comment_status === 'open',
 				postsPageTitle: _postsPageRecord?.title?.rendered,
 				postsPageId: _postsPageRecord?.id,
 				postsPerPage: siteSettings?.posts_per_page,
 				templatePartAreas: siteEditorSettings?.defaultTemplatePartAreas,
+				currentTemplateParts: _currentTemplateParts,
 			};
 		},
 		[ postType, postId ]
@@ -112,24 +108,31 @@ export default function HomeTemplateDetails() {
 	const [ postsCountValue, setPostsCountValue ] = useState( 1 );
 	const [ postsPageTitleValue, setPostsPageTitleValue ] = useState( '' );
 
+	/*
+	 * This hook serves to set the server-retrieved values,
+	 * postsPageTitle, allowCommentsOnNewPosts, postsPerPage,
+	 * to local state.
+	 */
 	useEffect( () => {
 		setCommentsOnNewPostsValue( allowCommentsOnNewPosts );
 		setPostsPageTitleValue( postsPageTitle );
 		setPostsCountValue( postsPerPage );
 	}, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] );
 
+	/*
+	 * Merge data in currentTemplateParts with templatePartAreas,
+	 * which contains the template icon and fallback labels
+	 */
 	const templateAreas = useMemo( () => {
-		return templateRecord?.blocks && templatePartAreas
-			? templateRecord.blocks
-					.filter( ( { name } ) => name === 'core/template-part' )
-					.map( ( { attributes } ) => ( {
-						...templatePartAreas?.find(
-							( { area } ) => area === attributes?.tagName
-						),
-						...attributes,
-					} ) )
+		return currentTemplateParts.length && templatePartAreas
+			? currentTemplateParts.map( ( { templatePart } ) => ( {
+					...templatePartAreas?.find(
+						( { area } ) => area === templatePart?.area
+					),
+					...templatePart,
+			  } ) )
 			: [];
-	}, [ templateRecord?.blocks, templatePartAreas ] );
+	}, [ currentTemplateParts, templatePartAreas ] );
 
 	const setAllowCommentsOnNewPosts = ( newValue ) => {
 		setCommentsOnNewPostsValue( newValue );
@@ -207,15 +210,19 @@ export default function HomeTemplateDetails() {
 				spacing={ 3 }
 			>
 				<ItemGroup>
-					{ templateAreas.map( ( { label, icon, theme, slug } ) => (
-						<SidebarNavigationScreenDetailsPanelRow key={ slug }>
-							<TemplateAreaButton
-								postId={ `${ theme }//${ slug }` }
-								title={ label || slug }
-								icon={ icon }
-							/>
-						</SidebarNavigationScreenDetailsPanelRow>
-					) ) }
+					{ templateAreas.map(
+						( { label, icon, theme, slug, title } ) => (
+							<SidebarNavigationScreenDetailsPanelRow
+								key={ slug }
+							>
+								<TemplateAreaButton
+									postId={ `${ theme }//${ slug }` }
+									title={ title?.rendered || label }
+									icon={ icon }
+								/>
+							</SidebarNavigationScreenDetailsPanelRow>
+						)
+					) }
 				</ItemGroup>
 			</SidebarNavigationScreenDetailsPanel>
 		</>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -43,19 +43,16 @@ function useTemplateDetails( postType, postId ) {
 		);
 	}
 
-	let content = null;
-	if ( record?.slug === 'home' || record?.slug === 'index' ) {
-		content = <HomeTemplateDetails />;
-	}
+	const content =
+		record?.slug === 'home' || record?.slug === 'index' ? (
+			<HomeTemplateDetails />
+		) : null;
 
-	let footer = null;
-	if ( !! record?.modified ) {
-		footer = (
-			<SidebarNavigationScreenDetailsFooter
-				lastModifiedDateTime={ record.modified }
-			/>
-		);
-	}
+	const footer = !! record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter
+			lastModifiedDateTime={ record.modified }
+		/>
+	) : null;
 
 	const description = (
 		<>