Use site editor URL

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>';
-}
+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' );

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'
 		);
 	},

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,
@@ -344,6 +345,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.
@@ -369,22 +377,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 (

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

packages/edit-site/src/index.js

@@ -124,6 +124,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';