Add stylebook screen for classic themes

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/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' );

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

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

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

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

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

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

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

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

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 />,
+	},
+};

packages/edit-site/src/components/site-editor-routes/template-item.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import Editor from '../editor';
+import { MaybeEditor } from '../maybe-editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
 	name: 'template-item',
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		mobile: <MaybeEditor />,
+		preview: <MaybeEditor />,
 	},
 };