From bfbf12136fd4ac30380d0c39aafb04982fdacfe3 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 30 Oct 2024 15:50:53 +0100 Subject: [PATCH 1/6] Improve accessibility and consistency of the Revisions button. --- .../index.js | 34 +++++++++---------- .../style.scss | 4 --- .../style.scss | 3 +- .../sidebar-navigation-screen/style.scss | 7 +++- 4 files changed, 23 insertions(+), 25 deletions(-) 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..8ed6acdeefa8df 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 @@ -6,8 +6,8 @@ import { humanTimeDiff } from '@wordpress/date'; import { createInterpolateElement } from '@wordpress/element'; import { addQueryArgs } from '@wordpress/url'; import { - Icon, __experimentalItemGroup as ItemGroup, + __experimentalItem as Item, } from '@wordpress/components'; import { backup } from '@wordpress/icons'; @@ -17,7 +17,6 @@ import { backup } from '@wordpress/icons'; import { SidebarNavigationScreenDetailsPanelRow, SidebarNavigationScreenDetailsPanelLabel, - SidebarNavigationScreenDetailsPanelValue, } from '../sidebar-navigation-screen-details-panel'; import SidebarNavigationItem from '../sidebar-navigation-item'; @@ -56,33 +55,32 @@ export default function SidebarNavigationScreenDetailsFooter( { hrefProps.as = 'a'; } return ( - - - + + + - { __( 'Last modified' ) } - - { createInterpolateElement( sprintf( /* translators: %s: is the relative time when the post was last modified. */ - __( '' ), + __( 'Last modified: ' ), humanTimeDiff( record.modified ) ), { time: - + + + + { __( 'Revisions' ) } ); 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/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss index 2757ce5a620c58..78a57083e247a5 100644 --- 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 @@ -17,10 +17,9 @@ .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__label time, .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/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 1d57472f7e9f94..edd2d0fa162c05 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -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. From f1fb99e74558d05e4244b19b93d617a71bf7d3df Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 20 Nov 2024 14:56:10 +0100 Subject: [PATCH 2/6] Simplify revisions button and add count. --- .../index.js | 41 ++++--------------- .../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 | 25 ----------- .../index.js | 3 +- .../sidebar-navigation-screen/style.scss | 2 +- 8 files changed, 10 insertions(+), 160 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 8ed6acdeefa8df..243ca46f4ffec6 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,23 +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 { - __experimentalItemGroup as ItemGroup, - __experimentalItem as Item, -} from '@wordpress/components'; +import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; import { backup } from '@wordpress/icons'; /** * Internal dependencies */ -import { - SidebarNavigationScreenDetailsPanelRow, - SidebarNavigationScreenDetailsPanelLabel, -} from '../sidebar-navigation-screen-details-panel'; import SidebarNavigationItem from '../sidebar-navigation-item'; export default function SidebarNavigationScreenDetailsFooter( { @@ -59,28 +50,12 @@ export default function SidebarNavigationScreenDetailsFooter( { size="large" className="edit-site-sidebar-navigation-screen-details-footer" > - - - - { createInterpolateElement( - sprintf( - /* translators: %s: is the relative time when the post was last modified. */ - __( 'Last modified: ' ), - humanTimeDiff( record.modified ) - ), - { - time: - - - - { __( 'Revisions' ) } + + { 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-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 78a57083e247a5..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss +++ /dev/null @@ -1,25 +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; -} - -.edit-site-sidebar-navigation-details-screen-panel__label time, -.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..edb6adab20c1dc 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 > 0 && ! 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 edd2d0fa162c05..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; } From 760a2c83d01d0e767b0c9f9e7aecb6dc6a4677b0 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 20 Nov 2024 15:44:55 +0100 Subject: [PATCH 3/6] Remove no longer used stylesheet import. --- packages/edit-site/src/style.scss | 1 - 1 file changed, 1 deletion(-) 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"; From a387ea23545c7971a19037ee60925379c2241a8f Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 21 Nov 2024 10:10:36 +0100 Subject: [PATCH 4/6] Simplify revisions count retrieval by using useGlobalStylesRevisions. --- .../components/sidebar-navigation-screen-global-styles/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 edb6adab20c1dc..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 @@ -87,7 +87,7 @@ export default function SidebarNavigationScreenGlobalStyles() { // If there are no revisions, do not render a footer. const shouldShowGlobalStylesFooter = - revisionsCount > 0 && ! isLoadingRevisions; + !! revisionsCount && ! isLoadingRevisions; return ( <> From 661a263a3500f417b94a2ec1ad459a16415cc397 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 25 Nov 2024 10:54:19 +0100 Subject: [PATCH 5/6] Adjust after 67180. --- .../sidebar-navigation-screen-details-footer/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 243ca46f4ffec6..9b3be51e3508d0 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 @@ -4,6 +4,7 @@ import { _n, sprintf } from '@wordpress/i18n'; import { addQueryArgs } from '@wordpress/url'; import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; +import { addQueryArgs } from '@wordpress/url'; import { backup } from '@wordpress/icons'; /** @@ -50,7 +51,11 @@ export default function SidebarNavigationScreenDetailsFooter( { size="large" className="edit-site-sidebar-navigation-screen-details-footer" > - + { sprintf( /* translators: %d: Number of Styles revisions. */ _n( '%d Revision', '%d Revisions', revisionsCount ), From 318ea6fc60402ce22e2849b87135566a48c4ba63 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 25 Nov 2024 11:48:42 +0100 Subject: [PATCH 6/6] Remove duplicate import after rebase. --- .../components/sidebar-navigation-screen-details-footer/index.js | 1 - 1 file changed, 1 deletion(-) 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 9b3be51e3508d0..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 @@ -4,7 +4,6 @@ import { _n, sprintf } from '@wordpress/i18n'; import { addQueryArgs } from '@wordpress/url'; import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; -import { addQueryArgs } from '@wordpress/url'; import { backup } from '@wordpress/icons'; /**