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] 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: {