Changeset 54822 for branches/6.1/tests/phpunit/tests/theme/wpThemeJson.php

Timestamp:

11/11/2022 05:23:19 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.
Merges [54821] to the 6.1 branch.
Fixes #56903.

Location:

branches/6.1

Files:

• . (modified) (1 prop)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

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