@wordpress/edit-site 5.24.1 → 5.25.0

package/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -2,15 +2,13 @@
  * WordPress dependencies
  */
 import { CheckboxControl, Flex } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { getFontFaceVariantName } from './utils';
 
 /**
  * Internal dependencies
  */
+import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
+import { kebabCase } from '../../../../../block-editor/src/utils/object';
 
 function CollectionFontVariant( {
 	face,
@@ -27,18 +25,26 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<label
+			className="font-library-modal__library-font-variant"
+			htmlFor={ checkboxId }
+		>
 			<Flex justify="space-between" align="center" gap="1rem">
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
+					id={ checkboxId }
+					label={ false }
 				/>
 			</Flex>
-		</div>
+		</label>
 	);
 }
 

package/src/components/global-styles/font-library-modal/context.js

@@ -229,7 +229,7 @@ function FontLibraryProvider( { children } ) {
 			// Uninstall the font (remove the font files from the server and the post from the database).
 			const response = await fetchUninstallFonts( [ font ] );
 			// Deactivate the font family (remove the font family from the global styles).
-			if ( ! response.errors ) {
+			if ( 0 === response.errors.length ) {
 				deactivateFontFamily( font );
 				// Save the global styles to the database.
 				await saveSpecifiedEntityEdits(

package/src/components/global-styles/font-library-modal/library-font-variant.js

@@ -3,16 +3,14 @@
  */
 import { useContext } from '@wordpress/element';
 import { CheckboxControl, Flex } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { getFontFaceVariantName } from './utils';
 
 /**
  * Internal dependencies
  */
+import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
+import { kebabCase } from '../../../../../block-editor/src/utils/object';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -36,18 +34,26 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<label
+			className="font-library-modal__library-font-variant"
+			htmlFor={ checkboxId }
+		>
 			<Flex justify="space-between" align="center" gap="1rem">
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 				<CheckboxControl
 					checked={ isIstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
+					id={ checkboxId }
+					label={ false }
 				/>
 			</Flex>
-		</div>
+		</label>
 	);
 }
 

package/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;
+}

package/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>
 			) }
 		</>
 	);

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -6,28 +6,69 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { getBlockTypes } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import getRevisionChanges from './get-revision-changes';
 
 const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
+const MAX_CHANGES = 7;
+
+function ChangesSummary( { revision, previousRevision, blockNames } ) {
+	const changes = getRevisionChanges(
+		revision,
+		previousRevision,
+		blockNames
+	);
+	const changesLength = changes.length;
+
+	if ( ! changesLength ) {
+		return null;
+	}
+
+	// Truncate to `n` results if necessary.
+	if ( changesLength > MAX_CHANGES ) {
+		const deleteCount = changesLength - MAX_CHANGES;
+		const andMoreText = sprintf(
+			// translators: %d: number of global styles changes that are not displayed in the UI.
+			_n( '…and %d more change.', '…and %d more changes.', deleteCount ),
+			deleteCount
+		);
+		changes.splice( MAX_CHANGES, deleteCount, andMoreText );
+	}
+
+	return (
+		<span
+			data-testid="global-styles-revision-changes"
+			className="edit-site-global-styles-screen-revisions__changes"
+		>
+			{ changes.join( ', ' ) }
+		</span>
+	);
+}
 
 /**
  * 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' );
@@ -35,21 +76,23 @@ function getRevisionLabel(
 
 	if ( 'unsaved' === id ) {
 		return sprintf(
-			/* translators: %s author display name */
+			/* translators: %s: author display name */
 			__( 'Unsaved changes by %s' ),
 			authorDisplayName
 		);
 	}
 
