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 index b1a5cdb3ce93e..84c7dae8976b0 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js @@ -73,7 +73,11 @@ function ScreenRevisions() { const onCloseRevisions = () => { goTo( '/' ); // Return to global styles main panel. - setEditorCanvasContainerView( undefined ); + const canvasContainerView = + editorCanvasContainerView === 'global-styles-revisions:style-book' + ? 'style-book' + : undefined; + setEditorCanvasContainerView( canvasContainerView ); }; const restoreRevision = ( revision ) => { @@ -99,7 +103,6 @@ function ScreenRevisions() { ! editorCanvasContainerView.startsWith( 'global-styles-revisions' ) ) { goTo( '/' ); // Return to global styles main panel. - setEditorCanvasContainerView( editorCanvasContainerView ); } }, [ editorCanvasContainerView ] ); diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 3abd1c811f11e..cdaadb1d1acb3 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -230,12 +230,14 @@ function GlobalStylesBlockLink() { } function GlobalStylesEditorCanvasContainerLink() { - const { goTo } = useNavigator(); + const { goTo, location } = useNavigator(); const editorCanvasContainerView = useSelect( ( select ) => unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), [] ); + const path = location?.path; + const isRevisionsOpen = path === '/revisions'; // If the user switches the editor canvas container view, redirect // to the appropriate screen. This effectively allows deep linking to the @@ -249,11 +251,33 @@ function GlobalStylesEditorCanvasContainerLink() { case 'global-styles-css': goTo( '/css' ); break; + case 'style-book': + /* + * The stand-alone style book is open + * and the revisions panel is open, + * close the revisions panel. + * Otherwise keep the style book open while + * browsing global styles panel. + */ + if ( isRevisionsOpen ) { + goTo( '/' ); + } + break; default: + /* + * Example: the user has navigated to "Browse styles" or elsewhere + * and changes the editorCanvasContainerView, e.g., closes the style book. + * The panel should not be affected. + * Exclude revisions panel from this behavior, + * as it should close when the editorCanvasContainerView doesn't correspond. + */ + if ( path !== '/' && ! isRevisionsOpen ) { + return; + } goTo( '/' ); break; } - }, [ editorCanvasContainerView, goTo ] ); + }, [ editorCanvasContainerView, isRevisionsOpen, goTo ] ); } function GlobalStylesUI() { diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js index 08f5e6463ebc7..a832e06f6a639 100644 --- a/test/e2e/specs/site-editor/style-book.spec.js +++ b/test/e2e/specs/site-editor/style-book.spec.js @@ -155,6 +155,35 @@ test.describe( 'Style Book', () => { 'should close when Escape key is pressed' ).toBeHidden(); } ); + + test( 'should persist when navigating the global styles sidebar', async ( { + page, + } ) => { + await page + .getByRole( 'region', { name: 'Editor settings' } ) + .getByRole( 'button', { name: 'Browse styles' } ) + .click(); + + const styleBookRegion = page.getByRole( 'region', { + name: 'Style Book', + } ); + await expect( + styleBookRegion, + 'style book should be visible' + ).toBeVisible(); + + await page.click( 'role=button[name="Navigate to the previous view"]' ); + + await page + .getByRole( 'region', { name: 'Editor settings' } ) + .getByRole( 'button', { name: 'Typography' } ) + .click(); + + await expect( + styleBookRegion, + 'style book should be visible' + ).toBeVisible(); + } ); } ); class StyleBook { 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 9f5c9c8e36b22..b4848fe9401c4 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 @@ -192,6 +192,38 @@ test.describe( 'Style Revisions', () => { ).toBeHidden(); } ); + test( 'should close revisions panel and leave style book open if activated', async ( { + page, + editor, + userGlobalStylesRevisions, + } ) => { + await editor.canvas.locator( 'body' ).click(); + await userGlobalStylesRevisions.openStylesPanel(); + const revisionsButton = page.getByRole( 'button', { + name: 'Revisions', + } ); + const styleBookButton = page.getByRole( 'button', { + name: 'Style Book', + } ); + await revisionsButton.click(); + await styleBookButton.click(); + + await expect( + page.getByLabel( 'Global styles revisions list' ) + ).toBeVisible(); + + await page.click( 'role=button[name="Navigate to the previous view"]' ); + + await expect( + page.getByLabel( 'Global styles revisions list' ) + ).toBeHidden(); + + // The site editor canvas has been restored. + await expect( + page.locator( 'iframe[name="style-book-canvas"]' ) + ).toBeVisible(); + } ); + test( 'should paginate', async ( { page, editor,