Make it possible to opt-out of the classic theme Stylebook

backport-changelog/6.8/8320.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/8320
+
+* https://github.com/WordPress/gutenberg/pull/69043

lib/compat/wordpress-6.8/site-editor.php

@@ -136,18 +136,49 @@ function gutenberg_styles_wp_die_handler( $default_handler ) {
 }
 add_filter( 'wp_die_handler', 'gutenberg_styles_wp_die_handler' );
 
+/**
+ * Registers the stylebook theme support.
+ * Ensures that the stylebook theme support is available in the editors by setting show_in_rest to true.
+ * Backports into wp-includes\theme.php create_initial_theme_features().
+ */
+add_action(
+	'setup_theme',
+	function () {
+		register_theme_feature(
+			'stylebook',
+			array(
+				'description'  => __( 'Whether a classic theme uses the Stylebook.' ),
+				'show_in_rest' => true,
+			)
+		);
+	},
+	0
+);
+
+/**
+ * Enables the stylebook theme support.
+ * Backports into wp-includes\theme.php _add_default_theme_supports().
+ */
+add_action(
+	'after_setup_theme',
+	function () {
+		add_theme_support( 'stylebook' );
+	},
+	1
+);
+
 /**
  * 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() ) ) {
+	if ( ! wp_is_block_theme() && current_theme_supports( 'stylebook' ) ) {
 		global $submenu;
 
 		$styles_menu_item = array(
-			__( 'Design', 'gutenberg' ),
+			_x( 'Design', 'Design menu item', 'gutenberg' ),
 			'edit_theme_options',
 			'site-editor.php',
 		);

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

@@ -18,6 +18,12 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
+	const showStylebookMenu = useSelect(
+		( select ) =>
+			select( coreStore ).getThemeSupports()?.stylebook || false,
+		[]
+	);
+
 	return (
 		<ItemGroup className="edit-site-sidebar-navigation-screen-main">
 			{ isBlockBasedTheme && (
@@ -55,7 +61,7 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 					</SidebarNavigationItem>
 				</>
 			) }
-			{ ! isBlockBasedTheme && (
+			{ ! isBlockBasedTheme && showStylebookMenu && (
 				<SidebarNavigationItem
 					uid="stylebook-navigation-item"
 					to="/stylebook"

packages/edit-site/src/components/style-book/index.js

@@ -10,6 +10,7 @@ import {
 	Disabled,
 	Composite,
 	privateApis as componentsPrivateApis,
+	Notice,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import {
@@ -358,8 +359,15 @@ function StyleBook( {
  * @return {Object} Style Book Preview component.
  */
 export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
-	const siteEditorSettings = useSelect(
-		( select ) => select( siteEditorStore ).getSettings(),
+	const { isBlockTheme, hasStyleBook, siteEditorSettings } = useSelect(
+		( select ) => {
+			const { getCurrentTheme, getThemeSupports } = select( coreStore );
+			return {
+				isBlockTheme: getCurrentTheme()?.is_block_theme,
+				hasStyleBook: !! getThemeSupports()?.stylebook,
+				siteEditorSettings: select( siteEditorStore ).getSettings(),
+			};
+		},
 		[]
 	);
 
@@ -457,7 +465,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		: { examples: examplesForSinglePageUse };
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );
-	const goTo = getStyleBookNavigationFromPath( section );
 
 	const mergedConfig = useMemo( () => {
 		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
@@ -480,6 +487,18 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		[ globalStyles, siteEditorSettings, userConfig ]
 	);
 
+	if ( ! isBlockTheme && ! hasStyleBook ) {
+		return (
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'The theme you are currently using does not support the Stylebook.'
+				) }
+			</Notice>
+		);
+	}
+
+	const goTo = getStyleBookNavigationFromPath( section );
+
 	return (
 		<div className="edit-site-style-book">
 			<BlockEditorProvider settings={ settings }>