@wordpress/edit-site 4.9.0 → 4.12.0

package/src/components/global-styles/use-global-styles-output.js

@@ -6,12 +6,10 @@ import {
 	forEach,
 	get,
 	isEmpty,
-	isString,
 	kebabCase,
 	pickBy,
 	reduce,
 	set,
-	startsWith,
 } from 'lodash';
 
 /**
@@ -22,22 +20,36 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 	getBlockTypes,
 } from '@wordpress/blocks';
-import { useEffect, useState, useContext } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
-import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
+import {
+	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
+	__experimentalGetGapCSSValue as getGapCSSValue,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
+import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { GlobalStylesContext } from './context';
 import { useSetting } from './hooks';
 
+// List of block support features that can have their related styles
+// generated under their own feature level selector rather than the block's.
+const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
+	__experimentalBorder: 'border',
+	color: 'color',
+	spacing: 'spacing',
+	typography: 'typography',
+};
+
 function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+	if ( uncompiledValue?.startsWith( VARIABLE_REFERENCE_PREFIX ) ) {
 		const variable = uncompiledValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
@@ -51,10 +63,11 @@ function compileStyleValue( uncompiledValue ) {
  * Transform given preset tree into a set of style declarations.
  *
  * @param {Object} blockPresets
+ * @param {Object} mergedSettings Merged theme.json settings.
  *
- * @return {Array} An array of style declarations.
+ * @return {Array<Object>} An array of style declarations.
  */
