Changeset 50977

Timestamp:

05/24/2021 06:56:09 PM (4 years ago)

Author:

jorgefilipecosta

Message:

Block Editor: Update color merging algorithm.

The npm packages in use were published a few hours ago, which include some changes to how we manage colors. This commit adds the corresponding PHP changes.

Props nosolosw.
See #53175.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (1 diff)
• src/wp-includes/theme.json (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

trunk/src/wp-includes/class-wp-theme-json.php

@@ -1018 +1018 @@
      * @param WP_Theme_JSON $incoming Data to merge.
      */
-    public function merge( $incoming ) {
+    public function merge( $incoming, $update_or_remove = 'remove' ) {
         $incoming_data    = $incoming->get_raw_data();
+        $existing_data = $this->theme_json;
+
+        // The array_replace_recursive algorithm merges at the leaf level.
+        // For leaf values that are arrays it will use the numeric indexes for replacement.
         $this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
 
-        /*
-         * The array_replace_recursive algorithm merges at the leaf level.
-         * For leaf values that are arrays it will use the numeric indexes for replacement.
-         * In those cases, what we want is to use the incoming value, if it exists.
-         *
-         * These are the cases that have array values at the leaf levels.
-         */
-        $properties   = array();
-        $properties[] = array( 'color', 'palette' );
-        $properties[] = array( 'color', 'gradients' );
-        $properties[] = array( 'custom' );
-        $properties[] = array( 'spacing', 'units' );
-        $properties[] = array( 'typography', 'fontSizes' );
-        $properties[] = array( 'typography', 'fontFamilies' );
+        // There are a few cases in which we want to merge things differently
+        // from what array_replace_recursive does.
+
+        // Some incoming properties should replace the existing.
+        $to_replace   = array();
+        $to_replace[] = array( 'custom' );
+        $to_replace[] = array( 'spacing', 'units' );
+        $to_replace[] = array( 'typography', 'fontSizes' );
+        $to_replace[] = array( 'typography', 'fontFamilies' );
+
+        // Some others should be appended to the existing.
+        // If the slug is the same than an existing element,
+        // the $update_or_remove param is used to decide
+        // what to do with the existing element:
+        // either remove it and append the incoming,
+        // or update it with the incoming.
+        $to_append   = array();
+        $to_append[] = array( 'color', 'duotone' );
+        $to_append[] = array( 'color', 'gradients' );
+        $to_append[] = array( 'color', 'palette' );
 
         $nodes = self::get_setting_nodes( $this->theme_json );
         foreach ( $nodes as $metadata ) {
-            foreach ( $properties as $property_path ) {
-                $path = array_merge( $metadata['path'], $property_path );
+            foreach ( $to_replace as $path_to_replace ) {
+                $path = array_merge( $metadata['path'], $path_to_replace );
                 $node = _wp_array_get( $incoming_data, $path, array() );
                 if ( ! empty( $node ) ) {
                     _wp_array_set( $this->theme_json, $path, $node );
                 }
+            }
+            foreach ( $to_append as $path_to_append ) {
+                $path          = array_merge( $metadata['path'], $path_to_append );
+                $incoming_node = _wp_array_get( $incoming_data, $path, array() );
+                $existing_node = _wp_array_get( $existing_data, $path, array() );
+
+                if ( empty( $incoming_node ) && empty( $existing_node ) ) {
+                    continue;
+                }
+
+                $index_table    = array();
+                $existing_slugs = array();
+                $merged         = array();
+                foreach ( $existing_node as $key => $value ) {
+                    $index_table[ $value['slug'] ] = $key;
+                    $existing_slugs[]              = $value['slug'];
+                    $merged[ $key ]                = $value;
+                }
+
+                $to_remove = array();
+                foreach ( $incoming_node as $value ) {
+                    if ( ! in_array( $value['slug'], $existing_slugs, true ) ) {
+                        $merged[] = $value;
+                    } elseif ( 'update' === $update_or_remove ) {
+                        $merged[ $index_table[ $value['slug'] ] ] = $value;
+                    } else {
+                        $merged[]    = $value;
+                        $to_remove[] = $index_table[ $value['slug'] ];
+                    }
+                }
+
+                // Remove the duplicated values and pack the sparsed array.
+                foreach ( $to_remove as $index ) {
+                    unset( $merged[ $index ] );
+                }
+                $merged = array_values( $merged );
+
+                _wp_array_set( $this->theme_json, $path, $merged );
             }
         }

trunk/src/wp-includes/theme.json

@@ -51 +51 @@
                     "name": "Vivid cyan blue to vivid purple",
                     "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
-                    "slug": "vivid-cyan-blue-to-vivid-purple"
+                    "slug": "vivid-cyan-blue-to-vivid-purple",
+                    "origin": "core"
                 },
                 {
                     "name": "Light green cyan to vivid green cyan",
                     "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
-                    "slug": "light-green-cyan-to-vivid-green-cyan"
+                    "slug": "light-green-cyan-to-vivid-green-cyan",
+                    "origin": "core"
                 },
                 {
                     "name": "Luminous vivid amber to luminous vivid orange",
                     "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
-                    "slug": "luminous-vivid-amber-to-luminous-vivid-orange"
+                    "slug": "luminous-vivid-amber-to-luminous-vivid-orange",
+                    "origin": "core"
                 },
                 {
                     "name": "Luminous vivid orange to vivid red",
                     "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
-                    "slug": "luminous-vivid-orange-to-vivid-red"
+                    "slug": "luminous-vivid-orange-to-vivid-red",
+                    "origin": "core"
                 },
                 {
                     "name": "Very light gray to cyan bluish gray",
                     "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
-                    "slug": "very-light-gray-to-cyan-bluish-gray"
+                    "slug": "very-light-gray-to-cyan-bluish-gray",
+                    "origin": "core"
                 },
                 {
                     "name": "Cool to warm spectrum",
                     "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
-                    "slug": "cool-to-warm-spectrum"
+                    "slug": "cool-to-warm-spectrum",
+                    "origin": "core"
                 },
                 {
                     "name": "Blush light purple",
                     "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
-                    "slug": "blush-light-purple"
+                    "slug": "blush-light-purple",
+                    "origin": "core"
                 },
                 {
                     "name": "Blush bordeaux",
                     "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
-                    "slug": "blush-bordeaux"
+                    "slug": "blush-bordeaux",
+                    "origin": "core"
                 },
                 {
                     "name": "Luminous dusk",
                     "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
-                    "slug": "luminous-dusk"
+                    "slug": "luminous-dusk",
+                    "origin": "core"
                 },
                 {
                     "name": "Pale ocean",
                     "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
-                    "slug": "pale-ocean"
+                    "slug": "pale-ocean",
+                    "origin": "core"
                 },
                 {
                     "name": "Electric grass",
                     "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
-                    "slug": "electric-grass"
+                    "slug": "electric-grass",
+                    "origin": "core"
                 },
                 {
                     "name": "Midnight",
                     "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
-                    "slug": "midnight"
+                    "slug": "midnight",
+                    "origin": "core"
                 }
             ],
@@ -114 +126 @@
                     "name": "Black",
                     "slug": "black",
-                    "color": "#000000"
+                    "color": "#000000",
+                    "origin": "core"
                 },
                 {
                     "name": "Cyan bluish gray",
                     "slug": "cyan-bluish-gray",
-                    "color": "#abb8c3"
+                    "color": "#abb8c3",
+                    "origin": "core"
                 },
                 {
                     "name": "White",
                     "slug": "white",
-                    "color": "#ffffff"
+                    "color": "#ffffff",
+                    "origin": "core"
                 },
                 {
                     "name": "Pale pink",
                     "slug": "pale-pink",
-                    "color": "#f78da7"
+                    "color": "#f78da7",
+                    "origin": "core"
                 },
                 {
                     "name": "Vivid red",
                     "slug": "vivid-red",
-                    "color": "#cf2e2e"
+                    "color": "#cf2e2e",
+                    "origin": "core"
                 },
                 {
                     "name": "Luminous vivid orange",
                     "slug": "luminous-vivid-orange",
-                    "color": "#ff6900"
+                    "color": "#ff6900",
+                    "origin": "core"
                 },
                 {
                     "name": "Luminous vivid amber",
                     "slug": "luminous-vivid-amber",
-                    "color": "#fcb900"
+                    "color": "#fcb900",
+                    "origin": "core"
                 },
                 {
                     "name": "Light green cyan",
                     "slug": "light-green-cyan",
-                    "color": "#7bdcb5"
+                    "color": "#7bdcb5",
+                    "origin": "core"
                 },
                 {
                     "name": "Vivid green cyan",
                     "slug": "vivid-green-cyan",
-                    "color": "#00d084"
+                    "color": "#00d084",
+                    "origin": "core"
                 },
                 {
                     "name": "Pale cyan blue",
                     "slug": "pale-cyan-blue",
-                    "color": "#8ed1fc"
+                    "color": "#8ed1fc",
+                    "origin": "core"
                 },
                 {
                     "name": "Vivid cyan blue",
                     "slug": "vivid-cyan-blue",
-                    "color": "#0693e3"
+                    "color": "#0693e3",
+                    "origin": "core"
                 },
                 {
                     "name": "Vivid purple",
                     "slug": "vivid-purple",
-                    "color": "#9b51e0"
+                    "color": "#9b51e0",
+                    "origin": "core"
                 }
             ]

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -410 +410 @@
                     'palette'        => array(
                         array(
+                            'slug'  => 'red',
+                            'color' => 'red',
+                        ),
+                        array(
+                            'slug'  => 'green',
+                            'color' => 'green',
+                        ),
+                        array(
                             'slug'  => 'blue',
                             'color' => 'blue',