Changeset 54821 for trunk

Timestamp:

11/11/2022 05:09:11 PM (4 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.
Fixes #56903.

Location:

trunk

Files:

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

trunk/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 );
                 }
 

trunk/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;}',
+                        ),
+                );
+        }
 }