From 4bca433dbc41032681e2b8eb9fee8916f7a3dffb Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 8 Nov 2024 16:19:43 +1100
Subject: [PATCH 01/37] Boilerplate for classic stylebook

---
 lib/experimental/stylebook/classic-screen.php |  87 +++++++++++++
 lib/load.php                                  |   1 +
 packages/edit-site/src/classic-stylebook.js   | 114 ++++++++++++++++++
 packages/edit-site/src/classic-stylebook.scss |  15 +++
 .../src/components/style-book/index.js        |   2 +-
 packages/edit-site/src/index.js               |   3 +
 6 files changed, 221 insertions(+), 1 deletion(-)
 create mode 100644 lib/experimental/stylebook/classic-screen.php
 create mode 100644 packages/edit-site/src/classic-stylebook.js
 create mode 100644 packages/edit-site/src/classic-stylebook.scss

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
new file mode 100644
index 00000000000000..0b79be7a3140dc
--- /dev/null
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -0,0 +1,87 @@
+<?php
+/**
+ * Set up a screen to show stylebook for classic themes.
+ *
+ * @package gutenberg
+ */
+
+ /**
+  * Add a Styles submenu link for Classic themes. 
+  */
+function gutenberg_add_styles_link() {
+    if ( ! wp_is_block_theme() ) {
+        add_theme_page(
+            __( 'Styles', 'gutenberg' ),
+            __( 'Styles', 'gutenberg' ),
+            'edit_theme_options',
+            'gutenberg-classic-stylebook',
+            'gutenberg_classic_stylebook_render',
+            3
+        );
+    }
+}
+add_action( 'admin_menu', 'gutenberg_add_styles_link' );
+
+if ( isset( $_GET['page'] ) && 'gutenberg-classic-stylebook' === $_GET['page'] ) {
+	// Default to is-fullscreen-mode to avoid jumps in the UI.
+	add_filter(
+		'admin_body_class',
+		static function ( $classes ) {
+			return "$classes is-fullscreen-mode";
+		}
+	);
+}
+
+/**
+ * Render the Styles page for Classic themes. 
+ */
+
+function gutenberg_classic_stylebook_render() {
+    $block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
+    $custom_settings      = array(
+		'siteUrl'        => site_url(),
+		'styles'         => get_block_editor_theme_styles(),
+		'supportsLayout' => wp_theme_has_theme_json(),
+	);
+
+	$editor_settings         = get_block_editor_settings( $custom_settings, $block_editor_context );
+	$active_global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+	$active_theme            = get_stylesheet();
+
+	$preload_paths = array(
+		array( '/wp/v2/media', 'OPTIONS' ),
+		'/wp/v2/types?context=view',
+		'/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
+		'/wp/v2/global-styles/' . $active_global_styles_id,
+		'/wp/v2/global-styles/themes/' . $active_theme,
+	);
+	block_editor_rest_api_preload( $preload_paths, $block_editor_context );
+
+    // Preload server-registered block schemas.
+	wp_add_inline_script(
+		'wp-blocks',
+		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
+	);
+
+	/** This action is documented in wp-admin/edit-form-blocks.php */
+	do_action( 'enqueue_block_editor_assets' );
+	wp_register_style(
+		'wp-gutenberg-classic-stylebook',
+		gutenberg_url( 'build/edit-site/classic-stylebook.css', __FILE__ ),
+		array( 'wp-components', 'wp-commands', 'wp-edit-site' )
+	);
+	wp_enqueue_style( 'wp-gutenberg-classic-stylebook' );
+	wp_add_inline_script(
+		'wp-edit-site',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editSite.initializeClassicStylebook( "gutenberg-classic-stylebook", %s );
+			} );',
+			wp_json_encode( $editor_settings )
+		)
+	);
+	wp_enqueue_script( 'wp-edit-site' );
+	wp_enqueue_media();
+
+    echo '<div id="gutenberg-classic-stylebook" class="edit-site"></div>';
+}
\ No newline at end of file
diff --git a/lib/load.php b/lib/load.php
index 26af78f3173c53..28de3f26cdd704 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -110,6 +110,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/synchronization.php';
 require __DIR__ . '/experimental/script-modules.php';
 require __DIR__ . '/experimental/posts/load.php';
+require __DIR__ . '/experimental/stylebook/classic-screen.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 	require __DIR__ . '/experimental/disable-tinymce.php';
diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
new file mode 100644
index 00000000000000..a9f57b48855ab5
--- /dev/null
+++ b/packages/edit-site/src/classic-stylebook.js
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	registerCoreBlocks,
+	__experimentalGetCoreBlocks,
+	__experimentalRegisterExperimentalCoreBlocks,
+} from '@wordpress/block-library';
+import { dispatch, useSelect } from '@wordpress/data';
+import { createRoot, StrictMode } from '@wordpress/element';
+import {
+	registerLegacyWidgetBlock,
+	registerWidgetGroupBlock,
+} from '@wordpress/widgets';
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useResizeObserver } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import './hooks';
+import { store as editSiteStore } from './store';
+import Layout from './components/layout';
+import { unlock } from './lock-unlock';
+import SidebarNavigationScreenMain from './components/sidebar-navigation-screen-main/index.js';
+import { StyleBookBody } from './components/style-book';
+import { getExamples } from './components/style-book/examples';
+
+const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
+
+function ClassicStylebookLayout() {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const settings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+
+	const examples = getExamples();
+	const route = {
+		name: 'stylebook',
+		areas: {
+			sidebar: <SidebarNavigationScreenMain />,
+			preview: (
+				<StyleBookBody
+					enableResizing={ false }
+					showCloseButton={ false }
+					showTabs={ false }
+					isSelected={ () => null }
+					onSelect={ () => null }
+					examples={ examples }
+					onClick={ () => null }
+					settings={ settings }
+					sizes={ sizes }
+					goTo={ {} }
+				/>
+			),
+		},
+	};
+	return (
+		<>
+			{ resizeObserver }
+			<Layout route={ route } />
+		</>
+	);
+}
+
+/**
+ * Initializes the classic stylebook.
+ * @param {string} id       ID of the root element to render the screen in.
+ * @param {Object} settings Editor settings.
+ */
+export function initializeClassicStylebook( id, settings ) {
+	if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+		return;
+	}
+	const target = document.getElementById( id );
+	const root = createRoot( target );
+
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
+	const coreBlocks = __experimentalGetCoreBlocks().filter(
+		( { name } ) => name !== 'core/freeform'
+	);
+	registerCoreBlocks( coreBlocks );
+	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
+	registerLegacyWidgetBlock( { inserter: false } );
+	registerWidgetGroupBlock( { inserter: false } );
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		__experimentalRegisterExperimentalCoreBlocks( {
+			enableFSEBlocks: true,
+		} );
+	}
+
+	dispatch( editSiteStore ).updateSettings( settings );
+
+	root.render(
+		<StrictMode>
+			<GlobalStylesProvider>
+				<UnsavedChangesWarning />
+				<RouterProvider>
+					<ClassicStylebookLayout />
+				</RouterProvider>
+			</GlobalStylesProvider>
+		</StrictMode>
+	);
+
+	return root;
+}
diff --git a/packages/edit-site/src/classic-stylebook.scss b/packages/edit-site/src/classic-stylebook.scss
new file mode 100644
index 00000000000000..82e43cf9911fcf
--- /dev/null
+++ b/packages/edit-site/src/classic-stylebook.scss
@@ -0,0 +1,15 @@
+@include wordpress-admin-schemes();
+
+#wpadminbar,
+#adminmenumain {
+	display: none;
+}
+#wpcontent {
+	margin-left: 0;
+}
+body.js #wpbody {
+	padding-top: 0;
+}
+body {
+	@include wp-admin-reset("#gutenberg-classic-stylebook");
+}
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index f0992381943aaf..4cd45decb116be 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -330,7 +330,7 @@ function StyleBook( {
 	);
 }
 
