Global styles revisions: integrate style book (#56800)

* first commit * Passing down an actions array to the editor site canvas - here we can add a style book toggle for revisions. * Add e2e test * If you open revisions then style book, the close button (in the canvas area) will exit style book, but the revisions panel remains open. If you open style book then open revisions, style book will remain toggled on. Render the style book window immediately to avoid a flash of the underlying editor * Updating e2e tests * remove alt color for style book * 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 · 588fc12 · 588fc12
1 parent 415ecc9
commit 588fc12
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 45 deletions.
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -34,6 +34,7 @@ function getEditorCanvasContainerTitle( view ) {
 		case 'style-book':
 			return __( 'Style Book' );
 		case 'global-styles-revisions':
+		case 'global-styles-revisions:style-book':
 			return __( 'Global styles revisions' );
 		default:
 			return '';
@@ -87,12 +88,12 @@ function EditorCanvasContainer( {
 	);
 
 	function onCloseContainer() {
-		if ( typeof onClose === 'function' ) {
-			onClose();
-		}
 		setIsListViewOpened( showListViewByDefault );
 		setEditorCanvasContainerView( undefined );
 		setIsClosed( true );
+		if ( typeof onClose === 'function' ) {
+			onClose();
+		}
 	}
 
 	function closeOnEscape( event ) {

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
@@ -26,6 +26,7 @@ import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
 import { store as editSiteStore } from '../../../store';
 import useGlobalStylesRevisions from './use-global-styles-revisions';
 import RevisionsButtons from './revisions-buttons';
+import StyleBook from '../../style-book';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
@@ -104,7 +105,10 @@ function ScreenRevisions() {
 	};
 
 	useEffect( () => {
-		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
+		if (
+			! editorCanvasContainerView ||
+			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
+		) {
 			goTo( '/' ); // Return to global styles main panel.
 			setEditorCanvasContainerView( editorCanvasContainerView );
 		}
@@ -156,13 +160,26 @@ function ScreenRevisions() {
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
 			) }
+			{ editorCanvasContainerView ===
+			'global-styles-revisions:style-book' ? (
+				<StyleBook
+					userConfig={ currentlySelectedRevision }
+					isSelected={ () => {} }
+					onClose={ () => {
+						setEditorCanvasContainerView(
+							'global-styles-revisions'
+						);
+					} }
+				/>
+			) : (
+				<Revisions
+					blocks={ blocks }
+					userConfig={ currentlySelectedRevision }
+					closeButtonLabel={ __( 'Close revisions' ) }
+				/>
+			) }
 			{ shouldShowRevisions && (
 				<>
-					<Revisions
-						blocks={ blocks }
-						userConfig={ currentlySelectedRevision }
-						onClose={ onCloseRevisions }
-					/>
 					<div className="edit-site-global-styles-screen-revisions">
 						<RevisionsButtons
 							onChange={ selectRevision }

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -243,6 +243,7 @@ function GlobalStylesEditorCanvasContainerLink() {
 	useEffect( () => {
 		switch ( editorCanvasContainerView ) {
 			case 'global-styles-revisions':
+			case 'global-styles-revisions:style-book':
 				goTo( '/revisions' );
 				break;
 			case 'global-styles-css':

diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
@@ -11,8 +11,7 @@ import {
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,23 +21,18 @@ import { unlock } from '../../lock-unlock';
 import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 import EditorCanvasContainer from '../editor-canvas-container';
 
-const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
-	unlock( blockEditorPrivateApis );
+const {
+	ExperimentalBlockEditorProvider,
+	GlobalStylesContext,
+	useGlobalStylesOutputWithConfig,
+} = unlock( blockEditorPrivateApis );
 
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-function Revisions( { onClose, userConfig, blocks } ) {
-	const { baseConfig } = useSelect(
-		( select ) => ( {
-			baseConfig:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeBaseGlobalStyles(),
-		} ),
-		[]
-	);
+function Revisions( { userConfig, blocks } ) {
+	const { base: baseConfig } = useContext( GlobalStylesContext );
 
 	const mergedConfig = useMemo( () => {
 		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
@@ -71,7 +65,6 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	return (
 		<EditorCanvasContainer
 			title={ __( 'Revisions' ) }
-			onClose={ onClose }
 			closeButtonLabel={ __( 'Close revisions' ) }
 			enableResizing={ true }
 		>

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
@@ -33,6 +33,7 @@ export default function GlobalStylesSidebar() {
 		showListViewByDefault,
 		hasRevisions,
 		isRevisionsOpened,
+		isRevisionsStyleBookOpened,
 	} = useSelect( ( select ) => {
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const { getEditorCanvasContainerView, getCanvasMode } = unlock(
@@ -64,6 +65,8 @@ export default function GlobalStylesSidebar() {
 			showListViewByDefault: _showListViewByDefault,
 			hasRevisions:
 				!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,
+			isRevisionsStyleBookOpened:
+				'global-styles-revisions:style-book' === canvasContainerView,
 			isRevisionsOpened:
 				'global-styles-revisions' === canvasContainerView,
 		};
@@ -80,16 +83,44 @@ export default function GlobalStylesSidebar() {
 
 	const { setIsListViewOpened } = useDispatch( editorStore );
 	const { goTo } = useNavigator();
-	const loadRevisions = () => {
-		setIsListViewOpened( false );
 
-		if ( ! isRevisionsOpened ) {
-			goTo( '/revisions' );
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		} else {
+	const toggleRevisions = () => {
+		setIsListViewOpened( false );
+		if ( isRevisionsStyleBookOpened ) {
+			goTo( '/' );
+			setEditorCanvasContainerView( 'style-book' );
+			return;
+		}
+		if ( isRevisionsOpened ) {
 			goTo( '/' );
 			setEditorCanvasContainerView( undefined );
+			return;
 		}
+		goTo( '/revisions' );
+
+		if ( isStyleBookOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+		} else {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		}
+	};
+	const toggleStyleBook = () => {
+		if ( isRevisionsOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+			return;
+		}
+		if ( isRevisionsStyleBookOpened ) {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+			return;
+		}
+		setIsListViewOpened( isStyleBookOpened && showListViewByDefault );
+		setEditorCanvasContainerView(
+			isStyleBookOpened ? undefined : 'style-book'
+		);
 	};
 
 	return (
@@ -113,25 +144,22 @@ export default function GlobalStylesSidebar() {
 						<Button
 							icon={ seen }
 							label={ __( 'Style Book' ) }
-							isPressed={ isStyleBookOpened }
+							isPressed={
+								isStyleBookOpened || isRevisionsStyleBookOpened
+							}
 							disabled={ shouldClearCanvasContainerView }
-							onClick={ () => {
-								setIsListViewOpened(
-									isStyleBookOpened && showListViewByDefault
-								);
-								setEditorCanvasContainerView(
-									isStyleBookOpened ? undefined : 'style-book'
-								);
-							} }
+							onClick={ toggleStyleBook }
 						/>
 					</FlexItem>
 					<FlexItem>
 						<Button
 							label={ __( 'Revisions' ) }
 							icon={ backup }
-							onClick={ loadRevisions }
+							onClick={ toggleRevisions }
 							disabled={ ! hasRevisions }
-							isPressed={ isRevisionsOpened }
+							isPressed={
+								isRevisionsOpened || isRevisionsStyleBookOpened
+							}
 						/>
 					</FlexItem>
 					<GlobalStylesMenuSlot />

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -27,18 +27,22 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, useState, memo } from '@wordpress/element';
+import { useMemo, useState, memo, useContext } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
+import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	ExperimentalBlockEditorProvider,
+	useGlobalStyle,
+	GlobalStylesContext,
+	useGlobalStylesOutputWithConfig,
+} = unlock( blockEditorPrivateApis );
 
 const {
 	CompositeV2: Composite,
@@ -118,6 +122,10 @@ const STYLE_BOOK_IFRAME_STYLES = `
 	}
 `;
 
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
 function getExamples() {
 	// Use our own example for the Heading block so that we can show multiple
 	// heading levels.
@@ -174,7 +182,9 @@ function StyleBook( {
 	onClick,
 	onSelect,
 	showCloseButton = true,
+	onClose,
 	showTabs = true,
+	userConfig = {},
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
@@ -195,18 +205,37 @@ function StyleBook( {
 				} ) ),
 		[ examples ]
 	);
+	const { base: baseConfig } = useContext( GlobalStylesContext );
 
+	const mergedConfig = useMemo( () => {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	// Copied from packages/edit-site/src/components/revisions/index.js
+	// could we create a shared hook?
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
+
 	const settings = useMemo(
 		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
 		[ originalSettings ]
 	);
 
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	settings.styles =
+		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+			? globalStyles
+			: settings.styles;
+
 	return (
 		<EditorCanvasContainer
+			onClose={ onClose }
 			enableResizing={ enableResizing }
 			closeButtonLabel={
 				showCloseButton ? __( 'Close Style Book' ) : null

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
@@ -145,6 +145,50 @@ test.describe( 'Global styles revisions', () => {
 			page.getByLabel( 'Global styles revisions list' )
 		).toBeVisible();
 	} );
+
+	test( 'should allow switching to style book view', 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();
+		// 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 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();
+	} );
 } );
 
 class UserGlobalStylesRevisions {