Try exposing Style Book in browse mode

WordPress · May 15, 2023 · 2e9a4f5 · 2e9a4f5
1 parent 8c08ae0
commit 2e9a4f5
Showing 1 changed file with 63 additions and 26 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -16,6 +16,7 @@ import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
+import StyleBook from '../style-book';
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -49,45 +50,81 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	);
 }
 
+function GlobalStylesStyleBook( { onSelect } ) {
+	return (
+		<StyleBook
+			isSelected={ () => false }
+			onSelect={ async ( blockName ) => {
+				await onSelect( blockName );
+			} }
+		/>
+	);
+}
+
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 
+	const { isStyleBookOpened } = useSelect( ( select ) => {
+		const { getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		return {
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+		};
+	}, [] );
+
 	const openGlobalStyles = async () =>
 		Promise.all( [
 			setCanvasMode( 'edit' ),
 			openGeneralSidebar( 'edit-site/global-styles' ),
 		] );
 
 	return (
-		<SidebarNavigationScreen
-			title={ __( 'Styles' ) }
-			description={ __(
-				'Choose a different style combination for the theme styles.'
+		<>
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				description={ __(
+					'Choose a different style combination for the theme styles.'
+				) }
+				content={ <StyleVariationsContainer /> }
+				actions={
+					<div>
+						<SidebarButton
+							icon={ seen }
+							label={ __( 'Style Book' ) }
+							onClick={ async () => {
+								if ( ! isStyleBookOpened ) {
+									setEditorCanvasContainerView(
+										'style-book'
+									);
+								} else {
+									setEditorCanvasContainerView( undefined );
+								}
+							} }
+							isPressed={ isStyleBookOpened }
+						/>
+						<SidebarButton
+							icon={ edit }
+							label={ __( 'Edit styles' ) }
+							onClick={ async () => await openGlobalStyles() }
+						/>
+					</div>
+				}
+			/>
+			{ isStyleBookOpened && (
+				<GlobalStylesStyleBook
+					onSelect={ async () => {
+						await openGlobalStyles();
+						// Open the Style Book once the canvas mode is set to edit,
+						// and the global styles sidebar is open. This ensures that
+						// the Style Book is not prematurely closed.
+						setEditorCanvasContainerView( 'style-book' );
+					} }
+				/>
 			) }
-			content={ <StyleVariationsContainer /> }
-			actions={
-				<div>
-					<SidebarButton
-						icon={ seen }
-						label={ __( 'Style Book' ) }
-						onClick={ async () => {
-							await openGlobalStyles();
-							// Open the Style Book once the canvas mode is set to edit,
-							// and the global styles sidebar is open. This ensures that
-							// the Style Book is not prematurely closed.
-							setEditorCanvasContainerView( 'style-book' );
-						} }
-					/>
-					<SidebarButton
-						icon={ edit }
-						label={ __( 'Edit styles' ) }
-						onClick={ async () => await openGlobalStyles() }
-					/>
-				</div>
-			}
-		/>
+		</>
 	);
 }