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 {