<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[50977] trunk: Block Editor: Update color merging algorithm.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/50977">50977</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/50977","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>jorgefilipecosta</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-05-24 18:56:09 +0000 (Mon, 24 May 2021)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/53175">#53175</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesclasswpthemejsonphp">trunk/src/wp-includes/class-wp-theme-json.php</a></li>
<li><a href="#trunksrcwpincludesthemejson">trunk/src/wp-includes/theme.json</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonphp">trunk/tests/phpunit/tests/theme/wpThemeJson.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesclasswpthemejsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-theme-json.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-theme-json.php     2021-05-24 18:40:16 UTC (rev 50976)
+++ trunk/src/wp-includes/class-wp-theme-json.php       2021-05-24 18:56:09 UTC (rev 50977)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1017,34 +1017,82 @@
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><span class="cx" style="display: block; padding: 0 10px">         * @param WP_Theme_JSON $incoming Data to merge.
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        public function merge( $incoming ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function merge( $incoming, $update_or_remove = 'remove' ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                 $incoming_data    = $incoming->get_raw_data();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                $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.
</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                /*
-                * 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' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         // There are a few cases in which we want to merge things differently
+               // from what array_replace_recursive does.
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                // 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' );
+
</ins><span class="cx" style="display: block; padding: 0 10px">                 $nodes = self::get_setting_nodes( $this->theme_json );
</span><span class="cx" style="display: block; padding: 0 10px">                foreach ( $nodes as $metadata ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        foreach ( $properties as $property_path ) {
-                               $path = array_merge( $metadata['path'], $property_path );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 foreach ( $to_replace as $path_to_replace ) {
+                               $path = array_merge( $metadata['path'], $path_to_replace );
</ins><span class="cx" style="display: block; padding: 0 10px">                                 $node = _wp_array_get( $incoming_data, $path, array() );
</span><span class="cx" style="display: block; padding: 0 10px">                                if ( ! empty( $node ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        _wp_array_set( $this->theme_json, $path, $node );
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        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 );
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span></span></pre></div>
<a id="trunksrcwpincludesthemejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/theme.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/theme.json  2021-05-24 18:40:16 UTC (rev 50976)
+++ trunk/src/wp-includes/theme.json    2021-05-24 18:56:09 UTC (rev 50977)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -50,62 +50,74 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Vivid cyan blue to vivid purple",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "vivid-cyan-blue-to-vivid-purple"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "vivid-cyan-blue-to-vivid-purple",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Light green cyan to vivid green cyan",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "light-green-cyan-to-vivid-green-cyan"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "light-green-cyan-to-vivid-green-cyan",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Luminous vivid amber to luminous vivid orange",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "luminous-vivid-amber-to-luminous-vivid-orange"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "luminous-vivid-amber-to-luminous-vivid-orange",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Luminous vivid orange to vivid red",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "luminous-vivid-orange-to-vivid-red"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "luminous-vivid-orange-to-vivid-red",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Very light gray to cyan bluish gray",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "very-light-gray-to-cyan-bluish-gray"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "very-light-gray-to-cyan-bluish-gray",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Cool to warm spectrum",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "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%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "cool-to-warm-spectrum"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "cool-to-warm-spectrum",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Blush light purple",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "blush-light-purple"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "blush-light-purple",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Blush bordeaux",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "blush-bordeaux"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "blush-bordeaux",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Luminous dusk",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "luminous-dusk"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "luminous-dusk",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Pale ocean",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "pale-ocean"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "pale-ocean",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Electric grass",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "electric-grass"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "electric-grass",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Midnight",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "slug": "midnight"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "slug": "midnight",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><span class="cx" style="display: block; padding: 0 10px">                        ],
</span><span class="cx" style="display: block; padding: 0 10px">                        "link": false,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -113,62 +125,74 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Black",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "black",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#000000"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#000000",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Cyan bluish gray",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "cyan-bluish-gray",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#abb8c3"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#abb8c3",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "White",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "white",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#ffffff"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#ffffff",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Pale pink",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "pale-pink",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#f78da7"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#f78da7",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Vivid red",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "vivid-red",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#cf2e2e"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#cf2e2e",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Luminous vivid orange",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "luminous-vivid-orange",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#ff6900"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#ff6900",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Luminous vivid amber",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "luminous-vivid-amber",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#fcb900"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#fcb900",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Light green cyan",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "light-green-cyan",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#7bdcb5"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#7bdcb5",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Vivid green cyan",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "vivid-green-cyan",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#00d084"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#00d084",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Pale cyan blue",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "pale-cyan-blue",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#8ed1fc"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#8ed1fc",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Vivid cyan blue",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "vivid-cyan-blue",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#0693e3"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#0693e3",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                {
</span><span class="cx" style="display: block; padding: 0 10px">                                        "name": "Vivid purple",
</span><span class="cx" style="display: block; padding: 0 10px">                                        "slug": "vivid-purple",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        "color": "#9b51e0"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 "color": "#9b51e0",
+                                       "origin": "core"
</ins><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><span class="cx" style="display: block; padding: 0 10px">                        ]
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span></span></pre></div>
<a id="trunktestsphpunitteststhemewpThemeJsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/theme/wpThemeJson.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJson.php   2021-05-24 18:40:16 UTC (rev 50976)
+++ trunk/tests/phpunit/tests/theme/wpThemeJson.php     2021-05-24 18:56:09 UTC (rev 50977)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -409,6 +409,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        'customGradient' => true,
</span><span class="cx" style="display: block; padding: 0 10px">                                        'palette'        => array(
</span><span class="cx" style="display: block; padding: 0 10px">                                                array(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                        'slug'  => 'red',
+                                                       'color' => 'red',
+                                               ),
+                                               array(
+                                                       'slug'  => 'green',
+                                                       'color' => 'green',
+                                               ),
+                                               array(
</ins><span class="cx" style="display: block; padding: 0 10px">                                                         'slug'  => 'blue',
</span><span class="cx" style="display: block; padding: 0 10px">                                                        'color' => 'blue',
</span><span class="cx" style="display: block; padding: 0 10px">                                                ),
</span></span></pre>
</div>
</div>

</body>
</html>