Avoid using CSS variables for block gap styles (#37360)

Co-authored-by: André <[email protected]>

docs/reference-guides/core-blocks.md

@@ -95,7 +95,7 @@ Display content in multiple columns, with blocks added to each column.
 
 - **Name:** core/columns
 - **Category:** design
-- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~
+- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), ~~html~~
 - **Attributes:** isStackedOnMobile, verticalAlignment
 
 ## Comment Author Avatar
@@ -365,7 +365,7 @@ A collection of blocks that allow visitors to get around your site.
 
 - **Name:** core/navigation
 - **Category:** theme
-- **Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, inserter, spacing (units), typography (fontSize, lineHeight), ~~html~~
 - **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
 
 ## Navigation Area

lib/block-supports/layout.php

@@ -31,10 +31,11 @@ function gutenberg_register_layout_support( $block_type ) {
  * @param string $selector CSS selector.
  * @param array $layout Layout object. The one that is passed has already checked the existance of default block layout.
  * @param boolean $has_block_gap_support Whether the theme has support for the block gap.
+ * @param string $gap_value The block gap value to apply.
  *
  * @return string CSS style.
  */
-function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
+function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
  $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
 
  $style = '';
@@ -65,8 +66,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
  $style .= "$selector .alignleft { float: left; margin-right: 2em; }";
  $style .= "$selector .alignright { float: right; margin-left: 2em; }";
  if ( $has_block_gap_support ) {
- $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
- $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
+ $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
+ $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
+ $style .= "$selector > * + * { margin-top: $gap_style; margin-bottom: 0; }";
  }
  } elseif ( 'flex' === $layout_type ) {
  $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
@@ -89,7 +91,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
  $style = "$selector {";
  $style .= 'display: flex;';
  if ( $has_block_gap_support ) {
- $style .= 'gap: var( --wp--style--block-gap, 0.5em );';
+ $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
+ $style .= "gap: $gap_style;";
  } else {
  $style .= 'gap: 0.5em;';
  }
@@ -145,8 +148,13 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
  $used_layout = $default_layout;
  }
 
- $id = uniqid();
- $style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
+ $id = uniqid();
+ $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.
+ $gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
+ $style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $gap_value );
  // This assumes the hook only applies to blocks with a single wrapper.
  // I think this is a reasonable limitation for that particular hook.
  $content = preg_replace(

lib/block-supports/spacing.php

@@ -90,57 +90,6 @@ function gutenberg_skip_spacing_serialization( $block_type ) {
  $spacing_support['__experimentalSkipSerialization'];
 }
 
-
-/**
- * Renders the spacing gap support to the block wrapper, to ensure
- * that the CSS variable is rendered in all environments.
- *
- * @param string $block_content Rendered block content.
- * @param array $block Block object.
- * @return string Filtered block content.
- */
-function gutenberg_render_spacing_gap_support( $block_content, $block ) {
- $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
- $has_gap_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'blockGap' ), false );
- if ( ! $has_gap_support || ! isset( $block['attrs']['style']['spacing']['blockGap'] ) ) {
- return $block_content;
- }
-
- $gap_value = $block['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 ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
- return $block_content;
- }
-
- $style = sprintf(
- '--wp--style--block-gap: %s',
- esc_attr( $gap_value )
- );
-
- // Attempt to update an existing style attribute on the wrapper element.
- $injected_style = preg_replace(
- '/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
- '$1$2' . $style . '; ',
- $block_content,
- 1
- );
-
- // If there is no existing style attribute, add one to the wrapper element.
- if ( $injected_style === $block_content ) {
- $injected_style = preg_replace(
- '/<([a-zA-Z0-9]+)([ >])/',
- '<$1 style="' . $style . '"$2',
- $block_content,
- 1
- );
- };
-
- return $injected_style;
-}
-
 // Register the block support.
 WP_Block_Supports::get_instance()->register(
  'spacing',
@@ -149,5 +98,3 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
  'apply' => 'gutenberg_apply_spacing_support',
  )
 );
-
-add_filter( 'render_block', 'gutenberg_render_spacing_gap_support', 10, 2 );

lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php

@@ -285,7 +285,7 @@ class WP_Theme_JSON_Gutenberg {
  'spacing' => array(
  'margin' => null,
  'padding' => null,
- 'blockGap' => null,
+ 'blockGap' => 'top',
  ),
  'typography' => array(
  'fontFamily' => null,
@@ -428,17 +428,28 @@ private static function sanitize( $input, $valid_block_names, $valid_element_nam
 
  $output = array_intersect_key( $input, array_flip( self::VALID_TOP_LEVEL_KEYS ) );
 
+ // Some styles are only meant to be available at the top-level (e.g.: blockGap),
+ // hence, the schema for blocks & elements should not have them.
+ $styles_non_top_level = self::VALID_STYLES;
+ foreach ( array_keys( $styles_non_top_level ) as $section ) {
+ foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
+ if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
+ unset( $styles_non_top_level[ $section ][ $prop ] );
+ }
+ }
+ }
+
  // Build the schema based on valid block & element names.
  $schema = array();
  $schema_styles_elements = array();
  foreach ( $valid_element_names as $element ) {
- $schema_styles_elements[ $element ] = self::VALID_STYLES;
+ $schema_styles_elements[ $element ] = $styles_non_top_level;
  }
  $schema_styles_blocks = array();
  $schema_settings_blocks = array();
  foreach ( $valid_block_names as $block ) {
  $schema_settings_blocks[ $block ] = self::VALID_SETTINGS;
- $schema_styles_blocks[ $block ] = self::VALID_STYLES;
+ $schema_styles_blocks[ $block ] = $styles_non_top_level;
  $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
  }
  $schema['styles'] = self::VALID_STYLES;

packages/block-editor/src/hooks/layout.js

@@ -215,6 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent(
  <LayoutStyle
  selector={ `.wp-container-${ id }` }
  layout={ usedLayout }
+ style={ attributes?.style }
  />,
  element
  ) }

