Use query instead of path

WordPress · Dec 16, 2024 · b7dff57 · b7dff57
1 parent 7e9bbce
commit b7dff57
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 47 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
@@ -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
@@ -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
diff --git 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: {