From a6048ae2c9fd31306e147ce7e0476547ef2b6120 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 20 Jul 2022 12:42:52 +1000 Subject: [PATCH 1/5] Layout: Add a disable-layout-styles theme supports flag to opt-out of all layout styles --- lib/block-supports/layout.php | 21 +++++++----- .../wordpress-6.1/block-editor-settings.php | 1 + .../wordpress-6.1/class-wp-theme-json-6-1.php | 5 +++ ...-rest-block-editor-settings-controller.php | 6 ++++ packages/block-editor/src/hooks/layout.js | 22 ++++++++++-- .../src/components/visual-editor/index.js | 34 +++++++++++-------- .../global-styles/use-global-styles-output.js | 30 ++++++++++++++-- .../provider/use-block-editor-settings.js | 1 + phpunit/class-wp-theme-json-test.php | 31 +++++++++++++++++ 9 files changed, 123 insertions(+), 28 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b26ed9df659c28..838327c626f209 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -241,15 +241,18 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' ); $block_spacing = _wp_array_get( $block, array( 'attrs', 'style', 'spacing' ), null ); - // If a block's block.json skips serialization for spacing or spacing.blockGap, - // don't apply the user-defined value to the styles. - $should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); - $style = gutenberg_get_layout_style( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_spacing ); - - // Only add container class and enqueue block support styles if unique styles were generated. - if ( ! empty( $style ) ) { - $class_names[] = $container_class; - wp_enqueue_block_support_styles( $style ); + // Only generate Layout styles if the theme has not opted-out. + if ( ! current_theme_supports( 'disable-layout-styles' ) ) { + // If a block's block.json skips serialization for spacing or spacing.blockGap, + // don't apply the user-defined value to the styles. + $should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); + $style = gutenberg_get_layout_style( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_spacing ); + + // Only add container class and enqueue block support styles if unique styles were generated. + if ( ! empty( $style ) ) { + $class_names[] = $container_class; + wp_enqueue_block_support_styles( $style ); + } } // This assumes the hook only applies to blocks with a single wrapper. diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php index de61109ed3ac73..5512390db5910d 100644 --- a/lib/compat/wordpress-6.1/block-editor-settings.php +++ b/lib/compat/wordpress-6.1/block-editor-settings.php @@ -171,6 +171,7 @@ function gutenberg_get_block_editor_settings( $settings ) { } $settings['localAutosaveInterval'] = 15; + $settings['disableLayoutStyles'] = current_theme_supports( 'disable-layout-styles' ); return $settings; } diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index ac2f983721aa74..28f46eefe5cf02 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -1252,6 +1252,11 @@ protected function get_layout_styles( $block_metadata ) { $block_rules = ''; $block_type = null; + // Skip outputting layout styles if explicitly disabled. + if ( current_theme_supports( 'disable-layout-styles' ) ) { + return $block_rules; + } + if ( isset( $block_metadata['name'] ) ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] ); if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) { diff --git a/lib/experimental/class-wp-rest-block-editor-settings-controller.php b/lib/experimental/class-wp-rest-block-editor-settings-controller.php index d9b726f1158da2..777e193ffe70a3 100644 --- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php +++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php @@ -204,6 +204,12 @@ public function get_item_schema() { 'context' => array( 'post-editor', 'site-editor', 'widgets-editor' ), ), + 'disableLayoutStyles' => array( + 'description' => __( 'Disables output of layout styles.', 'gutenberg' ), + 'type' => 'boolean', + 'context' => array( 'post-editor', 'site-editor', 'widgets-editor' ), + ), + 'enableCustomLineHeight' => array( 'description' => __( 'Enables custom line height.', 'gutenberg' ), 'type' => 'boolean', diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 4db7ac3b6ef05f..d7df54ea3c614c 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -84,6 +84,22 @@ function useLayoutClasses( layout, layoutDefinitions ) { return layoutClassnames; } +/** + * Determines whether or not the theme has disabled all layout styles output. + * + * This feature only disables the output of layout styles, + * the controls for adjusting layout will still be available in the editor. + * Themes that use this feature commit to providing their own styling for layout features. + * + * @return {boolean} Whether or not the theme opts-in to disable all layout styles. + */ +function useThemeHasDisabledLayoutStyles() { + return useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return !! getSettings().disableLayoutStyles; + } ); +} + function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { layout } = attributes; const defaultThemeLayout = useSetting( 'layout' ); @@ -264,10 +280,12 @@ export const withInspectorControls = createHigherOrderComponent( export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; - const shouldRenderLayoutStyles = hasBlockSupport( + const hasLayoutBlockSupport = hasBlockSupport( name, layoutBlockSupportKey ); + const shouldRenderLayoutStyles = + hasLayoutBlockSupport && ! useThemeHasDisabledLayoutStyles(); const id = useInstanceId( BlockListBlock ); const defaultThemeLayout = useSetting( 'layout' ) || {}; const element = useContext( BlockList.__unstableElementContext ); @@ -277,7 +295,7 @@ export const withLayoutStyles = createHigherOrderComponent( const usedLayout = layout?.inherit ? defaultThemeLayout : layout || defaultBlockLayout || {}; - const layoutClasses = shouldRenderLayoutStyles + const layoutClasses = hasLayoutBlockSupport ? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions ) : null; const selector = `.${ getBlockDefaultClassName( diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 77054884472a67..0f351f0148c0e8 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -118,13 +118,15 @@ export default function VisualEditor( { styles } ) { ( select ) => select( editPostStore ).hasMetaBoxes(), [] ); - const { themeSupportsLayout, assets } = useSelect( ( select ) => { - const _settings = select( blockEditorStore ).getSettings(); - return { - themeSupportsLayout: _settings.supportsLayout, - assets: _settings.__unstableResolvedAssets, - }; - }, [] ); + const { themeHasDisabledLayoutStyles, themeSupportsLayout, assets } = + useSelect( ( select ) => { + const _settings = select( blockEditorStore ).getSettings(); + return { + themeHasDisabledLayoutStyles: _settings.disableLayoutStyles, + themeSupportsLayout: _settings.supportsLayout, + assets: _settings.__unstableResolvedAssets, + }; + }, [] ); const { clearSelectedBlock } = useDispatch( blockEditorStore ); const { setIsEditingTemplate } = useDispatch( editPostStore ); const desktopCanvasStyles = { @@ -241,13 +243,17 @@ export default function VisualEditor( { styles } ) { assets={ assets } style={ { paddingBottom } } > - { themeSupportsLayout && ! isTemplateMode && ( - - ) } + { themeSupportsLayout && + ! themeHasDisabledLayoutStyles && + ! isTemplateMode && ( + + ) } { ! isTemplateMode && (
{ const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); @@ -612,7 +615,10 @@ export const toStyles = ( } // Process blockGap and layout styles. - if ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) { + if ( + ! skipLayoutStyles && + ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) + ) { ruleset += getLayoutStyles( { tree, style: styles, @@ -761,6 +767,22 @@ export const getBlockSelectors = ( blockTypes ) => { return result; }; +/** + * Determines whether or not the theme has disabled all layout styles output. + * + * This feature only disables the output of layout styles, + * the controls for adjusting layout will still be available in the editor. + * Themes that use this feature commit to providing their own styling for layout features. + * + * @return {boolean} Whether or not the theme opts-in to disable all layout styles. + */ +function useThemeHasDisabledLayoutStyles() { + return useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return !! getSettings().disableLayoutStyles; + } ); +} + export function useGlobalStylesOutput() { const [ stylesheets, setStylesheets ] = useState( [] ); const [ settings, setSettings ] = useState( {} ); @@ -769,6 +791,7 @@ export function useGlobalStylesOutput() { const [ blockGap ] = useSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGap !== null; const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support. + const skipLayoutStyles = useThemeHasDisabledLayoutStyles(); useEffect( () => { if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) { @@ -784,7 +807,8 @@ export function useGlobalStylesOutput() { mergedConfig, blockSelectors, hasBlockGapSupport, - hasFallbackGapSupport + hasFallbackGapSupport, + skipLayoutStyles ); const filters = toSvgFilters( mergedConfig, blockSelectors ); setStylesheets( [ diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index a1e802d2305dfc..2d8b1b4547021a 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -129,6 +129,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { 'disableCustomColors', 'disableCustomFontSizes', 'disableCustomGradients', + 'disableLayoutStyles', 'enableCustomLineHeight', 'enableCustomSpacing', 'enableCustomUnits', diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 655c5c5e5f8c92..77dcd413d4a014 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -103,6 +103,37 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $ ); } + /** + * @dataProvider data_get_layout_definitions + * + * @param array $layout_definitions Layout definitions as stored in core theme.json. + */ + public function test_get_stylesheet_skips_layout_styles( $layout_definitions ) { + add_theme_support( 'disable-layout-styles' ); + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'layout' => array( + 'definitions' => $layout_definitions, + ), + 'spacing' => array( + 'blockGap' => null, + ), + ), + ), + 'default' + ); + $stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) ); + remove_theme_support( 'disable-layout-styles' ); + + // All Layout styles should be skipped. + $this->assertEquals( + '', + $stylesheet + ); + } + /** * Data provider. * From e82592076cabb873af56b7f2d9e1af729b9584a0 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 21 Jul 2022 15:59:29 +1000 Subject: [PATCH 2/5] Try adding documentation entry --- docs/how-to-guides/themes/theme-support.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md index 9236e3a0eaec8d..1d1f42cb7629a4 100644 --- a/docs/how-to-guides/themes/theme-support.md +++ b/docs/how-to-guides/themes/theme-support.md @@ -305,6 +305,18 @@ add_theme_support( 'disable-custom-gradients' ); When set, users will be restricted to the default gradients provided in the block editor or the gradients provided via the `editor-gradient-presets` theme support setting. +### Disabling base layout styles + +_**Note:** Since WordPress 6.1._ + +Themes can opt out of generated block layout styles that provide default structural styles for core blocks including Group, Columns, Buttons, and Social Icons. By using the following code, these themes commit to providing their own structural styling, as using this feature will result in core blocks displaying incorrectly in both the editor and site frontend: + +```php +add_theme_support( 'disable-layout-styles' ); +``` + +For themes looking to customize `blockGap` styles or block spacing, see [the developer docs on Global Settings & Styles](/docs/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it). + ### Supporting custom line heights Some blocks like paragraph and headings support customizing the line height. Themes can enable support for this feature with the following code: From 0bef5448f9976df3ad014c20ded1896fe13a1a86 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 21 Jul 2022 16:52:49 +1000 Subject: [PATCH 3/5] Fix behaviour in site editor --- .../components/global-styles/use-global-styles-output.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index bcc5b1520ae90a..0ffbda42b5218a 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -823,7 +823,12 @@ export function useGlobalStylesOutput() { ] ); setSettings( mergedConfig.settings ); setSvgFilters( filters ); - }, [ hasBlockGapSupport, hasFallbackGapSupport, mergedConfig ] ); + }, [ + hasBlockGapSupport, + hasFallbackGapSupport, + mergedConfig, + skipLayoutStyles, + ] ); return [ stylesheets, settings, svgFilters, hasBlockGapSupport ]; } From d77120ea1bae6dfc15bf9b0deee9ee7e00b37d93 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 27 Jul 2022 16:54:55 +1000 Subject: [PATCH 4/5] Add register_theme_feature call to ensure the feature is registered so it appears in API responses --- lib/block-supports/layout.php | 30 +++++++++++++++-------------- lib/compat/wordpress-6.1/theme.php | 31 ++++++++++++++++++++++++++++++ lib/load.php | 1 + 3 files changed, 48 insertions(+), 14 deletions(-) create mode 100644 lib/compat/wordpress-6.1/theme.php diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 838327c626f209..44418407e2a005 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -226,23 +226,25 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $class_names[] = sanitize_title( $layout_classname ); } - $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) ); - // Skip if gap value contains unsupported characters. - // Regex for CSS value borrowed from `safecss_filter_attr`, and used here - // because we only want to match against the value, not the CSS attribute. - if ( is_array( $gap_value ) ) { - foreach ( $gap_value as $key => $value ) { - $gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value; + // Only generate Layout styles if the theme has not opted-out. + // Attribute-based Layout classnames are output in all cases. + if ( ! current_theme_supports( 'disable-layout-styles' ) ) { + + $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) ); + // Skip if gap value contains unsupported characters. + // Regex for CSS value borrowed from `safecss_filter_attr`, and used here + // because we only want to match against the value, not the CSS attribute. + if ( is_array( $gap_value ) ) { + foreach ( $gap_value as $key => $value ) { + $gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value; + } + } else { + $gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value; } - } else { - $gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value; - } - $fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' ); - $block_spacing = _wp_array_get( $block, array( 'attrs', 'style', 'spacing' ), null ); + $fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' ); + $block_spacing = _wp_array_get( $block, array( 'attrs', 'style', 'spacing' ), null ); - // Only generate Layout styles if the theme has not opted-out. - if ( ! current_theme_supports( 'disable-layout-styles' ) ) { // If a block's block.json skips serialization for spacing or spacing.blockGap, // don't apply the user-defined value to the styles. $should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' ); diff --git a/lib/compat/wordpress-6.1/theme.php b/lib/compat/wordpress-6.1/theme.php new file mode 100644 index 00000000000000..441fc630714369 --- /dev/null +++ b/lib/compat/wordpress-6.1/theme.php @@ -0,0 +1,31 @@ + __( 'Whether the theme disables generated layout styles.', 'gutenberg' ), + 'show_in_rest' => true, + ) + ); +} +add_action( 'setup_theme', 'gutenberg_create_initial_theme_features', 0 ); diff --git a/lib/load.php b/lib/load.php index da39596251f6db..3980e952ef939c 100644 --- a/lib/load.php +++ b/lib/load.php @@ -88,6 +88,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/compat/wordpress-6.1/date-settings.php'; require __DIR__ . '/compat/wordpress-6.1/block-patterns.php'; require __DIR__ . '/compat/wordpress-6.1/edit-form-blocks.php'; +require __DIR__ . '/compat/wordpress-6.1/theme.php'; // Experimental features. remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API. From 6b6dadb00dc25571dc0c9474da26e719fe1e1bfb Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 28 Jul 2022 16:49:51 +1000 Subject: [PATCH 5/5] Remove useThemeHasDisabledLayoutStyles hook to simplify feature checks --- packages/block-editor/src/hooks/layout.js | 22 ++++---------- .../global-styles/use-global-styles-output.js | 29 +++++-------------- 2 files changed, 13 insertions(+), 38 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index d7df54ea3c614c..69b5810b0f1062 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -84,22 +84,6 @@ function useLayoutClasses( layout, layoutDefinitions ) { return layoutClassnames; } -/** - * Determines whether or not the theme has disabled all layout styles output. - * - * This feature only disables the output of layout styles, - * the controls for adjusting layout will still be available in the editor. - * Themes that use this feature commit to providing their own styling for layout features. - * - * @return {boolean} Whether or not the theme opts-in to disable all layout styles. - */ -function useThemeHasDisabledLayoutStyles() { - return useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return !! getSettings().disableLayoutStyles; - } ); -} - function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { layout } = attributes; const defaultThemeLayout = useSetting( 'layout' ); @@ -284,8 +268,12 @@ export const withLayoutStyles = createHigherOrderComponent( name, layoutBlockSupportKey ); + const disableLayoutStyles = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return !! getSettings().disableLayoutStyles; + } ); const shouldRenderLayoutStyles = - hasLayoutBlockSupport && ! useThemeHasDisabledLayoutStyles(); + hasLayoutBlockSupport && ! disableLayoutStyles; const id = useInstanceId( BlockListBlock ); const defaultThemeLayout = useSetting( 'layout' ) || {}; const element = useContext( BlockList.__unstableElementContext ); diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 0ffbda42b5218a..a50cd0d29b096c 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -539,7 +539,7 @@ export const toStyles = ( blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, - skipLayoutStyles = false + disableLayoutStyles = false ) => { const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); @@ -616,7 +616,7 @@ export const toStyles = ( // Process blockGap and layout styles. if ( - ! skipLayoutStyles && + ! disableLayoutStyles && ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) ) { ruleset += getLayoutStyles( { @@ -767,22 +767,6 @@ export const getBlockSelectors = ( blockTypes ) => { return result; }; -/** - * Determines whether or not the theme has disabled all layout styles output. - * - * This feature only disables the output of layout styles, - * the controls for adjusting layout will still be available in the editor. - * Themes that use this feature commit to providing their own styling for layout features. - * - * @return {boolean} Whether or not the theme opts-in to disable all layout styles. - */ -function useThemeHasDisabledLayoutStyles() { - return useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return !! getSettings().disableLayoutStyles; - } ); -} - export function useGlobalStylesOutput() { const [ stylesheets, setStylesheets ] = useState( [] ); const [ settings, setSettings ] = useState( {} ); @@ -791,7 +775,10 @@ export function useGlobalStylesOutput() { const [ blockGap ] = useSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGap !== null; const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support. - const skipLayoutStyles = useThemeHasDisabledLayoutStyles(); + const disableLayoutStyles = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return !! getSettings().disableLayoutStyles; + } ); useEffect( () => { if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) { @@ -808,7 +795,7 @@ export function useGlobalStylesOutput() { blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, - skipLayoutStyles + disableLayoutStyles ); const filters = toSvgFilters( mergedConfig, blockSelectors ); setStylesheets( [ @@ -827,7 +814,7 @@ export function useGlobalStylesOutput() { hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, - skipLayoutStyles, + disableLayoutStyles, ] ); return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];