Site editor sidebar: abstracting footer so it can be used across deta…

…ils screens (#54082)

* Initial commit: abstracting footer so it can be used across details pages including global styles.

* No longer need style for styles panel footer

* Ensuring the padding matches when there is no link around the last modified text row

* harmonizing button padding with no-padding padding 6px 12px

* Using SidebarNavigationItem and, indirectly, Item to render the footer item

* Only render the footer if the required information (record.modifed) date is present.

remove 'gutenberg' query value from revisions.php

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

@@ -4,6 +4,12 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+import {
+	Icon,
+	__experimentalItemGroup as ItemGroup,
+} from '@wordpress/components';
+import { backup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -13,14 +19,34 @@ import {
 	SidebarNavigationScreenDetailsPanelLabel,
 	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
+import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenDetailsFooter( {
-	lastModifiedDateTime,
+	record,
+	...otherProps
 } ) {
+	/*
+	 * There might be other items in the future,
+	 * but for now it's just modified date.
+	 * Later we might render a list of items and isolate
+	 * the following logic.
+	 */
+	const hrefProps = {};
+	if ( record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ) {
+		hrefProps.href = addQueryArgs( 'revision.php', {
+			revision: record?._links[ 'predecessor-version' ][ 0 ].id,
+		} );
+		hrefProps.as = 'a';
+	}
+
 	return (
-		<>
-			{ lastModifiedDateTime && (
-				<SidebarNavigationScreenDetailsPanelRow className="edit-site-sidebar-navigation-screen-details-footer">
+		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
+			<SidebarNavigationItem
+				label={ __( 'Revisions' ) }
+				{ ...hrefProps }
+				{ ...otherProps }
+			>
+				<SidebarNavigationScreenDetailsPanelRow justify="space-between">
 					<SidebarNavigationScreenDetailsPanelLabel>
 						{ __( 'Last modified' ) }
 					</SidebarNavigationScreenDetailsPanelLabel>
@@ -29,17 +55,19 @@ export default function SidebarNavigationScreenDetailsFooter( {
 							sprintf(
 								/* translators: %s: is the relative time when the post was last modified. */
 								__( '<time>%s</time>' ),
-								humanTimeDiff( lastModifiedDateTime )
+								humanTimeDiff( record.modified )
 							),
 							{
-								time: (
-									<time dateTime={ lastModifiedDateTime } />
-								),
+								time: <time dateTime={ record.modified } />,
 							}
 						) }
 					</SidebarNavigationScreenDetailsPanelValue>
+					<Icon
+						className="edit-site-sidebar-navigation-screen-details-footer__icon"
+						icon={ backup }
+					/>
 				</SidebarNavigationScreenDetailsPanelRow>
-			) }
-		</>
+			</SidebarNavigationItem>
+		</ItemGroup>
 	);
 }

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

@@ -1,5 +1,12 @@
 .edit-site-sidebar-navigation-screen-details-footer {
-	padding-top: $grid-unit-10;
-	padding-bottom: $grid-unit-10;
-	padding-left: $grid-unit-20;
+	// Default background color (no link or button).
+	div.edit-site-sidebar-navigation-item.components-item:focus,
+	div.edit-site-sidebar-navigation-item.components-item:hover,
+	div.edit-site-sidebar-navigation-item.components-item[aria-current] {
+		background: none;
+	}
+	.edit-site-sidebar-navigation-screen-details-footer__icon {
+		margin-left: auto;
+		fill: $gray-600;
+	}
 }

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

@@ -12,6 +12,7 @@ export default function SidebarNavigationScreenDetailsPanelRow( {
 	label,
 	children,
 	className,
+	...extraProps
 } ) {
 	return (
 		<HStack
@@ -22,6 +23,7 @@ export default function SidebarNavigationScreenDetailsPanelRow( {
 				'edit-site-sidebar-navigation-details-screen-panel__row',
 				className
 			) }
+			{ ...extraProps }
 		>
 			{ children }
 		</HStack>

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

@@ -2,18 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { backup, edit, seen } from '@wordpress/icons';
+import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	Icon,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalVStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
-import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
 
 /**
@@ -27,6 +21,7 @@ import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
 const noop = () => {};
 
@@ -88,39 +83,6 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesFooter( {
-	modifiedDateTime,
-	onClickRevisions,
-} ) {
-	return (
-		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
-			<SidebarNavigationItem
-				className="edit-site-sidebar-navigation-screen-global-styles__revisions"
-				label={ __( 'Revisions' ) }
-				onClick={ onClickRevisions }
-			>
-				<HStack
-					as="span"
-					alignment="center"
-					spacing={ 5 }
-					direction="row"
-					justify="space-between"
-				>
-					<span className="edit-site-sidebar-navigation-screen-global-styles__revisions__label">
-						{ __( 'Last modified' ) }
-					</span>
-					<span>
-						<time dateTime={ modifiedDateTime }>
-							{ humanTimeDiff( modifiedDateTime ) }
-						</time>
-					</span>
-					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
-				</HStack>
-			</SidebarNavigationItem>
-		</VStack>
-	);
-}
-
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
@@ -198,9 +160,9 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
 					shouldShowGlobalStylesFooter && (
-						<SidebarNavigationScreenGlobalStylesFooter
-							modifiedDateTime={ modifiedDateTime }
-							onClickRevisions={ openRevisions }
+						<SidebarNavigationScreenDetailsFooter
+							record={ revisions?.[ 0 ] }
+							onClick={ openRevisions }
 						/>
 					)
 				}

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

@@ -124,9 +124,9 @@ export default function SidebarNavigationScreenPage() {
 				</>
 			}
 			footer={
-				<SidebarNavigationScreenDetailsFooter
-					lastModifiedDateTime={ record?.modified }
-				/>
+				record?.modified ? (
+					<SidebarNavigationScreenDetailsFooter record={ record } />
+				) : null
 			}
 		/>
 	) : null;

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

@@ -61,10 +61,8 @@ export default function usePatternDetails( postType, postId ) {
 		);
 	}
 
-	const footer = !! record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter
-			lastModifiedDateTime={ record.modified }
-		/>
+	const footer = record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter record={ record } />
 	) : null;
 
 	const details = [];

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

@@ -48,10 +48,8 @@ function useTemplateDetails( postType, postId ) {
 			<HomeTemplateDetails />
 		) : null;
 
-	const footer = !! record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter
-			lastModifiedDateTime={ record.modified }
-		/>
+	const footer = record?.modified ? (
+		<SidebarNavigationScreenDetailsFooter record={ record } />
 	) : null;
 
 	const description = (

packages/edit-site/src/style.scss

@@ -31,7 +31,6 @@
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
-@import "./components/sidebar-navigation-screen-global-styles/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";