From 1cfebc710e49a8e15ade2118a1282f0366bd0f58 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 30 Nov 2023 14:06:13 +1100 Subject: [PATCH] Revert button-in-item for another day Reduce depth of changeset and remove unused translations Display aria-label on button instead of tooltip --- .../screen-revisions/get-revision-changes.js | 76 ++++++++----------- .../global-styles/screen-revisions/index.js | 41 +++++++--- .../screen-revisions/revisions-buttons.js | 59 +++++--------- .../global-styles/screen-revisions/style.scss | 14 +--- 4 files changed, 85 insertions(+), 105 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js index 5ca945f9450777..fc92368d08473d 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js @@ -4,37 +4,18 @@ import { __, sprintf } from '@wordpress/i18n'; const translationMap = { - elements: __( 'elements' ), - variations: __( 'variations' ), - css: __( 'CSS' ), - filter: __( 'filter' ), - border: __( 'border' ), - color: __( 'color' ), - spacing: __( 'spacing' ), - typography: __( 'typography' ), caption: __( 'caption' ), link: __( 'link' ), button: __( 'button' ), heading: __( 'heading' ), - ':hover': __( 'hover' ), - 'settings.color.palette': __( 'color palette' ), - 'settings.color.gradients': __( 'gradients' ), - 'settings.color.duotone': __( 'duotone colors' ), - 'settings.typography.fontFamilies': __( 'font family settings' ), - 'settings.typography.fontSizes': __( 'font size settings' ), - 'color.text': __( 'text color' ), - 'color.background': __( 'background color' ), - 'spacing.margin.top': __( 'margin top' ), - 'spacing.margin.bottom': __( 'margin bottom' ), - 'spacing.margin.left': __( 'margin left' ), - 'spacing.margin.right': __( 'margin right' ), - 'spacing.padding.top': __( 'padding top' ), - 'spacing.padding.bottom': __( 'padding bottom' ), - 'spacing.padding.left': __( 'padding left' ), - 'spacing.padding.right': __( 'padding right' ), + 'settings.color': __( 'color settings' ), + 'settings.typography': __( 'typography settings' ), + 'color.text': __( 'text colors' ), + 'color.background': __( 'background colors' ), + 'spacing.margin': __( 'margin styles' ), + 'spacing.padding': __( 'padding styles' ), 'spacing.blockGap': __( 'block gap' ), - 'settings.layout.contentSize': __( 'content size' ), - 'settings.layout.wideSize': __( 'wide size' ), + 'settings.layout': __( 'layout settings' ), 'typography.fontStyle': __( 'font style' ), 'typography.fontSize': __( 'font size' ), 'typography.lineHeight': __( 'line height' ), @@ -73,19 +54,17 @@ function getTranslation( key, blockNames ) { if ( keyArray?.[ 0 ] === 'blocks' ) { const blockName = blockNames[ keyArray[ 1 ] ]; return sprintf( - // translators: %1$s: block name, %2$s: changed property. - __( '%1$s block %2$s' ), - blockName, - translationMap[ keyArray[ 2 ] ] + // translators: %s: block name. + __( '%s block' ), + blockName ); } if ( keyArray?.[ 0 ] === 'elements' ) { return sprintf( - // translators: %1$s: block name, %2$s: changed property. - __( '%1$s element %2$s' ), - translationMap[ keyArray[ 1 ] ], - translationMap[ keyArray[ 2 ] ] + // translators: %s: element name, e.g., heading button, link, caption. + __( '%s element' ), + translationMap[ keyArray[ 1 ] ] ); } } @@ -105,7 +84,7 @@ export function getRevisionChanges( revision, previousRevision, blockNames, - maxResults = 4 + maxResults = 5 ) { if ( cache.has( revision.id ) ) { return cache.get( revision.id ); @@ -129,23 +108,28 @@ export function getRevisionChanges( settings: previousRevision?.settings, } ); - const hasMore = changedValueTree.length > maxResults; + // Remove dupes and shuffle results. - let result = shuffle( [ ...new Set( changedValueTree ) ] ) - // Limit to max results. - .slice( 0, maxResults ) + const result = shuffle( [ ...new Set( changedValueTree ) ] ) // Translate the keys. .map( ( key ) => getTranslation( key, blockNames ) ) - .filter( ( str ) => !! str ) - .join( ', ' ); + .reduce( ( acc, curr ) => { + if ( curr && ! acc.includes( curr ) ) { + acc.push( curr ); + } + return acc; + }, [] ); + + let joined = result.slice( 0, maxResults ).join( ', ' ); + const hasMore = result.length > maxResults; if ( hasMore ) { - result += '…'; + joined += '…'; } - cache.set( revision.id, result ); + cache.set( revision.id, joined ); - return result; + return joined; } function isObject( obj ) { @@ -160,9 +144,9 @@ function deepCompare( ) { if ( ! isObject( changedObject ) && ! isObject( originalObject ) ) { // Only return a path if the value has changed. - // And then only the path name up to 3 levels deep. + // And then only the path name up to 2 levels deep. return changedObject !== originalObject - ? parentPath.split( '.' ).slice( 0, 3 ).join( '.' ) + ? parentPath.split( '.' ).slice( 0, 2 ).join( '.' ) : undefined; } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js index a56a5ea28dee1f..c5e102caf68526 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js @@ -3,6 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { + Button, __experimentalUseNavigator as useNavigator, __experimentalConfirmDialog as ConfirmDialog, Spinner, @@ -22,6 +23,7 @@ import { import ScreenHeader from '../header'; import { unlock } from '../../../lock-unlock'; import Revisions from '../../revisions'; +import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom'; import { store as editSiteStore } from '../../../store'; import useGlobalStylesRevisions from './use-global-styles-revisions'; import RevisionsButtons from './revisions-buttons'; @@ -168,18 +170,35 @@ function ScreenRevisions() { selectedRevisionId={ currentlySelectedRevisionId } userRevisions={ revisions } canApplyRevision={ isLoadButtonEnabled } - onSelect={ () => { - if ( hasUnsavedChanges ) { - setIsLoadingRevisionWithUnsavedChanges( - true - ); - } else { - restoreRevision( - currentlySelectedRevision - ); - } - } } /> + { isLoadButtonEnabled && ( + + + + ) } { isLoadingRevisionWithUnsavedChanges && ( { @@ -125,7 +126,7 @@ function RevisionsButtons( { role="group" > { userRevisions.map( ( revision, index ) => { - const { id, isLatest, author, modified } = revision; + const { id, author, modified } = revision; const isUnsaved = 'unsaved' === id; // Unsaved changes are created by the current user. const revisionAuthor = isUnsaved ? currentUser : author; @@ -135,6 +136,7 @@ function RevisionsButtons( { const isSelected = selectedRevisionId ? selectedRevisionId === id : isFirstItem; + const areStylesEqual = ! canApplyRevision && isSelected; const isReset = 'parent' === id; const modifiedDate = getDate( modified ); const displayDate = @@ -144,9 +146,9 @@ function RevisionsButtons( { : humanTimeDiff( modified ); const revisionLabel = getRevisionLabel( id, - isLatest, authorDisplayName, - dateI18n( datetimeAbbreviated, modifiedDate ) + dateI18n( datetimeAbbreviated, modifiedDate ), + areStylesEqual ); return ( @@ -155,6 +157,7 @@ function RevisionsButtons( { 'edit-site-global-styles-screen-revisions__revision-item', { 'is-selected': isSelected, + 'is-active': areStylesEqual, 'is-reset': isReset, } ) } @@ -166,7 +169,7 @@ function RevisionsButtons( { onClick={ () => { onChange( revision ); } } - label={ revisionLabel } + aria-label={ revisionLabel } > { isReset ? ( @@ -200,34 +203,14 @@ function RevisionsButtons( { ) } { isSelected && ( - <> - - { /* eslint-disable-next-line no-nested-ternary */ } - { canApplyRevision ? ( - - ) : ( - - { __( - 'Revision matches current editor styles.' - ) } - - ) } - + ) } ); diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index def0293abcaaa7..780c27251ebbed 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -17,6 +17,10 @@ overflow: hidden; cursor: pointer; + &.is-active { + box-shadow: inset 5px 0 $black; + } + &:hover { background: rgba(var(--wp-admin-theme-color--rgb), 0.04); .edit-site-global-styles-screen-revisions__date { @@ -89,16 +93,6 @@ .edit-site-global-styles-screen-revisions__button { justify-content: center; width: 100%; - margin: 0 0 10px 10px; -} - -.edit-site-global-styles-screen-revision__button { - justify-content: center; - width: 90%; - margin: 0 0 $grid-unit-10 $grid-unit-20; - &:hover { - background: $white; - } } .edit-site-global-styles-screen-revisions__description {