diff --git a/lib/experimental/stylebook/classic-screen.php b/lib/experimental/stylebook/classic-screen.php index 1410a838cd575a..4c66579832051d 100644 --- a/lib/experimental/stylebook/classic-screen.php +++ b/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 '
'; -} \ No newline at end of file +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' ); diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js deleted file mode 100644 index 81f8ada3404fab..00000000000000 --- a/packages/edit-site/src/classic-stylebook.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * WordPress dependencies - */ -import { store as blocksStore } from '@wordpress/blocks'; -import { - registerCoreBlocks, - __experimentalGetCoreBlocks, - __experimentalRegisterExperimentalCoreBlocks, -} from '@wordpress/block-library'; -import { dispatch } from '@wordpress/data'; -import { createRoot, StrictMode } from '@wordpress/element'; -import { - registerLegacyWidgetBlock, - registerWidgetGroupBlock, -} from '@wordpress/widgets'; -import { store as blockEditorStore } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import './hooks'; -import App from './components/app'; - -/** - * Initializes the classic stylebook. - * @param {string} id ID of the root element to render the screen in. - * @param {Object} settings Editor settings. - */ -export function initializeClassicStylebook( id, settings ) { - if ( ! globalThis.IS_GUTENBERG_PLUGIN ) { - return; - } - const target = document.getElementById( id ); - const root = createRoot( target ); - - dispatch( blocksStore ).reapplyBlockTypeFilters(); - const coreBlocks = __experimentalGetCoreBlocks().filter( - ( { name } ) => name !== 'core/freeform' - ); - registerCoreBlocks( coreBlocks ); - dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' ); - registerLegacyWidgetBlock( { inserter: false } ); - registerWidgetGroupBlock( { inserter: false } ); - if ( globalThis.IS_GUTENBERG_PLUGIN ) { - __experimentalRegisterExperimentalCoreBlocks( { - enableFSEBlocks: true, - } ); - } - - dispatch( blockEditorStore ).updateSettings( settings ); - - root.render( - - - - ); - - return root; -} diff --git a/packages/edit-site/src/classic-stylebook.scss b/packages/edit-site/src/classic-stylebook.scss deleted file mode 100644 index 793f210344b7bc..00000000000000 --- a/packages/edit-site/src/classic-stylebook.scss +++ /dev/null @@ -1,21 +0,0 @@ -@include wordpress-admin-schemes(); - -#wpadminbar, -#adminmenumain { - display: none; -} -#wpcontent { - margin-left: 0; -} -body.js #wpbody { - padding-top: 0; -} -body { - @include wp-admin-reset("#gutenberg-stylebook"); -} - -.edit-site-style-book__iframe { - display: block; - height: 100%; - width: 100%; -} diff --git a/packages/edit-site/src/components/site-editor-routes/static-stylebook.js b/packages/edit-site/src/components/site-editor-routes/static-stylebook.js index 9bb808a668f5f8..d155b610d22240 100644 --- a/packages/edit-site/src/components/site-editor-routes/static-stylebook.js +++ b/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' ); }, diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 411e67388f85ed..a49298f8bd88b1 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/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 ( diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss index 773b4f10f581bb..42ffca2af1ed1d 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/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index ee145cc097f813..7f124e6b5f7ac6 100644 --- a/packages/edit-site/src/index.js +++ b/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';