Skip to content

Commit beaaf60

Browse files
jorgefilipecostayouknowriad
jorgefilipecosta
authored and
youknowriad
committed
Enqueue core and theme colors by using separate structures per origin. (#32358)
1 parent 8629186 commit beaaf60

File tree

12 files changed

+590
-544
lines changed

12 files changed

+590
-544
lines changed

‎lib/class-wp-theme-json-gutenberg.php‎

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -641,6 +641,34 @@ private static function append_to_selector( $selector, $to_append ) {
641641
return implode( ',', $new_selectors );
642642
}
643643

644+
/**
645+
* Function that given an array of presets keyed by origin
646+
* and the value key of the preset returns an array where each key is
647+
* the a preset slug and each value is the preset value.
648+
*
649+
* @param array $preset_per_origin Array of presets keyed by origin.
650+
* @param string $value_key The property of the preset that contains its value.
651+
*
652+
* @return array Array of presets where each key is a slug and each value is the preset value.
653+
*/
654+
private static function get_merged_preset_by_slug( $preset_per_origin, $value_key ) {
655+
$origins = array( 'core', 'theme', 'user' );
656+
$result = array();
657+
foreach ( $origins as $origin ) {
658+
if ( ! isset( $preset_per_origin[ $origin ] ) ) {
659+
continue;
660+
}
661+
foreach ( $preset_per_origin[ $origin ] as $preset ) {
662+
// We don't want to use kebabCase here,
663+
// see https://github.com/WordPress/gutenberg/issues/32347
664+
// However, we need to make sure the generated class or css variable
665+
// doesn't contain spaces.
666+
$result[ preg_replace( '/\s+/', '-', $preset['slug'] ) ] = $preset[ $value_key ];
667+
}
668+
}
669+
return $result;
670+
}
671+
644672
/**
645673
* Given a settings array, it returns the generated rulesets
646674
* for the preset classes.
@@ -659,19 +687,16 @@ private static function compute_preset_classes( $settings, $selector ) {
659687

660688
$stylesheet = '';
661689
foreach ( self::PRESETS_METADATA as $preset ) {
662-
$values = _wp_array_get( $settings, $preset['path'], array() );
663-
foreach ( $values as $value ) {
664-
foreach ( $preset['classes'] as $class ) {
690+
$preset_per_origin = _wp_array_get( $settings, $preset['path'], array() );
691+
$preset_by_slug = self::get_merged_preset_by_slug( $preset_per_origin, $preset['value_key'] );
692+
foreach ( $preset['classes'] as $class ) {
693+
foreach ( $preset_by_slug as $slug => $value ) {
665694
$stylesheet .= self::to_ruleset(
666-
// We don't want to use kebabCase here,
667-
// see https://github.com/WordPress/gutenberg/issues/32347
668-
// However, we need to make sure the generated class
669-
// doesn't contain spaces.
670-
self::append_to_selector( $selector, '.has-' . preg_replace( '/\s+/', '-', $value['slug'] ) . '-' . $class['class_suffix'] ),
695+
self::append_to_selector( $selector, '.has-' . $slug . '-' . $class['class_suffix'] ),
671696
array(
672697
array(
673698
'name' => $class['property_name'],
674-
'value' => $value[ $preset['value_key'] ] . ' !important',
699+
'value' => $value . ' !important',
675700
),
676701
)
677702
);
@@ -701,11 +726,12 @@ private static function compute_preset_classes( $settings, $selector ) {
701726
private static function compute_preset_vars( $settings ) {
702727
$declarations = array();
703728
foreach ( self::PRESETS_METADATA as $preset ) {
704-
$values = _wp_array_get( $settings, $preset['path'], array() );
705-
foreach ( $values as $value ) {
729+
$preset_per_origin = _wp_array_get( $settings, $preset['path'], array() );
730+
$preset_by_slug = self::get_merged_preset_by_slug( $preset_per_origin, $preset['value_key'] );
731+
foreach ( $preset_by_slug as $slug => $value ) {
706732
$declarations[] = array(
707-
'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $value['slug'],
708-
'value' => $value[ $preset['value_key'] ],
733+
'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $slug,
734+
'value' => $value,
709735
);
710736
}
711737
}
@@ -1101,85 +1127,59 @@ public function get_stylesheet( $type = 'all' ) {
11011127
/**
11021128
* Merge new incoming data.
11031129
*
1104-
* @param WP_Theme_JSON_Gutenberg $incoming Data to merge.
1105-
* @param string $update_or_remove Whether update or remove existing colors
1106-
* for which the incoming data has a duplicated slug.
1130+
* @param WP_Theme_JSON $incoming Data to merge.
1131+
* @param string $origin origin of the incoming data (e.g: core, theme, or user).
11071132
*/
1108-
public function merge( $incoming, $update_or_remove = 'remove' ) {
1109-
$incoming_data = $incoming->get_raw_data();
1110-
$existing_data = $this->theme_json;
1133+
public function merge( $incoming, $origin ) {
1134+
1135+
$incoming_data = $incoming->get_raw_data();
1136+
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
11111137

11121138
// The array_replace_recursive algorithm merges at the leaf level.
11131139
// For leaf values that are arrays it will use the numeric indexes for replacement.
1114-
$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
1140+
// In those cases, what we want is to use the incoming value, if it exists.
1141+
//
1142+
// These are the cases that have array values at the leaf levels.
1143+
$properties = array();
1144+
$properties[] = array( 'custom' );
1145+
$properties[] = array( 'spacing', 'units' );
1146+
$properties[] = array( 'color', 'duotone' );
11151147

1116-
// There are a few cases in which we want to merge things differently
1117-
// from what array_replace_recursive does.
1118-
1119-
// Some incoming properties should replace the existing.
1120-
$to_replace = array();
1121-
$to_replace[] = array( 'custom' );
1122-
$to_replace[] = array( 'spacing', 'units' );
1123-
$to_replace[] = array( 'typography', 'fontSizes' );
1124-
$to_replace[] = array( 'typography', 'fontFamilies' );
1125-
1126-
// Some others should be appended to the existing.
1127-
// If the slug is the same than an existing element,
1128-
// the $update_or_remove param is used to decide
1129-
// what to do with the existing element:
1130-
// either remove it and append the incoming,
1131-
// or update it with the incoming.
11321148
$to_append = array();
1133-
$to_append[] = array( 'color', 'duotone' );
1134-
$to_append[] = array( 'color', 'gradients' );
11351149
$to_append[] = array( 'color', 'palette' );
1150+
$to_append[] = array( 'color', 'gradients' );
1151+
$to_append[] = array( 'typography', 'fontSizes' );
1152+
$to_append[] = array( 'typography', 'fontFamilies' );
11361153

11371154
$nodes = self::get_setting_nodes( $this->theme_json );
11381155
foreach ( $nodes as $metadata ) {
1139-
foreach ( $to_replace as $path_to_replace ) {
1140-
$path = array_merge( $metadata['path'], $path_to_replace );
1156+
foreach ( $properties as $property_path ) {
1157+
$path = array_merge( $metadata['path'], $property_path );
11411158
$node = _wp_array_get( $incoming_data, $path, array() );
11421159
if ( ! empty( $node ) ) {
11431160
gutenberg_experimental_set( $this->theme_json, $path, $node );
11441161
}
11451162
}
1146-
foreach ( $to_append as $path_to_append ) {
1147-
$path = array_merge( $metadata['path'], $path_to_append );
1148-
$incoming_node = _wp_array_get( $incoming_data, $path, array() );
1149-
$existing_node = _wp_array_get( $existing_data, $path, array() );
1150-
1151-
if ( empty( $incoming_node ) && empty( $existing_node ) ) {
1152-
continue;
1153-
}
11541163

1155-
$index_table = array();
1156-
$existing_slugs = array();
1157-
$merged = array();
1158-
foreach ( $existing_node as $key => $value ) {
1159-
$index_table[ $value['slug'] ] = $key;
1160-
$existing_slugs[] = $value['slug'];
1161-
$merged[ $key ] = $value;
1162-
}
1163-
1164-
$to_remove = array();
1165-
foreach ( $incoming_node as $value ) {
1166-
if ( ! in_array( $value['slug'], $existing_slugs, true ) ) {
1167-
$merged[] = $value;
1168-
} elseif ( 'update' === $update_or_remove ) {
1169-
$merged[ $index_table[ $value['slug'] ] ] = $value;
1164+
foreach ( $to_append as $property_path ) {
1165+
$path = array_merge( $metadata['path'], $property_path );
1166+
$node = _wp_array_get( $incoming_data, $path, null );
1167+
if ( null !== $node ) {
1168+
$existing_node = _wp_array_get( $this->theme_json, $path, null );
1169+
$new_node = array_filter(
1170+
$existing_node,
1171+
function ( $key ) {
1172+
return in_array( $key, array( 'core', 'theme', 'user ' ), true );
1173+
},
1174+
ARRAY_FILTER_USE_KEY
1175+
);
1176+
if ( isset( $node[ $origin ] ) ) {
1177+
$new_node[ $origin ] = $node[ $origin ];
11701178
} else {
1171-
$merged[] = $value;
1172-
$to_remove[] = $index_table[ $value['slug'] ];
1179+
$new_node[ $origin ] = $node;
11731180
}
1181+
gutenberg_experimental_set( $this->theme_json, $path, $new_node );
11741182
}
1175-
1176-
// Remove the duplicated values and pack the sparsed array.
1177-
foreach ( $to_remove as $index ) {
1178-
unset( $merged[ $index ] );
1179-
}
1180-
$merged = array_values( $merged );
1181-
1182-
gutenberg_experimental_set( $this->theme_json, $path, $merged );
11831183
}
11841184
}
11851185

‎lib/class-wp-theme-json-resolver-gutenberg.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ public static function get_theme_data( $theme_support_data = array() ) {
290290
* to override the ones declared via add_theme_support.
291291
*/
292292
$with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data );
293-
$with_theme_supports->merge( self::$theme );
293+
$with_theme_supports->merge( self::$theme, 'theme' );
294294

295295
return $with_theme_supports;
296296
}
@@ -415,11 +415,11 @@ public static function get_merged_data( $settings = array(), $origin = 'user' )
415415
$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $settings );
416416

417417
$result = new WP_Theme_JSON_Gutenberg();
418-
$result->merge( self::get_core_data() );
419-
$result->merge( self::get_theme_data( $theme_support_data ) );
418+
$result->merge( self::get_core_data(), 'core' );
419+
$result->merge( self::get_theme_data( $theme_support_data ), 'theme' );
420420

421421
if ( 'user' === $origin ) {
422-
$result->merge( self::get_user_data(), 'update' );
422+
$result->merge( self::get_user_data(), 'user' );
423423
}
424424

425425
return $result;

‎lib/experimental-default-theme.json‎

Lines changed: 24 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,148 +6,124 @@
66
{
77
"name": "Black",
88
"slug": "black",
9-
"color": "#000000",
10-
"origin": "core"
9+
"color": "#000000"
1110
},
1211
{
1312
"name": "Cyan bluish gray",
1413
"slug": "cyan-bluish-gray",
15-
"color": "#abb8c3",
16-
"origin": "core"
14+
"color": "#abb8c3"
1715
},
1816
{
1917
"name": "White",
2018
"slug": "white",
21-
"color": "#ffffff",
22-
"origin": "core"
19+
"color": "#ffffff"
2320
},
2421
{
2522
"name": "Pale pink",
2623
"slug": "pale-pink",
27-
"color": "#f78da7",
28-
"origin": "core"
24+
"color": "#f78da7"
2925
},
3026
{
3127
"name": "Vivid red",
3228
"slug": "vivid-red",
33-
"color": "#cf2e2e",
34-
"origin": "core"
29+
"color": "#cf2e2e"
3530
},
3631
{
3732
"name": "Luminous vivid orange",
3833
"slug": "luminous-vivid-orange",
39-
"color": "#ff6900",
40-
"origin": "core"
34+
"color": "#ff6900"
4135
},
4236
{
4337
"name": "Luminous vivid amber",
4438
"slug": "luminous-vivid-amber",
45-
"color": "#fcb900",
46-
"origin": "core"
39+
"color": "#fcb900"
4740
},
4841
{
4942
"name": "Light green cyan",
5043
"slug": "light-green-cyan",
51-
"color": "#7bdcb5",
52-
"origin": "core"
44+
"color": "#7bdcb5"
5345
},
5446
{
5547
"name": "Vivid green cyan",
5648
"slug": "vivid-green-cyan",
57-
"color": "#00d084",
58-
"origin": "core"
49+
"color": "#00d084"
5950
},
6051
{
6152
"name": "Pale cyan blue",
6253
"slug": "pale-cyan-blue",
63-
"color": "#8ed1fc",
64-
"origin": "core"
54+
"color": "#8ed1fc"
6555
},
6656
{
6757
"name": "Vivid cyan blue",
6858
"slug": "vivid-cyan-blue",
69-
"color": "#0693e3",
70-
"origin": "core"
59+
"color": "#0693e3"
7160
},
7261
{
7362
"name": "Vivid purple",
7463
"slug": "vivid-purple",
75-
"color": "#9b51e0",
76-
"origin": "core"
64+
"color": "#9b51e0"
7765
}
7866
],
7967
"gradients": [
8068
{
8169
"name": "Vivid cyan blue to vivid purple",
8270
"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
83-
"slug": "vivid-cyan-blue-to-vivid-purple",
84-
"origin": "core"
71+
"slug": "vivid-cyan-blue-to-vivid-purple"
8572
},
8673
{
8774
"name": "Light green cyan to vivid green cyan",
8875
"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
89-
"slug": "light-green-cyan-to-vivid-green-cyan",
90-
"origin": "core"
76+
"slug": "light-green-cyan-to-vivid-green-cyan"
9177
},
9278
{
9379
"name": "Luminous vivid amber to luminous vivid orange",
9480
"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
95-
"slug": "luminous-vivid-amber-to-luminous-vivid-orange",
96-
"origin": "core"
81+
"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
9782
},
9883
{
9984
"name": "Luminous vivid orange to vivid red",
10085
"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
101-
"slug": "luminous-vivid-orange-to-vivid-red",
102-
"origin": "core"
86+
"slug": "luminous-vivid-orange-to-vivid-red"
10387
},
10488
{
10589
"name": "Very light gray to cyan bluish gray",
10690
"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
107-
"slug": "very-light-gray-to-cyan-bluish-gray",
108-
"origin": "core"
91+
"slug": "very-light-gray-to-cyan-bluish-gray"
10992
},
11093
{
11194
"name": "Cool to warm spectrum",
11295
"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%)",
113-
"slug": "cool-to-warm-spectrum",
114-
"origin": "core"
96+
"slug": "cool-to-warm-spectrum"
11597
},
11698
{
11799
"name": "Blush light purple",
118100
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
119-
"slug": "blush-light-purple",
120-
"origin": "core"
101+
"slug": "blush-light-purple"
121102
},
122103
{
123104
"name": "Blush bordeaux",
124105
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
125-
"slug": "blush-bordeaux",
126-
"origin": "core"
106+
"slug": "blush-bordeaux"
127107
},
128108
{
129109
"name": "Luminous dusk",
130110
"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
131-
"slug": "luminous-dusk",
132-
"origin": "core"
111+
"slug": "luminous-dusk"
133112
},
134113
{
135114
"name": "Pale ocean",
136115
"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
137-
"slug": "pale-ocean",
138-
"origin": "core"
116+
"slug": "pale-ocean"
139117
},
140118
{
141119
"name": "Electric grass",
142120
"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
143-
"slug": "electric-grass",
144-
"origin": "core"
121+
"slug": "electric-grass"
145122
},
146123
{
147124
"name": "Midnight",
148125
"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
149-
"slug": "midnight",
150-
"origin": "core"
126+
"slug": "midnight"
151127
}
152128
],
153129
"duotone": [

0 commit comments

Comments
 (0)