Improve accessibility and consistency of the 'Last modified' Revision…

…s button. (#66606)

* Improve accessibility and consistency of the Revisions button.

* Simplify revisions button and add count.

* Remove no longer used stylesheet import.

* Simplify revisions count retrieval by using useGlobalStylesRevisions.

* Adjust after 67180.

* Remove duplicate import after rebase.

Co-authored-by: afercia <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: up1512001 <[email protected]>

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

@@ -1,24 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import {
-	Icon,
-	__experimentalItemGroup as ItemGroup,
-} from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { backup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import {
-	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
-} from '../sidebar-navigation-screen-details-panel';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenDetailsFooter( {
@@ -56,33 +46,20 @@ export default function SidebarNavigationScreenDetailsFooter( {
 		hrefProps.as = 'a';
 	}
 	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
+		<ItemGroup
+			size="large"
+			className="edit-site-sidebar-navigation-screen-details-footer"
+		>
 			<SidebarNavigationItem
-				aria-label={ __( 'Revisions' ) }
+				icon={ backup }
 				{ ...hrefProps }
 				{ ...otherProps }
 			>
-				<SidebarNavigationScreenDetailsPanelRow justify="space-between">
-					<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>
-					<Icon
-						className="edit-site-sidebar-navigation-screen-details-footer__icon"
-						icon={ backup }
-					/>
-				</SidebarNavigationScreenDetailsPanelRow>
+				{ sprintf(
+					/* translators: %d: Number of Styles revisions. */
+					_n( '%d Revision', '%d Revisions', revisionsCount ),
+					revisionsCount
+				) }
 			</SidebarNavigationItem>
 		</ItemGroup>
 	);

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

@@ -5,8 +5,4 @@
 	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-global-styles/index.js

@@ -86,9 +86,8 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
 	// If there are no revisions, do not render a footer.
-	const modifiedDateTime = revisions?.[ 0 ]?.modified;
 	const shouldShowGlobalStylesFooter =
-		revisionsCount > 0 && ! isLoadingRevisions && modifiedDateTime;
+		!! revisionsCount && ! isLoadingRevisions;
 
 	return (
 		<>

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

@@ -18,7 +18,7 @@
 .edit-site-sidebar-navigation-screen__content {
 	padding: 0 $grid-unit-20;
 
-	.components-item-group {
+	.edit-site-sidebar-navigation-screen-details-footer {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
 	}
@@ -127,9 +127,14 @@
 	bottom: 0;
 	background-color: $gray-900;
 	gap: 0;
-	padding: $grid-unit-20 0;
+	padding: $grid-unit-10 $grid-unit-20;
 	margin: $grid-unit-20 0 0;
 	border-top: 1px solid $gray-800;
+
+	.components-item-group {
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
+	}
 }
 
 /* In general style overrides are discouraged.

packages/edit-site/src/style.scss

@@ -20,7 +20,6 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
-@import "components/sidebar-navigation-screen-details-panel/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
 @import "./components/sidebar-dataviews/style.scss";
 @import "./components/site-hub/style.scss";