Skip to content

Commit eab70d3

Browse files
vytisbulkeviciusvytisbulkevicius
authored
Merge pull request #2743 from Codeinwp/copilot/fix-color-slugs-in-otter-blocks
Convert theme color slugs to CSS variables instead of resolving to hex
2 parents 0cceac4 + dda1c64 commit eab70d3

31 files changed

Lines changed: 676 additions & 163 deletions

‎inc/class-base-css.php‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,54 @@ public static function hex2rgba( $color, $opacity = false ) {
202202
return $output;
203203
}
204204

205+
/**
206+
* Convert a color slug to a CSS variable reference.
207+
* WordPress generates CSS variables in the format: --wp--preset--color--{slug}
208+
*
209+
* @param string|null $slug The color slug.
210+
* @return string|null The CSS variable reference.
211+
* @since 3.1.5
212+
* @access public
213+
*/
214+
public static function get_color_css_variable( $slug ) {
215+
if ( empty( $slug ) ) {
216+
return $slug;
217+
}
218+
219+
// If it's already a color value or CSS variable, return as-is.
220+
if (
221+
strpos( $slug, '#' ) === 0 ||
222+
strpos( $slug, 'rgb' ) === 0 ||
223+
strpos( $slug, 'hsl' ) === 0 ||
224+
strpos( $slug, 'var(' ) === 0
225+
) {
226+
return $slug;
227+
}
228+
229+
// Sanitize slug: WordPress slugs should only contain lowercase alphanumeric, hyphens, and underscores.
230+
// This prevents potential CSS injection if slug comes from untrusted sources.
231+
$sanitized_slug = strtolower( preg_replace( '/[^a-z0-9-_]/', '', $slug ) );
232+
233+
// Convert slug to CSS variable.
234+
return 'var(--wp--preset--color--' . $sanitized_slug . ')';
235+
}
236+
237+
/**
238+
* Resolve a color value which may be a slug from the theme color palette.
239+
* This function converts slugs to CSS variables to preserve the connection to theme.json.
240+
* If the value is a slug, it returns a CSS variable reference.
241+
* Otherwise, returns the value as-is (for hex, rgb, hsl values).
242+
*
243+
* @param string|null $value The color value or slug.
244+
* @return string|null The CSS variable or color value.
245+
* @since 3.1.5
246+
* @access public
247+
*/
248+
public static function resolve_color_value( $value ) {
249+
// Use CSS variable conversion for slugs.
250+
return self::get_color_css_variable( $value );
251+
}
252+
205253
/**
206254
* Get Blocks CSS
207255
*

‎inc/css/blocks/class-advanced-column-css.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,9 @@ function ( $value ) use ( $block ) {
188188
array(
189189
'property' => '--background-color-hover',
190190
'value' => 'backgroundColorHover',
191+
'format' => function ( $value ) {
192+
return Base_CSS::resolve_color_value( $value );
193+
},
191194
),
192195
array(
193196
'property' => 'align-self',

‎inc/css/blocks/class-advanced-heading-css.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,16 @@ public function render_css( $block ) {
4444
array(
4545
'property' => 'color',
4646
'value' => 'headingColor',
47+
'format' => function ( $value, $attrs ) {
48+
return Base_CSS::resolve_color_value( $value );
49+
},
4750
),
4851
array(
4952
'property' => 'background',
5053
'value' => 'backgroundColor',
54+
'format' => function ( $value, $attrs ) {
55+
return Base_CSS::resolve_color_value( $value );
56+
},
5157
),
5258
array(
5359
'property' => 'font-family',
@@ -225,10 +231,16 @@ public function render_css( $block ) {
225231
array(
226232
'property' => 'color',
227233
'value' => 'highlightColor',
234+
'format' => function ( $value, $attrs ) {
235+
return Base_CSS::resolve_color_value( $value );
236+
},
228237
),
229238
array(
230239
'property' => 'background',
231240
'value' => 'highlightBackground',
241+
'format' => function ( $value, $attrs ) {
242+
return Base_CSS::resolve_color_value( $value );
243+
},
232244
),
233245
);
234246

@@ -537,6 +549,9 @@ public function render_css( $block ) {
537549
array(
538550
'property' => 'color',
539551
'value' => 'linkColor',
552+
'format' => function ( $value, $attrs ) {
553+
return Base_CSS::resolve_color_value( $value );
554+
},
540555
),
541556
),
542557
)
@@ -549,6 +564,9 @@ public function render_css( $block ) {
549564
array(
550565
'property' => 'color',
551566
'value' => 'linkHoverColor',
567+
'format' => function ( $value, $attrs ) {
568+
return Base_CSS::resolve_color_value( $value );
569+
},
552570
),
553571
),
554572
)

‎inc/css/blocks/class-button-css.php‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,17 @@ public function render_css( $block ) {
135135
'property' => 'color',
136136
'value' => 'color',
137137
'hasSync' => 'gr-btn-color',
138+
'format' => function ( $value ) {
139+
return Base_CSS::resolve_color_value( $value );
140+
},
138141
),
139142
array(
140143
'property' => 'background',
141144
'value' => 'background',
142145
'hasSync' => 'gr-btn-background',
146+
'format' => function ( $value ) {
147+
return Base_CSS::resolve_color_value( $value );
148+
},
143149
),
144150
array(
145151
'property' => 'background',
@@ -150,6 +156,9 @@ public function render_css( $block ) {
150156
'property' => 'border-color',
151157
'value' => 'border',
152158
'hasSync' => 'gr-btn-border-color',
159+
'format' => function ( $value ) {
160+
return Base_CSS::resolve_color_value( $value );
161+
},
153162
),
154163
array(
155164
'property' => 'box-shadow',
@@ -201,11 +210,17 @@ public function render_css( $block ) {
201210
'property' => 'color',
202211
'value' => 'hoverColor',
203212
'hasSync' => 'gr-btn-color-hover',
213+
'format' => function ( $value ) {
214+
return Base_CSS::resolve_color_value( $value );
215+
},
204216
),
205217
array(
206218
'property' => 'background',
207219
'value' => 'hoverBackground',
208220
'hasSync' => 'gr-btn-background-hover',
221+
'format' => function ( $value ) {
222+
return Base_CSS::resolve_color_value( $value );
223+
},
209224
),
210225
array(
211226
'property' => 'background',
@@ -216,6 +231,9 @@ public function render_css( $block ) {
216231
'property' => 'border-color',
217232
'value' => 'hoverBorder',
218233
'hasSync' => 'gr-btn-border-color-hover',
234+
'format' => function ( $value ) {
235+
return Base_CSS::resolve_color_value( $value );
236+
},
219237
),
220238
array(
221239
'property' => 'box-shadow',
@@ -298,10 +316,16 @@ public function render_global_css() {
298316
array(
299317
'property' => '--gr-btn-color',
300318
'value' => 'color',
319+
'format' => function ( $value ) {
320+
return Base_CSS::resolve_color_value( $value );
321+
},
301322
),
302323
array(
303324
'property' => '--gr-btn-background',
304325
'value' => 'background',
326+
'format' => function ( $value ) {
327+
return Base_CSS::resolve_color_value( $value );
328+
},
305329
),
306330
array(
307331
'property' => '--gr-btn-background',
@@ -336,6 +360,9 @@ public function render_global_css() {
336360
array(
337361
'property' => '--gr-btn-border-color',
338362
'value' => 'border',
363+
'format' => function ( $value ) {
364+
return Base_CSS::resolve_color_value( $value );
365+
},
339366
'condition' => function ( $attrs ) {
340367
return isset( $attrs['border'] ) && ! empty( $attrs['border'] );
341368
},
@@ -421,10 +448,16 @@ public function render_global_css() {
421448
array(
422449
'property' => '--gr-btn-color-hover',
423450
'value' => 'hoverColor',
451+
'format' => function ( $value ) {
452+
return Base_CSS::resolve_color_value( $value );
453+
},
424454
),
425455
array(
426456
'property' => '--gr-btn-background-hover',
427457
'value' => 'hoverBackground',
458+
'format' => function ( $value ) {
459+
return Base_CSS::resolve_color_value( $value );
460+
},
428461
),
429462
array(
430463
'property' => '--gr-btn-background-hover',
@@ -433,6 +466,9 @@ public function render_global_css() {
433466
array(
434467
'property' => '--gr-btn-border-color-hover',
435468
'value' => 'hoverBorder',
469+
'format' => function ( $value ) {
470+
return Base_CSS::resolve_color_value( $value );
471+
},
436472
),
437473
array(
438474
'property' => '--gr-btn-shadow-hover',

‎inc/css/blocks/class-circle-counter-css.php‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ public function render_css( $block ) {
6767
$percentage = isset( $attrs['percentage'] ) ? $attrs['percentage'] : 50;
6868

6969
if ( 50 > $percentage ) {
70-
return isset( $attrs['progressColor'] ) ? $attrs['progressColor'] : '#3878ff';
70+
return isset( $attrs['progressColor'] ) ? Base_CSS::resolve_color_value( $attrs['progressColor'] ) : '#3878ff';
7171
}
7272

73-
return $value;
73+
return Base_CSS::resolve_color_value( $value );
7474
},
7575
),
7676
array(
@@ -80,10 +80,10 @@ public function render_css( $block ) {
8080
$percentage = isset( $attrs['percentage'] ) ? $attrs['percentage'] : 50;
8181

8282
if ( 50 > $percentage ) {
83-
return isset( $attrs['backgroundColor'] ) ? $attrs['backgroundColor'] : '#4682b426';
83+
return isset( $attrs['backgroundColor'] ) ? Base_CSS::resolve_color_value( $attrs['backgroundColor'] ) : '#4682b426';
8484
}
8585

86-
return $value;
86+
return Base_CSS::resolve_color_value( $value );
8787
},
8888
),
8989
array(
@@ -132,6 +132,9 @@ public function render_css( $block ) {
132132
array(
133133
'property' => 'color',
134134
'value' => 'titleColor',
135+
'format' => function ( $value ) {
136+
return Base_CSS::resolve_color_value( $value );
137+
},
135138
),
136139
),
137140
)
@@ -144,6 +147,9 @@ public function render_css( $block ) {
144147
array(
145148
'property' => 'color',
146149
'value' => 'progressColor',
150+
'format' => function ( $value ) {
151+
return Base_CSS::resolve_color_value( $value );
152+
},
147153
),
148154
),
149155
)

‎inc/css/blocks/class-countdown-css.php‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,16 @@ public function render_css( $block ) {
7878
array(
7979
'property' => '--background-color',
8080
'value' => 'backgroundColor',
81+
'format' => function ( $value ) {
82+
return Base_CSS::resolve_color_value( $value );
83+
},
8184
),
8285
array(
8386
'property' => '--border-color',
8487
'value' => 'borderColor',
88+
'format' => function ( $value ) {
89+
return Base_CSS::resolve_color_value( $value );
90+
},
8591
),
8692
array(
8793
'property' => '--border-style',
@@ -279,6 +285,9 @@ public function render_css( $block ) {
279285
array(
280286
'property' => 'color',
281287
'value' => 'valueColor',
288+
'format' => function ( $value ) {
289+
return Base_CSS::resolve_color_value( $value );
290+
},
282291
),
283292
),
284293
)
@@ -291,6 +300,9 @@ public function render_css( $block ) {
291300
array(
292301
'property' => 'color',
293302
'value' => 'labelColor',
303+
'format' => function ( $value ) {
304+
return Base_CSS::resolve_color_value( $value );
305+
},
294306
),
295307
),
296308
)
@@ -303,6 +315,9 @@ public function render_css( $block ) {
303315
array(
304316
'property' => 'color',
305317
'value' => 'separatorColor',
318+
'format' => function ( $value ) {
319+
return Base_CSS::resolve_color_value( $value );
320+
},
306321
),
307322
),
308323
)

‎inc/css/blocks/class-flip-css.php‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,9 @@ public function render_css( $block ) {
9696
array(
9797
'property' => '--border-color',
9898
'value' => 'borderColor',
99+
'format' => function ( $value ) {
100+
return Base_CSS::resolve_color_value( $value );
101+
},
99102
),
100103
array(
101104
'property' => '--border-width',
@@ -136,6 +139,9 @@ public function render_css( $block ) {
136139
array(
137140
'property' => '--front-background',
138141
'value' => 'frontBackgroundColor',
142+
'format' => function ( $value ) {
143+
return Base_CSS::resolve_color_value( $value );
144+
},
139145
'condition' => function ( $attrs ) {
140146
return ! isset( $attrs['frontBackgroundType'] );
141147
},
@@ -198,6 +204,9 @@ public function render_css( $block ) {
198204
array(
199205
'property' => '--back-background',
200206
'value' => 'backBackgroundColor',
207+
'format' => function ( $value ) {
208+
return Base_CSS::resolve_color_value( $value );
209+
},
201210
'condition' => function ( $attrs ) {
202211
return ! isset( $attrs['backBackgroundType'] );
203212
},
@@ -373,6 +382,9 @@ public function render_css( $block ) {
373382
array(
374383
'property' => 'color',
375384
'value' => 'titleColor',
385+
'format' => function ( $value ) {
386+
return Base_CSS::resolve_color_value( $value );
387+
},
376388
),
377389
array(
378390
'property' => 'font-size',
@@ -392,6 +404,9 @@ public function render_css( $block ) {
392404
array(
393405
'property' => 'color',
394406
'value' => 'descriptionColor',
407+
'format' => function ( $value ) {
408+
return Base_CSS::resolve_color_value( $value );
409+
},
395410
),
396411
array(
397412
'property' => 'font-size',

0 commit comments

Comments
 (0)