From 671fbf961a7a091a3163ecf25e1a045973f458d1 Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 23 Feb 2024 13:10:36 +1100 Subject: [PATCH] Style Book: should persist when browsing global styles panels (#59261) * Ensures that the style book remains open when browsing around the global styles panel. Adds exceptions for the revisions panel. If it's closed, the panel should close by returning to root. E2E tests as well :) * With the style book activated in global styles revisions, the style book should remain open when closing the revisions panel * We don't need to set the current path Co-authored-by: ramonjd Co-authored-by: andrewserong Co-authored-by: annezazu --- .../global-styles/screen-revisions/index.js | 7 ++-- .../src/components/global-styles/ui.js | 28 ++++++++++++++-- test/e2e/specs/site-editor/style-book.spec.js | 29 +++++++++++++++++ .../user-global-styles-revisions.spec.js | 32 +++++++++++++++++++ 4 files changed, 92 insertions(+), 4 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 index b1a5cdb3ce93ed..84c7dae8976b05 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 3abd1c811f11eb..cdaadb1d1acb37 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 08f5e6463ebc7f..a832e06f6a6391 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 9f5c9c8e36b221..b4848fe9401c4b 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,