Update to single entry point for Stylebook and Patterns

lib/experimental/stylebook/classic-screen.php

@@ -16,13 +16,14 @@ function gutenberg_add_styles_submenu_item() {
 		global $submenu;
 
 		$styles_menu_item = array(
-			__( 'Styles', 'gutenberg' ),
+			__( 'Design', 'gutenberg' ),
 			'edit_theme_options',
-			'site-editor.php?path=/style-book',
+			'site-editor.php',
 		);
 		// If $submenu exists, insert the Styles submenu item at position 2.
 		if ( $submenu && isset( $submenu['themes.php'] ) ) {
-			array_splice( $submenu['themes.php'], 2, 0, array( $styles_menu_item ) );
+			// This might not work as expected if the submenu has already been modified.
+			array_splice( $submenu['themes.php'], 1, 1, array( $styles_menu_item ) );
 		}
 	}
 }
@@ -36,7 +37,7 @@ function gutenberg_add_styles_submenu_item() {
  * @return callable The default handler or a custom handler.
  */
 function gutenberg_styles_wp_die_handler( $default_handler ) {
-	if ( ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) && isset( $_GET['path'] ) && 'style-book' === sanitize_key( $_GET['path'] ) ) {
+	if ( ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) ) {
 		return '__return_false';
 	}
 	return $default_handler;

packages/edit-site/src/components/home-view-preview/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+
+import { store as coreStore } from '@wordpress/core-data';
+import { select } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+
+import Editor from '../editor';
+import { StyleBookPreview } from '../style-book';
+
+export function HomeViewPreview() {
+	const isBlockBasedTheme =
+		select( coreStore ).getCurrentTheme()?.is_block_theme;
+
+	// If theme is block based, return the Editor, otherwise return the StyleBookPreview.
+	return isBlockBasedTheme ? <Editor /> : <StyleBookPreview />;
+}

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -4,8 +4,9 @@
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -17,38 +18,46 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 export function MainSidebarNavigationContent() {
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 	return (
 		<ItemGroup>
-			<SidebarNavigationItem
-				uid="navigation-navigation-item"
-				to="/navigation"
-				withChevron
-				icon={ navigation }
-			>
-				{ __( 'Navigation' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItemGlobalStyles
-				uid="styles-navigation-item"
-				icon={ styles }
-			>
-				{ __( 'Styles' ) }
-			</SidebarNavigationItemGlobalStyles>
-			<SidebarNavigationItem
-				uid="page-navigation-item"
-				to="/page"
-				withChevron
-				icon={ page }
-			>
-				{ __( 'Pages' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItem
-				uid="template-navigation-item"
-				to="/template"
-				withChevron
-				icon={ layout }
-			>
-				{ __( 'Templates' ) }
-			</SidebarNavigationItem>
+			{ isBlockBasedTheme && (
+				<>
+					<SidebarNavigationItem
+						uid="navigation-navigation-item"
+						to="/navigation"
+						withChevron
+						icon={ navigation }
+					>
+						{ __( 'Navigation' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItemGlobalStyles
+						uid="styles-navigation-item"
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
+					<SidebarNavigationItem
+						uid="page-navigation-item"
+						to="/page"
+						withChevron
+						icon={ page }
+					>
+						{ __( 'Pages' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItem
+						uid="template-navigation-item"
+						to="/template"
+						withChevron
+						icon={ layout }
+					>
+						{ __( 'Templates' ) }
+					</SidebarNavigationItem>
+				</>
+			) }
 			<SidebarNavigationItem
 				uid="patterns-navigation-item"
 				to="/pattern"

packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js

@@ -7,8 +7,6 @@ import {
 } from '@wordpress/components';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -115,14 +113,9 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
-	const isBlockBasedTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-		[]
-	);
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ ! isBlockBasedTheme }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'

packages/edit-site/src/components/site-editor-routes/home.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import { HomeViewPreview } from '../home-view-preview';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <Editor />,
-		mobile: <SidebarNavigationScreenMain />,
+		preview: <HomeViewPreview />,
+		mobile: <HomeViewPreview />,
 	},
 };