Changeset 54822 for branches/6.1/src/wp-includes/class-wp-theme-json.php

Timestamp:

11/11/2022 05:23:19 PM (2 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)
• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)

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