Revert button-in-item for another day

Reduce depth of changeset and remove unused translations Display aria-label on button instead of tooltip
WordPress · Nov 30, 2023 · 1cfebc7 · 1cfebc7
1 parent 978e386
commit 1cfebc7
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 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
@@ -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
@@ -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 && (
+							<SidebarFixedBottom>
+								<Button
+									variant="primary"
+									className="edit-site-global-styles-screen-revisions__button"
+									disabled={
+										! currentlySelectedRevisionId ||
+										currentlySelectedRevisionId ===
+											'unsaved'
+									}
+									onClick={ () => {
+										if ( hasUnsavedChanges ) {
+											setIsLoadingRevisionWithUnsavedChanges(
+												true
+											);
+										} else {
+											restoreRevision(
+												currentlySelectedRevision
+											);
+										}
+									} }
+								>
+									{ currentlySelectedRevisionId === 'parent'
+										? __( 'Reset to defaults' )
+										: __( 'Apply' ) }
+								</Button>
+							</SidebarFixedBottom>
+						) }
 					</div>
 					{ isLoadingRevisionWithUnsavedChanges && (
 						<ConfirmDialog

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
@@ -50,16 +50,16 @@ function ChangedSummary( { revision, previousRevision } ) {
  * Returns a button label for the revision.
  *
  * @param {string|number} id                    A revision object.
- * @param {boolean}       isLatest              Whether the revision is the most current.
  * @param {string}        authorDisplayName     Author name.
  * @param {string}        formattedModifiedDate Revision modified date formatted.
+ * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.
  * @return {string} Translated label.
  */
 function getRevisionLabel(
 	id,
-	isLatest,
 	authorDisplayName,
-	formattedModifiedDate
+	formattedModifiedDate,
+	areStylesEqual
 ) {
 	if ( 'parent' === id ) {
 		return __( 'Reset the styles to the theme defaults' );
@@ -73,10 +73,12 @@ function getRevisionLabel(
 		);
 	}
 
-	return isLatest
+	return areStylesEqual
 		? sprintf(
 				/* translators: %1$s author display name, %2$s: revision creation date */
-				__( 'Changes saved by %1$s on %2$s (current)' ),
+				__(
+					'Changes saved by %1$s on %2$s. This revision matches current editor styles.'
+				),
 				authorDisplayName,
 				formattedModifiedDate
 		  )
@@ -103,7 +105,6 @@ function RevisionsButtons( {
 	userRevisions,
 	selectedRevisionId,
 	onChange,
-	onSelect,
 	canApplyRevision,
 } ) {
 	const { currentThemeName, currentUser } = useSelect( ( select ) => {
@@ -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 ? (
 								<span className="edit-site-global-styles-screen-revisions__description">
@@ -200,34 +203,14 @@ function RevisionsButtons( {
 							) }
 						</Button>
 						{ isSelected && (
-							<>
-								<ChangedSummary
-									revision={ revision }
-									previousRevision={
-										index < userRevisions.length
-											? userRevisions[ index + 1 ]
-											: {}
-									}
-								/>
-								{ /* eslint-disable-next-line no-nested-ternary */ }
-								{ canApplyRevision ? (
-									<Button
-										variant="secondary"
-										className="edit-site-global-styles-screen-revision__button"
-										onClick={ onSelect }
-									>
-										{ isReset
-											? __( 'Reset to defaults' )
-											: __( 'Apply' ) }
-									</Button>
-								) : (
-									<span className="edit-site-global-styles-screen-revision__matches">
-										{ __(
-											'Revision matches current editor styles.'
-										) }
-									</span>
-								) }
-							</>
+							<ChangedSummary
+								revision={ revision }
+								previousRevision={
+									index < userRevisions.length
+										? userRevisions[ index + 1 ]
+										: {}
+								}
+							/>
 						) }
 					</li>
 				);

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
@@ -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 {