Changeset 54821 for trunk/tests/phpunit/tests/theme/wpThemeJson.php

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.

File:

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

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