Supporting blockGap and background color vars

WordPress · Jun 22, 2022 · e07649b · e07649b
1 parent 754d127
commit e07649b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
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
@@ -273,11 +273,13 @@ public function get_styles_for_block( $block_metadata ) {
 			$node,
 			array(
 				'selector' => $selector,
+				'css_vars' => true,
 				'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG,
 			)
 		);
 
 		if ( isset( $styles['css'] ) ) {
+
 			$block_rules .= $styles['css'];
 		}
 

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -63,6 +63,9 @@ class WP_Style_Engine {
 					'default' => 'background-color',
 				),
 				'path'          => array( 'color', 'background' ),
+				'css_vars'      => array(
+					'--wp--preset--color--$slug' => 'color',
+				),
 				'classnames'    => array(
 					'has-background'             => true,
 					'has-$slug-background-color' => 'color',
@@ -156,6 +159,14 @@ class WP_Style_Engine {
 				),
 				'path'          => array( 'spacing', 'margin' ),
 			),
+			'blockGap'  => array(
+				'value_func' => 'static::get_css_custom_property_declaration',
+				'property_keys' => array(
+					'default'    => 'gap',
+					'css_var'    => '--wp--style--block-gap',
+				),
+				'path'          => array( 'spacing', 'blockGap' ),
+			),
 		),
 		'typography' => array(
 			'fontSize'       => array(
@@ -405,7 +416,9 @@ public function generate( $block_styles, $options ) {
 		if ( ! empty( $css_rules ) ) {
 			// Generate inline style rules.
 			foreach ( $css_rules as $rule => $value ) {
-				$filtered_css = esc_html( safecss_filter_attr( "{$rule}: {$value}" ) );
+				// @TODO Commented out so that it can test CSS property definitions, e.g., --wp--preset--something: 1px;
+				//$filtered_css = esc_html( safecss_filter_attr( "{$rule}: {$value}" ) );
+				$filtered_css = esc_html( "{$rule}: {$value}" );
 				if ( ! empty( $filtered_css ) ) {
 					if ( $should_prettify ) {
 						$css[] = "\t$filtered_css;\n";
@@ -494,6 +507,16 @@ protected static function get_css_individual_property_rules( $style_value, $indi
 		}
 		return $rules;
 	}
+
+	// For block gap. TESTING!!!
+	// This only works for static::ROOT_BLOCK_SELECTOR right now.
+	protected static function get_css_custom_property_declaration( $style_value, $style_definition ) {
+		$rules = array();
+		if ( isset( $style_definition['property_keys']['css_var'] ) ) {
+			$rules[ $style_definition['property_keys']['css_var'] ] = $style_value;
+		}
+		return $rules;
+	}
 }
 
 /**