Make WordPress Core


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.

File:
1 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
Note: See TracChangeset for help on using the changeset viewer.