Reverting the reset theme default button and ensuring that revisions …

…panel only display when there are more than two revisions. Updated tests accordingly. bumping gravatar size to 48 Updating other E2E tests after having added aria labels to the color controls Update e2e button spec after changes to button labels
WordPress · May 8, 2023 · 2000f9f · 2000f9f
1 parent 6e040ca
commit 2000f9f
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 74 deletions.
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
@@ -135,9 +135,7 @@ function ScreenRevisions() {
 								}
 							} }
 						>
-							{ globalStylesRevision?.id === 'parent'
-								? __( 'Reset to defaults' )
-								: __( 'Load revision' ) }
+							{ __( 'Load revision' ) }
 						</Button>
 					</SidebarFixedBottom>
 				) }

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
@@ -19,11 +19,6 @@ import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
 function getRevisionLabel( revision ) {
 	const authorDisplayName = revision?.author?.name;
 	const isUnsaved = 'unsaved' === revision?.id;
-	const isReset = 'parent' === revision?.id;
-
-	if ( isReset ) {
-		return __( 'Theme default styles' );
-	}
 
 	if ( isUnsaved ) {
 		return sprintf(
@@ -44,39 +39,22 @@ function getRevisionLabel( revision ) {
 	return revision?.isLatest
 		? sprintf(
 				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Revision from %(date)s by %(name)s (current)' ),
+				__( 'Changes saved on %(date)s by %(name)s (current)' ),
 				{
 					name: authorDisplayName,
 					date: formattedDate,
 				}
 		  )
 		: sprintf(
 				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Revision from %(date)s by %(name)s ' ),
+				__( 'Changes saved on %(date)s by %(name)s ' ),
 				{
 					name: authorDisplayName,
 					date: formattedDate,
 				}
 		  );
 }
 
-/**
- * Returns a title for the revision.
- *
- * @param {number|string} revisionId The id of a revision.
- * @return {string} Translated title.
- */
-function getRevisionsTitle( revisionId ) {
-	const isUnsaved = 'unsaved' === revisionId;
-	const isReset = 'parent' === revisionId;
-
-	if ( isReset ) {
-		return __( 'Theme default styles' );
-	}
-
-	return isUnsaved ? __( 'Unsaved changes' ) : __( 'Changes saved' );
-}
-
 /**
  * Returns a rendered list of revisions buttons.
  *
@@ -97,7 +75,7 @@ function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
 		>
 			{ userRevisions.map( ( revision ) => {
 				const { id, author, isLatest, modified } = revision;
-				const authorAvatar = author?.avatar_urls?.[ '24' ];
+				const authorAvatar = author?.avatar_urls?.[ '48' ];
 				/*
 				 * If the currentId hasn't been selected yet, the first revision is
 				 * the current one so long as the API returns revisions in descending order.
@@ -125,22 +103,20 @@ function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
 							aria-label={ getRevisionLabel( revision ) }
 						>
 							<span className="edit-site-global-styles-screen-revisions__description">
-								<span>{ getRevisionsTitle( id ) }</span>
-								{ ( !! modified || !! authorAvatar ) && (
-									<span className="edit-site-global-styles-screen-revisions__meta">
-										{ !! modified && (
-											<time dateTime={ modified }>
-												{ humanTimeDiff( modified ) }
-											</time>
-										) }
-										{ !! authorAvatar && (
-											<img
-												alt={ author?.name }
-												src={ authorAvatar }
-											/>
-										) }
-									</span>
-								) }
+								<span>
+									{ 'unsaved' === id
+										? __( 'Unsaved changes' )
+										: __( 'Changes saved' ) }
+								</span>
+								<span className="edit-site-global-styles-screen-revisions__meta">
+									<time dateTime={ modified }>
+										{ humanTimeDiff( modified ) }
+									</time>
+									<img
+										alt={ author?.name }
+										src={ authorAvatar }
+									/>
+								</span>
 							</span>
 						</Button>
 					</li>

diff --git a/...ite/src/components/global-styles/screen-revisions/test/use-get-global-styles-revisions.js b/...ite/src/components/global-styles/screen-revisions/test/use-get-global-styles-revisions.js
@@ -75,11 +75,6 @@ describe( 'useGetGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
-			{
-				id: 'parent',
-				settings: {},
-				styles: {},
-			},
 		] );
 	} );
 
@@ -115,11 +110,6 @@ describe( 'useGetGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
-			{
-				id: 'parent',
-				settings: {},
-				styles: {},
-			},
 		] );
 	} );
 

diff --git a/...dit-site/src/components/global-styles/screen-revisions/use-get-global-styles-revisions.js b/...dit-site/src/components/global-styles/screen-revisions/use-get-global-styles-revisions.js
@@ -82,12 +82,6 @@ export default function useGetGlobalStylesRevisions() {
 			};
 		} );
 
-		_modifiedRevisions.push( {
-			id: 'parent',
-			styles: {},
-			settings: {},
-		} );
-
 		if ( isDirty && ! isEmpty( userConfig ) && !! currentUser ) {
 			const unsavedRevision = {
 				id: 'unsaved',

diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -182,11 +182,11 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Text styles"i]'
 		);
 		await page.click( 'role=button[name="Color: Cyan bluish gray"i]' );
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=button[name="Color: Vivid red"i]' );
 
@@ -211,13 +211,13 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Text styles"i]'
 		);
 		await page.click( 'role=button[name="Custom color picker."i]' );
 		await page.fill( 'role=textbox[name="Hex color"i]', 'ff0000' );
 
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=button[name="Custom color picker."i]' );
 		await page.fill( 'role=textbox[name="Hex color"i]', '00ff00' );
@@ -246,7 +246,7 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=tab[name="Gradient"i]' );
 		await page.click( 'role=button[name="Gradient: Purple to yellow"i]' );
@@ -275,7 +275,7 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=tab[name="Gradient"i]' );
 		await page.click(

diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -81,7 +81,9 @@ test.describe( 'Push to Global Styles button', () => {
 		).toBeDisabled();
 
 		// Navigate again to Styles -> Blocks -> Heading -> Typography
-		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Styles', exact: true } )
+			.click();
 		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
 		await page
 			.getByRole( 'button', { name: 'Heading block styles' } )

diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -86,13 +86,13 @@ test.describe( 'Global styles variations', () => {
 
 		await expect(
 			page.locator(
-				'role=button[name="Background"i] >> .component-color-indicator'
+				'role=button[name="Color Background styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(202, 105, 211\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Text"i] >> .component-color-indicator'
+				'role=button[name="Color Text styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(74, 7, 74\)/ );
 
@@ -127,13 +127,13 @@ test.describe( 'Global styles variations', () => {
 
 		await expect(
 			page.locator(
-				'role=button[name="Background"i] >> .component-color-indicator'
+				'role=button[name="Color Background styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(255, 239, 11\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Text"i] >> .component-color-indicator'
+				'role=button[name="Color Text styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(25, 25, 17\)/ );
 

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
@@ -84,7 +84,7 @@ test.describe( 'Global styles revisions', () => {
 
 			const revisionButtons = page
 				.getByRole( 'group', { name: 'Global styles revisions' } )
-				.getByRole( 'button', { name: /^Revision from / } );
+				.getByRole( 'button', { name: /^Changes saved on / } );
 
 			await expect( revisionButtons ).toHaveCount(
 				currentRevisions.length + 2
@@ -98,7 +98,7 @@ test.describe( 'Global styles revisions', () => {
 		await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
 		const revisionButtons = page
 			.getByRole( 'group', { name: 'Global styles revisions' } )
-			.getByRole( 'button', { name: /^Revision from / } );
+			.getByRole( 'button', { name: /^Changes saved on / } );
 
 		await expect( revisionButtons ).toHaveCount(
 			updatedCurrentRevisions.length
@@ -130,7 +130,8 @@ test.describe( 'Global styles revisions', () => {
 		// await expect( image ).toHaveCSS( 'height', '3px' );
 		await page
 			.getByRole( 'group', { name: 'Global styles revisions' } )
-			.getByRole( 'button', { name: 'Theme default styles' } )
+			.getByRole( 'button', { name: /^Changes saved on / } )
+			.last()
 			.click();
 
 		await page.getByRole( 'button', { name: 'Load revision' } ).click();