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
index 0893006942572..9eff635bbc4a6 100644
--- 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 (
{ 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
index 8f602b1abb393..2a6af2e19229c 100644
--- 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
index 77b19a50c8af4..899911df3a13b 100644
--- 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 (
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
index 60c5ec30b1247..6608f37f1701b 100644
--- 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
index a27bb28adbb91..b6e60c62ecd7b 100644
--- 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 userGlobalStylesRevisions.openRevisions();
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 {