Global styles: simplify the conditions in GlobalStylesEditorCanvasCon…

…tainerLink (#57144) * Simplifying the conditions in GlobalStylesEditorCanvasContainerLink * Updating e2e tests
WordPress · Dec 18, 2023 · e290be5 · e290be5 · github-actions · Dec 18, 2023
1 parent bf8614e
commit e290be5
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 22 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
@@ -138,7 +138,7 @@ function RevisionsButtons( {
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
-			aria-label={ __( 'Global styles revisions' ) }
+			aria-label={ __( 'Global styles revisions list' ) }
 			role="group"
 		>
 			{ userRevisions.map( ( revision, index ) => {

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -230,7 +230,7 @@ function GlobalStylesBlockLink() {
 }
 
 function GlobalStylesEditorCanvasContainerLink() {
-	const { goTo, location } = useNavigator();
+	const { goTo } = useNavigator();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
@@ -241,25 +241,17 @@ function GlobalStylesEditorCanvasContainerLink() {
 	// to the appropriate screen. This effectively allows deep linking to the
 	// desired screens from outside the global styles navigation provider.
 	useEffect( () => {
-		if ( editorCanvasContainerView === 'global-styles-revisions' ) {
-			// Switching to the revisions container view should
-			// redirect to the revisions screen.
-			goTo( '/revisions' );
-		} else if (
-			!! editorCanvasContainerView &&
-			location?.path === '/revisions'
-		) {
-			// Switching to any container other than revisions should
-			// redirect from the revisions screen to the root global styles screen.
-			goTo( '/' );
-		} else if ( editorCanvasContainerView === 'global-styles-css' ) {
-			goTo( '/css' );
+		switch ( editorCanvasContainerView ) {
+			case 'global-styles-revisions':
+				goTo( '/revisions' );
+				break;
+			case 'global-styles-css':
+				goTo( '/css' );
+				break;
+			default:
+				goTo( '/' );
+				break;
 		}
-
-		// location?.path is not a dependency because we don't want to track it.
-		// Doing so will cause an infinite loop. We could abstract logic to avoid
-		// having to disable the check later.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ editorCanvasContainerView, goTo ] );
 }
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
@@ -42,7 +42,7 @@ export default function SidebarNavigationScreenDetailsFooter( {
 	return (
 		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
 			<SidebarNavigationItem
-				label={ __( 'Revisions' ) }
+				aria-label={ __( 'Revisions' ) }
 				{ ...hrefProps }
 				{ ...otherProps }
 			>

diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
@@ -47,4 +47,19 @@ test.describe( 'Site editor command palette', () => {
 			'Index'
 		);
 	} );
+
+	test( 'Open the command palette and navigate to Customize CSS', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Open command palette' } )
+			.click();
+		await page.keyboard.type( 'Customize' );
+		await page.getByRole( 'option', { name: 'customize css' } ).click();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor settings' } )
+				.getByLabel( 'Additional CSS' )
+		).toBeVisible();
+	} );
 } );
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
@@ -119,7 +119,7 @@ test.describe( 'Global styles revisions', () => {
 		await userGlobalStylesRevisions.openStylesPanel();
 		await page.getByRole( 'button', { name: 'Revisions' } ).click();
 		const lastRevisionButton = page
-			.getByLabel( 'Global styles revisions' )
+			.getByLabel( 'Global styles revisions list' )
 			.getByRole( 'button' )
 			.last();
 		await expect( lastRevisionButton ).toContainText( 'Default styles' );
@@ -128,6 +128,23 @@ test.describe( 'Global styles revisions', () => {
 			page.getByRole( 'button', { name: 'Reset to defaults' } )
 		).toBeVisible();
 	} );
+
+	test( 'should access from the site editor sidebar', async ( { page } ) => {
+		const navigationContainer = page.getByRole( 'region', {
+			name: 'Navigation',
+		} );
+		await navigationContainer
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+
+		await navigationContainer
+			.getByRole( 'button', { name: 'Revisions' } )
+			.click();
+
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeVisible();
+	} );
 } );
 
 class UserGlobalStylesRevisions {