-	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)' ),
+				// translators: %1$s: author display name, %2$s: revision creation date.
+				__(
+					'Changes saved by %1$s on %2$s. This revision matches current editor styles.'
+				),
 				authorDisplayName,
 				formattedModifiedDate
 		  )
 		: sprintf(
-				/* translators: %1$s author display name, %2$s: revision creation date */
+				// translators: %1$s: author display name, %2$s: revision creation date.
 				__( 'Changes saved by %1$s on %2$s' ),
 				authorDisplayName,
 				formattedModifiedDate
@@ -67,7 +110,12 @@ function getRevisionLabel(
  * @param    {props}         Component          props.
  * @return {JSX.Element} The modal component.
  */
-function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
+function RevisionsButtons( {
+	userRevisions,
+	selectedRevisionId,
+	onChange,
+	canApplyRevision,
+} ) {
 	const { currentThemeName, currentUser } = useSelect( ( select ) => {
 		const { getCurrentTheme, getCurrentUser } = select( coreStore );
 		const currentTheme = getCurrentTheme();
@@ -77,8 +125,15 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 			currentUser: getCurrentUser(),
 		};
 	}, [] );
+	const blockNames = useMemo( () => {
+		const blockTypes = getBlockTypes();
+		return blockTypes.reduce( ( accumulator, { name, title } ) => {
+			accumulator[ name ] = title;
+			return accumulator;
+		}, {} );
+	}, [] );
 	const dateNowInMs = getDate().getTime();
-	const { date: dateFormat, datetimeAbbreviated } = getSettings().formats;
+	const { datetimeAbbreviated } = getSettings().formats;
 
 	return (
 		<ol
@@ -87,27 +142,29 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 			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;
 				const authorDisplayName = revisionAuthor?.name || __( 'User' );
 				const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];
+				const isFirstItem = index === 0;
 				const isSelected = selectedRevisionId
 					? selectedRevisionId === id
-					: index === 0;
+					: isFirstItem;
+				const areStylesEqual = ! canApplyRevision && isSelected;
 				const isReset = 'parent' === id;
 				const modifiedDate = getDate( modified );
 				const displayDate =
 					modified &&
 					dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS
-						? dateI18n( dateFormat, modifiedDate )
+						? dateI18n( datetimeAbbreviated, modifiedDate )
 						: humanTimeDiff( modified );
 				const revisionLabel = getRevisionLabel(
 					id,
-					isLatest,
 					authorDisplayName,
-					dateI18n( datetimeAbbreviated, modifiedDate )
+					dateI18n( datetimeAbbreviated, modifiedDate ),
+					areStylesEqual
 				);
 
 				return (
@@ -116,6 +173,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,
+								'is-active': areStylesEqual,
 								'is-reset': isReset,
 							}
 						) }
@@ -127,7 +185,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							onClick={ () => {
 								onChange( revision );
 							} }
-							label={ revisionLabel }
+							aria-label={ revisionLabel }
 						>
 							{ isReset ? (
 								<span className="edit-site-global-styles-screen-revisions__description">
@@ -150,6 +208,17 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 											{ displayDate }
 										</time>
 									) }
+									{ isSelected && (
+										<ChangesSummary
+											blockNames={ blockNames }
+											revision={ revision }
+											previousRevision={
+												index < userRevisions.length
+													? userRevisions[ index + 1 ]
+													: {}
+											}
+										/>
+									) }
 									<span className="edit-site-global-styles-screen-revisions__meta">
 										<img
 											alt={ authorDisplayName }

package/src/components/global-styles/screen-revisions/style.scss

@@ -66,7 +66,7 @@
 		width: 100%;
 		height: auto;
 		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-15 $grid-unit-30;
+		padding: $grid-unit-15 $grid-unit-15 $grid-unit-10 $grid-unit-30;
 		&:focus,
 		&:active {
 			outline: 0;
@@ -103,6 +103,7 @@
 	}
 }
 
+.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
 	color: $gray-600;
 	display: flex;
@@ -110,7 +111,6 @@
 	width: 100%;
 	align-items: center;
 	font-size: 12px;
-
 	img {
 		width: $grid-unit-20;
 		height: $grid-unit-20;
@@ -122,3 +122,11 @@
 .edit-site-global-styles-screen-revisions__loading {
 	margin: $grid-unit-30 auto !important;
 }
+
+.edit-site-global-styles-screen-revisions__changes {
+	margin-bottom: $grid-unit-05;
+	text-align: left;
+	color: $gray-900;
+	line-height: $default-line-height;
+}
+