Site editor sidebar: home template details

lib/compat/wordpress-6.3/class-gutenberg-rest-templates-controller-6-3.php

@@ -100,7 +100,7 @@ public function prepare_item_for_response( $item, $request ) { // phpcs:ignore V
 	/**
 	 * Adds revisions to links.
 	 *
-	 * @since 6.3.0
+	 * @since 6.2.0
 	 *
 	 * @param WP_Block_Template $template  Template instance.
 	 * @return array Links for the given post.

packages/core-data/src/entity-types/wp-template.ts

@@ -85,6 +85,10 @@ declare module './base-entity-records' {
 			 * Whether a template is a custom template.
 			 */
 			is_custom: Record< string, string >;
+			/**
+			 * The date the template was last modified, in the site's timezone.
+			 */
+			modified: ContextualField< string, 'view' | 'edit', C >;
 		}
 	}
 }

packages/edit-site/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Enhancements
+-   Site editor sidebar: add home template details and controls [#51223](https://github.com/WordPress/gutenberg/pull/51223).
+
 ## 5.12.0 (2023-06-07)
 
 ## 5.11.0 (2023-05-24)

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
+
+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>
+	);
+}

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

@@ -0,0 +1,5 @@
+.edit-site-sidebar-navigation-screen-details-footer {
+	padding-top: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+	padding-left: $grid-unit-20;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenDetailsPanelLabel from './sidebar-navigation-screen-details-panel-label';
+import SidebarNavigationScreenDetailsPanelRow from './sidebar-navigation-screen-details-panel-row';
+import SidebarNavigationScreenDetailsPanelValue from './sidebar-navigation-screen-details-panel-value';
+
+function SidebarNavigationScreenDetailsPanel( { title, children, spacing } ) {
+	return (
+		<VStack
+			className="edit-site-sidebar-navigation-details-screen-panel"
+			spacing={ spacing }
+		>
+			{ title && (
+				<Heading
+					className="edit-site-sidebar-navigation-details-screen-panel__heading"
+					level={ 3 }
+				>
+					{ title }
+				</Heading>
+			) }
+			{ children }
+		</VStack>
+	);
+}
+
+export {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+};

packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelLabel( {
+	children,
+} ) {
+	return (
+		<Text className="edit-site-sidebar-navigation-details-screen-panel__label">
+			{ children }
+		</Text>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelRow( {
+	label,
+	children,
+	className,
+} ) {
+	return (
+		<HStack
+			key={ label }
+			spacing={ 5 }
+			alignment="left"
+			className={ classnames(
+				'edit-site-sidebar-navigation-details-screen-panel__row',
+				className
+			) }
+		>
+			{ children }
+		</HStack>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+
+export default function SidebarNavigationScreenDetailsPanelValue( {
+	children,
+} ) {
+	return (
+		<Text className="edit-site-sidebar-navigation-details-screen-panel__value">
+			{ children }
+		</Text>
+	);
+}

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

@@ -0,0 +1,25 @@
+.edit-site-sidebar-navigation-details-screen-panel {
+	margin-bottom: $grid-unit-30;
+
+	&:last-of-type {
+		margin-bottom: 0;
+	}
+
+	.edit-site-sidebar-navigation-details-screen-panel__heading {
+		color: $gray-400;
+		text-transform: uppercase;
+		font-weight: 500;
+		font-size: 11px;
+		padding: 0;
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
+	color: $gray-600;
+	width: 100px;
+}
+
+.edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
+	color: $gray-200;
+}

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

@@ -1,21 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	__experimentalUseNavigator as useNavigator,
 	__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';
 import { pencil } from '@wordpress/icons';
-import { humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { escapeAttribute } from '@wordpress/escape-html';
 
@@ -26,9 +22,9 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
 import PageDetails from './page-details';
 import PageActions from '../page-actions';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
 export default function SidebarNavigationScreenPage() {
 	const navigator = useNavigator();
@@ -121,35 +117,14 @@ export default function SidebarNavigationScreenPage() {
 							{ stripHTML( record.excerpt.rendered ) }
 						</Truncate>
 					) }
-					<SidebarNavigationSubtitle>
-						{ __( 'Details' ) }
-					</SidebarNavigationSubtitle>
 					<PageDetails id={ postId } />
 				</>
 			}
 			footer={
 				!! record?.modified && (
-					<HStack
-						spacing={ 5 }
-						alignment="left"
-						className="edit-site-sidebar-navigation-screen-page__details edit-site-sidebar-navigation-screen-page__footer"
-					>
-						<Text className="edit-site-sidebar-navigation-screen-page__details-label">
-							{ __( 'Last modified' ) }
-						</Text>
-						<Text className="edit-site-sidebar-navigation-screen-page__details-value">
-							{ 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 } />,
-								}
-							) }
-						</Text>
-					</HStack>
+					<SidebarNavigationScreenDetailsFooter
+						lastModifiedDateTime={ record.modified }
+					/>
 				)
 			}
 		/>

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

@@ -2,12 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { count as wordCount } from '@wordpress/wordcount';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -19,6 +14,12 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import StatusLabel from './status-label';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
 
 // Taken from packages/editor/src/components/time-to-read/index.js.
 const AVERAGE_READING_RATE = 189;
@@ -138,26 +139,21 @@ export default function PageDetails( { id } ) {
 		[ record?.parent ]
 	);
 	return (
-		<VStack spacing={ 5 }>
+		<SidebarNavigationScreenDetailsPanel title={ __( 'Details' ) }>
 			{ getPageDetails( {
 				parentTitle,
 				templateTitle,
 				...record,
 			} ).map( ( { label, value } ) => (
-				<HStack
-					key={ label }
-					spacing={ 5 }
-					alignment="left"
-					className="edit-site-sidebar-navigation-screen-page__details"
-				>
-					<Text className="edit-site-sidebar-navigation-screen-page__details-label">
+				<SidebarNavigationScreenDetailsPanelRow key={ label }>
+					<SidebarNavigationScreenDetailsPanelLabel>
 						{ label }
-					</Text>
-					<Text className="edit-site-sidebar-navigation-screen-page__details-value">
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
 						{ value }
-					</Text>
-				</HStack>
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
 			) ) }
-		</VStack>
+		</SidebarNavigationScreenDetailsPanel>
 	);
 }

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

@@ -30,6 +30,7 @@
 
 .edit-site-sidebar-navigation-screen-page__excerpt {
 	font-size: $helptext-font-size;
+	margin-bottom: $grid-unit-30;
 }
 
 .edit-site-sidebar-navigation-screen-page__modified {
@@ -60,21 +61,3 @@
 		fill: $alert-green;
 	}
 }
-
-.edit-site-sidebar-navigation-screen-page__footer {
-	padding-top: $grid-unit-10;
-	padding-bottom: $grid-unit-10;
-	padding-left: $grid-unit-20;
-}
-
-.edit-site-sidebar-navigation-screen-page__details {
-	.edit-site-sidebar-navigation-screen-page__details-label {
-		color: $gray-600;
-		width: 100px;
-	}
-
-	.edit-site-sidebar-navigation-screen-page__details-value.edit-site-sidebar-navigation-screen-page__details-value {
-		color: $gray-200;
-	}
-}
-