-const StyleBookBody = ( {
+export const StyleBookBody = ( {
 	category,
 	examples,
 	isSelected,
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index b96ce5cb67f5e1..85cfc99029add1 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -112,3 +112,6 @@ export * from './deprecated';
 // Temporary: While the posts dashboard is being iterated on
 // it's being built in the same package as the site editor.
 export { initializePostsDashboard } from './posts';
+
+// Temp classic stylebook export similar to above posts dashboard.
+export { initializeClassicStylebook } from './classic-stylebook';

From 75b8d04332c58770018b7093ea76533b723e0884 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 8 Nov 2024 17:03:19 +1100
Subject: [PATCH 02/37] Add provider and settings

---
 packages/edit-site/src/classic-stylebook.js   | 19 +++++++++++++++----
 packages/edit-site/src/classic-stylebook.scss |  6 ++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
index a9f57b48855ab5..d873c54eda9c61 100644
--- a/packages/edit-site/src/classic-stylebook.js
+++ b/packages/edit-site/src/classic-stylebook.js
@@ -19,7 +19,11 @@ import {
 } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useResizeObserver } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	BlockEditorProvider,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,7 +32,7 @@ import './hooks';
 import { store as editSiteStore } from './store';
 import Layout from './components/layout';
 import { unlock } from './lock-unlock';
-import SidebarNavigationScreenMain from './components/sidebar-navigation-screen-main/index.js';
+import SidebarNavigationScreen from './components/sidebar-navigation-screen/index.js';
 import { StyleBookBody } from './components/style-book';
 import { getExamples } from './components/style-book/examples';
 
@@ -46,7 +50,12 @@ function ClassicStylebookLayout() {
 	const route = {
 		name: 'stylebook',
 		areas: {
-			sidebar: <SidebarNavigationScreenMain />,
+			sidebar: (
+				<SidebarNavigationScreen
+					title={ __( 'Styles' ) }
+					description={ __( 'Overview of styled blocks.' ) }
+				/>
+			),
 			preview: (
 				<StyleBookBody
 					enableResizing={ false }
@@ -104,7 +113,9 @@ export function initializeClassicStylebook( id, settings ) {
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
 				<RouterProvider>
-					<ClassicStylebookLayout />
+					<BlockEditorProvider settings={ settings }>
+						<ClassicStylebookLayout />
+					</BlockEditorProvider>
 				</RouterProvider>
 			</GlobalStylesProvider>
 		</StrictMode>
diff --git a/packages/edit-site/src/classic-stylebook.scss b/packages/edit-site/src/classic-stylebook.scss
index 82e43cf9911fcf..e64b7d68f03237 100644
--- a/packages/edit-site/src/classic-stylebook.scss
+++ b/packages/edit-site/src/classic-stylebook.scss
@@ -13,3 +13,9 @@ body.js #wpbody {
 body {
 	@include wp-admin-reset("#gutenberg-classic-stylebook");
 }
+
+.edit-site-style-book__iframe {
+	display: block;
+	height: 100%;
+	width: 100%;
+}

From 450891a429d7a86577011edaa0d2a95b53600bc1 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 8 Nov 2024 17:04:28 +1100
Subject: [PATCH 03/37] Fix link to dashboard

---
 packages/edit-site/src/classic-stylebook.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
index d873c54eda9c61..b8b389d6e9baa2 100644
--- a/packages/edit-site/src/classic-stylebook.js
+++ b/packages/edit-site/src/classic-stylebook.js
@@ -54,6 +54,7 @@ function ClassicStylebookLayout() {
 				<SidebarNavigationScreen
 					title={ __( 'Styles' ) }
 					description={ __( 'Overview of styled blocks.' ) }
+					isRoot
 				/>
 			),
 			preview: (

From 34a8ce9293da23d01a3546e38d3313b4a7b93c6d Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Nov 2024 15:57:44 +1100
Subject: [PATCH 04/37] Add customizer styles to the editor.

---
 lib/block-editor-settings.php | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php
index defd7cd391b16b..6448eb2e524853 100644
--- a/lib/block-editor-settings.php
+++ b/lib/block-editor-settings.php
@@ -53,6 +53,13 @@ function gutenberg_get_block_editor_settings( $settings ) {
 			$global_styles[]      = $block_classes;
 		}
 
+		// Get any additional css from the customizer and add it before global styles custom CSS.
+		$global_styles[] = array(
+			'css'            => wp_get_custom_css(),
+			'__unstableType' => 'user',
+			'isGlobalStyles' => false,
+		);
+
 		/*
 		 * Add the custom CSS as a separate stylesheet so any invalid CSS
 		 * entered by users does not break other global styles.
@@ -74,6 +81,12 @@ function gutenberg_get_block_editor_settings( $settings ) {
 			$block_classes['css'] = $actual_css;
 			$global_styles[]      = $block_classes;
 		}
+		// Get any additional css from the customizer.
+		$global_styles[] = array(
+			'css'            => wp_get_custom_css(),
+			'__unstableType' => 'user',
+			'isGlobalStyles' => false,
+		);
 	}
 
 	$settings['styles'] = array_merge( $global_styles, get_block_editor_theme_styles() );

From 92dd468cf20a994af11074b3f5f26c6db7deb6e3 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Nov 2024 10:53:08 +1100
Subject: [PATCH 05/37] Integrate overview section.

---
 packages/edit-site/src/classic-stylebook.js   | 10 ++++-
 .../src/components/style-book/examples.tsx    |  4 +-
 .../src/components/style-book/index.js        | 41 ++++++++++++-------
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
index b8b389d6e9baa2..5ab78a8af49ea3 100644
--- a/packages/edit-site/src/classic-stylebook.js
+++ b/packages/edit-site/src/classic-stylebook.js
@@ -33,7 +33,10 @@ import { store as editSiteStore } from './store';
 import Layout from './components/layout';
 import { unlock } from './lock-unlock';
 import SidebarNavigationScreen from './components/sidebar-navigation-screen/index.js';
-import { StyleBookBody } from './components/style-book';
+import {
+	StyleBookBody,
+	getExamplesForSinglePageUse,
+} from './components/style-book';
 import { getExamples } from './components/style-book/examples';
 
 const { RouterProvider } = unlock( routerPrivateApis );
@@ -47,6 +50,9 @@ function ClassicStylebookLayout() {
 	);
 
 	const examples = getExamples();
+	// Dedupe the examples as they include all categories with repeat sections.
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
+
 	const route = {
 		name: 'stylebook',
 		areas: {
@@ -64,7 +70,7 @@ function ClassicStylebookLayout() {
 					showTabs={ false }
 					isSelected={ () => null }
 					onSelect={ () => null }
-					examples={ examples }
+					examples={ examplesForSinglePageUse }
 					onClick={ () => null }
 					settings={ settings }
 					sizes={ sizes }
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index cb7b6afcb422ce..2f8cdc2d5609c9 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -78,8 +78,8 @@ function getOverviewBlockExamples(
 ): BlockExample[] {
 	const examples: BlockExample[] = [];
 
-	// Get theme palette from colors.
-	const themePalette = colors.colors.find(
+	// Get theme palette from colors if they exist.
+	const themePalette = colors?.colors.find(
 		( origin: ColorOrigin ) => origin.slug === 'theme'
 	);
 
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 4cd45decb116be..f4a1c6dc5d671a 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -191,6 +191,31 @@ function useMultiOriginPalettes() {
 	return palettes;
 }
 
+/**
+ * Get deduped examples for single page stylebook.
+ * @param {Array} examples Array of examples.
+ * @return {Array} Deduped examples.
+ */
+export function getExamplesForSinglePageUse( examples ) {
+	const examplesForSinglePageUse = [];
+	const overviewCategoryExamples = getExamplesByCategory(
+		{ slug: 'overview' },
+		examples
+	);
+	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
+	const otherExamples = examples.filter( ( example ) => {
+		return (
+			example.category !== 'overview' &&
+			! overviewCategoryExamples.examples.find(
+				( overviewExample ) => overviewExample.name === example.name
+			)
+		);
+	} );
+	examplesForSinglePageUse.push( ...otherExamples );
+
+	return examplesForSinglePageUse;
+}
+
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -217,21 +242,7 @@ function StyleBook( {
 		[ examples ]
 	);
 
-	const examplesForSinglePageUse = [];
-	const overviewCategoryExamples = getExamplesByCategory(
-		{ slug: 'overview' },
-		examples
-	);
-	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
-	const otherExamples = examples.filter( ( example ) => {
-		return (
-			example.category !== 'overview' &&
-			! overviewCategoryExamples.examples.find(
-				( overviewExample ) => overviewExample.name === example.name
-			)
-		);
-	} );
-	examplesForSinglePageUse.push( ...otherExamples );
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 	const goTo = getStyleBookNavigationFromPath( path );

From 7085e039374e2354266943c1e711922d166a90ca Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Nov 2024 14:09:43 +1100
Subject: [PATCH 06/37] Make items non-clickable

---
 packages/edit-site/src/classic-stylebook.js   |  4 ---
 .../src/components/style-book/index.js        | 25 +++++++++++--------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
index 5ab78a8af49ea3..8c62ce35b32a57 100644
--- a/packages/edit-site/src/classic-stylebook.js
+++ b/packages/edit-site/src/classic-stylebook.js
@@ -68,13 +68,9 @@ function ClassicStylebookLayout() {
 					enableResizing={ false }
 					showCloseButton={ false }
 					showTabs={ false }
-					isSelected={ () => null }
-					onSelect={ () => null }
 					examples={ examplesForSinglePageUse }
-					onClick={ () => null }
 					settings={ settings }
 					sizes={ sizes }
-					goTo={ {} }
 				/>
 			),
 		},
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index f4a1c6dc5d671a..732a8faf003ff9 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -468,7 +468,11 @@ const Examples = memo(
 							content={ example.content }
 							blocks={ example.blocks }
 							isSelected={ isSelected?.( example.name ) }
-							onClick={ () => onSelect?.( example.name ) }
+							onClick={
+								!! onSelect
+									? () => onSelect( example.name )
+									: null
+							}
 						/>
 					) ) }
 				{ !! filteredExamples?.subcategories?.length &&
@@ -505,9 +509,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 				content={ example.content }
 				blocks={ example.blocks }
 				isSelected={ isSelected?.( example.name ) }
-				onClick={ () => {
-					onSelect?.( example.name );
-				} }
+				onClick={ !! onSelect ? () => onSelect( example.name ) : null }
 			/>
 		) )
 	);
@@ -535,12 +537,13 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 		[ blocks ]
 	);
 
-	const disabledProps = disabledExamples.includes( id )
-		? {
-				disabled: true,
-				accessibleWhenDisabled: true,
-		  }
-		: {};
+	const disabledProps =
+		disabledExamples.includes( id ) || ! onClick
+			? {
+					disabled: true,
+					accessibleWhenDisabled: !! onClick,
+			  }
+			: {};
 
 	return (
 		<div role="row">
@@ -557,7 +560,7 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 						title
 					) }
 					render={ <div /> }
-					role="button"
+					role={ !! onClick ? 'button' : null }
 					onClick={ onClick }
 					{ ...disabledProps }
 				>

From ead25071b7efce3c5c4b5a17c330b615819187dd Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Nov 2024 15:28:16 +1100
Subject: [PATCH 07/37] Display classic theme color and gradient palettes

---
 packages/edit-site/src/classic-stylebook.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
index 8c62ce35b32a57..76c62515025fc1 100644
--- a/packages/edit-site/src/classic-stylebook.js
+++ b/packages/edit-site/src/classic-stylebook.js
@@ -22,6 +22,7 @@ import { useResizeObserver } from '@wordpress/compose';
 import {
 	store as blockEditorStore,
 	BlockEditorProvider,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -49,7 +50,19 @@ function ClassicStylebookLayout() {
 		[]
 	);
 
-	const examples = getExamples();
+	const { colors, gradients } = useMultipleOriginColorsAndGradients();
+	// Exclude the default colors and gradients.
+	const themeColors = colors?.filter( ( color ) => color.slug === 'theme' );
+	const themeGradients = gradients?.filter(
+		( gradient ) => gradient.slug === 'theme'
+	);
+
+	const examples = getExamples( {
+		colors: themeColors,
+		gradients: themeGradients,
+		duotones: [], // Classic themes don't support duotone palettes.
+	} );
+
 	// Dedupe the examples as they include all categories with repeat sections.
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 

From 7a2ca05c388d3327dec658e55e81740e7b1b45b4 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 12 Nov 2024 15:31:39 +1100
Subject: [PATCH 08/37] Remove aria label if area isn't clickable

---
 .../edit-site/src/components/style-book/index.js   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 732a8faf003ff9..41b84270332715 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -554,11 +554,15 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 						'is-disabled-example': !! disabledProps?.disabled,
 					} ) }
 					id={ id }
-					aria-label={ sprintf(
-						// translators: %s: Title of a block, e.g. Heading.
-						__( 'Open %s styles in Styles panel' ),
-						title
-					) }
+					aria-label={
+						!! onClick
+							? sprintf(
+									// translators: %s: Title of a block, e.g. Heading.
+									__( 'Open %s styles in Styles panel' ),
+									title
+							  )
+							: undefined
+					}
 					render={ <div /> }
 					role={ !! onClick ? 'button' : null }
 					onClick={ onClick }

From 13f7efaebfc7a0a74d6474abc7b156503dc0829a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 19 Nov 2024 17:08:26 +1100
Subject: [PATCH 09/37] Update to use site editor layout with new route

---
 packages/edit-site/src/classic-stylebook.js   | 92 +------------------
 .../site-editor-routes/classic-stylebook.js   | 34 +++++++
 .../src/components/style-book/index.js        | 68 ++++++++++++++
 3 files changed, 107 insertions(+), 87 deletions(-)
 create mode 100644 packages/edit-site/src/components/site-editor-routes/classic-stylebook.js

diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
index 76c62515025fc1..81f8ada3404fab 100644
--- a/packages/edit-site/src/classic-stylebook.js
+++ b/packages/edit-site/src/classic-stylebook.js
@@ -7,94 +7,19 @@ import {
 	__experimentalGetCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { dispatch, useSelect } from '@wordpress/data';
+import { dispatch } from '@wordpress/data';
 import { createRoot, StrictMode } from '@wordpress/element';
 import {
 	registerLegacyWidgetBlock,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
-import {
-	UnsavedChangesWarning,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useResizeObserver } from '@wordpress/compose';
-import {
-	store as blockEditorStore,
-	BlockEditorProvider,
-	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import './hooks';
-import { store as editSiteStore } from './store';
-import Layout from './components/layout';
-import { unlock } from './lock-unlock';
-import SidebarNavigationScreen from './components/sidebar-navigation-screen/index.js';
-import {
-	StyleBookBody,
-	getExamplesForSinglePageUse,
-} from './components/style-book';
-import { getExamples } from './components/style-book/examples';
-
-const { RouterProvider } = unlock( routerPrivateApis );
-const { GlobalStylesProvider } = unlock( editorPrivateApis );
-
-function ClassicStylebookLayout() {
-	const [ resizeObserver, sizes ] = useResizeObserver();
-	const settings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
-
-	const { colors, gradients } = useMultipleOriginColorsAndGradients();
-	// Exclude the default colors and gradients.
-	const themeColors = colors?.filter( ( color ) => color.slug === 'theme' );
-	const themeGradients = gradients?.filter(
-		( gradient ) => gradient.slug === 'theme'
-	);
-
-	const examples = getExamples( {
-		colors: themeColors,
-		gradients: themeGradients,
-		duotones: [], // Classic themes don't support duotone palettes.
-	} );
-
-	// Dedupe the examples as they include all categories with repeat sections.
-	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
-
-	const route = {
-		name: 'stylebook',
-		areas: {
-			sidebar: (
-				<SidebarNavigationScreen
-					title={ __( 'Styles' ) }
-					description={ __( 'Overview of styled blocks.' ) }
-					isRoot
-				/>
-			),
-			preview: (
-				<StyleBookBody
-					enableResizing={ false }
-					showCloseButton={ false }
-					showTabs={ false }
-					examples={ examplesForSinglePageUse }
-					settings={ settings }
-					sizes={ sizes }
-				/>
-			),
-		},
-	};
-	return (
-		<>
-			{ resizeObserver }
-			<Layout route={ route } />
-		</>
-	);
-}
+import App from './components/app';
 
 /**
  * Initializes the classic stylebook.
@@ -122,18 +47,11 @@ export function initializeClassicStylebook( id, settings ) {
 		} );
 	}
 
-	dispatch( editSiteStore ).updateSettings( settings );
+	dispatch( blockEditorStore ).updateSettings( settings );
 
 	root.render(
 		<StrictMode>
-			<GlobalStylesProvider>
-				<UnsavedChangesWarning />
-				<RouterProvider>
-					<BlockEditorProvider settings={ settings }>
-						<ClassicStylebookLayout />
-					</BlockEditorProvider>
-				</RouterProvider>
-			</GlobalStylesProvider>
+			<App />
 		</StrictMode>
 	);
 
diff --git a/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js b/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js
new file mode 100644
index 00000000000000..3e9f557cc2b40f
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { StyleBookPreview } from '../style-book';
+
+export const classicStylebookRoute = {
+	name: 'classic-stylebook',
+	match: ( params ) => {
+		return (
+			params.page &&
+			params.page.startsWith( 'gutenberg-classic-stylebook' ) &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				description={ __( 'Overview of styled blocks.' ) }
+				isRoot
+			/>
+		),
+		preview: <StyleBookPreview />,
+	},
+	widths: {
+		content: 380,
+	},
+};
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 41b84270332715..122d7bf0577a37 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -17,6 +17,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	useSettings,
+	BlockEditorProvider,
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
@@ -341,6 +342,73 @@ function StyleBook( {
 	);
 }
 
+/**
+ * Style Book Preview component renders the stylebook without the Editor dependency.
+ *
+ * @param {Object} props            Component props.
+ * @param {string} props.path       Path to the selected block.
+ * @param {Object} props.userConfig User configuration.
+ * @return {Object} Style Book Preview component.
+ */
+export const StyleBookPreview = ( { path = '', userConfig = {} } ) => {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const { colors, gradients } = useMultipleOriginColorsAndGradients();
+	// Exclude the default colors and gradients.
+	const themeColors = colors?.filter( ( color ) => color.slug === 'theme' );
+	const themeGradients = gradients?.filter(
+		( gradient ) => gradient.slug === 'theme'
+	);
+
+	const examples = getExamples( {
+		colors: themeColors,
+		gradients: themeGradients,
+		duotones: [], // Classic themes don't support duotone palettes.
+	} );
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
+
+	const { base: baseConfig } = useContext( GlobalStylesContext );
+	const goTo = getStyleBookNavigationFromPath( path );
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const settings = useMemo(
+		() => ( {
+			...originalSettings,
+			styles:
+				! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+					? globalStyles
+					: originalSettings.styles,
+			isPreviewMode: true,
+		} ),
+		[ globalStyles, originalSettings, userConfig ]
+	);
+
+	return (
+		<div className="edit-site-style-book">
+			{ resizeObserver }
+			<BlockEditorProvider settings={ settings }>
+				<StyleBookBody
+					examples={ examplesForSinglePageUse }
+					settings={ settings }
+					goTo={ goTo }
+					sizes={ sizes }
+				/>
+			</BlockEditorProvider>
+		</div>
+	);
+};
+
 export const StyleBookBody = ( {
 	category,
 	examples,

From 4578bf914820c4056c166df2e420622c9a4dc802 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 20 Nov 2024 11:00:13 +1100
Subject: [PATCH 10/37] Make style book default mobile view

---
 .../src/components/site-editor-routes/classic-stylebook.js       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js b/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js
index 3e9f557cc2b40f..f6a92f91d71070 100644
--- a/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js
+++ b/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js
@@ -27,6 +27,7 @@ export const classicStylebookRoute = {
 			/>
 		),
 		preview: <StyleBookPreview />,
+		mobile: <StyleBookPreview />,
 	},
 	widths: {
 		content: 380,

From f333accb4212d09ac139354767aaf57f7a760d11 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 20 Nov 2024 15:16:43 +1100
Subject: [PATCH 11/37] Rename things to be more future proof

---
 lib/experimental/stylebook/classic-screen.php   | 16 ++++++++--------
 packages/edit-site/src/classic-stylebook.scss   |  2 +-
 ...classic-stylebook.js => static-stylebook.js} |  6 +++---
 .../src/components/style-book/index.js          | 17 +++++++++++++----
 4 files changed, 25 insertions(+), 16 deletions(-)
 rename packages/edit-site/src/components/site-editor-routes/{classic-stylebook.js => static-stylebook.js} (81%)

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index 0b79be7a3140dc..f1a497989a6c14 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -14,15 +14,15 @@ function gutenberg_add_styles_link() {
             __( 'Styles', 'gutenberg' ),
             __( 'Styles', 'gutenberg' ),
             'edit_theme_options',
-            'gutenberg-classic-stylebook',
-            'gutenberg_classic_stylebook_render',
+            'gutenberg-stylebook-static',
+            'gutenberg_stylebook_render',
             3
         );
     }
 }
 add_action( 'admin_menu', 'gutenberg_add_styles_link' );
 
-if ( isset( $_GET['page'] ) && 'gutenberg-classic-stylebook' === $_GET['page'] ) {
+if ( isset( $_GET['page'] ) && 'gutenberg-stylebook' === $_GET['page'] ) {
 	// Default to is-fullscreen-mode to avoid jumps in the UI.
 	add_filter(
 		'admin_body_class',
@@ -36,7 +36,7 @@ static function ( $classes ) {
  * Render the Styles page for Classic themes. 
  */
 
-function gutenberg_classic_stylebook_render() {
+function gutenberg_stylebook_render() {
     $block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
     $custom_settings      = array(
 		'siteUrl'        => site_url(),
@@ -66,16 +66,16 @@ function gutenberg_classic_stylebook_render() {
 	/** This action is documented in wp-admin/edit-form-blocks.php */
 	do_action( 'enqueue_block_editor_assets' );
 	wp_register_style(
-		'wp-gutenberg-classic-stylebook',
+		'wp-gutenberg-stylebook',
 		gutenberg_url( 'build/edit-site/classic-stylebook.css', __FILE__ ),
 		array( 'wp-components', 'wp-commands', 'wp-edit-site' )
 	);
-	wp_enqueue_style( 'wp-gutenberg-classic-stylebook' );
+	wp_enqueue_style( 'wp-gutenberg-stylebook' );
 	wp_add_inline_script(
 		'wp-edit-site',
 		sprintf(
 			'wp.domReady( function() {
-				wp.editSite.initializeClassicStylebook( "gutenberg-classic-stylebook", %s );
+				wp.editSite.initializeClassicStylebook( "gutenberg-stylebook", %s );
 			} );',
 			wp_json_encode( $editor_settings )
 		)
@@ -83,5 +83,5 @@ function gutenberg_classic_stylebook_render() {
 	wp_enqueue_script( 'wp-edit-site' );
 	wp_enqueue_media();
 
-    echo '<div id="gutenberg-classic-stylebook" class="edit-site"></div>';
+    echo '<div id="gutenberg-stylebook" class="edit-site"></div>';
 }
\ No newline at end of file
diff --git a/packages/edit-site/src/classic-stylebook.scss b/packages/edit-site/src/classic-stylebook.scss
index e64b7d68f03237..793f210344b7bc 100644
--- a/packages/edit-site/src/classic-stylebook.scss
+++ b/packages/edit-site/src/classic-stylebook.scss
@@ -11,7 +11,7 @@ body.js #wpbody {
 	padding-top: 0;
 }
 body {
-	@include wp-admin-reset("#gutenberg-classic-stylebook");
+	@include wp-admin-reset("#gutenberg-stylebook");
 }
 
 .edit-site-style-book__iframe {
diff --git a/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js b/packages/edit-site/src/components/site-editor-routes/static-stylebook.js
similarity index 81%
rename from packages/edit-site/src/components/site-editor-routes/classic-stylebook.js
rename to packages/edit-site/src/components/site-editor-routes/static-stylebook.js
index f6a92f91d71070..9bb808a668f5f8 100644
--- a/packages/edit-site/src/components/site-editor-routes/classic-stylebook.js
+++ b/packages/edit-site/src/components/site-editor-routes/static-stylebook.js
@@ -9,12 +9,12 @@ import { __ } from '@wordpress/i18n';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { StyleBookPreview } from '../style-book';
 
-export const classicStylebookRoute = {
-	name: 'classic-stylebook',
+export const staticStylebookRoute = {
+	name: 'static-stylebook',
 	match: ( params ) => {
 		return (
 			params.page &&
-			params.page.startsWith( 'gutenberg-classic-stylebook' ) &&
+			params.page.startsWith( 'gutenberg-stylebook-static' ) &&
 			params.canvas !== 'edit'
 		);
 	},
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 122d7bf0577a37..880909a1b40b53 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -345,12 +345,19 @@ function StyleBook( {
 /**
  * Style Book Preview component renders the stylebook without the Editor dependency.
  *
- * @param {Object} props            Component props.
- * @param {string} props.path       Path to the selected block.
- * @param {Object} props.userConfig User configuration.
+ * @param {Object}   props            Component props.
+ * @param {string}   props.path       Path to the selected block.
+ * @param {Object}   props.userConfig User configuration.
+ * @param {Function} props.isSelected Function to check if a block is selected.
+ * @param {Function} props.onSelect   Function to select a block.
  * @return {Object} Style Book Preview component.
  */
-export const StyleBookPreview = ( { path = '', userConfig = {} } ) => {
+export const StyleBookPreview = ( {
+	path = '',
+	userConfig = {},
+	isSelected,
+	onSelect,
+} ) => {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const { colors, gradients } = useMultipleOriginColorsAndGradients();
 	// Exclude the default colors and gradients.
@@ -403,6 +410,8 @@ export const StyleBookPreview = ( { path = '', userConfig = {} } ) => {
 					settings={ settings }
 					goTo={ goTo }
 					sizes={ sizes }
+					isSelected={ isSelected }
+					onSelect={ onSelect }
 				/>
 			</BlockEditorProvider>
 		</div>

From 9253755f1bc9e5611dde89e328bb5aeecde9ce13 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 20 Nov 2024 15:22:45 +1100
Subject: [PATCH 12/37] update name

---
 lib/experimental/stylebook/classic-screen.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index f1a497989a6c14..6816ce80a25d6b 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -22,7 +22,7 @@ function gutenberg_add_styles_link() {
 }
 add_action( 'admin_menu', 'gutenberg_add_styles_link' );
 
-if ( isset( $_GET['page'] ) && 'gutenberg-stylebook' === $_GET['page'] ) {
+if ( isset( $_GET['page'] ) && 'gutenberg-stylebook-static' === $_GET['page'] ) {
 	// Default to is-fullscreen-mode to avoid jumps in the UI.
 	add_filter(
 		'admin_body_class',

From 1d1fdea12318a2a8123556f35619c24fec957e68 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 20 Nov 2024 15:34:20 +1100
Subject: [PATCH 13/37] Canvas shouldn't go into edit mode when resizing

---
 .../edit-site/src/components/resizable-frame/index.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
index 99f650971112fb..f98b0c440c6d8f 100644
--- a/packages/edit-site/src/components/resizable-frame/index.js
+++ b/packages/edit-site/src/components/resizable-frame/index.js
@@ -15,6 +15,8 @@ import {
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { __, isRTL } from '@wordpress/i18n';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -106,6 +108,10 @@ function ResizableFrame( {
 		'edit-site-resizable-frame-handle-help'
 	);
 	const defaultAspectRatio = defaultSize.width / defaultSize.height;
+	const isBlockTheme = useSelect( ( select ) => {
+		const { getCurrentTheme } = select( coreStore );
+		return getCurrentTheme()?.is_block_theme;
+	}, [] );
 
 	const handleResizeStart = ( _event, _direction, ref ) => {
 		// Remember the starting width so we don't have to get `ref.offsetWidth` on
@@ -153,7 +159,10 @@ function ResizableFrame( {
 		const remainingWidth =
 			ref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;
 
-		if ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {
+		if (
+			remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ||
+			! isBlockTheme
+		) {
 			// Reset the initial aspect ratio if the frame is resized slightly
 			// above the sidebar but not far enough to trigger full screen.
 			setFrameSize( INITIAL_FRAME_SIZE );

From 21af5089ac17acbdf2ac52b7dfe9f43e55a54dca Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 22 Nov 2024 14:44:07 +1100
Subject: [PATCH 14/37] Add core PR

---
 backport-changelog/6.8/7865.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 backport-changelog/6.8/7865.md

diff --git a/backport-changelog/6.8/7865.md b/backport-changelog/6.8/7865.md
new file mode 100644
index 00000000000000..f7b23c944dc327
--- /dev/null
+++ b/backport-changelog/6.8/7865.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7865
+
+* https://github.com/WordPress/gutenberg/pull/66851
\ No newline at end of file

From 9439ddc544cd86cd28b59154fc50a61ad718948f Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 22 Nov 2024 17:15:07 +1100
Subject: [PATCH 15/37] lint PHP

---
 lib/experimental/stylebook/classic-screen.php | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index 6816ce80a25d6b..1410a838cd575a 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -5,20 +5,20 @@
  * @package gutenberg
  */
 
- /**
-  * Add a Styles submenu link for Classic themes. 
-  */
+/**
+ * Add a Styles submenu link for Classic themes. 
+ */
 function gutenberg_add_styles_link() {
-    if ( ! wp_is_block_theme() ) {
-        add_theme_page(
-            __( 'Styles', 'gutenberg' ),
-            __( 'Styles', 'gutenberg' ),
-            'edit_theme_options',
-            'gutenberg-stylebook-static',
-            'gutenberg_stylebook_render',
-            3
-        );
-    }
+	if ( ! wp_is_block_theme() ) {
+		 add_theme_page(
+			__( 'Styles', 'gutenberg' ),
+			__( 'Styles', 'gutenberg' ),
+			'edit_theme_options',
+			'gutenberg-stylebook-static',
+			'gutenberg_stylebook_render',
+			3
+		);
+	}
 }
 add_action( 'admin_menu', 'gutenberg_add_styles_link' );
 
@@ -37,8 +37,8 @@ static function ( $classes ) {
  */
 
 function gutenberg_stylebook_render() {
-    $block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
-    $custom_settings      = array(
+	$block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
+	$custom_settings      = array(
 		'siteUrl'        => site_url(),
 		'styles'         => get_block_editor_theme_styles(),
 		'supportsLayout' => wp_theme_has_theme_json(),
@@ -57,7 +57,7 @@ function gutenberg_stylebook_render() {
 	);
 	block_editor_rest_api_preload( $preload_paths, $block_editor_context );
 
-    // Preload server-registered block schemas.
+	// Preload server-registered block schemas.
 	wp_add_inline_script(
 		'wp-blocks',
 		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
@@ -83,5 +83,5 @@ function gutenberg_stylebook_render() {
 	wp_enqueue_script( 'wp-edit-site' );
 	wp_enqueue_media();
 
-    echo '<div id="gutenberg-stylebook" class="edit-site"></div>';
+	echo '<div id="gutenberg-stylebook" class="edit-site"></div>';
 }
\ No newline at end of file

From 63c2a9522dd1bbb04e7cad89d3e18af89833feb7 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 25 Nov 2024 15:20:26 +1100
Subject: [PATCH 16/37] Use site editor URL

---
 lib/experimental/stylebook/classic-screen.php | 93 +++++--------------
 packages/edit-site/src/classic-stylebook.js   | 59 ------------
 packages/edit-site/src/classic-stylebook.scss | 21 -----
 .../site-editor-routes/static-stylebook.js    |  4 +-
 .../src/components/style-book/index.js        | 20 ++--
 .../src/components/style-book/style.scss      |  4 +
 packages/edit-site/src/index.js               |  3 -
 7 files changed, 42 insertions(+), 162 deletions(-)
 delete mode 100644 packages/edit-site/src/classic-stylebook.js
 delete mode 100644 packages/edit-site/src/classic-stylebook.scss

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index 1410a838cd575a..4c66579832051d 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -6,82 +6,37 @@
  */
 
 /**
- * Add a Styles submenu link for Classic themes. 
+ * Add a Styles submenu under the Appearance menu
+ * for Classic themes.
+ *
+ * @global array $submenu
  */
-function gutenberg_add_styles_link() {
+function gutenberg_add_styles_submenu_item() {
 	if ( ! wp_is_block_theme() ) {
-		 add_theme_page(
-			__( 'Styles', 'gutenberg' ),
+		global $submenu;
+
+		$styles_menu_item = array(
 			__( 'Styles', 'gutenberg' ),
 			'edit_theme_options',
-			'gutenberg-stylebook-static',
-			'gutenberg_stylebook_render',
-			3
+			'site-editor.php?path=/style-book',
 		);
+		// Insert the Styles submenu item at position 2.
+		array_splice( $submenu['themes.php'], 2, 0, array( $styles_menu_item ) );
 	}
 }
-add_action( 'admin_menu', 'gutenberg_add_styles_link' );
-
-if ( isset( $_GET['page'] ) && 'gutenberg-stylebook-static' === $_GET['page'] ) {
-	// Default to is-fullscreen-mode to avoid jumps in the UI.
-	add_filter(
-		'admin_body_class',
-		static function ( $classes ) {
-			return "$classes is-fullscreen-mode";
-		}
-	);
-}
+add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' );
 
 /**
- * Render the Styles page for Classic themes. 
+ * Filter the `wp_die_handler` to allow access to the Site Editor's Styles page
+ * for Classic themes. 
+ *
+ * @param callable $default_handler The default handler.
+ * @return callable The default handler or a custom handler.
  */
-
-function gutenberg_stylebook_render() {
-	$block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
-	$custom_settings      = array(
-		'siteUrl'        => site_url(),
-		'styles'         => get_block_editor_theme_styles(),
-		'supportsLayout' => wp_theme_has_theme_json(),
-	);
-
-	$editor_settings         = get_block_editor_settings( $custom_settings, $block_editor_context );
-	$active_global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
-	$active_theme            = get_stylesheet();
-
-	$preload_paths = array(
-		array( '/wp/v2/media', 'OPTIONS' ),
-		'/wp/v2/types?context=view',
-		'/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
-		'/wp/v2/global-styles/' . $active_global_styles_id,
-		'/wp/v2/global-styles/themes/' . $active_theme,
-	);
-	block_editor_rest_api_preload( $preload_paths, $block_editor_context );
-
-	// Preload server-registered block schemas.
-	wp_add_inline_script(
-		'wp-blocks',
-		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
-	);
-
-	/** This action is documented in wp-admin/edit-form-blocks.php */
-	do_action( 'enqueue_block_editor_assets' );
-	wp_register_style(
-		'wp-gutenberg-stylebook',
-		gutenberg_url( 'build/edit-site/classic-stylebook.css', __FILE__ ),
-		array( 'wp-components', 'wp-commands', 'wp-edit-site' )
-	);
-	wp_enqueue_style( 'wp-gutenberg-stylebook' );
-	wp_add_inline_script(
-		'wp-edit-site',
-		sprintf(
-			'wp.domReady( function() {
-				wp.editSite.initializeClassicStylebook( "gutenberg-stylebook", %s );
-			} );',
-			wp_json_encode( $editor_settings )
-		)
-	);
-	wp_enqueue_script( 'wp-edit-site' );
-	wp_enqueue_media();
-
-	echo '<div id="gutenberg-stylebook" class="edit-site"></div>';
-}
\ No newline at end of file
+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'] ) ) {
+		return '__return_false';
+	}
+	return $default_handler;
+}
+add_filter( 'wp_die_handler', 'gutenberg_styles_wp_die_handler' );
diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js
deleted file mode 100644
index 81f8ada3404fab..00000000000000
--- a/packages/edit-site/src/classic-stylebook.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import {
-	registerCoreBlocks,
-	__experimentalGetCoreBlocks,
-	__experimentalRegisterExperimentalCoreBlocks,
-} from '@wordpress/block-library';
-import { dispatch } from '@wordpress/data';
-import { createRoot, StrictMode } from '@wordpress/element';
-import {
-	registerLegacyWidgetBlock,
-	registerWidgetGroupBlock,
-} from '@wordpress/widgets';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import './hooks';
-import App from './components/app';
-
-/**
- * Initializes the classic stylebook.
- * @param {string} id       ID of the root element to render the screen in.
- * @param {Object} settings Editor settings.
- */
-export function initializeClassicStylebook( id, settings ) {
-	if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
-		return;
-	}
-	const target = document.getElementById( id );
-	const root = createRoot( target );
-
-	dispatch( blocksStore ).reapplyBlockTypeFilters();
-	const coreBlocks = __experimentalGetCoreBlocks().filter(
-		( { name } ) => name !== 'core/freeform'
-	);
-	registerCoreBlocks( coreBlocks );
-	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
-	registerLegacyWidgetBlock( { inserter: false } );
-	registerWidgetGroupBlock( { inserter: false } );
-	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-		__experimentalRegisterExperimentalCoreBlocks( {
-			enableFSEBlocks: true,
-		} );
-	}
-
-	dispatch( blockEditorStore ).updateSettings( settings );
-
-	root.render(
-		<StrictMode>
-			<App />
-		</StrictMode>
-	);
-
-	return root;
-}
diff --git a/packages/edit-site/src/classic-stylebook.scss b/packages/edit-site/src/classic-stylebook.scss
deleted file mode 100644
index 793f210344b7bc..00000000000000
--- a/packages/edit-site/src/classic-stylebook.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@include wordpress-admin-schemes();
-
-#wpadminbar,
-#adminmenumain {
-	display: none;
-}
-#wpcontent {
-	margin-left: 0;
-}
-body.js #wpbody {
-	padding-top: 0;
-}
-body {
-	@include wp-admin-reset("#gutenberg-stylebook");
-}
-
-.edit-site-style-book__iframe {
-	display: block;
-	height: 100%;
-	width: 100%;
-}
diff --git a/packages/edit-site/src/components/site-editor-routes/static-stylebook.js b/packages/edit-site/src/components/site-editor-routes/static-stylebook.js
index 9bb808a668f5f8..d155b610d22240 100644
--- a/packages/edit-site/src/components/site-editor-routes/static-stylebook.js
+++ b/packages/edit-site/src/components/site-editor-routes/static-stylebook.js
@@ -13,8 +13,8 @@ export const staticStylebookRoute = {
 	name: 'static-stylebook',
 	match: ( params ) => {
 		return (
-			params.page &&
-			params.page.startsWith( 'gutenberg-stylebook-static' ) &&
+			params.path &&
+			params.path.startsWith( '/style-book' ) &&
 			params.canvas !== 'edit'
 		);
 	},
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 880909a1b40b53..91cb47a0f221b2 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -23,7 +23,7 @@ import {
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, dispatch } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
 import {
 	useMemo,
@@ -46,6 +46,7 @@ import {
 	getTopLevelStyleBookCategories,
 } from './categories';
 import { getExamples } from './examples';
+import { store as siteEditorStore } from '../../store';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -358,6 +359,13 @@ export const StyleBookPreview = ( {
 	isSelected,
 	onSelect,
 } ) => {
+	const siteEditorSettings = useSelect(
+		( select ) => select( siteEditorStore ).getSettings(),
+		[]
+	);
+	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
+	dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
+
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const { colors, gradients } = useMultipleOriginColorsAndGradients();
 	// Exclude the default colors and gradients.
@@ -383,22 +391,18 @@ export const StyleBookPreview = ( {
 		return {};
 	}, [ baseConfig, userConfig ] );
 
-	const originalSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
 	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
 
 	const settings = useMemo(
 		() => ( {
-			...originalSettings,
+			...siteEditorSettings,
 			styles:
 				! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
 					? globalStyles
-					: originalSettings.styles,
+					: siteEditorSettings.styles,
 			isPreviewMode: true,
 		} ),
-		[ globalStyles, originalSettings, userConfig ]
+		[ globalStyles, siteEditorSettings, userConfig ]
 	);
 
 	return (
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index 773b4f10f581bb..42ffca2af1ed1d 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -12,6 +12,10 @@
 }
 
 .edit-site-style-book__iframe {
+	display: block;
+	height: 100%;
+	width: 100%;
+
 	&.is-button {
 		border-radius: $radius-large;
 	}
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 85cfc99029add1..b96ce5cb67f5e1 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -112,6 +112,3 @@ export * from './deprecated';
 // Temporary: While the posts dashboard is being iterated on
 // it's being built in the same package as the site editor.
 export { initializePostsDashboard } from './posts';
-
-// Temp classic stylebook export similar to above posts dashboard.
-export { initializeClassicStylebook } from './classic-stylebook';

From 2c93c4d87d8e80858c5a15e557c204433637b8d3 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 25 Nov 2024 16:37:18 +1100
Subject: [PATCH 17/37] remove whitespace

---
 lib/experimental/stylebook/classic-screen.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index 4c66579832051d..d9b44408cf8777 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -28,7 +28,7 @@ function gutenberg_add_styles_submenu_item() {
 
 /**
  * Filter the `wp_die_handler` to allow access to the Site Editor's Styles page
- * for Classic themes. 
+ * for Classic themes.
  *
  * @param callable $default_handler The default handler.
  * @return callable The default handler or a custom handler.

From f811ec3c96763d6bce4160da294e687f3f5d2d0f Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 26 Nov 2024 11:22:21 +1100
Subject: [PATCH 18/37] Check existence of $submenu global

---
 lib/experimental/stylebook/classic-screen.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index d9b44408cf8777..274b2595e27dff 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -20,8 +20,10 @@ function gutenberg_add_styles_submenu_item() {
 			'edit_theme_options',
 			'site-editor.php?path=/style-book',
 		);
-		// Insert the Styles submenu item at position 2.
-		array_splice( $submenu['themes.php'], 2, 0, array( $styles_menu_item ) );
+		// 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 ) );
+		}
 	}
 }
 add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' );

From 7727bbd4ae2d566b00edb02a6d4eccacd1251a8c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 28 Nov 2024 14:36:43 +1100
Subject: [PATCH 19/37] Update to single entry point for Stylebook and Patterns

---
 lib/experimental/stylebook/classic-screen.php |  9 ++-
 .../src/components/home-view-preview/index.js | 21 ++++++
 .../sidebar-navigation-screen-main/index.js   | 75 +++++++++++--------
 .../index.js                                  |  7 --
 .../src/components/site-editor-routes/home.js |  6 +-
 .../site-editor-routes/static-stylebook.js    | 35 ---------
 6 files changed, 71 insertions(+), 82 deletions(-)
 create mode 100644 packages/edit-site/src/components/home-view-preview/index.js
 delete mode 100644 packages/edit-site/src/components/site-editor-routes/static-stylebook.js

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index 274b2595e27dff..2a90b27fbe7647 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/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;
diff --git a/packages/edit-site/src/components/home-view-preview/index.js b/packages/edit-site/src/components/home-view-preview/index.js
new file mode 100644
index 00000000000000..78a51bfac38696
--- /dev/null
+++ b/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 />;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index bd40a5ad540d4c..95ed8628fa5546 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/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,39 +18,47 @@ 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 className="edit-site-sidebar-navigation-screen-main">
-			<SidebarNavigationItem
-				uid="navigation-navigation-item"
-				to="/navigation"
-				withChevron
-				icon={ navigation }
-			>
-				{ __( 'Navigation' ) }
-			</SidebarNavigationItem>
-			<SidebarNavigationItemGlobalStyles
-				to="/styles"
-				uid="global-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>
+		<ItemGroup>
+			{ isBlockBasedTheme && (
+				<>
+					<SidebarNavigationItem
+						uid="navigation-navigation-item"
+						to="/navigation"
+						withChevron
+						icon={ navigation }
+					>
+						{ __( 'Navigation' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItemGlobalStyles
+						to="/styles"
+						uid="global-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"
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index d63389ad3be312..d978bf892d6ccf 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/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.'
diff --git a/packages/edit-site/src/components/site-editor-routes/home.js b/packages/edit-site/src/components/site-editor-routes/home.js
index 3b6230e6b6c38d..5cc0ba64f60f7e 100644
--- a/packages/edit-site/src/components/site-editor-routes/home.js
+++ b/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 />,
 	},
 };
diff --git a/packages/edit-site/src/components/site-editor-routes/static-stylebook.js b/packages/edit-site/src/components/site-editor-routes/static-stylebook.js
deleted file mode 100644
index d155b610d22240..00000000000000
--- a/packages/edit-site/src/components/site-editor-routes/static-stylebook.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { StyleBookPreview } from '../style-book';
-
-export const staticStylebookRoute = {
-	name: 'static-stylebook',
-	match: ( params ) => {
-		return (
-			params.path &&
-			params.path.startsWith( '/style-book' ) &&
-			params.canvas !== 'edit'
-		);
-	},
-	areas: {
-		sidebar: (
-			<SidebarNavigationScreen
-				title={ __( 'Styles' ) }
-				description={ __( 'Overview of styled blocks.' ) }
-				isRoot
-			/>
-		),
-		preview: <StyleBookPreview />,
-		mobile: <StyleBookPreview />,
-	},
-	widths: {
-		content: 380,
-	},
-};

From a59c4b341764ef85f876673763da8848408d63bd Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 2 Dec 2024 15:41:05 +1100
Subject: [PATCH 20/37] Remove wp_die handler as it's been added elsewhere

---
 lib/experimental/stylebook/classic-screen.php | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
index 2a90b27fbe7647..d0fbf336538992 100644
--- a/lib/experimental/stylebook/classic-screen.php
+++ b/lib/experimental/stylebook/classic-screen.php
@@ -28,18 +28,3 @@ function gutenberg_add_styles_submenu_item() {
 	}
 }
 add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' );
-
-/**
- * Filter the `wp_die_handler` to allow access to the Site Editor's Styles page
- * for Classic themes.
- *
- * @param callable $default_handler The default handler.
- * @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' ) ) {
-		return '__return_false';
-	}
-	return $default_handler;
-}
-add_filter( 'wp_die_handler', 'gutenberg_styles_wp_die_handler' );

From 46341c55abba1710bcc8afab62b54bc9760a551b Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 2 Dec 2024 16:03:42 +1100
Subject: [PATCH 21/37] Switch back mobile view

---
 packages/edit-site/src/components/site-editor-routes/home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/site-editor-routes/home.js b/packages/edit-site/src/components/site-editor-routes/home.js
index 5cc0ba64f60f7e..9e4b7feb4e53b7 100644
--- a/packages/edit-site/src/components/site-editor-routes/home.js
+++ b/packages/edit-site/src/components/site-editor-routes/home.js
@@ -10,6 +10,6 @@ export const homeRoute = {
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
 		preview: <HomeViewPreview />,
-		mobile: <HomeViewPreview />,
+		mobile: <SidebarNavigationScreenMain />,
 	},
 };

From 6f5bcac50421ae138fda22ae1e96affea30f4fa0 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 2 Dec 2024 17:11:05 +1100
Subject: [PATCH 22/37] Try showing the site preview instead of stylebook as
 Design entry point

---
 lib/compat/wordpress-6.8/site-editor.php      |  2 +-
 .../src/components/home-view-preview/index.js | 40 ++++++++++++++++---
 .../sidebar-navigation-screen-main/index.js   | 10 +++++
 .../components/site-editor-routes/index.js    |  2 +
 .../site-editor-routes/stylebook.js           | 15 +++++++
 5 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 packages/edit-site/src/components/site-editor-routes/stylebook.js

diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
index cde108830b1d2c..fd0412fcd13cf4 100644
--- a/lib/compat/wordpress-6.8/site-editor.php
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -116,7 +116,7 @@ function gutenberg_redirect_site_editor_deprecated_urls() {
  * @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['p'] ) ) {
+	if ( ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) ) {
 		return '__return_false';
 	}
 	return $default_handler;
diff --git a/packages/edit-site/src/components/home-view-preview/index.js b/packages/edit-site/src/components/home-view-preview/index.js
index 78a51bfac38696..d775ddb7911153 100644
--- a/packages/edit-site/src/components/home-view-preview/index.js
+++ b/packages/edit-site/src/components/home-view-preview/index.js
@@ -3,19 +3,47 @@
  */
 
 import { store as coreStore } from '@wordpress/core-data';
-import { select } from '@wordpress/data';
+import { useSelect } 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;
+	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
 
-	// If theme is block based, return the Editor, otherwise return the StyleBookPreview.
-	return isBlockBasedTheme ? <Editor /> : <StyleBookPreview />;
+		return {
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+			siteUrl: siteData?.home,
+		};
+	}, [] );
+
+	// If theme is block based, return the Editor, otherwise return the site preview.
+	return isBlockBasedTheme ? (
+		<Editor />
+	) : (
+		<iframe
+			src={ siteUrl }
+			title="front-end view"
+			style={ {
+				display: 'block',
+				width: '100%',
+				height: '100%',
+			} }
+			onLoad={ ( event ) => {
+				// Hide the admin bar in the front-end preview.
+				const document = event.target.contentDocument;
+				document.getElementById( 'wpadminbar' ).remove();
+				// Make links unclickable.
+				const links = document.getElementsByTagName( 'a' );
+				Array.from( links ).forEach( ( link ) => {
+					link.style.pointerEvents = 'none';
+				} );
+			} }
+		/>
+	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 95ed8628fa5546..6907e643d11d42 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -59,6 +59,16 @@ export function MainSidebarNavigationContent() {
 					</SidebarNavigationItem>
 				</>
 			) }
+			{ ! isBlockBasedTheme && (
+				<SidebarNavigationItem
+					uid="stylebook-navigation-item"
+					to="/stylebook"
+					withChevron
+					icon={ styles }
+				>
+					{ __( 'Styles' ) }
+				</SidebarNavigationItem>
+			) }
 			<SidebarNavigationItem
 				uid="patterns-navigation-item"
 				to="/pattern"
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 bac2fa302b5cf5..232cb640cff264 100644
--- a/packages/edit-site/src/components/site-editor-routes/index.js
+++ b/packages/edit-site/src/components/site-editor-routes/index.js
@@ -20,6 +20,7 @@ import { templatesRoute } from './templates';
 import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
+import { stylebookRoute } from './stylebook';
 
 const routes = [
 	pageItemRoute,
@@ -33,6 +34,7 @@ const routes = [
 	navigationRoute,
 	stylesRoute,
 	homeRoute,
+	stylebookRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {
diff --git a/packages/edit-site/src/components/site-editor-routes/stylebook.js b/packages/edit-site/src/components/site-editor-routes/stylebook.js
new file mode 100644
index 00000000000000..9faa337a15320d
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/stylebook.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import { StyleBookPreview } from '../style-book';
+
+export const stylebookRoute = {
+	name: 'stylebook',
+	path: '/stylebook',
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		preview: <StyleBookPreview />,
+		mobile: <StyleBookPreview />,
+	},
+};

From cd0d0653940f2129afacc2f97df10923bbecf228 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 5 Dec 2024 14:22:10 +1100
Subject: [PATCH 23/37] Update Styles section sidebar to go back to Design

---
 .../components/site-editor-routes/stylebook.js    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/site-editor-routes/stylebook.js b/packages/edit-site/src/components/site-editor-routes/stylebook.js
index 9faa337a15320d..8732ee45345f2b 100644
--- a/packages/edit-site/src/components/site-editor-routes/stylebook.js
+++ b/packages/edit-site/src/components/site-editor-routes/stylebook.js
@@ -1,14 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { StyleBookPreview } from '../style-book';
 
 export const stylebookRoute = {
 	name: 'stylebook',
 	path: '/stylebook',
 	areas: {
-		sidebar: <SidebarNavigationScreenMain />,
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				backPath="/"
+				description={ __( 'Theme style book.' ) }
+			/>
+		),
 		preview: <StyleBookPreview />,
 		mobile: <StyleBookPreview />,
 	},

From 157108caa832ca1494ad3c2e744d68d38454a99f Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 5 Dec 2024 14:30:22 +1100
Subject: [PATCH 24/37] Remove top margin in preview

---
 packages/edit-site/src/components/home-view-preview/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/edit-site/src/components/home-view-preview/index.js b/packages/edit-site/src/components/home-view-preview/index.js
index d775ddb7911153..f0c6c72935ddee 100644
--- a/packages/edit-site/src/components/home-view-preview/index.js
+++ b/packages/edit-site/src/components/home-view-preview/index.js
@@ -38,6 +38,9 @@ export function HomeViewPreview() {
 				// Hide the admin bar in the front-end preview.
 				const document = event.target.contentDocument;
 				document.getElementById( 'wpadminbar' ).remove();
+				document
+					.getElementsByTagName( 'html' )[ 0 ]
+					.setAttribute( 'style', 'margin-top: 0 !important;' );
 				// Make links unclickable.
 				const links = document.getElementsByTagName( 'a' );
 				Array.from( links ).forEach( ( link ) => {

From f230ba1cbea73acaf83e66011c18b579ff2cdcfd Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 6 Dec 2024 14:59:06 +1100
Subject: [PATCH 25/37] Update strings

---
 .../sidebar-navigation-screen-main/index.js   | 28 +++++++++++++------
 .../site-editor-routes/stylebook.js           |  4 ++-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 6907e643d11d42..3493546d56171a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -17,11 +17,7 @@ import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-export function MainSidebarNavigationContent() {
-	const isBlockBasedTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-		[]
-	);
+export function MainSidebarNavigationContent( { isBlockBasedTheme } ) {
 	return (
 		<ItemGroup>
 			{ isBlockBasedTheme && (
@@ -82,6 +78,10 @@ export function MainSidebarNavigationContent() {
 }
 
 export default function SidebarNavigationScreenMain() {
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -95,10 +95,20 @@ export default function SidebarNavigationScreenMain() {
 		<SidebarNavigationScreen
 			isRoot
 			title={ __( 'Design' ) }
-			description={ __(
-				'Customize the appearance of your website using the block editor.'
-			) }
-			content={ <MainSidebarNavigationContent /> }
+			description={
+				isBlockBasedTheme
+					? __(
+							'Customize the appearance of your website using the block editor.'
+					  )
+					: __(
+							'Explore block styles and patterns to refine your site'
+					  )
+			}
+			content={
+				<MainSidebarNavigationContent
+					isBlockBasedTheme={ isBlockBasedTheme }
+				/>
+			}
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/site-editor-routes/stylebook.js b/packages/edit-site/src/components/site-editor-routes/stylebook.js
index 8732ee45345f2b..a30c4a7c04945e 100644
--- a/packages/edit-site/src/components/site-editor-routes/stylebook.js
+++ b/packages/edit-site/src/components/site-editor-routes/stylebook.js
@@ -17,7 +17,9 @@ export const stylebookRoute = {
 			<SidebarNavigationScreen
 				title={ __( 'Styles' ) }
 				backPath="/"
-				description={ __( 'Theme style book.' ) }
+				description={ __(
+					`Preview your website's visual identity: colors, typography, and blocks.`
+				) }
 			/>
 		),
 		preview: <StyleBookPreview />,

From 9bb739bef86ed4a14015482bf77d06308c9f7065 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 6 Dec 2024 15:12:21 +1100
Subject: [PATCH 26/37] only allow users with appropriate permissions

---
 lib/compat/wordpress-6.8/site-editor.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
index fd0412fcd13cf4..25ad6b6f68d926 100644
--- a/lib/compat/wordpress-6.8/site-editor.php
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -116,7 +116,7 @@ function gutenberg_redirect_site_editor_deprecated_urls() {
  * @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' ) ) {
+	if ( ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) && current_user_can( 'edit_theme_options' ) ) {
 		return '__return_false';
 	}
 	return $default_handler;

From 1e591b4484165f8486bc7ac79315cf50041440eb Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 6 Dec 2024 15:16:22 +1100
Subject: [PATCH 27/37] Move styles submenu item into compat folder

---
 lib/compat/wordpress-6.8/site-editor.php      | 24 +++++++++++++++
 lib/experimental/stylebook/classic-screen.php | 30 -------------------
 2 files changed, 24 insertions(+), 30 deletions(-)
 delete mode 100644 lib/experimental/stylebook/classic-screen.php

diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
index 25ad6b6f68d926..86690a6413e1c1 100644
--- a/lib/compat/wordpress-6.8/site-editor.php
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -122,3 +122,27 @@ function gutenberg_styles_wp_die_handler( $default_handler ) {
 	return $default_handler;
 }
 add_filter( 'wp_die_handler', 'gutenberg_styles_wp_die_handler' );
+
+/**
+ * Add a Styles submenu under the Appearance menu
+ * for Classic themes.
+ *
+ * @global array $submenu
+ */
+function gutenberg_add_styles_submenu_item() {
+	if ( ! wp_is_block_theme() ) {
+		global $submenu;
+
+		$styles_menu_item = array(
+			__( 'Design', 'gutenberg' ),
+			'edit_theme_options',
+			'site-editor.php',
+		);
+		// If $submenu exists, insert the Styles submenu item at position 2.
+		if ( $submenu && isset( $submenu['themes.php'] ) ) {
+			// This might not work as expected if the submenu has already been modified.
+			array_splice( $submenu['themes.php'], 1, 1, array( $styles_menu_item ) );
+		}
+	}
+}
+add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' );
diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php
deleted file mode 100644
index d0fbf336538992..00000000000000
--- a/lib/experimental/stylebook/classic-screen.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php
-/**
- * Set up a screen to show stylebook for classic themes.
- *
- * @package gutenberg
- */
-
-/**
- * Add a Styles submenu under the Appearance menu
- * for Classic themes.
- *
- * @global array $submenu
- */
-function gutenberg_add_styles_submenu_item() {
-	if ( ! wp_is_block_theme() ) {
-		global $submenu;
-
-		$styles_menu_item = array(
-			__( 'Design', 'gutenberg' ),
-			'edit_theme_options',
-			'site-editor.php',
-		);
-		// If $submenu exists, insert the Styles submenu item at position 2.
-		if ( $submenu && isset( $submenu['themes.php'] ) ) {
-			// This might not work as expected if the submenu has already been modified.
-			array_splice( $submenu['themes.php'], 1, 1, array( $styles_menu_item ) );
-		}
-	}
-}
-add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' );

From 35a38c89c7f9ba8ec6a35aaf1536bbefde0a7aa7 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 6 Dec 2024 15:17:03 +1100
Subject: [PATCH 28/37] remove require

---
 lib/load.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/load.php b/lib/load.php
index 28de3f26cdd704..26af78f3173c53 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -110,7 +110,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/synchronization.php';
 require __DIR__ . '/experimental/script-modules.php';
 require __DIR__ . '/experimental/posts/load.php';
-require __DIR__ . '/experimental/stylebook/classic-screen.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 	require __DIR__ . '/experimental/disable-tinymce.php';

From 70bd056b22bbb1497f67630e5789d53881e82927 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 6 Dec 2024 15:33:53 +1100
Subject: [PATCH 29/37] Make preview very non-interactive

---
 .../src/components/home-view-preview/index.js    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/home-view-preview/index.js b/packages/edit-site/src/components/home-view-preview/index.js
index f0c6c72935ddee..76a7c858df5337 100644
--- a/packages/edit-site/src/components/home-view-preview/index.js
+++ b/packages/edit-site/src/components/home-view-preview/index.js
@@ -4,6 +4,7 @@
 
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,11 +29,12 @@ export function HomeViewPreview() {
 	) : (
 		<iframe
 			src={ siteUrl }
-			title="front-end view"
+			title={ __( 'Site Preview' ) }
 			style={ {
 				display: 'block',
 				width: '100%',
 				height: '100%',
+				backgroundColor: '#fff',
 			} }
 			onLoad={ ( event ) => {
 				// Hide the admin bar in the front-end preview.
@@ -41,10 +43,14 @@ export function HomeViewPreview() {
 				document
 					.getElementsByTagName( 'html' )[ 0 ]
 					.setAttribute( 'style', 'margin-top: 0 !important;' );
-				// Make links unclickable.
-				const links = document.getElementsByTagName( 'a' );
-				Array.from( links ).forEach( ( link ) => {
-					link.style.pointerEvents = 'none';
+				// Make interactive elements unclickable.
+				const interactiveElements = document.querySelectorAll(
+					'a, button, input, details, audio'
+				);
+				interactiveElements.forEach( ( element ) => {
+					element.style.pointerEvents = 'none';
+					element.tabIndex = -1;
+					element.setAttribute( 'aria-hidden', 'true' );
 				} );
 			} }
 		/>

From a122f2d21e7c4ef107430eb3cb083aa15ccac2ac Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 6 Dec 2024 16:22:15 +1100
Subject: [PATCH 30/37] Make duotones work if declared.

---
 .../src/components/style-book/index.js         | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 91cb47a0f221b2..c618df794a408e 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -368,6 +368,22 @@ export const StyleBookPreview = ( {
 
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const { colors, gradients } = useMultipleOriginColorsAndGradients();
+
+	const [ duotones ] = useSettings( 'color.duotone.theme' );
+
+	const themeDuotone = duotones?.length
+		? [
+				{
+					name: _x(
+						'Theme',
+						'Indicates these duotone filters come from the theme.'
+					),
+					slug: 'theme',
+					duotones,
+				},
+		  ]
+		: null;
+
 	// Exclude the default colors and gradients.
 	const themeColors = colors?.filter( ( color ) => color.slug === 'theme' );
 	const themeGradients = gradients?.filter(
@@ -377,7 +393,7 @@ export const StyleBookPreview = ( {
 	const examples = getExamples( {
 		colors: themeColors,
 		gradients: themeGradients,
-		duotones: [], // Classic themes don't support duotone palettes.
+		duotones: themeDuotone || [],
 	} );
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 

From fa9f97e9d893a73ef7210ee993c04ed1f64dbc94 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 6 Dec 2024 16:33:49 +1100
Subject: [PATCH 31/37] Only show Design submenu item if theme supports editor
 styles

---
 lib/compat/wordpress-6.8/site-editor.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
index 86690a6413e1c1..6d7e8cc49e6522 100644
--- a/lib/compat/wordpress-6.8/site-editor.php
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -130,7 +130,7 @@ function gutenberg_styles_wp_die_handler( $default_handler ) {
  * @global array $submenu
  */
 function gutenberg_add_styles_submenu_item() {
-	if ( ! wp_is_block_theme() ) {
+	if ( ! wp_is_block_theme() && current_theme_supports( 'editor-styles' ) ) {
 		global $submenu;
 
 		$styles_menu_item = array(

From 0a50d01d9d75b8c04ec2aa5e687241532a43b51c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 9 Dec 2024 14:29:36 +1100
Subject: [PATCH 32/37] Support theme.json in the absence of editor styles.

---
 lib/compat/wordpress-6.8/site-editor.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
index 6d7e8cc49e6522..53d04c2e543f48 100644
--- a/lib/compat/wordpress-6.8/site-editor.php
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -130,7 +130,7 @@ function gutenberg_styles_wp_die_handler( $default_handler ) {
  * @global array $submenu
  */
 function gutenberg_add_styles_submenu_item() {
-	if ( ! wp_is_block_theme() && current_theme_supports( 'editor-styles' ) ) {
+	if ( ! wp_is_block_theme() && ( current_theme_supports( 'editor-styles' ) || wp_theme_has_theme_json() ) ) {
 		global $submenu;
 
 		$styles_menu_item = array(

From 78d25eb022f235d3a2d937a9065a1e20b3a4b142 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:07:13 +1100
Subject: [PATCH 33/37] useMultiOriginPalettes instead of complicated logic

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
---
 .../src/components/style-book/index.js        | 30 ++-----------------
 1 file changed, 2 insertions(+), 28 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index c618df794a408e..da69ed734166ed 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -367,34 +367,8 @@ export const StyleBookPreview = ( {
 	dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
 
 	const [ resizeObserver, sizes ] = useResizeObserver();
-	const { colors, gradients } = useMultipleOriginColorsAndGradients();
-
-	const [ duotones ] = useSettings( 'color.duotone.theme' );
-
-	const themeDuotone = duotones?.length
-		? [
-				{
-					name: _x(
-						'Theme',
-						'Indicates these duotone filters come from the theme.'
-					),
-					slug: 'theme',
-					duotones,
-				},
-		  ]
-		: null;
-
-	// Exclude the default colors and gradients.
-	const themeColors = colors?.filter( ( color ) => color.slug === 'theme' );
-	const themeGradients = gradients?.filter(
-		( gradient ) => gradient.slug === 'theme'
-	);
-
-	const examples = getExamples( {
-		colors: themeColors,
-		gradients: themeGradients,
-		duotones: themeDuotone || [],
-	} );
+	const colors = useMultiOriginPalettes();
+	const examples = getExamples( colors );
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );

From bc91ba9d0cbc4b63b1fc02df7f99481d47f02246 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 9 Dec 2024 16:51:37 +1100
Subject: [PATCH 34/37] Try fixing routes

---
 .../components/{home-view-preview => maybe-editor}/index.js | 4 ++--
 .../edit-site/src/components/site-editor-routes/home.js     | 4 ++--
 .../src/components/site-editor-routes/template-item.js      | 6 +++---
 .../src/components/site-editor-routes/template-part-item.js | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename packages/edit-site/src/components/{home-view-preview => maybe-editor}/index.js (93%)

diff --git a/packages/edit-site/src/components/home-view-preview/index.js b/packages/edit-site/src/components/maybe-editor/index.js
similarity index 93%
rename from packages/edit-site/src/components/home-view-preview/index.js
rename to packages/edit-site/src/components/maybe-editor/index.js
index 76a7c858df5337..bee1c427c87b47 100644
--- a/packages/edit-site/src/components/home-view-preview/index.js
+++ b/packages/edit-site/src/components/maybe-editor/index.js
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 
 import Editor from '../editor';
 
-export function HomeViewPreview() {
+export function MaybeEditor( { showEditor = true } ) {
 	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
 		const { getEntityRecord, getCurrentTheme } = select( coreStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
@@ -24,7 +24,7 @@ export function HomeViewPreview() {
 	}, [] );
 
 	// If theme is block based, return the Editor, otherwise return the site preview.
-	return isBlockBasedTheme ? (
+	return isBlockBasedTheme || showEditor ? (
 		<Editor />
 	) : (
 		<iframe
diff --git a/packages/edit-site/src/components/site-editor-routes/home.js b/packages/edit-site/src/components/site-editor-routes/home.js
index 9e4b7feb4e53b7..1c32000acb177a 100644
--- a/packages/edit-site/src/components/site-editor-routes/home.js
+++ b/packages/edit-site/src/components/site-editor-routes/home.js
@@ -2,14 +2,14 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import { HomeViewPreview } from '../home-view-preview';
+import { MaybeEditor } from '../maybe-editor';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <HomeViewPreview />,
+		preview: <MaybeEditor showEditor={ false } />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };
diff --git a/packages/edit-site/src/components/site-editor-routes/template-item.js b/packages/edit-site/src/components/site-editor-routes/template-item.js
index 8ad3ab2b699904..22726f6a5ac430 100644
--- a/packages/edit-site/src/components/site-editor-routes/template-item.js
+++ b/packages/edit-site/src/components/site-editor-routes/template-item.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
+import { MaybeEditor } from '../maybe-editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
@@ -9,7 +9,7 @@ export const templateItemRoute = {
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		mobile: <MaybeEditor />,
+		preview: <MaybeEditor />,
 	},
 };
diff --git a/packages/edit-site/src/components/site-editor-routes/template-part-item.js b/packages/edit-site/src/components/site-editor-routes/template-part-item.js
index a2b21cf23f808d..e98af337b1c669 100644
--- a/packages/edit-site/src/components/site-editor-routes/template-part-item.js
+++ b/packages/edit-site/src/components/site-editor-routes/template-part-item.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
+import { MaybeEditor } from '../maybe-editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
@@ -9,7 +9,7 @@ export const templatePartItemRoute = {
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		mobile: <MaybeEditor />,
+		preview: <MaybeEditor />,
 	},
 };

From 344964d6b7c7ca7fb52b8006387c6040348e1696 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 10 Dec 2024 12:13:00 +1100
Subject: [PATCH 35/37] Make sure editor canvas button exists

---
 test/e2e/specs/site-editor/navigation.spec.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
index 1b92ef2e850e67..18eb6c9904b449 100644
--- a/test/e2e/specs/site-editor/navigation.spec.js
+++ b/test/e2e/specs/site-editor/navigation.spec.js
@@ -45,13 +45,6 @@ test.describe( 'Site editor navigation', () => {
 			page.getByRole( 'button', { name: 'Pages' } )
 		).toBeFocused();
 
-		// Navigate to the Saved button first, as it precedes the editor iframe.
-		await editorNavigationUtils.tabToLabel( 'Saved' );
-		const savedButton = page.getByRole( 'button', {
-			name: 'Saved',
-		} );
-		await expect( savedButton ).toBeFocused();
-
 		// Get the iframe when it has a role=button and Edit label.
 		const editorCanvasRegion = page.getByRole( 'region', {
 			name: 'Editor content',
@@ -60,6 +53,15 @@ test.describe( 'Site editor navigation', () => {
 			name: 'Edit',
 		} );
 
+		await expect( editorCanvasButton ).toBeVisible();
+
+		// Navigate to the Saved button first, as it precedes the editor iframe.
+		await editorNavigationUtils.tabToLabel( 'Saved' );
+		const savedButton = page.getByRole( 'button', {
+			name: 'Saved',
+		} );
+		await expect( savedButton ).toBeFocused();
+
 		// Test that there are no tab stops between the Saved button and the
 		// focusable iframe with role=button.
 		await pageUtils.pressKeys( 'Tab' );

From 2dbc13f610545432b3498224365bbada66b32771 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 10 Dec 2024 13:26:07 +1100
Subject: [PATCH 36/37] Default value for prop

---
 .../src/components/sidebar-navigation-screen-main/index.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 3493546d56171a..e205de25636975 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -17,7 +17,7 @@ import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-export function MainSidebarNavigationContent( { isBlockBasedTheme } ) {
+export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
 		<ItemGroup>
 			{ isBlockBasedTheme && (

From 859de22b5d9e01dd282f48f4366b86bb6ac34cbe Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 10 Dec 2024 14:29:22 +1100
Subject: [PATCH 37/37] Add a test for classic style book

---
 test/e2e/specs/site-editor/style-book.spec.js | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 38030892826ec7..350b1925385063 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -189,6 +189,30 @@ test.describe( 'Style Book', () => {
 	} );
 } );
 
+test.describe( 'Style Book for classic themes', () => {
+	test( 'Should show Style Book for a theme that supports it', async ( {
+		page,
+		admin,
+		requestUtils,
+	} ) => {
+		// Make sure a classic theme is active.
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		// Go to site editor.
+		await admin.visitAdminPage( 'site-editor.php' );
+
+		// Open the Style Book.
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+
+		// Block examples should be visible.
+		const blockExamples = page
+			.frameLocator( '[name="style-book-canvas"]' )
+			.getByRole( 'grid', {
+				name: 'Examples of blocks',
+			} );
+		await expect( blockExamples ).toBeVisible();
+	} );
+} );
+
 class StyleBook {
 	constructor( { page } ) {
 		this.page = page;