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 {