- displaying template areas

- refactoring footer to show last modified in template and page details

packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss

@@ -12,7 +12,7 @@
 	}
 }
 
-.edit-site-sidebar-navigation-details-screen-panel__label {
+.edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
 	color: $gray-600;
 	width: 100px;
 }

packages/edit-site/src/components/sidebar-navigation-screen-page/index.js

@@ -13,8 +13,6 @@ import {
 	__experimentalVStack as VStack,
 	ExternalLink,
 	__experimentalTruncate as Truncate,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
 } from '@wordpress/components';
 import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -33,6 +31,11 @@ import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import PageDetails from './page-details';
 import PageActions from '../page-actions';
+import {
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
 
 export default function SidebarNavigationScreenPage() {
 	const navigator = useNavigator();
@@ -140,15 +143,11 @@ export default function SidebarNavigationScreenPage() {
 			}
 			footer={
 				!! record?.modified && (
-					<HStack
-						spacing={ 5 }
-						alignment="left"
-						className="edit-site-sidebar-navigation-screen-page__details"
-					>
-						<Text className="edit-site-sidebar-navigation-screen-page__details-label">
+					<SidebarNavigationScreenDetailsPanelRow>
+						<SidebarNavigationScreenDetailsPanelLabel>
 							{ __( 'Last modified' ) }
-						</Text>
-						<Text className="edit-site-sidebar-navigation-screen-page__details-value">
+						</SidebarNavigationScreenDetailsPanelLabel>
+						<SidebarNavigationScreenDetailsPanelValue>
 							{ createInterpolateElement(
 								sprintf(
 									/* translators: %s: is the relative time when the post was last modified. */
@@ -159,8 +158,8 @@ export default function SidebarNavigationScreenPage() {
 									time: <time dateTime={ record.modified } />,
 								}
 							) }
-						</Text>
-					</HStack>
+						</SidebarNavigationScreenDetailsPanelValue>
+					</SidebarNavigationScreenDetailsPanelRow>
 				)
 			}
 		/>

packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js

@@ -4,8 +4,15 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { CheckboxControl } from '@wordpress/components';
+import {
+	CheckboxControl,
+	__experimentalUseNavigator as useNavigator,
+	Button,
+	Icon,
+} from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { header, footer, layout, chevronRightSmall } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,27 +23,71 @@ import {
 	SidebarNavigationScreenDetailsPanelLabel,
 	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+function TemplateAreaButton( { icon, label } ) {
+	const icons = {
+		header,
+		footer,
+	};
+	return (
+		<Button
+			as="a"
+			className="edit-site-sidebar-navigation-screen-template__template-area-button"
+			icon={ icons[ icon ] ?? layout }
+		>
+			{ label }
+			<Icon icon={ chevronRightSmall } />
+		</Button>
+	);
+}
 
 export default function HomeTemplateDetails() {
-	const { commentOrder, isHomePageBlog, postsPerPage, siteTitle } = useSelect(
-		( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
-			const { getSettings } = select( blockEditorStore );
+	const navigator = useNavigator();
+	const {
+		params: { postType, postId },
+	} = navigator;
+	const { record } = useEditedEntityRecord( postType, postId );
+	const {
+		commentOrder,
+		templatePartAreas,
+		isHomePageBlog,
+		postsPerPage,
+		siteTitle,
+	} = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		const { getSettings } = select( blockEditorStore );
+		const blockEditorSettings = getSettings();
 
-			return {
-				isHomePageBlog:
-					siteSettings?.page_for_posts ===
-					siteSettings?.page_on_front,
-				siteTitle: siteSettings?.title,
-				postsPerPage: siteSettings?.posts_per_page,
-				commentOrder:
-					getSettings()?.__experimentalDiscussionSettings
-						?.commentOrder,
-			};
-		},
-		[]
-	);
+		return {
+			isHomePageBlog:
+				siteSettings?.page_for_posts === siteSettings?.page_on_front,
+			siteTitle: siteSettings?.title,
+			postsPerPage: +siteSettings?.posts_per_page,
+			commentOrder:
+				blockEditorSettings?.__experimentalDiscussionSettings
+					?.commentOrder,
+			templatePartAreas: blockEditorSettings?.defaultTemplatePartAreas,
+		};
+	}, [] );
+
+	const templateAreas = useMemo( () => {
+		return record?.blocks && templatePartAreas
+			? record.blocks
+					.filter(
+						( { name, attributes } ) =>
+							name === 'core/template-part' &&
+							( attributes?.slug === 'header' ||
+								attributes?.slug === 'footer' )
+					)
+					.map( ( { attributes } ) =>
+						templatePartAreas?.find(
+							( { area } ) => area === attributes?.slug
+						)
+					)
+			: [];
+	}, [ record?.blocks, templatePartAreas ] );
 
 	const noop = () => {};
 
@@ -90,7 +141,16 @@ export default function HomeTemplateDetails() {
 				</SidebarNavigationScreenDetailsPanelRow>
 			</SidebarNavigationScreenDetailsPanel>
 			<SidebarNavigationScreenDetailsPanel title={ __( 'Areas' ) }>
-				Test
+				{ templateAreas.map( ( { area, label, icon } ) => (
+					<SidebarNavigationScreenDetailsPanelRow key={ area }>
+						<SidebarNavigationScreenDetailsPanelLabel>
+							{ label }
+						</SidebarNavigationScreenDetailsPanelLabel>
+						<SidebarNavigationScreenDetailsPanelValue>
+							<TemplateAreaButton label={ label } icon={ icon } />
+						</SidebarNavigationScreenDetailsPanelValue>
+					</SidebarNavigationScreenDetailsPanelRow>
+				) ) }
 			</SidebarNavigationScreenDetailsPanel>
 		</>
 	);

packages/edit-site/src/components/sidebar-navigation-screen-template/index.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 import {
 	__experimentalUseNavigator as useNavigator,
 	Icon,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-
+import { createInterpolateElement } from '@wordpress/element';
+import { humanTimeDiff } from '@wordpress/date';
 /**
  * Internal dependencies
  */
@@ -21,13 +22,17 @@ import SidebarButton from '../sidebar-button';
 import { useAddedBy } from '../list/added-by';
 import TemplateActions from '../template-actions';
 import HomeTemplateDetails from './home-template-details';
+import {
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
 
 function useTemplateDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
 		postId
 	);
-
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme(),
 		[]
@@ -49,6 +54,29 @@ function useTemplateDetails( postType, postId ) {
 		content = <HomeTemplateDetails />;
 	}
 
+	let footer = null;
+	if ( !! record?.modified ) {
+		footer = (
+			<SidebarNavigationScreenDetailsPanelRow>
+				<SidebarNavigationScreenDetailsPanelLabel>
+					{ __( 'Last modified' ) }
+				</SidebarNavigationScreenDetailsPanelLabel>
+				<SidebarNavigationScreenDetailsPanelValue>
+					{ createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the relative time when the post was last modified. */
+							__( '<time>%s</time>' ),
+							humanTimeDiff( record.modified )
+						),
+						{
+							time: <time dateTime={ record.modified } />,
+						}
+					) }
+				</SidebarNavigationScreenDetailsPanelValue>
+			</SidebarNavigationScreenDetailsPanelRow>
+		);
+	}
+
 	const description = (
 		<>
 			{ descriptionText }
@@ -81,7 +109,7 @@ function useTemplateDetails( postType, postId ) {
 		</>
 	);
 
-	return { title, description, content };
+	return { title, description, content, footer };
 }
 
 export default function SidebarNavigationScreenTemplate() {
@@ -90,7 +118,7 @@ export default function SidebarNavigationScreenTemplate() {
 		params: { postType, postId },
 	} = navigator;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { title, content, description } = useTemplateDetails(
+	const { title, content, description, footer } = useTemplateDetails(
 		postType,
 		postId
 	);
@@ -117,6 +145,7 @@ export default function SidebarNavigationScreenTemplate() {
 			}
 			description={ description }
 			content={ content }
+			footer={ footer }
 		/>
 	);
 }

packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss

@@ -23,3 +23,7 @@
 		}
 	}
 }
+
+.edit-site-sidebar-navigation-screen-template__template-area-button {
+	color: $white;
+}