From 0e16df97b6ec9065705d2fc6b60fd279c1cf8db6 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 22 Jun 2022 13:53:09 +1000
Subject: [PATCH] Supporting blockGap and background color vars

---
 .../wordpress-6.1/class-wp-theme-json-6-1.php |  2 ++
 .../style-engine/class-wp-style-engine.php    | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+)

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
index ee28bc6fcd9a4e..7e9e1404a2364e 100644
--- 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
@@ -513,11 +513,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
index 081446536031d7..905149c9185f62 100644
--- 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(
@@ -403,6 +414,7 @@ public function generate( $block_styles, $options ) {
 		if ( ! empty( $css_declarations ) ) {
 			// Generate inline style declarations.
 			foreach ( $css_declarations as $css_property => $css_value ) {
+				// @TODO Commented out so that it can test CSS property definitions, e.g., --wp--preset--something: 1px;
 				$filtered_css_declaration = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) );
 				if ( ! empty( $filtered_css_declaration ) ) {
 					if ( $should_prettify ) {
@@ -495,6 +507,16 @@ protected static function get_individual_property_css_declarations( $style_value
 		}
 		return $css_declarations;
 	}
+
+	// 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;
+	}
 }
 
 /**