From ca4b740085e574ea4cd842917eb317b0df09d725 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 11 Dec 2024 16:43:20 +1100
Subject: [PATCH 1/5] Give style book its own route so it can be linked to
 directly.

---
 .../sidebar-global-styles-wrapper/index.js    | 23 ++++++++---
 .../components/site-editor-routes/index.js    |  2 +
 .../site-editor-routes/styles-stylebook.js    | 40 +++++++++++++++++++
 3 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 packages/edit-site/src/components/site-editor-routes/styles-stylebook.js

diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index 030512a38fab3a..10491ab9454445 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -15,15 +15,18 @@ import { seen } from '@wordpress/icons';
 import GlobalStylesUI from '../global-styles/ui';
 import Page from '../page';
 import { unlock } from '../../lock-unlock';
-import StyleBook from '../style-book';
-import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+// import StyleBook from '../style-book';
+// import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
 	setIsStyleBookOpened,
+	path,
 } ) => {
+	const stylebookPath = 'styles-stylebook';
+	const history = useHistory();
 	return (
 		<Button
 			isPressed={ isStyleBookOpened }
@@ -31,6 +34,11 @@ const GlobalStylesPageActions = ( {
 			label={ __( 'Style Book' ) }
 			onClick={ () => {
 				setIsStyleBookOpened( ! isStyleBookOpened );
+				const updatedPath = ! isStyleBookOpened
+					? path.replace( 'styles', stylebookPath )
+					: path.replace( stylebookPath, 'styles' );
+				// Navigate to the updated path.
+				history.navigate( updatedPath );
 			} }
 			size="compact"
 		/>
@@ -39,9 +47,11 @@ const GlobalStylesPageActions = ( {
 
 export default function GlobalStylesUIWrapper() {
 	const { path, query } = useLocation();
+
 	const history = useHistory();
-	const { canvas = 'view' } = query;
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
+	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
+		path.includes( 'styles-stylebook' )
+	);
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ section, onChangeSection ] = useMemo( () => {
 		return [
@@ -64,6 +74,7 @@ export default function GlobalStylesUIWrapper() {
 						<GlobalStylesPageActions
 							isStyleBookOpened={ isStyleBookOpened }
 							setIsStyleBookOpened={ setIsStyleBookOpened }
+							path={ path }
 						/>
 					) : null
 				}
@@ -75,7 +86,7 @@ export default function GlobalStylesUIWrapper() {
 					onPathChange={ onChangeSection }
 				/>
 			</Page>
-			{ canvas === 'view' && isStyleBookOpened && (
+			{ /* { canvas === 'view' && isStyleBookOpened && (
 				<StyleBook
 					enableResizing={ false }
 					showCloseButton={ false }
@@ -113,7 +124,7 @@ export default function GlobalStylesUIWrapper() {
 						);
 					} }
 				/>
-			) }
+			) } */ }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/site-editor-routes/index.js b/packages/edit-site/src/components/site-editor-routes/index.js
index 232cb640cff264..56b03e1df7c5b0 100644
--- a/packages/edit-site/src/components/site-editor-routes/index.js
+++ b/packages/edit-site/src/components/site-editor-routes/index.js
@@ -21,6 +21,7 @@ import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
 import { stylebookRoute } from './stylebook';
+import { stylesStylebookRoute } from './styles-stylebook';
 
 const routes = [
 	pageItemRoute,
@@ -35,6 +36,7 @@ const routes = [
 	stylesRoute,
 	homeRoute,
 	stylebookRoute,
+	stylesStylebookRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {
diff --git a/packages/edit-site/src/components/site-editor-routes/styles-stylebook.js b/packages/edit-site/src/components/site-editor-routes/styles-stylebook.js
new file mode 100644
index 00000000000000..ea951a1df32ccc
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/styles-stylebook.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { unlock } from '../../lock-unlock';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+import { StyleBookPreview } from '../style-book';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileGlobalStylesUI() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <GlobalStylesUIWrapper />;
+}
+
+export const stylesStylebookRoute = {
+	name: 'styles-stylebook',
+	path: '/styles-stylebook',
+	areas: {
+		content: <GlobalStylesUIWrapper />,
+		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
+		preview: <StyleBookPreview />,
+		mobile: <MobileGlobalStylesUI />,
+	},
+	widths: {
+		content: 380,
+	},
+};

From fc32d39e2178dfced019d3c78fef8abb08150ebb Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 12 Dec 2024 13:56:21 +1100
Subject: [PATCH 2/5] Fix paths to and from global styles.

---
 .../sidebar-global-styles-wrapper/index.js    | 65 +++++--------------
 .../site-editor-routes/stylebook.js           |  4 +-
 .../src/components/style-book/index.js        | 57 ++++++++++++----
 3 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index 10491ab9454445..bc11bf02743777 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -15,8 +15,6 @@ import { seen } from '@wordpress/icons';
 import GlobalStylesUI from '../global-styles/ui';
 import Page from '../page';
 import { unlock } from '../../lock-unlock';
-// import StyleBook from '../style-book';
-// import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -45,15 +43,15 @@ const GlobalStylesPageActions = ( {
 	);
 };
 
-export default function GlobalStylesUIWrapper() {
+/**
+ * Hook to deal with navigation and location state.
+ *
+ * @return {Array}  The current section and a function to update it.
+ */
+export const useSection = () => {
 	const { path, query } = useLocation();
-
 	const history = useHistory();
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
-		path.includes( 'styles-stylebook' )
-	);
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ section, onChangeSection ] = useMemo( () => {
+	return useMemo( () => {
 		return [
 			query.section ?? '/',
 			( updatedSection ) => {
@@ -65,6 +63,16 @@ export default function GlobalStylesUIWrapper() {
 			},
 		];
 	}, [ path, query.section, history ] );
+};
+
+export default function GlobalStylesUIWrapper() {
+	const { path } = useLocation();
+
+	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
+		path.includes( 'styles-stylebook' )
+	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ section, onChangeSection ] = useSection();
 
 	return (
 		<>
@@ -86,45 +94,6 @@ export default function GlobalStylesUIWrapper() {
 					onPathChange={ onChangeSection }
 				/>
 			</Page>
-			{ /* { canvas === 'view' && isStyleBookOpened && (
-				<StyleBook
-					enableResizing={ false }
-					showCloseButton={ false }
-					showTabs={ false }
-					isSelected={ ( blockName ) =>
-						// Match '/blocks/core%2Fbutton' and
-						// '/blocks/core%2Fbutton/typography', but not
-						// '/blocks/core%2Fbuttons'.
-						section ===
-							`/blocks/${ encodeURIComponent( blockName ) }` ||
-						section.startsWith(
-							`/blocks/${ encodeURIComponent( blockName ) }/`
-						)
-					}
-					path={ section }
-					onSelect={ ( blockName ) => {
-						if (
-							STYLE_BOOK_COLOR_GROUPS.find(
-								( group ) => group.slug === blockName
-							)
-						) {
-							// Go to color palettes Global Styles.
-							onChangeSection( '/colors/palette' );
-							return;
-						}
-						if ( blockName === 'typography' ) {
-							// Go to typography Global Styles.
-							onChangeSection( '/typography' );
-							return;
-						}
-
-						// Now go to the selected block.
-						onChangeSection(
-							`/blocks/${ encodeURIComponent( blockName ) }`
-						);
-					} }
-				/>
-			) } */ }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/site-editor-routes/stylebook.js b/packages/edit-site/src/components/site-editor-routes/stylebook.js
index a30c4a7c04945e..cb1e414098ab3f 100644
--- a/packages/edit-site/src/components/site-editor-routes/stylebook.js
+++ b/packages/edit-site/src/components/site-editor-routes/stylebook.js
@@ -22,7 +22,7 @@ export const stylebookRoute = {
 				) }
 			/>
 		),
-		preview: <StyleBookPreview />,
-		mobile: <StyleBookPreview />,
+		preview: <StyleBookPreview isStatic />,
+		mobile: <StyleBookPreview isStatic />,
 	},
 };
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index da69ed734166ed..d52456ad4a34fa 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -47,6 +47,8 @@ import {
 } from './categories';
 import { getExamples } from './examples';
 import { store as siteEditorStore } from '../../store';
+import { useSection } from '../sidebar-global-styles-wrapper';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -346,19 +348,12 @@ function StyleBook( {
 /**
  * Style Book Preview component renders the stylebook without the Editor dependency.
  *
- * @param {Object}   props            Component props.
- * @param {string}   props.path       Path to the selected block.
- * @param {Object}   props.userConfig User configuration.
- * @param {Function} props.isSelected Function to check if a block is selected.
- * @param {Function} props.onSelect   Function to select a block.
+ * @param {Object}  props            Component props.
+ * @param {Object}  props.userConfig User configuration.
+ * @param {boolean} props.isStatic   Whether the stylebook is static or clickable.
  * @return {Object} Style Book Preview component.
  */
-export const StyleBookPreview = ( {
-	path = '',
-	userConfig = {},
-	isSelected,
-	onSelect,
-} ) => {
+export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 	const siteEditorSettings = useSelect(
 		( select ) => select( siteEditorStore ).getSettings(),
 		[]
@@ -366,13 +361,47 @@ export const StyleBookPreview = ( {
 	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
 	dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
 
+	const [ section, onChangeSection ] = useSection();
+
+	const isSelected = ( blockName ) => {
+		// Match '/blocks/core%2Fbutton' and
+		// '/blocks/core%2Fbutton/typography', but not
+		// '/blocks/core%2Fbuttons'.
+		return (
+			section === `/blocks/${ encodeURIComponent( blockName ) }` ||
+			section.startsWith(
+				`/blocks/${ encodeURIComponent( blockName ) }/`
+			)
+		);
+	};
+
+	const onSelect = ( blockName ) => {
+		if (
+			STYLE_BOOK_COLOR_GROUPS.find(
+				( group ) => group.slug === blockName
+			)
+		) {
+			// Go to color palettes Global Styles.
+			onChangeSection( '/colors/palette' );
+			return;
+		}
+		if ( blockName === 'typography' ) {
+			// Go to typography Global Styles.
+			onChangeSection( '/typography' );
+			return;
+		}
+
+		// Now go to the selected block.
+		onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` );
+	};
+
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const colors = useMultiOriginPalettes();
 	const examples = getExamples( colors );
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );
-	const goTo = getStyleBookNavigationFromPath( path );
+	const goTo = getStyleBookNavigationFromPath( section );
 
 	const mergedConfig = useMemo( () => {
 		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
@@ -404,8 +433,8 @@ export const StyleBookPreview = ( {
 					settings={ settings }
 					goTo={ goTo }
 					sizes={ sizes }
-					isSelected={ isSelected }
-					onSelect={ onSelect }
+					isSelected={ ! isStatic ? isSelected : null }
+					onSelect={ ! isStatic ? onSelect : null }
 				/>
 			</BlockEditorProvider>
 		</div>

From 72ba66d4c94b877e98eeee9afb10c89d92831e93 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 16 Dec 2024 11:46:43 +1100
Subject: [PATCH 3/5] Use query instead of path

---
 .../sidebar-global-styles-wrapper/index.js    |  8 ++--
 .../components/site-editor-routes/index.js    |  2 -
 .../site-editor-routes/styles-stylebook.js    | 40 -------------------
 .../components/site-editor-routes/styles.js   |  6 ++-
 4 files changed, 9 insertions(+), 47 deletions(-)
 delete mode 100644 packages/edit-site/src/components/site-editor-routes/styles-stylebook.js

diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index bc11bf02743777..bfae7fd4c05528 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -23,7 +23,7 @@ const GlobalStylesPageActions = ( {
 	setIsStyleBookOpened,
 	path,
 } ) => {
-	const stylebookPath = 'styles-stylebook';
+	const stylebookPath = addQueryArgs( path, { preview: 'stylebook' } );
 	const history = useHistory();
 	return (
 		<Button
@@ -33,8 +33,8 @@ const GlobalStylesPageActions = ( {
 			onClick={ () => {
 				setIsStyleBookOpened( ! isStyleBookOpened );
 				const updatedPath = ! isStyleBookOpened
-					? path.replace( 'styles', stylebookPath )
-					: path.replace( stylebookPath, 'styles' );
+					? path.replace( '/styles', stylebookPath )
+					: path.replace( stylebookPath, '/styles' );
 				// Navigate to the updated path.
 				history.navigate( updatedPath );
 			} }
@@ -69,7 +69,7 @@ export default function GlobalStylesUIWrapper() {
 	const { path } = useLocation();
 
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
-		path.includes( 'styles-stylebook' )
+		path.includes( 'preview=stylebook' )
 	);
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ section, onChangeSection ] = useSection();
diff --git a/packages/edit-site/src/components/site-editor-routes/index.js b/packages/edit-site/src/components/site-editor-routes/index.js
index 56b03e1df7c5b0..232cb640cff264 100644
--- a/packages/edit-site/src/components/site-editor-routes/index.js
+++ b/packages/edit-site/src/components/site-editor-routes/index.js
@@ -21,7 +21,6 @@ import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
 import { stylebookRoute } from './stylebook';
-import { stylesStylebookRoute } from './styles-stylebook';
 
 const routes = [
 	pageItemRoute,
@@ -36,7 +35,6 @@ const routes = [
 	stylesRoute,
 	homeRoute,
 	stylebookRoute,
-	stylesStylebookRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {
diff --git a/packages/edit-site/src/components/site-editor-routes/styles-stylebook.js b/packages/edit-site/src/components/site-editor-routes/styles-stylebook.js
deleted file mode 100644
index ea951a1df32ccc..00000000000000
--- a/packages/edit-site/src/components/site-editor-routes/styles-stylebook.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import Editor from '../editor';
-import { unlock } from '../../lock-unlock';
-import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
-import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
-import { StyleBookPreview } from '../style-book';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-function MobileGlobalStylesUI() {
-	const { query = {} } = useLocation();
-	const { canvas } = query;
-
-	if ( canvas === 'edit' ) {
-		return <Editor />;
-	}
-
-	return <GlobalStylesUIWrapper />;
-}
-
-export const stylesStylebookRoute = {
-	name: 'styles-stylebook',
-	path: '/styles-stylebook',
-	areas: {
-		content: <GlobalStylesUIWrapper />,
-		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
-		preview: <StyleBookPreview />,
-		mobile: <MobileGlobalStylesUI />,
-	},
-	widths: {
-		content: 380,
-	},
-};
diff --git a/packages/edit-site/src/components/site-editor-routes/styles.js b/packages/edit-site/src/components/site-editor-routes/styles.js
index cf29dbebea3733..a1827bee763390 100644
--- a/packages/edit-site/src/components/site-editor-routes/styles.js
+++ b/packages/edit-site/src/components/site-editor-routes/styles.js
@@ -10,6 +10,7 @@ import Editor from '../editor';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+import { StyleBookPreview } from '../style-book';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -30,7 +31,10 @@ export const stylesRoute = {
 	areas: {
 		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
-		preview: <Editor />,
+		preview( { query } ) {
+			const isStylebook = query.preview === 'stylebook';
+			return isStylebook ? <StyleBookPreview /> : <Editor />;
+		},
 		mobile: <MobileGlobalStylesUI />,
 	},
 	widths: {

From 67c9d716764f44c96055a651e1fb7170956dd6eb Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 17 Dec 2024 14:12:16 +1100
Subject: [PATCH 4/5] Fix path

---
 .../src/components/sidebar-global-styles-wrapper/index.js  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index bfae7fd4c05528..de12bbe466bf3b 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -6,7 +6,7 @@ import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
+import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { seen } from '@wordpress/icons';
 
 /**
@@ -23,7 +23,6 @@ const GlobalStylesPageActions = ( {
 	setIsStyleBookOpened,
 	path,
 } ) => {
-	const stylebookPath = addQueryArgs( path, { preview: 'stylebook' } );
 	const history = useHistory();
 	return (
 		<Button
@@ -33,8 +32,8 @@ const GlobalStylesPageActions = ( {
 			onClick={ () => {
 				setIsStyleBookOpened( ! isStyleBookOpened );
 				const updatedPath = ! isStyleBookOpened
-					? path.replace( '/styles', stylebookPath )
-					: path.replace( stylebookPath, '/styles' );
+					? addQueryArgs( path, { preview: 'stylebook' } )
+					: removeQueryArgs( path, 'preview' );
 				// Navigate to the updated path.
 				history.navigate( updatedPath );
 			} }

From 005a47e78c3733163271ea7f0f3e3f2369d41306 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 17 Dec 2024 16:48:08 +1100
Subject: [PATCH 5/5] Effect for editor settings update

---
 packages/edit-site/src/components/style-book/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index d52456ad4a34fa..ecbd729ee8a0a2 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -32,6 +32,7 @@ import {
 	useContext,
 	useRef,
 	useLayoutEffect,
+	useEffect,
 } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
@@ -358,8 +359,11 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		( select ) => select( siteEditorStore ).getSettings(),
 		[]
 	);
+
 	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
-	dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
+	useEffect( () => {
+		dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
+	}, [ siteEditorSettings ] );
 
 	const [ section, onChangeSection ] = useSection();