From 3c5ae5665ddc731cebb5096ac9e211b0dfc55894 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Tue, 10 Dec 2024 16:01:26 +1100
Subject: [PATCH] Add stylebook screen for classic themes (#66851)

Unlinked contributors: acketon.

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: carlomanf <manfcarlo@git.wordpress.org>
Co-authored-by: daveloodts <davelo@git.wordpress.org>
Co-authored-by: cbirdsong <cbirdsong@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: mrwweb <mrwweb@git.wordpress.org>
Co-authored-by: ltrihan <ltrihan@git.wordpress.org>
Co-authored-by: masteradhoc <masteradhoc@git.wordpress.org>
---
 backport-changelog/6.8/7865.md                |   3 +
 lib/block-editor-settings.php                 |  13 ++
 lib/compat/wordpress-6.8/site-editor.php      |  26 ++-
 .../src/components/maybe-editor/index.js      |  58 +++++++
 .../src/components/resizable-frame/index.js   |  11 +-
 .../sidebar-navigation-screen-main/index.js   | 105 +++++++-----
 .../index.js                                  |   7 -
 .../src/components/site-editor-routes/home.js |   4 +-
 .../components/site-editor-routes/index.js    |   2 +
 .../site-editor-routes/stylebook.js           |  28 ++++
 .../site-editor-routes/template-item.js       |   6 +-
 .../site-editor-routes/template-part-item.js  |   6 +-
 .../src/components/style-book/examples.tsx    |   4 +-
 .../src/components/style-book/index.js        | 155 ++++++++++++++----
 .../src/components/style-book/style.scss      |   4 +
 test/e2e/specs/site-editor/navigation.spec.js |  16 +-
 test/e2e/specs/site-editor/style-book.spec.js |  24 +++
 17 files changed, 375 insertions(+), 97 deletions(-)
 create mode 100644 backport-changelog/6.8/7865.md
 create mode 100644 packages/edit-site/src/components/maybe-editor/index.js
 create mode 100644 packages/edit-site/src/components/site-editor-routes/stylebook.js

diff --git a/backport-changelog/6.8/7865.md b/backport-changelog/6.8/7865.md
new file mode 100644
index 0000000000000..f7b23c944dc32
--- /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
diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php
index defd7cd391b16..6448eb2e52485 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() );
diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
index cde108830b1d2..53d04c2e543f4 100644
--- a/lib/compat/wordpress-6.8/site-editor.php
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -116,9 +116,33 @@ 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' ) && current_user_can( 'edit_theme_options' ) ) {
 		return '__return_false';
 	}
 	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() && ( current_theme_supports( 'editor-styles' ) || wp_theme_has_theme_json() ) ) {
+		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/packages/edit-site/src/components/maybe-editor/index.js b/packages/edit-site/src/components/maybe-editor/index.js
new file mode 100644
index 0000000000000..bee1c427c87b4
--- /dev/null
+++ b/packages/edit-site/src/components/maybe-editor/index.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import Editor from '../editor';
+
+export function MaybeEditor( { showEditor = true } ) {
+	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+
+		return {
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+			siteUrl: siteData?.home,
+		};
+	}, [] );
+
+	// If theme is block based, return the Editor, otherwise return the site preview.
+	return isBlockBasedTheme || showEditor ? (
+		<Editor />
+	) : (
+		<iframe
+			src={ siteUrl }
+			title={ __( 'Site Preview' ) }
+			style={ {
+				display: 'block',
+				width: '100%',
+				height: '100%',
+				backgroundColor: '#fff',
+			} }
+			onLoad={ ( event ) => {
+				// 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 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' );
+				} );
+			} }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
index 99f650971112f..f98b0c440c6d8 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 );
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 bd40a5ad540d4..e205de2563697 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
@@ -16,40 +17,54 @@ import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-export function MainSidebarNavigationContent() {
+export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	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>
+				</>
+			) }
+			{ ! isBlockBasedTheme && (
+				<SidebarNavigationItem
+					uid="stylebook-navigation-item"
+					to="/stylebook"
+					withChevron
+					icon={ styles }
+				>
+					{ __( 'Styles' ) }
+				</SidebarNavigationItem>
+			) }
 			<SidebarNavigationItem
 				uid="patterns-navigation-item"
 				to="/pattern"
@@ -63,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 )
 	);
@@ -76,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/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index d63389ad3be31..d978bf892d6cc 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 3b6230e6b6c38..1c32000acb177 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 { MaybeEditor } from '../maybe-editor';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <Editor />,
+		preview: <MaybeEditor showEditor={ false } />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };
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 bac2fa302b5cf..232cb640cff26 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 0000000000000..a30c4a7c04945
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/stylebook.js
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { StyleBookPreview } from '../style-book';
+
+export const stylebookRoute = {
+	name: 'stylebook',
+	path: '/stylebook',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Styles' ) }
+				backPath="/"
+				description={ __(
+					`Preview your website's visual identity: colors, typography, and blocks.`
+				) }
+			/>
+		),
+		preview: <StyleBookPreview />,
+		mobile: <StyleBookPreview />,
+	},
+};
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 8ad3ab2b69990..22726f6a5ac43 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 a2b21cf23f808..e98af337b1c66 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 />,
 	},
 };
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index b585d556341f8..81ae2d8089fa5 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 f0992381943aa..da69ed734166e 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -17,12 +17,13 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	useSettings,
+	BlockEditorProvider,
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 	__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,
@@ -45,6 +46,7 @@ import {
 	getTopLevelStyleBookCategories,
 } from './categories';
 import { getExamples } from './examples';
+import { store as siteEditorStore } from '../../store';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -191,6 +193,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 +244,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 );
@@ -330,7 +343,76 @@ function StyleBook( {
 	);
 }
 
-const StyleBookBody = ( {
+/**
+ * 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 {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 = {},
+	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 = useMultiOriginPalettes();
+	const examples = getExamples( colors );
+	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 [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const settings = useMemo(
+		() => ( {
+			...siteEditorSettings,
+			styles:
+				! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+					? globalStyles
+					: siteEditorSettings.styles,
+			isPreviewMode: true,
+		} ),
+		[ globalStyles, siteEditorSettings, userConfig ]
+	);
+
+	return (
+		<div className="edit-site-style-book">
+			{ resizeObserver }
+			<BlockEditorProvider settings={ settings }>
+				<StyleBookBody
+					examples={ examplesForSinglePageUse }
+					settings={ settings }
+					goTo={ goTo }
+					sizes={ sizes }
+					isSelected={ isSelected }
+					onSelect={ onSelect }
+				/>
+			</BlockEditorProvider>
+		</div>
+	);
+};
+
+export const StyleBookBody = ( {
 	category,
 	examples,
 	isSelected,
@@ -457,7 +539,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 &&
@@ -494,9 +580,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 }
 			/>
 		) )
 	);
@@ -524,12 +608,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">
@@ -540,13 +625,17 @@ 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="button"
+					role={ !! onClick ? 'button' : null }
 					onClick={ onClick }
 					{ ...disabledProps }
 				>
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index 773b4f10f581b..42ffca2af1ed1 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/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
index 1b92ef2e850e6..18eb6c9904b44 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' );
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 38030892826ec..350b192538506 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;