Style Book: should persist when browsing global styles panels (WordPr…

…ess#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 <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: annezazu <[email protected]>

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 ] );
 

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() {

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 {

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,