Add fix and test for colors block supports

WordPress · Oct 20, 2021 · ca58cca · ca58cca
1 parent f6ef425
commit ca58cca
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 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/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php
@@ -0,0 +1,46 @@
+<?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/test-block',
+			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/test-block' );
+
+		$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 );
+	}
+}