diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 2bf7abbdee2088..2692b316d4db17 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -54,14 +54,6 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // Height support to be added in near future. // Width support to be added in near future. - if ( $has_gap_support ) { - $gap_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'blockGap' ), null ); - - if ( is_string( $gap_value ) ) { - $styles[] = sprintf( '--wp--style--block-gap: %s', $gap_value ); - } - } - return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) ); } @@ -80,50 +72,6 @@ function gutenberg_skip_dimensions_serialization( $block_type ) { $dimensions_support['__experimentalSkipSerialization']; } -/** - * Renders the dimensions support to the block wrapper, for supports that - * require block-level server-side rendering, for example blockGap support - * which uses CSS variables. - * - * @param string $block_content Rendered block content. - * @param array $block Block object. - * @return string Filtered block content. - */ -function gutenberg_render_dimensions_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; - } - - $id = uniqid(); - $style = sprintf( - '.wp-container-%s { --wp--style--block-gap: %s; }', - $id, - esc_attr( $block['attrs']['style']['spacing']['blockGap'] ) - ); - - // This assumes the hook only applies to blocks with a single wrapper. - $content = preg_replace( - '/' . preg_quote( 'class="', '/' ) . '/', - 'class="wp-container-' . $id . ' ', - $block_content, - 1 - ); - - // Ideally styles should be loaded in the head, but blocks may be parsed - // after that, so loading in the footer for now. - // See https://core.trac.wordpress.org/ticket/53494. - add_action( - 'wp_footer', - function () use ( $style ) { - echo ''; - } - ); - - return $content; -} - // Register the block support. WP_Block_Supports::get_instance()->register( 'dimensions', @@ -132,5 +80,3 @@ function () use ( $style ) { 'apply' => 'gutenberg_apply_dimensions_support', ) ); - -add_filter( 'render_block', 'gutenberg_render_dimensions_support', 10, 2 ); diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php index 78f5b59f90fb04..603bf9eea4ca8f 100644 --- a/lib/block-supports/spacing.php +++ b/lib/block-supports/spacing.php @@ -45,6 +45,7 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { $has_padding_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'padding' ), false ); $has_margin_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'margin' ), false ); + $has_gap_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'blockGap' ), false ); $styles = array(); if ( $has_padding_support ) { @@ -71,6 +72,14 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) { } } + if ( $has_gap_support ) { + $gap_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'blockGap' ), null ); + + if ( is_string( $gap_value ) ) { + $styles[] = sprintf( '--wp--style--block-gap: %s', $gap_value ); + } + } + return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) ); } @@ -90,6 +99,51 @@ function gutenberg_skip_spacing_serialization( $block_type ) { $spacing_support['__experimentalSkipSerialization']; } + +/** + * Renders the spacing support to the block wrapper, for supports that + * require block-level server-side rendering, for example blockGap support + * which uses CSS variables. + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @return string Filtered block content. + */ +function gutenberg_render_spacing_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; + } + + $id = uniqid(); + $style = sprintf( + '.wp-container-%s { --wp--style--block-gap: %s; }', + $id, + esc_attr( $block['attrs']['style']['spacing']['blockGap'] ) + ); + + // This assumes the hook only applies to blocks with a single wrapper. + $content = preg_replace( + '/' . preg_quote( 'class="', '/' ) . '/', + 'class="wp-container-' . $id . ' ', + $block_content, + 1 + ); + + // Ideally styles should be loaded in the head, but blocks may be parsed + // after that, so loading in the footer for now. + // See https://core.trac.wordpress.org/ticket/53494. + add_action( + 'wp_footer', + function () use ( $style ) { + echo ''; + } + ); + + return $content; +} + // Register the block support. WP_Block_Supports::get_instance()->register( 'spacing', @@ -98,3 +152,5 @@ function gutenberg_skip_spacing_serialization( $block_type ) { 'apply' => 'gutenberg_apply_spacing_support', ) ); + +add_filter( 'render_block', 'gutenberg_render_spacing_support', 10, 2 );