From 1572726ade48fa2cbe45c4e5713f94f92bb6930a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 11 Dec 2024 16:43:20 +1100
Subject: [PATCH] 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 59c957e25eaa95..2e57303afae891 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
@@ -14,15 +14,18 @@ import { addQueryArgs } from '@wordpress/url';
 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 (
 		<ToggleControl
 			__nextHasNoMarginBottom
@@ -30,6 +33,11 @@ const GlobalStylesPageActions = ( {
 			checked={ isStyleBookOpened }
 			onChange={ ( newValue ) => {
 				setIsStyleBookOpened( newValue );
+				const updatedPath = newValue
+					? path.replace( 'styles', stylebookPath )
+					: path.replace( stylebookPath, 'styles' );
+				// Navigate to the updated path.
+				history.navigate( updatedPath );
 			} }
 		/>
 	);
@@ -37,9 +45,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 [
@@ -62,6 +72,7 @@ export default function GlobalStylesUIWrapper() {
 						<GlobalStylesPageActions
 							isStyleBookOpened={ isStyleBookOpened }
 							setIsStyleBookOpened={ setIsStyleBookOpened }
+							path={ path }
 						/>
 					) : null
 				}
@@ -73,7 +84,7 @@ export default function GlobalStylesUIWrapper() {
 					onPathChange={ onChangeSection }
 				/>
 			</Page>
-			{ canvas === 'view' && isStyleBookOpened && (
+			{ /* { canvas === 'view' && isStyleBookOpened && (
 				<StyleBook
 					enableResizing={ false }
 					showCloseButton={ false }
@@ -111,7 +122,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,
+	},
+};