From 3f6b883c04397264229588c7f4d8c040cbd5e8e5 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 26 Nov 2024 09:25:10 +0100 Subject: [PATCH] Improve accessibility and consistency of the 'Last modified' Revisions 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 Co-authored-by: ramonjd Co-authored-by: t-hamano Co-authored-by: up1512001 --- .../index.js | 47 +++++-------------- .../style.scss | 4 -- .../index.js | 40 ---------------- ...r-navigation-screen-details-panel-label.js | 14 ------ ...bar-navigation-screen-details-panel-row.js | 31 ------------ ...r-navigation-screen-details-panel-value.js | 14 ------ .../style.scss | 26 ---------- .../index.js | 3 +- .../sidebar-navigation-screen/style.scss | 9 +++- packages/edit-site/src/style.scss | 1 - 10 files changed, 20 insertions(+), 169 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss 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 index 51833443d8d85c..f7e5f8bbec34de 100644 --- 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 @@ -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 ( - + - - - { __( 'Last modified' ) } - - - { createInterpolateElement( - sprintf( - /* translators: %s: is the relative time when the post was last modified. */ - __( '' ), - humanTimeDiff( record.modified ) - ), - { - time: - - + { sprintf( + /* translators: %d: Number of Styles revisions. */ + _n( '%d Revision', '%d Revisions', revisionsCount ), + revisionsCount + ) } ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss index 866a36c02174d3..0b48d451129662 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss +++ b/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; - } } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js deleted file mode 100644 index 7d7a3932c99473..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * 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 ( - - { title && ( - - { title } - - ) } - { children } - - ); -} - -export { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, - SidebarNavigationScreenDetailsPanelLabel, - SidebarNavigationScreenDetailsPanelValue, -}; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js deleted file mode 100644 index 157eecd557519c..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalText as Text } from '@wordpress/components'; - -export default function SidebarNavigationScreenDetailsPanelLabel( { - children, -} ) { - return ( - - { children } - - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js deleted file mode 100644 index 1c7f9abafdf503..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - -/** - * WordPress dependencies - */ -import { __experimentalHStack as HStack } from '@wordpress/components'; - -export default function SidebarNavigationScreenDetailsPanelRow( { - label, - children, - className, - ...extraProps -} ) { - return ( - - { children } - - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js deleted file mode 100644 index 80e8ba8cf1d538..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalText as Text } from '@wordpress/components'; - -export default function SidebarNavigationScreenDetailsPanelValue( { - children, -} ) { - return ( - - { children } - - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss deleted file mode 100644 index 2757ce5a620c58..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss +++ /dev/null @@ -1,26 +0,0 @@ -.edit-site-sidebar-navigation-details-screen-panel { - margin: $grid-unit-30 0; - - &: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; - flex-shrink: 0; -} - -.edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value { - color: $gray-200; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 772b15aec2a294..72671714479ac0 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/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 ( <> diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 1d57472f7e9f94..959115e0fac8ca 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/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. diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 63ad8244a7c95e..dce945a48ee700 100644 --- a/packages/edit-site/src/style.scss +++ b/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";