-function getPresetsDeclarations( blockPresets = {} ) {
+function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 	return reduce(
 		PRESET_METADATA,
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
@@ -62,7 +75,7 @@ function getPresetsDeclarations( blockPresets = {} ) {
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( value ) => {
-						if ( valueKey ) {
+						if ( valueKey && ! valueFunc ) {
 							declarations.push(
 								`--wp--preset--${ cssVarInfix }--${ kebabCase(
 									value.slug
@@ -75,7 +88,7 @@ function getPresetsDeclarations( blockPresets = {} ) {
 							declarations.push(
 								`--wp--preset--${ cssVarInfix }--${ kebabCase(
 									value.slug
-								) }: ${ valueFunc( value ) }`
+								) }: ${ valueFunc( value, mergedSettings ) }`
 							);
 						}
 					} );
@@ -170,14 +183,26 @@ function flattenTree( input = {}, prefix, token ) {
 /**
  * Transform given style tree into a set of style declarations.
  *
- * @param {Object} blockStyles Block styles.
+ * @param {Object}  blockStyles         Block styles.
+ *
+ * @param {string}  selector            The selector these declarations should attach to.
+ *
+ * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
  *
  * @return {Array} An array of style declarations.
  */
-function getStylesDeclarations( blockStyles = {} ) {
+export function getStylesDeclarations(
+	blockStyles = {},
+	selector = '',
+	useRootPaddingAlign
+) {
+	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = reduce(
 		STYLE_PROPERTY,
-		( declarations, { value, properties, useEngine }, key ) => {
+		( declarations, { value, properties, useEngine, rootOnly }, key ) => {
+			if ( rootOnly && ! isRoot ) {
+				return declarations;
+			}
 			const pathToValue = value;
 			if ( first( pathToValue ) === 'elements' || useEngine ) {
 				return declarations;
@@ -185,7 +210,16 @@ function getStylesDeclarations( blockStyles = {} ) {
 
 			const styleValue = get( blockStyles, pathToValue );
 
-			if ( !! properties && ! isString( styleValue ) ) {
+			// Root-level padding styles don't currently support strings with CSS shorthand values.
+			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
+			if (
+				key === '--wp--style--root--padding' &&
+				( typeof styleValue === 'string' || ! useRootPaddingAlign )
+			) {
+				return declarations;
+			}
+
+			if ( !! properties && typeof styleValue !== 'string' ) {
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
 
@@ -195,7 +229,9 @@ function getStylesDeclarations( blockStyles = {} ) {
 						return;
 					}
 
-					const cssProperty = kebabCase( name );
+					const cssProperty = name.startsWith( '--' )
+						? name
+						: kebabCase( name );
 					declarations.push(
 						`${ cssProperty }: ${ compileStyleValue(
 							get( styleValue, [ prop ] )
@@ -222,6 +258,14 @@ function getStylesDeclarations( blockStyles = {} ) {
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
+		// Don't output padding properties if padding variables are set.
+		if (
+			isRoot &&
+			useRootPaddingAlign &&
+			rule.key.startsWith( 'padding' )
+		) {
+			return;
+		}
 		const cssProperty = rule.key.startsWith( '--' )
 			? rule.key
 			: kebabCase( rule.key );
@@ -231,6 +275,149 @@ function getStylesDeclarations( blockStyles = {} ) {
 	return output;
 }
 
+/**
+ * Get generated CSS for layout styles by looking up layout definitions provided
+ * in theme.json, and outputting common layout styles, and specific blockGap values.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
+ * @param {Object}  props.style                 A style object containing spacing values.
+ * @param {string}  props.selector              Selector used to group together layout styling rules.
+ * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
+ * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
+ * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
+ * @return {string} Generated CSS rules for the layout styles.
+ */
+export function getLayoutStyles( {
+	tree,
+	style,
+	selector,
+	hasBlockGapSupport,
+	hasFallbackGapSupport,
+	fallbackGapValue,
+} ) {
+	let ruleset = '';
+	let gapValue = hasBlockGapSupport
+		? getGapCSSValue( style?.spacing?.blockGap )
+		: '';
+
+	// Ensure a fallback gap value for the root layout definitions,
+	// and use a fallback value if one is provided for the current block.
+	if ( hasFallbackGapSupport ) {
+		if ( selector === ROOT_BLOCK_SELECTOR ) {
+			gapValue = ! gapValue ? '0.5em' : gapValue;
+		} else if ( ! hasBlockGapSupport && fallbackGapValue ) {
+			gapValue = fallbackGapValue;
+		}
+	}
+
+	if ( gapValue && tree?.settings?.layout?.definitions ) {
+		Object.values( tree.settings.layout.definitions ).forEach(
+			( { className, name, spacingStyles } ) => {
+				// Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap.
+				if ( ! hasBlockGapSupport && 'default' === name ) {
+					return;
+				}
+
+				if ( spacingStyles?.length ) {
+					spacingStyles.forEach( ( spacingStyle ) => {
+						const declarations = [];
+
+						if ( spacingStyle.rules ) {
+							Object.entries( spacingStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${
+											cssValue ? cssValue : gapValue
+										}`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							let combinedSelector = '';
+
+							if ( ! hasBlockGapSupport ) {
+								// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
+								combinedSelector =
+									selector === ROOT_BLOCK_SELECTOR
+										? `:where(.${ className }${
+												spacingStyle?.selector || ''
+										  })`
+										: `:where(${ selector }.${ className }${
+												spacingStyle?.selector || ''
+										  })`;
+							} else {
+								combinedSelector =
+									selector === ROOT_BLOCK_SELECTOR
+										? `${ selector } .${ className }${
+												spacingStyle?.selector || ''
+										  }`
+										: `${ selector }.${ className }${
+												spacingStyle?.selector || ''
+										  }`;
+							}
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+		if ( selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport ) {
+			ruleset += `${ selector } { --wp--style--block-gap: ${ gapValue }; }`;
+		}
+	}
+
+	// Output base styles
+	if (
+		selector === ROOT_BLOCK_SELECTOR &&
+		tree?.settings?.layout?.definitions
+	) {
+		const validDisplayModes = [ 'block', 'flex', 'grid' ];
+		Object.values( tree.settings.layout.definitions ).forEach(
+			( { className, displayMode, baseStyles } ) => {
+				if (
+					displayMode &&
+					validDisplayModes.includes( displayMode )
+				) {
+					ruleset += `${ selector } .${ className } { display:${ displayMode }; }`;
+				}
+
+				if ( baseStyles?.length ) {
+					baseStyles.forEach( ( baseStyle ) => {
+						const declarations = [];
+
+						if ( baseStyle.rules ) {
+							Object.entries( baseStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${ cssValue }`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							const combinedSelector = `${ selector } .${ className }${
+								baseStyle?.selector || ''
+							}`;
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+	}
+
+	return ruleset;
+}
+
 export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	const nodes = [];
 
@@ -253,11 +440,12 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			selector: ROOT_BLOCK_SELECTOR,
 		} );
 	}
-	forEach( tree.styles?.elements, ( value, key ) => {
-		if ( !! value && !! ELEMENTS[ key ] ) {
+
+	forEach( ELEMENTS, ( selector, name ) => {
+		if ( !! tree.styles?.elements[ name ] ) {
 			nodes.push( {
-				styles: value,
-				selector: ELEMENTS[ key ],
+				styles: tree.styles?.elements[ name ],
+				selector,
 			} );
 		}
 	} );
@@ -267,9 +455,12 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		const blockStyles = pickStyleKeys( node );
 		if ( !! blockStyles && !! blockSelectors?.[ blockName ]?.selector ) {
 			nodes.push( {
-				styles: blockStyles,
-				selector: blockSelectors[ blockName ].selector,
 				duotoneSelector: blockSelectors[ blockName ].duotoneSelector,
+				fallbackGapValue: blockSelectors[ blockName ].fallbackGapValue,
+				hasLayoutSupport: blockSelectors[ blockName ].hasLayoutSupport,
+				selector: blockSelectors[ blockName ].selector,
+				styles: blockStyles,
+				featureSelectors: blockSelectors[ blockName ].featureSelectors,
 			} );
 		}
 
@@ -347,10 +538,9 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 
 export const toCustomProperties = ( tree, blockSelectors ) => {
 	const settings = getNodesWithSettings( tree, blockSelectors );
-
 	let ruleset = '';
 	settings.forEach( ( { presets, custom, selector } ) => {
-		const declarations = getPresetsDeclarations( presets );
+		const declarations = getPresetsDeclarations( presets, tree?.settings );
 		const customProps = flattenTree( custom, '--wp--custom--', '--' );
 		if ( customProps.length > 0 ) {
 			declarations.push( ...customProps );
@@ -364,9 +554,16 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
-export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
+export const toStyles = (
+	tree,
+	blockSelectors,
+	hasBlockGapSupport,
+	hasFallbackGapSupport,
+	disableLayoutStyles = false
+) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
+	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
 
 	/*
 	 * Reset default browser margin on the root body element.
@@ -377,63 +574,129 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 	 * @link https://github.com/WordPress/gutenberg/issues/36147.
 	 */
 	let ruleset = 'body {margin: 0;}';
-	nodesWithStyles.forEach( ( { selector, duotoneSelector, styles } ) => {
-		const duotoneStyles = {};
-		if ( styles?.filter ) {
-			duotoneStyles.filter = styles.filter;
-			delete styles.filter;
-		}
 
-		// Process duotone styles (they use color.__experimentalDuotone selector).
-		if ( duotoneSelector ) {
-			const duotoneDeclarations = getStylesDeclarations( duotoneStyles );
-			if ( duotoneDeclarations.length === 0 ) {
-				return;
-			}
-			ruleset =
-				ruleset +
-				`${ duotoneSelector }{${ duotoneDeclarations.join( ';' ) };}`;
-		}
-
-		// Process the remaning block styles (they use either normal block class or __experimentalSelector).
-		const declarations = getStylesDeclarations( styles );
-		if ( declarations?.length ) {
-			ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
-		}
+	if ( useRootPaddingAlign ) {
+		ruleset =
+			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+	}
 
-		// Check for pseudo selector in `styles` and handle separately.
-		const psuedoSelectorStyles = Object.entries( styles ).filter(
-			( [ key ] ) => key.startsWith( ':' )
-		);
+	nodesWithStyles.forEach(
+		( {
+			selector,
+			duotoneSelector,
+			styles,
+			fallbackGapValue,
+			hasLayoutSupport,
+			featureSelectors,
+		} ) => {
+			// Process styles for block support features with custom feature level
+			// CSS selectors set.
+			if ( featureSelectors ) {
+				Object.entries( featureSelectors ).forEach(
+					( [ featureName, featureSelector ] ) => {
+						if ( styles?.[ featureName ] ) {
+							const featureStyles = {
+								[ featureName ]: styles[ featureName ],
+							};
+							const featureDeclarations =
+								getStylesDeclarations( featureStyles );
+							delete styles[ featureName ];
+
+							if ( !! featureDeclarations.length ) {
+								ruleset =
+									ruleset +
+									`${ featureSelector }{${ featureDeclarations.join(
+										';'
+									) } }`;
+							}
+						}
+					}
+				);
+			}
 
-		if ( psuedoSelectorStyles?.length ) {
-			psuedoSelectorStyles.forEach( ( [ pseudoKey, pseudoRule ] ) => {
-				const pseudoDeclarations = getStylesDeclarations( pseudoRule );
+			const duotoneStyles = {};
+			if ( styles?.filter ) {
+				duotoneStyles.filter = styles.filter;
+				delete styles.filter;
+			}
 
-				if ( ! pseudoDeclarations?.length ) {
+			// Process duotone styles (they use color.__experimentalDuotone selector).
+			if ( duotoneSelector ) {
+				const duotoneDeclarations =
+					getStylesDeclarations( duotoneStyles );
+				if ( duotoneDeclarations.length === 0 ) {
 					return;
 				}
+				ruleset =
+					ruleset +
+					`${ duotoneSelector }{${ duotoneDeclarations.join(
+						';'
+					) };}`;
+			}
 
-				// `selector` maybe provided in a form
-				// where block level selectors have sub element
-				// selectors appended to them as a comma seperated
-				// string.
-				// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
-				// Split and append pseudo selector to create
-				// the proper rules to target the elements.
-				const _selector = selector
-					.split( ',' )
-					.map( ( sel ) => sel + pseudoKey )
-					.join( ',' );
-
-				const psuedoRule = `${ _selector }{${ pseudoDeclarations.join(
-					';'
-				) };}`;
-
-				ruleset = ruleset + psuedoRule;
-			} );
+			// Process blockGap and layout styles.
+			if (
+				! disableLayoutStyles &&
+				( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
+			) {
+				ruleset += getLayoutStyles( {
+					tree,
+					style: styles,
+					selector,
+					hasBlockGapSupport,
+					hasFallbackGapSupport,
+					fallbackGapValue,
+				} );
+			}
+
+			// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+			const declarations = getStylesDeclarations(
+				styles,
+				selector,
+				useRootPaddingAlign
+			);
+			if ( declarations?.length ) {
+				ruleset =
+					ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+			}
+
+			// Check for pseudo selector in `styles` and handle separately.
+			const pseudoSelectorStyles = Object.entries( styles ).filter(
+				( [ key ] ) => key.startsWith( ':' )
+			);
+
+			if ( pseudoSelectorStyles?.length ) {
+				pseudoSelectorStyles.forEach(
+					( [ pseudoKey, pseudoStyle ] ) => {
+						const pseudoDeclarations =
+							getStylesDeclarations( pseudoStyle );
+
+						if ( ! pseudoDeclarations?.length ) {
+							return;
+						}
+
+						// `selector` maybe provided in a form
+						// where block level selectors have sub element
+						// selectors appended to them as a comma separated
+						// string.
+						// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+						// Split and append pseudo selector to create
+						// the proper rules to target the elements.
+						const _selector = selector
+							.split( ',' )
+							.map( ( sel ) => sel + pseudoKey )
+							.join( ',' );
+
+						const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
+							';'
+						) };}`;
+
+						ruleset = ruleset + pseudoRule;
+					}
+				);
+			}
 		}
-	} );
+	);
 
 	/* Add alignment / layout styles */
 	ruleset =
@@ -447,12 +710,15 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
 	if ( hasBlockGapSupport ) {
+		// Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
+		const gapValue =
+			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
 			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
 		ruleset =
 			ruleset +
-			'.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+			`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
@@ -477,7 +743,7 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
-const getBlockSelectors = ( blockTypes ) => {
+export const getBlockSelectors = ( blockTypes ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
@@ -486,10 +752,35 @@ const getBlockSelectors = ( blockTypes ) => {
 			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
 		const duotoneSelector =
 			blockType?.supports?.color?.__experimentalDuotone ?? null;
+		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
+		const fallbackGapValue =
+			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
+
+		// For each block support feature add any custom selectors.
+		const featureSelectors = {};
+		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
+			( [ featureKey, featureName ] ) => {
+				const featureSelector =
+					blockType?.supports?.[ featureKey ]?.__experimentalSelector;
+
+				if ( featureSelector ) {
+					featureSelectors[ featureName ] = scopeSelector(
+						selector,
+						featureSelector
+					);
+				}
+			}
+		);
+
 		result[ name ] = {
+			duotoneSelector,
+			fallbackGapValue,
+			featureSelectors: Object.keys( featureSelectors ).length
+				? featureSelectors
+				: undefined,
+			hasLayoutSupport,
 			name,
 			selector,
-			duotoneSelector,
 		};
 	} );
 
@@ -497,16 +788,18 @@ const getBlockSelectors = ( blockTypes ) => {
 };
 
 export function useGlobalStylesOutput() {
-	const [ stylesheets, setStylesheets ] = useState( [] );
-	const [ settings, setSettings ] = useState( {} );
-	const [ svgFilters, setSvgFilters ] = useState( {} );
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 	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 disableLayoutStyles = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return !! getSettings().disableLayoutStyles;
+	} );
 
-	useEffect( () => {
+	return useMemo( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
-			return;
+			return [];
 		}
 
 		const blockSelectors = getBlockSelectors( getBlockTypes() );
@@ -517,10 +810,12 @@ export function useGlobalStylesOutput() {
 		const globalStyles = toStyles(
 			mergedConfig,
 			blockSelectors,
-			hasBlockGapSupport
+			hasBlockGapSupport,
+			hasFallbackGapSupport,
+			disableLayoutStyles
 		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
-		setStylesheets( [
+		const stylesheets = [
 			{
 				css: customProperties,
 				isGlobalStyles: true,
@@ -529,10 +824,13 @@ export function useGlobalStylesOutput() {
 				css: globalStyles,
 				isGlobalStyles: true,
 			},
-		] );
-		setSettings( mergedConfig.settings );
-		setSvgFilters( filters );
-	}, [ mergedConfig ] );
-
-	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
+		];
+
+		return [ stylesheets, mergedConfig.settings, filters ];
+	}, [
+		hasBlockGapSupport,
+		hasFallbackGapSupport,
+		mergedConfig,
+		disableLayoutStyles,
+	] );
 }