Give style book its own route so it can be linked to directly.

packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js

@@ -14,32 +14,42 @@ 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
 			label={ __( 'Show Style Book' ) }
 			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 );
 			} }
 		/>
 	);
 };
 
 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() {
 						);
 					} }
 				/>
-			) }
+			) } */ }
 		</>
 	);
 }

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() {

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,
+	},
+};