Tweaked the revisions buttons copy, shifting the date and meta around.

Updated tests
WordPress · May 8, 2023 · 0774936 · 0774936
1 parent d2f7264
commit 0774936
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
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
@@ -17,7 +17,7 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
  * @return {string} Translated label.
  */
 function getRevisionLabel( revision ) {
-	const authorDisplayName = revision?.author?.name;
+	const authorDisplayName = revision?.author?.name || __( 'User' );
 	const isUnsaved = 'unsaved' === revision?.id;
 
 	if ( isUnsaved ) {
@@ -37,15 +37,15 @@ function getRevisionLabel( revision ) {
 	return revision?.isLatest
 		? sprintf(
 				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Changes saved on %(date)s by %(name)s (current)' ),
+				__( 'Changes saved by %(name)s on %(date)s (current)' ),
 				{
 					name: authorDisplayName,
 					date: formattedDate,
 				}
 		  )
 		: sprintf(
 				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Changes saved on %(date)s by %(name)s ' ),
+				__( 'Changes saved by %(name)s on %(date)s' ),
 				{
 					name: authorDisplayName,
 					date: formattedDate,
@@ -73,6 +73,7 @@ function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
 		>
 			{ userRevisions.map( ( revision ) => {
 				const { id, author, isLatest, modified } = revision;
+				const authorDisplayName = author?.name || __( 'User' );
 				const authorAvatar = author?.avatar_urls?.[ '48' ];
 				/*
 				 * If the currentId hasn't been selected yet, the first revision is
@@ -101,15 +102,18 @@ function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
 							label={ getRevisionLabel( revision ) }
 						>
 							<span className="edit-site-global-styles-screen-revisions__description">
-								<span>
-									{ 'unsaved' === id
-										? __( 'Unsaved changes' )
-										: __( 'Changes saved' ) }
-								</span>
+								<time dateTime={ modified }>
+									{ humanTimeDiff( modified ) }
+								</time>
 								<span className="edit-site-global-styles-screen-revisions__meta">
-									<time dateTime={ modified }>
-										{ humanTimeDiff( modified ) }
-									</time>
+									{ sprintf(
+										/* translators: %(name)s author display name */
+										__( 'Changes saved by %(name)s' ),
+										{
+											name: authorDisplayName,
+										}
+									) }
+
 									<img
 										alt={ author?.name }
 										src={ authorAvatar }

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
@@ -63,7 +63,7 @@
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 
-	.edit-site-global-styles-screen-revisions__date {
+	.edit-site-global-styles-screen-revisions__meta {
 		color: var(--wp-admin-theme-color);
 	}
 }

diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -83,7 +83,7 @@ test.describe( 'Global styles revisions', () => {
 			await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
 
 			const revisionButtons = page.getByRole( 'button', {
-				name: /^Changes saved on /,
+				name: /^Changes saved by /,
 			} );
 
 			await expect( revisionButtons ).toHaveCount(
@@ -97,7 +97,7 @@ test.describe( 'Global styles revisions', () => {
 		await page.getByRole( 'button', { name: 'Styles actions' } ).click();
 		await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
 		const revisionButtons = page.getByRole( 'button', {
-			name: /^Changes saved on /,
+			name: /^Changes saved by /,
 		} );
 
 		await expect( revisionButtons ).toHaveCount(
@@ -129,7 +129,7 @@ test.describe( 'Global styles revisions', () => {
 
 		// await expect( image ).toHaveCSS( 'height', '3px' );
 		await page
-			.getByRole( 'button', { name: /^Changes saved on / } )
+			.getByRole( 'button', { name: /^Changes saved by / } )
 			.last()
 			.click();