Test commit: listing changes, showing and n more

WordPress · Dec 7, 2023 · d5dd7e7 · d5dd7e7
1 parent f53ce53
commit d5dd7e7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 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,6 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 
 const globalStylesChangesCache = new Map();
+const EMPTY_ARRAY = [];
 
 const translationMap = {
 	caption: __( 'caption' ),
@@ -143,6 +144,11 @@ export default function getRevisionChanges(
 		}
 	);
 
+	if ( ! changedValueTree.length ) {
+		globalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );
+		return EMPTY_ARRAY;
+	}
+
 	// Remove duplicate results.
 	const result = [ ...new Set( changedValueTree ) ]
 		// Translate the keys.

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
@@ -23,7 +23,11 @@ const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
 const MAX_CHANGES = 7;
 
 function ChangedSummary( { revision, previousRevision, blockNames } ) {
-	let changes = getRevisionChanges( revision, previousRevision, blockNames );
+	const changes = getRevisionChanges(
+		revision,
+		previousRevision,
+		blockNames
+	);
 
 	const changesLength = changes.length;
 
@@ -33,14 +37,28 @@ function ChangedSummary( { revision, previousRevision, blockNames } ) {
 
 	// Truncate to `n` results.
 	if ( changesLength > MAX_CHANGES ) {
-		changes = changes.slice( 0, MAX_CHANGES ).join( ', ' ) + __( '…' );
-	} else {
-		changes = changes.join( ', ' );
+		const deleteCount = changesLength - MAX_CHANGES;
+		changes.splice(
+			MAX_CHANGES,
+			deleteCount,
+			sprintf(
+				/* translators: %d remaining changes that aren't displayed */
+				__( 'and %d more…' ),
+				deleteCount
+			)
+		);
 	}
 
 	return (
 		<span className="edit-site-global-styles-screen-revision__changes">
-			{ changes }
+			<div className="edit-site-global-styles-screen-revision__changes-title">
+				{ __( 'Changes:' ) }
+			</div>
+			<ul className="edit-site-global-styles-screen-revision__changes-list">
+				{ changes.map( ( change ) => (
+					<li key={ change }>{ change }</li>
+				) ) }
+			</ul>
 		</span>
 	);
 }

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
@@ -127,18 +127,28 @@
 	margin: $grid-unit-30 auto !important;
 }
 
-.edit-site-global-styles-screen-revision__matches,
 .edit-site-global-styles-screen-revision__changes {
-	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
+	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-30;
 	color: $gray-900;
 	display: block;
 	&::first-letter {
 		text-transform: uppercase;
 	}
 }
 
-.edit-site-global-styles-screen-revision__matches {
-	font-style: italic;
+.edit-site-global-styles-screen-revision__changes-title {
+	font-weight: 700;
+	display: inline-block;
+	margin-right: $grid-unit-05;
+	text-transform: uppercase;
 	font-size: 12px;
-	color: $gray-600;
+	color: $gray-800;
+	margin-bottom: $grid-unit-05;
+}
+
+.edit-site-global-styles-screen-revision__changes-list {
+	margin-left: $grid-unit-15;
+	font-size: 12px;
+	list-style: circle;
+	color: $gray-700;
 }