Theme JSON: Check for null values to cater for blockGap (#59258)

* Check for null values to cater for blockGap

* El LINTO DEL DIABLO

* Added test to check resolution of spacing presets

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

lib/class-wp-theme-json-gutenberg.php

@@ -3807,12 +3807,18 @@ private static function resolve_custom_css_format( $tree ) {
 	 * Replaces CSS variables with their values in place.
 	 *
 	 * @since 6.3.0
+	 * @since 6.6.0 Check for empty style before processing.
+	 *
 	 * @param array $styles CSS declarations to convert.
 	 * @param array $values key => value pairs to use for replacement.
 	 * @return array
 	 */
 	private static function convert_variables_to_value( $styles, $values ) {
 		foreach ( $styles as $key => $style ) {
+			if ( empty( $style ) ) {
+				continue;
+			}
+
 			if ( is_array( $style ) ) {
 				$styles[ $key ] = self::convert_variables_to_value( $style, $values );
 				continue;

phpunit/class-wp-theme-json-test.php

@@ -4954,13 +4954,22 @@ public function test_internal_syntax_is_converted_to_css_variables() {
 		$this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Style variations: Assert the internal variables are convert to CSS custom variables.' );
 	}
 
+	/*
+	 * Tests that the theme.json file is correctly parsed and the variables are resolved.
+	 *
+	 * @ticket 58588
+	 *
+	 * @covers WP_Theme_JSON_Gutenberg::resolve_variables
+	 * @covers WP_Theme_JSON_Gutenberg::convert_variables_to_value
+	 */
 	public function test_resolve_variables() {
 		$primary_color   = '#9DFF20';
 		$secondary_color = '#9DFF21';
 		$contrast_color  = '#000';
 		$raw_color_value = '#efefef';
 		$large_font      = '18px';
 		$small_font      = '12px';
+		$spacing         = 'clamp(1.5rem, 5vw, 2rem)';
 		$theme_json      = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
@@ -5000,6 +5009,15 @@ public function test_resolve_variables() {
 							),
 						),
 					),
+					'spacing'    => array(
+						'spacingSizes' => array(
+							array(
+								'size' => $spacing,
+								'name' => '100',
+								'slug' => '100',
+							),
+						),
+					),
 				),
 				'styles'   => array(
 					'color'    => array(
@@ -5062,6 +5080,16 @@ public function test_resolve_variables() {
 								),
 							),
 						),
+						'core/post-template'   => array(
+							'spacing' => array(
+								'blockGap' => null,
+							),
+						),
+						'core/columns'         => array(
+							'spacing' => array(
+								'blockGap' => 'var(--wp--preset--spacing--100)',
+							),
+						),
 					),
 				),
 			)
@@ -5105,6 +5133,12 @@ public function test_resolve_variables() {
 
 		$this->assertEquals( $small_font, $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Block variations: font-size' );
 		$this->assertEquals( $secondary_color, $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Block variations: color' );
+		/*
+		 * WP_Theme_JSON_Gutenberg::resolve_variables may be called with merged data from WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()
+		 * WP_Theme_JSON_Resolver_Gutenberg::get_block_data() sets blockGap for supported blocks to `null` if the value is not defined.
+		 */
+		$this->assertNull( $styles['blocks']['core/post-template']['spacing']['blockGap'], 'core/post-template block: blockGap' );
+		$this->assertEquals( $spacing, $styles['blocks']['core/columns']['spacing']['blockGap'], 'core/columns block: blockGap' );
 	}
 
 	/**