If you open both Style Book and Revisions, then close Revisions, the …

…Style Book remains open Added e2e tests to reflect this
WordPress · Dec 20, 2023 · 84f05b2 · 84f05b2
1 parent e24c6f4
commit 84f05b2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
@@ -86,12 +86,18 @@ export default function GlobalStylesSidebar() {
 
 	const toggleRevisions = () => {
 		setIsListViewOpened( false );
-		if ( isRevisionsStyleBookOpened || isRevisionsOpened ) {
+		if ( isRevisionsStyleBookOpened ) {
+			goTo( '/' );
+			setEditorCanvasContainerView( 'style-book' );
+			return;
+		}
+		if ( isRevisionsOpened ) {
 			goTo( '/' );
 			setEditorCanvasContainerView( undefined );
 			return;
 		}
 		goTo( '/revisions' );
+
 		if ( isStyleBookOpened ) {
 			setEditorCanvasContainerView(
 				'global-styles-revisions:style-book'

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
@@ -153,18 +153,41 @@ test.describe( 'Global styles revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
-		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		const revisionsButton = page.getByRole( 'button', {
+			name: 'Revisions',
+		} );
+		const styleBookButton = page.getByRole( 'button', {
+			name: 'Style Book',
+		} );
+		await revisionsButton.click();
+		// We can see the Revisions list.
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeVisible();
 		await expect(
 			page.locator( 'iframe[name="revisions"]' )
 		).toBeVisible();
 		await expect(
 			page.locator( 'iframe[name="style-book-canvas"]' )
 		).toBeHidden();
-		await page.getByRole( 'button', { name: 'Style Book' } ).click();
+		await styleBookButton.click();
 		await expect(
 			page.locator( 'iframe[name="style-book-canvas"]' )
 		).toBeVisible();
 		await expect( page.locator( 'iframe[name="revisions"]' ) ).toBeHidden();
+
+		// Deactivating revisions view while the style book is open should close revisions,
+		// but not the style book.
+		await revisionsButton.click();
+
+		// Style book is still visible but...
+		await expect(
+			page.locator( 'iframe[name="style-book-canvas"]' )
+		).toBeVisible();
+		// The Revisions list is hidden.
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeHidden();
 	} );
 } );