Global style revisions: show change summary on selected item

packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js

@@ -0,0 +1,171 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+const globalStylesChangesCache = new Map();
+const EMPTY_ARRAY = [];
+
+const translationMap = {
+	caption: __( 'Caption' ),
+	link: __( 'Link' ),
+	button: __( 'Button' ),
+	heading: __( 'Heading' ),
+	'settings.color': __( 'Color settings' ),
+	'settings.typography': __( 'Typography settings' ),
+	'styles.color': __( 'Colors' ),
+	'styles.spacing': __( 'Spacing' ),
+	'styles.typography': __( 'Typography' ),
+};
+
+const isObject = ( obj ) => obj !== null && typeof obj === 'object';
+
+/**
+ * Get the translation for a given global styles key.
+ * @param {string}                key        A key representing a path to a global style property or setting.
+ * @param {Record<string,string>} blockNames A key/value pair object of block names and their rendered titles.
+ * @return {string|undefined}                A translated key or undefined if no translation exists.
+ */
+function getTranslation( key, blockNames ) {
+	if ( translationMap[ key ] ) {
+		return translationMap[ key ];
+	}
+
+	const keyArray = key.split( '.' );
+
+	if ( keyArray?.[ 0 ] === 'blocks' ) {
+		const blockName = blockNames[ keyArray[ 1 ] ];
+		return blockName
+			? sprintf(
+					// translators: %s: block name.
+					__( '%s block' ),
+					blockName
+			  )
+			: keyArray[ 1 ];
+	}
+
+	if ( keyArray?.[ 0 ] === 'elements' ) {
+		return sprintf(
+			// translators: %s: element name, e.g., heading button, link, caption.
+			__( '%s element' ),
+			translationMap[ keyArray[ 1 ] ]
+		);
+	}
+
+	return undefined;
+}
+
+/**
+ * A deep comparison of two objects, optimized for comparing global styles.
+ * @param {Object} changedObject  The changed object to compare.
+ * @param {Object} originalObject The original object to compare against.
+ * @param {string} parentPath     A key/value pair object of block names and their rendered titles.
+ * @return {string[]}             An array of paths whose values have changed.
+ */
+function deepCompare( changedObject, originalObject, parentPath = '' ) {
+	// We have two non-object values to compare.
+	if ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {
+		/*
+		 * Only return a path if the value has changed.
+		 * And then only the path name up to 2 levels deep.
+		 */
+		return changedObject !== originalObject
+			? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )
+			: undefined;
+	}
+
+	// Enable comparison when an object doesn't have a corresponding property to compare.
+	changedObject = isObject( changedObject ) ? changedObject : {};
+	originalObject = isObject( originalObject ) ? originalObject : {};
+
+	const allKeys = new Set( [
+		...Object.keys( changedObject ),
+		...Object.keys( originalObject ),
+	] );
+
+	let diffs = [];
+	for ( const key of allKeys ) {
+		const path = parentPath ? parentPath + '.' + key : key;
+		const changedPath = deepCompare(
+			changedObject[ key ],
+			originalObject[ key ],
+			path
+		);
+		if ( changedPath ) {
+			diffs = diffs.concat( changedPath );
+		}
+	}
+	return diffs;
+}
+
+/**
+ * Get an array of translated summarized global styles changes.
+ * Results are cached using a Map() key of `JSON.stringify( { revision, previousRevision } )`.
+ *
+ * @param {Object}                revision         The changed object to compare.
+ * @param {Object}                previousRevision The original object to compare against.
+ * @param {Record<string,string>} blockNames       A key/value pair object of block names and their rendered titles.
+ * @return {string[]}                              An array of translated changes.
+ */
+export default function getRevisionChanges(
+	revision,
+	previousRevision,
+	blockNames
+) {
+	const cacheKey = JSON.stringify( { revision, previousRevision } );
+
+	if ( globalStylesChangesCache.has( cacheKey ) ) {
+		return globalStylesChangesCache.get( cacheKey );
+	}
+
+	/*
+	 * Compare the two revisions with normalized keys.
+	 * The order of these keys determines the order in which
+	 * they'll appear in the results.
+	 */
+	const changedValueTree = deepCompare(
+		{
+			styles: {
+				color: revision?.styles?.color,
+				typography: revision?.styles?.typography,
+				spacing: revision?.styles?.spacing,
+			},
+			blocks: revision?.styles?.blocks,
+			elements: revision?.styles?.elements,
+			settings: revision?.settings,
+		},
+		{
+			styles: {
+				color: previousRevision?.styles?.color,
+				typography: previousRevision?.styles?.typography,
+				spacing: previousRevision?.styles?.spacing,
+			},
+			blocks: previousRevision?.styles?.blocks,
+			elements: previousRevision?.styles?.elements,
+			settings: previousRevision?.settings,
+		}
+	);
+
+	if ( ! changedValueTree.length ) {
+		globalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );
+		return EMPTY_ARRAY;
+	}
+
+	// Remove duplicate results.
+	const result = [ ...new Set( changedValueTree ) ]
+		/*
+		 * Translate the keys.
+		 * Remove duplicate or empty translations.
+		 */
+		.reduce( ( acc, curr ) => {
+			const translation = getTranslation( curr, blockNames );
+			if ( translation && ! acc.includes( translation ) ) {
+				acc.push( translation );
+			}
+			return acc;
+		}, [] );
+
+	globalStylesChangesCache.set( cacheKey, result );
+
+	return result;
+}

packages/edit-site/src/components/global-styles/screen-revisions/index.js

@@ -7,7 +7,6 @@ import {
 	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
-	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -135,7 +134,8 @@ function ScreenRevisions() {
 		}
 	}, [ shouldSelectFirstItem, firstRevision ] );
 
-	// Only display load button if there is a revision to load and it is different from the current editor styles.
+	// Only display load button if there is a revision to load,
+	// and it is different from the current editor styles.
 	const isLoadButtonEnabled =
 		!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;
 	const shouldShowRevisions = ! isLoading && revisions.length;
@@ -156,7 +156,7 @@ function ScreenRevisions() {
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
 			) }
-			{ shouldShowRevisions ? (
+			{ shouldShowRevisions && (
 				<>
 					<Revisions
 						blocks={ blocks }
@@ -168,6 +168,7 @@ function ScreenRevisions() {
 							onChange={ selectRevision }
 							selectedRevisionId={ currentlySelectedRevisionId }
 							userRevisions={ revisions }
+							canApplyRevision={ isLoadButtonEnabled }
 						/>
 						{ isLoadButtonEnabled && (
 							<SidebarFixedBottom>
@@ -215,14 +216,6 @@ function ScreenRevisions() {
 						</ConfirmDialog>
 					) }
 				</>
-			) : (
-				<Spacer marginX={ 4 } data-testid="global-styles-no-revisions">
-					{
-						// Adding an existing translation here in case these changes are shipped to WordPress 6.3.
-						// Later we could update to something better, e.g., "There are currently no style revisions.".
-						__( 'No results found.' )
-					}
-				</Spacer>
 			) }
 		</>
 	);