Skip to content

Commit 73bf1da

Browse files
jorgefilipecostajorgefilipecosta
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@50977 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 7fc0ad0 commit 73bf1da

File tree

3 files changed

+121
-41
lines changed

3 files changed

+121
-41
lines changed

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

Lines changed: 65 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1017,34 +1017,82 @@ private static function get_style_nodes( $theme_json, $selectors = array() ) {
10171017
*
10181018
* @param WP_Theme_JSON $incoming Data to merge.
10191019
*/
1020-
public function merge( $incoming ) {
1020+
public function merge( $incoming, $update_or_remove = 'remove' ) {
10211021
$incoming_data = $incoming->get_raw_data();
1022+
$existing_data = $this->theme_json;
1023+
1024+
// The array_replace_recursive algorithm merges at the leaf level.
1025+
// For leaf values that are arrays it will use the numeric indexes for replacement.
10221026
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
10231027

1024-
/*
1025-
* The array_replace_recursive algorithm merges at the leaf level.
1026-
* For leaf values that are arrays it will use the numeric indexes for replacement.
1027-
* In those cases, what we want is to use the incoming value, if it exists.
1028-
*
1029-
* These are the cases that have array values at the leaf levels.
1030-
*/
1031-
$properties = array();
1032-
$properties[] = array( 'color', 'palette' );
1033-
$properties[] = array( 'color', 'gradients' );
1034-
$properties[] = array( 'custom' );
1035-
$properties[] = array( 'spacing', 'units' );
1036-
$properties[] = array( 'typography', 'fontSizes' );
1037-
$properties[] = array( 'typography', 'fontFamilies' );
1028+
// There are a few cases in which we want to merge things differently
1029+
// from what array_replace_recursive does.
1030+
1031+
// Some incoming properties should replace the existing.
1032+
$to_replace = array();
1033+
$to_replace[] = array( 'custom' );
1034+
$to_replace[] = array( 'spacing', 'units' );
1035+
$to_replace[] = array( 'typography', 'fontSizes' );
1036+
$to_replace[] = array( 'typography', 'fontFamilies' );
1037+
1038+
// Some others should be appended to the existing.
1039+
// If the slug is the same than an existing element,
1040+
// the $update_or_remove param is used to decide
1041+
// what to do with the existing element:
1042+
// either remove it and append the incoming,
1043+
// or update it with the incoming.
1044+
$to_append = array();
1045+
$to_append[] = array( 'color', 'duotone' );
1046+
$to_append[] = array( 'color', 'gradients' );
1047+
$to_append[] = array( 'color', 'palette' );
10381048

10391049
$nodes = self::get_setting_nodes( $this->theme_json );
10401050
foreach ( $nodes as $metadata ) {
1041-
foreach ( $properties as $property_path ) {
1042-
$path = array_merge( $metadata['path'], $property_path );
1051+
foreach ( $to_replace as $path_to_replace ) {
1052+
$path = array_merge( $metadata['path'], $path_to_replace );
10431053
$node = _wp_array_get( $incoming_data, $path, array() );
10441054
if ( ! empty( $node ) ) {
10451055
_wp_array_set( $this->theme_json, $path, $node );
10461056
}
10471057
}
1058+
foreach ( $to_append as $path_to_append ) {
1059+
$path = array_merge( $metadata['path'], $path_to_append );
1060+
$incoming_node = _wp_array_get( $incoming_data, $path, array() );
1061+
$existing_node = _wp_array_get( $existing_data, $path, array() );
1062+
1063+
if ( empty( $incoming_node ) && empty( $existing_node ) ) {
1064+
continue;
1065+
}
1066+
1067+
$index_table = array();
1068+
$existing_slugs = array();
1069+
$merged = array();
1070+
foreach ( $existing_node as $key => $value ) {
1071+
$index_table[ $value['slug'] ] = $key;
1072+
$existing_slugs[] = $value['slug'];
1073+
$merged[ $key ] = $value;
1074+
}
1075+
1076+
$to_remove = array();
1077+
foreach ( $incoming_node as $value ) {
1078+
if ( ! in_array( $value['slug'], $existing_slugs, true ) ) {
1079+
$merged[] = $value;
1080+
} elseif ( 'update' === $update_or_remove ) {
1081+
$merged[ $index_table[ $value['slug'] ] ] = $value;
1082+
} else {
1083+
$merged[] = $value;
1084+
$to_remove[] = $index_table[ $value['slug'] ];
1085+
}
1086+
}
1087+
1088+
// Remove the duplicated values and pack the sparsed array.
1089+
foreach ( $to_remove as $index ) {
1090+
unset( $merged[ $index ] );
1091+
}
1092+
$merged = array_values( $merged );
1093+
1094+
_wp_array_set( $this->theme_json, $path, $merged );
1095+
}
10481096
}
10491097

10501098
}

‎src/wp-includes/theme.json‎

Lines changed: 48 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -50,125 +50,149 @@
5050
{
5151
"name": "Vivid cyan blue to vivid purple",
5252
"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
53-
"slug": "vivid-cyan-blue-to-vivid-purple"
53+
"slug": "vivid-cyan-blue-to-vivid-purple",
54+
"origin": "core"
5455
},
5556
{
5657
"name": "Light green cyan to vivid green cyan",
5758
"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
58-
"slug": "light-green-cyan-to-vivid-green-cyan"
59+
"slug": "light-green-cyan-to-vivid-green-cyan",
60+
"origin": "core"
5961
},
6062
{
6163
"name": "Luminous vivid amber to luminous vivid orange",
6264
"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
63-
"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
65+
"slug": "luminous-vivid-amber-to-luminous-vivid-orange",
66+
"origin": "core"
6467
},
6568
{
6669
"name": "Luminous vivid orange to vivid red",
6770
"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
68-
"slug": "luminous-vivid-orange-to-vivid-red"
71+
"slug": "luminous-vivid-orange-to-vivid-red",
72+
"origin": "core"
6973
},
7074
{
7175
"name": "Very light gray to cyan bluish gray",
7276
"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
73-
"slug": "very-light-gray-to-cyan-bluish-gray"
77+
"slug": "very-light-gray-to-cyan-bluish-gray",
78+
"origin": "core"
7479
},
7580
{
7681
"name": "Cool to warm spectrum",
7782
"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%)",
78-
"slug": "cool-to-warm-spectrum"
83+
"slug": "cool-to-warm-spectrum",
84+
"origin": "core"
7985
},
8086
{
8187
"name": "Blush light purple",
8288
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
83-
"slug": "blush-light-purple"
89+
"slug": "blush-light-purple",
90+
"origin": "core"
8491
},
8592
{
8693
"name": "Blush bordeaux",
8794
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
88-
"slug": "blush-bordeaux"
95+
"slug": "blush-bordeaux",
96+
"origin": "core"
8997
},
9098
{
9199
"name": "Luminous dusk",
92100
"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
93-
"slug": "luminous-dusk"
101+
"slug": "luminous-dusk",
102+
"origin": "core"
94103
},
95104
{
96105
"name": "Pale ocean",
97106
"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
98-
"slug": "pale-ocean"
107+
"slug": "pale-ocean",
108+
"origin": "core"
99109
},
100110
{
101111
"name": "Electric grass",
102112
"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
103-
"slug": "electric-grass"
113+
"slug": "electric-grass",
114+
"origin": "core"
104115
},
105116
{
106117
"name": "Midnight",
107118
"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
108-
"slug": "midnight"
119+
"slug": "midnight",
120+
"origin": "core"
109121
}
110122
],
111123
"link": false,
112124
"palette": [
113125
{
114126
"name": "Black",
115127
"slug": "black",
116-
"color": "#000000"
128+
"color": "#000000",
129+
"origin": "core"
117130
},
118131
{
119132
"name": "Cyan bluish gray",
120133
"slug": "cyan-bluish-gray",
121-
"color": "#abb8c3"
134+
"color": "#abb8c3",
135+
"origin": "core"
122136
},
123137
{
124138
"name": "White",
125139
"slug": "white",
126-
"color": "#ffffff"
140+
"color": "#ffffff",
141+
"origin": "core"
127142
},
128143
{
129144
"name": "Pale pink",
130145
"slug": "pale-pink",
131-
"color": "#f78da7"
146+
"color": "#f78da7",
147+
"origin": "core"
132148
},
133149
{
134150
"name": "Vivid red",
135151
"slug": "vivid-red",
136-
"color": "#cf2e2e"
152+
"color": "#cf2e2e",
153+
"origin": "core"
137154
},
138155
{
139156
"name": "Luminous vivid orange",
140157
"slug": "luminous-vivid-orange",
141-
"color": "#ff6900"
158+
"color": "#ff6900",
159+
"origin": "core"
142160
},
143161
{
144162
"name": "Luminous vivid amber",
145163
"slug": "luminous-vivid-amber",
146-
"color": "#fcb900"
164+
"color": "#fcb900",
165+
"origin": "core"
147166
},
148167
{
149168
"name": "Light green cyan",
150169
"slug": "light-green-cyan",
151-
"color": "#7bdcb5"
170+
"color": "#7bdcb5",
171+
"origin": "core"
152172
},
153173
{
154174
"name": "Vivid green cyan",
155175
"slug": "vivid-green-cyan",
156-
"color": "#00d084"
176+
"color": "#00d084",
177+
"origin": "core"
157178
},
158179
{
159180
"name": "Pale cyan blue",
160181
"slug": "pale-cyan-blue",
161-
"color": "#8ed1fc"
182+
"color": "#8ed1fc",
183+
"origin": "core"
162184
},
163185
{
164186
"name": "Vivid cyan blue",
165187
"slug": "vivid-cyan-blue",
166-
"color": "#0693e3"
188+
"color": "#0693e3",
189+
"origin": "core"
167190
},
168191
{
169192
"name": "Vivid purple",
170193
"slug": "vivid-purple",
171-
"color": "#9b51e0"
194+
"color": "#9b51e0",
195+
"origin": "core"
172196
}
173197
]
174198
},

‎tests/phpunit/tests/theme/wpThemeJson.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -408,6 +408,14 @@ public function test_merge_incoming_data() {
408408
'custom' => true,
409409
'customGradient' => true,
410410
'palette' => array(
411+
array(
412+
'slug' => 'red',
413+
'color' => 'red',
414+
),
415+
array(
416+
'slug' => 'green',
417+
'color' => 'green',
418+
),
411419
array(
412420
'slug' => 'blue',
413421
'color' => 'blue',

0 commit comments

Comments
 (0)