Boilerplate for classic stylebook

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

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

lib/experimental/stylebook/classic-screen.php

@@ -0,0 +1,42 @@
+<?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(
+			__( 'Styles', 'gutenberg' ),
+			'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 ) );
+	}
+}
+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' ) && 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' );

lib/load.php

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

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
@@ -105,6 +107,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
@@ -152,7 +158,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 );

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

@@ -16,6 +16,7 @@ import { navigationEditRoute } from './navigation-edit';
 import { navigationItemEditRoute } from './navigation-item-edit';
 import { navigationItemViewRoute } from './navigation-item-view';
 import { stylesViewRoute } from './styles-view';
+import { staticStylebookRoute } from './static-stylebook';
 import { patternsEditRoute } from './patterns-edit';
 import { patternsViewRoute } from './patterns-view';
 import { templatesEditRoute } from './templates-edit';
@@ -39,6 +40,7 @@ const routes = [
 	patternsViewRoute,
 	patternsEditRoute,
 	stylesViewRoute,
+	staticStylebookRoute,
 	navigationItemViewRoute,
 	navigationItemEditRoute,
 	navigationViewRoute,

packages/edit-site/src/components/site-editor-routes/static-stylebook.js

@@ -0,0 +1,35 @@
+/**
+ * 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,
+	},
+};

packages/edit-site/src/components/style-book/examples.tsx

@@ -73,8 +73,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'
 	);