Changeset 54822

Timestamp:

11/11/2022 05:23:19 PM (2 years ago)

Author:

desrosj

Message:

Editor: Correctly style separator blocks when only a background-color is defined.

When separator blocks are configured using only a background-color, they are shown correctly within the editor but not on the front end.

This changes WP_Theme_JSON to detect this scenario and move the background-color value to just color when both color and border-color are missing.

Props cbravobernal, flixos90, davidbaumwald, hellofromTonya, desrosj, andrewserong, czapla, glendaviesnz, wildworks.
Merges [54821] to the 6.1 branch.
Fixes #56903.

Location:

branches/6.1

Files:

• . (modified) (1 prop)
• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

branches/6.1/src/wp-includes/class-wp-theme-json.php

@@ -1951 +1951 @@
 
     /**
+     * Returns a filtered declarations array if there is a separator block with only a background
+     * style defined in theme.json by adding a color attribute to reflect the changes in the front.
+     *
+     * @since 6.1.1
+     *
+     * @param array $declarations List of declarations.
+     * @return array $declarations List of declarations filtered.
+     */
+    private static function update_separator_declarations( $declarations ) {
+        $background_color     = '';
+        $border_color_matches = false;
+        $text_color_matches   = false;
+
+        foreach ( $declarations as $declaration ) {
+            if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) {
+                $background_color = $declaration['value'];
+            } elseif ( 'border-color' === $declaration['name'] ) {
+                $border_color_matches = true;
+            } elseif ( 'color' === $declaration['name'] ) {
+                $text_color_matches = true;
+            }
+
+            if ( $background_color && $border_color_matches && $text_color_matches ) {
+                break;
+            }
+        }
+
+        if ( $background_color && ! $border_color_matches && ! $text_color_matches ) {
+            $declarations[] = array(
+                'name'  => 'color',
+                'value' => $background_color,
+            );
+        }
+
+        return $declarations;
+    }
+
+    /**
      * An internal method to get the block nodes from a theme.json file.
      *
@@ -2132 +2170 @@
                 $declarations_duotone[] = $declaration;
             }
+        }
+
+        // Update declarations if there are separators with only background color defined.
+        if ( '.wp-block-separator' === $selector ) {
+            $declarations = static::update_separator_declarations( $declarations );
         }
 

branches/6.1/tests/phpunit/tests/theme/wpThemeJson.php

@@ -3999 +3999 @@
         );
     }
+
+    /**
+     * Tests the core separator block outbut based on various provided settings.
+     *
+     * @ticket 56903
+     *
+     * @dataProvider data_update_separator_declarations
+     *
+     * @param array $separator_block_settings Example separator block settings from the data provider.
+     * @param array $expected_output          Expected output from data provider.
+     */
+    public function test_update_separator_declarations( $separator_block_settings, $expected_output ) {
+        // If only background is defined, test that includes border-color to the style so it is applied on the front end.
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'blocks' => array(
+                        'core/separator' => $separator_block_settings,
+                    ),
+                ),
+            ),
+            'default'
+        );
+
+        $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
+
+        $this->assertSame( $expected_output, $stylesheet );
+    }
+
+    /**
+     * Data provider for separator declaration tests.
+     *
+     * @return array
+     */
+    function data_update_separator_declarations() {
+        return array(
+            // If only background is defined, test that includes border-color to the style so it is applied on the front end.
+            'only background'                      => array(
+                array(
+                    'color' => array(
+                        'background' => 'blue',
+                    ),
+                ),
+                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: blue;}',
+            ),
+            // If background and text are defined, do not include border-color, as text color is enough.
+            'background and text, no border-color' => array(
+                array(
+                    'color' => array(
+                        'background' => 'blue',
+                        'text'       => 'red',
+                    ),
+                ),
+                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: red;}',
+            ),
+            // If only text is defined, do not include border-color, as by itself is enough.
+            'only text'                            => array(
+                array(
+                    'color' => array(
+                        'text' => 'red',
+                    ),
+                ),
+                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{color: red;}',
+            ),
+            // If background, text, and border-color are defined, include everything, CSS specifity will decide which to apply.
+            'background, text, and border-color'   => array(
+                array(
+                    'color'  => array(
+                        'background' => 'blue',
+                        'text'       => 'red',
+                    ),
+                    'border' => array(
+                        'color' => 'pink',
+                    ),
+                ),
+                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;color: red;}',
+            ),
+            // If background and border color are defined, include everything, CSS specifity will decide which to apply.
+            'background, text, and border-color'   => array(
+                array(
+                    'color'  => array(
+                        'background' => 'blue',
+                    ),
+                    'border' => array(
+                        'color' => 'pink',
+                    ),
+                ),
+                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;}',
+            ),
+        );
+    }
 }