packages/block-editor/src/hooks/style.js

@@ -74,6 +74,7 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Object} Flattened CSS variables declaration.
  */
 export function getInlineStyles( styles = {} ) {
+ const ignoredStyles = [ 'spacing.blockGap' ];
  const output = {};
  Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
  const path = STYLE_PROPERTY[ propKey ].value;
@@ -93,7 +94,7 @@ export function getInlineStyles( styles = {} ) {
  output[ name ] = compileStyleValue( value );
  }
  } );
- } else {
+ } else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
  output[ propKey ] = compileStyleValue( get( styles, path ) );
  }
  }

packages/block-editor/src/hooks/test/style.js

@@ -30,7 +30,6 @@ describe( 'getInlineStyles', () => {
  },
  } )
  ).toEqual( {
- '--wp--style--block-gap': '1em',
  backgroundColor: 'black',
  borderColor: '#21759b',
  borderRadius: '10px',
@@ -104,7 +103,6 @@ describe( 'getInlineStyles', () => {
  },
  } )
  ).toEqual( {
- '--wp--style--block-gap': '1em',
  margin: '10px',
  padding: '20px',
  } );

packages/block-editor/src/layouts/flex.js

@@ -84,10 +84,12 @@ export default {
  </BlockControls>
  );
  },
- save: function FlexLayoutStyle( { selector, layout } ) {
+ save: function FlexLayoutStyle( { selector, layout, style } ) {
  const { orientation = 'horizontal' } = layout;
  const blockGapSupport = useSetting( 'spacing.blockGap' );
  const hasBlockGapStylesSupport = blockGapSupport !== null;
+ const blockGapValue =
+ style?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';
  const justifyContent =
  justifyContentMap[ layout.justifyContent ] ||
  justifyContentMap.left;
@@ -110,11 +112,7 @@ export default {
  <style>{ `
  ${ appendSelectors( selector ) } {
  display: flex;
- gap: ${
- hasBlockGapStylesSupport
- ? 'var( --wp--style--block-gap, 0.5em )'
- : '0.5em'
- };
+ gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
  flex-wrap: ${ flexWrap };
  ${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
  }

packages/block-editor/src/layouts/flow.js

@@ -105,12 +105,14 @@ export default {
  toolBarControls: function DefaultLayoutToolbarControls() {
  return null;
  },
- save: function DefaultLayoutStyle( { selector, layout = {} } ) {
+ save: function DefaultLayoutStyle( { selector, layout = {}, style } ) {
  const { contentSize, wideSize } = layout;
  const blockGapSupport = useSetting( 'spacing.blockGap' );
  const hasBlockGapStylesSupport = blockGapSupport !== null;
+ const blockGapValue =
+ style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
 
- let style =
+ let output =
  !! contentSize || !! wideSize
  ? `
  ${ appendSelectors( selector, '> *' ) } {
@@ -129,7 +131,7 @@ export default {
  `
  : '';
 
- style += `
+ output += `
  ${ appendSelectors( selector, '> [data-align="left"]' ) } {
  float: left;
  margin-right: 2em;
@@ -143,18 +145,18 @@ export default {
  `;
 
  if ( hasBlockGapStylesSupport ) {
- style += `
+ output += `
  ${ appendSelectors( selector, '> *' ) } {
  margin-top: 0;
  margin-bottom: 0;
  }
  ${ appendSelectors( selector, '> * + *' ) } {
- margin-top: var( --wp--style--block-gap );
+ margin-top: ${ blockGapValue };
  }
  `;
  }
 
- return <style>{ style }</style>;
+ return <style>{ output }</style>;
  },
  getOrientation() {
  return 'vertical';

packages/block-library/src/columns/block.json

@@ -24,11 +24,10 @@
  "link": true
  },
  "spacing": {
- "blockGap": true,
  "margin": [ "top", "bottom" ],
  "padding": true,
  "__experimentalDefaultControls": {
- "blockGap": true
+ "padding": true
  }
  }
  },

packages/block-library/src/navigation/block.json

@@ -92,11 +92,7 @@
  }
  },
  "spacing": {
- "blockGap": true,
- "units": [ "px", "em", "rem", "vh", "vw" ],
- "__experimentalDefaultControls": {
- "blockGap": true
- }
+ "units": [ "px", "em", "rem", "vh", "vw" ]
  },
  "__experimentalLayout": {
  "allowSwitching": false,