Make WordPress Core

Changeset 54821


Ignore:
Timestamp:
11/11/2022 05:09:11 PM (19 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-theme-json.php

    r54804 r54821  
    19511951
    19521952    /**
     1953     * Returns a filtered declarations array if there is a separator block with only a background
     1954     * style defined in theme.json by adding a color attribute to reflect the changes in the front.
     1955     *
     1956     * @since 6.1.1
     1957     *
     1958     * @param array $declarations List of declarations.
     1959     * @return array $declarations List of declarations filtered.
     1960     */
     1961    private static function update_separator_declarations( $declarations ) {
     1962        $background_color     = '';
     1963        $border_color_matches = false;
     1964        $text_color_matches   = false;
     1965
     1966        foreach ( $declarations as $declaration ) {
     1967            if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) {
     1968                $background_color = $declaration['value'];
     1969            } elseif ( 'border-color' === $declaration['name'] ) {
     1970                $border_color_matches = true;
     1971            } elseif ( 'color' === $declaration['name'] ) {
     1972                $text_color_matches = true;
     1973            }
     1974
     1975            if ( $background_color && $border_color_matches && $text_color_matches ) {
     1976                break;
     1977            }
     1978        }
     1979
     1980        if ( $background_color && ! $border_color_matches && ! $text_color_matches ) {
     1981            $declarations[] = array(
     1982                'name'  => 'color',
     1983                'value' => $background_color,
     1984            );
     1985        }
     1986
     1987        return $declarations;
     1988    }
     1989
     1990    /**
    19531991     * An internal method to get the block nodes from a theme.json file.
    19541992     *
     
    21322170                $declarations_duotone[] = $declaration;
    21332171            }
     2172        }
     2173
     2174        // Update declarations if there are separators with only background color defined.
     2175        if ( '.wp-block-separator' === $selector ) {
     2176            $declarations = static::update_separator_declarations( $declarations );
    21342177        }
    21352178
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r54804 r54821  
    39993999        );
    40004000    }
     4001
     4002    /**
     4003     * Tests the core separator block outbut based on various provided settings.
     4004     *
     4005     * @ticket 56903
     4006     *
     4007     * @dataProvider data_update_separator_declarations
     4008     *
     4009     * @param array $separator_block_settings Example separator block settings from the data provider.
     4010     * @param array $expected_output          Expected output from data provider.
     4011     */
     4012    public function test_update_separator_declarations( $separator_block_settings, $expected_output ) {
     4013        // If only background is defined, test that includes border-color to the style so it is applied on the front end.
     4014        $theme_json = new WP_Theme_JSON(
     4015            array(
     4016                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     4017                'styles'  => array(
     4018                    'blocks' => array(
     4019                        'core/separator' => $separator_block_settings,
     4020                    ),
     4021                ),
     4022            ),
     4023            'default'
     4024        );
     4025
     4026        $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
     4027
     4028        $this->assertSame( $expected_output, $stylesheet );
     4029    }
     4030
     4031    /**
     4032     * Data provider for separator declaration tests.
     4033     *
     4034     * @return array
     4035     */
     4036    function data_update_separator_declarations() {
     4037        return array(
     4038            // If only background is defined, test that includes border-color to the style so it is applied on the front end.
     4039            'only background'                      => array(
     4040                array(
     4041                    'color' => array(
     4042                        'background' => 'blue',
     4043                    ),
     4044                ),
     4045                '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;}',
     4046            ),
     4047            // If background and text are defined, do not include border-color, as text color is enough.
     4048            'background and text, no border-color' => array(
     4049                array(
     4050                    'color' => array(
     4051                        'background' => 'blue',
     4052                        'text'       => 'red',
     4053                    ),
     4054                ),
     4055                '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;}',
     4056            ),
     4057            // If only text is defined, do not include border-color, as by itself is enough.
     4058            'only text'                            => array(
     4059                array(
     4060                    'color' => array(
     4061                        'text' => 'red',
     4062                    ),
     4063                ),
     4064                '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;}',
     4065            ),
     4066            // If background, text, and border-color are defined, include everything, CSS specifity will decide which to apply.
     4067            'background, text, and border-color'   => array(
     4068                array(
     4069                    'color'  => array(
     4070                        'background' => 'blue',
     4071                        'text'       => 'red',
     4072                    ),
     4073                    'border' => array(
     4074                        'color' => 'pink',
     4075                    ),
     4076                ),
     4077                '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;}',
     4078            ),
     4079            // If background and border color are defined, include everything, CSS specifity will decide which to apply.
     4080            'background, text, and border-color'   => array(
     4081                array(
     4082                    'color'  => array(
     4083                        'background' => 'blue',
     4084                    ),
     4085                    'border' => array(
     4086                        'color' => 'pink',
     4087                    ),
     4088                ),
     4089                '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;}',
     4090            ),
     4091        );
     4092    }
    40014093}
Note: See TracChangeset for help on using the changeset viewer.