Layout blockGap: Try using classnames to support block-level gap in t…

…heme.json
WordPress · May 6, 2022 · e2d969d · e2d969d
1 parent 6f11e0b
commit e2d969d
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 10 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -172,7 +172,15 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$used_layout = $default_layout;
 	}
 
-	$class_name = wp_unique_id( 'wp-container-' );
+	$container_class = wp_unique_id( 'wp-container-' );
+	$class_names     = array( $container_class );
+
+	if ( isset( $used_layout['type'] ) ) {
+		$class_names[] = 'is-layout-' . sanitize_title( $used_layout['type'] );
+	} else {
+		$class_names[] = 'is-layout-flow';
+	}
+
 	$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
@@ -188,12 +196,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	// 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( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization );
+	$style                         = gutenberg_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization );
 	// 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(
 		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . esc_attr( $class_name ) . ' ',
+		'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
 		$block_content,
 		1
 	);

diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php
@@ -186,6 +186,13 @@ class WP_Theme_JSON_5_9 {
 		'filter'                     => array( 'filter', 'duotone' ),
 	);
 
+	const LAYOUT_STYLES = array(
+		'--wp--style--block-gap' => array (
+			'.is-layout-flex'         => 'gap',
+			'.is-layout-flow > * + *' => 'margin-top',
+		),
+	);
+
 	/**
 	 * Protected style properties.
 	 *
@@ -872,26 +879,51 @@ protected static function to_ruleset( $selector, $declarations ) {
 		if ( empty( $declarations ) ) {
 			return '';
 		}
-		$ruleset = '';
+		$ruleset          = '';
+		$additional_rules = '';
 
 		if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
 			$declaration_block = array_reduce(
 				$declarations,
-				function ( $carry, $element ) {
+				function ( $carry, $element ) use( $selector, &$additional_rules ) {
+					if ( ! empty( $element['selectors'] ) && static::ROOT_BLOCK_SELECTOR !== $selector ) {
+						foreach( $element['selectors'] as $sub_selector => $property ) {
+							$additional_rules .= $selector . $sub_selector . " { \n";
+							$additional_rules .= "\t" . $property . ': ' . $element['value'] . ";\n";
+							$additional_rules .= "}\n";
+						}
+						return $carry;
+					}
 					return $carry .= "\t" . $element['name'] . ': ' . $element['value'] . ";\n"; },
 				''
 			);
-			$ruleset          .= $selector . " {\n" . $declaration_block . "}\n";
+
+			if ( $declaration_block ) {
+				$ruleset .= $selector . " {\n" . $declaration_block . "}\n";
+			}
 		} else {
 			$declaration_block = array_reduce(
 				$declarations,
-				function ( $carry, $element ) {
+				function ( $carry, $element ) use( $selector, &$additional_rules ) {
+					if ( ! empty( $element['selectors'] ) ) {
+						foreach( $element['selectors'] as $sub_selector => $property ) {
+							$additional_rules .= $selector . $sub_selector . " { ";
+							$additional_rules .= $property . ': ' . $element['value'] . ";";
+							$additional_rules .= " }";
+						}
+						return $carry;
+					}
 					return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
 				''
 			);
-			$ruleset          .= $selector . '{' . $declaration_block . '}';
+
+			if ( $declaration_block ) {
+				$ruleset .= $selector . '{' . $declaration_block . '}';
+			}
 		}
 
+		$ruleset .= $additional_rules;
+
 		return $ruleset;
 	}
 
@@ -1256,10 +1288,15 @@ protected static function compute_style_properties( $styles, $settings = array()
 				continue;
 			}
 
-			$declarations[] = array(
+			$declaration = array(
 				'name'  => $css_property,
 				'value' => $value,
 			);
+
+			if ( isset( static::LAYOUT_STYLES[ $css_property ] ) ) {
+				$declaration['selectors'] = static::LAYOUT_STYLES[ $css_property ];
+			}
+			$declarations[] = $declaration;
 		}
 
 		return $declarations;

diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
@@ -275,7 +275,7 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
 		'spacing'    => array(
 			'margin'   => null,
 			'padding'  => null,
-			'blockGap' => 'top',
+			'blockGap' => null,
 		),
 		'typography' => array(
 			'fontFamily'     => null,