Fix class serialization of font-size and colors in dynamic blocks tha…

…t use block supports (#35751)
WordPress · Oct 20, 2021 · 2b91d6d · 2b91d6d
1 parent c3bf2f5
commit 2b91d6d
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 4 deletions.
diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php
@@ -92,7 +92,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 		}
 		// Apply color class or inline style.
 		if ( $has_named_text_color ) {
-			$classes[] = sprintf( 'has-%s-color', $block_attributes['textColor'] );
+			$classes[] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $block_attributes['textColor'] ) );
 		} elseif ( $has_custom_text_color ) {
 			$styles[] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] );
 		}
@@ -109,7 +109,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 		}
 		// Apply background color classes or styles.
 		if ( $has_named_background_color ) {
-			$classes[] = sprintf( 'has-%s-background-color', $block_attributes['backgroundColor'] );
+			$classes[] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $block_attributes['backgroundColor'] ) );
 		} elseif ( $has_custom_background_color ) {
 			$styles[] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] );
 		}
@@ -125,7 +125,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 		}
 		// Apply required background class.
 		if ( $has_named_gradient ) {
-			$classes[] = sprintf( 'has-%s-gradient-background', $block_attributes['gradient'] );
+			$classes[] = sprintf( 'has-%s-gradient-background', gutenberg_experimental_to_kebab_case( $block_attributes['gradient'] ) );
 		} elseif ( $has_custom_gradient ) {
 			$styles[] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] );
 		}

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
@@ -98,7 +98,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
 
 		if ( $has_named_font_size ) {
-			$classes[] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] );
+			$classes[] = sprintf( 'has-%s-font-size', gutenberg_experimental_to_kebab_case( $block_attributes['fontSize'] ) );
 		} elseif ( $has_custom_font_size ) {
 			$styles[] = sprintf( 'font-size: %s;', $block_attributes['style']['typography']['fontSize'] );
 		}

diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php
@@ -0,0 +1,51 @@
+<?php
+
+/**
+ * Test the typography block supports.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Colors_Test extends WP_UnitTestCase {
+
+	function test_color_slugs_with_numbers_are_kebab_cased_properly() {
+		register_block_type(
+			'test/color-slug-with-numbers',
+			array(
+				'api_version' => 2,
+				'attributes'  => array(
+					'textColor'       => array(
+						'type' => 'string',
+					),
+					'backgroundColor' => array(
+						'type' => 'string',
+					),
+					'gradient'        => array(
+						'type' => 'string',
+					),
+				),
+				'supports'    => array(
+					'color' => array(
+						'text'       => true,
+						'background' => true,
+						'gradients'  => true,
+					),
+				),
+			)
+		);
+		$registry   = WP_Block_Type_Registry::get_instance();
+		$block_type = $registry->get_registered( 'test/color-slug-with-numbers' );
+
+		$block_atts = array(
+			'textColor'       => 'fg1',
+			'backgroundColor' => 'bg2',
+			'gradient'        => 'gr3',
+		);
+
+		$actual   = gutenberg_apply_colors_support( $block_type, $block_atts );
+		$expected = array( 'class' => 'has-text-color has-fg-1-color has-background has-bg-2-background-color has-background has-gr-3-gradient-background' );
+
+		$this->assertSame( $expected, $actual );
+		unregister_block_type( 'test/color-slug-with-numbers' );
+	}
+}
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
@@ -0,0 +1,39 @@
+<?php
+
+/**
+ * Test the typography block supports.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Typography_Test extends WP_UnitTestCase {
+
+	function test_font_size_slug_with_numbers_is_kebab_cased_properly() {
+		register_block_type(
+			'test/font-size-slug-with-numbers',
+			array(
+				'api_version' => 2,
+				'attributes'  => array(
+					'fontSize' => array(
+						'type' => 'string',
+					),
+				),
+				'supports'    => array(
+					'typography' => array(
+						'fontSize' => true,
+					),
+				),
+			)
+		);
+		$registry   = WP_Block_Type_Registry::get_instance();
+		$block_type = $registry->get_registered( 'test/font-size-slug-with-numbers' );
+
+		$block_atts = array( 'fontSize' => 'h1' );
+
+		$actual   = gutenberg_apply_typography_support( $block_type, $block_atts );
+		$expected = array( 'class' => 'has-h-1-font-size' );
+
+		$this->assertSame( $expected, $actual );
+		unregister_block_type( 'test/font-size-slug-with-numbers' );
+	}
+}