Skip to content

Commit f302ab1

Browse files
authored
Fix specificity issue between theme and user styles (#29533)
Make preset values !important Given how the style system works, !important is a good choice for preset classes the user attaches to the post content. If those values need to be overridden, in addition to regular CSS, we can offer hooks for the theme.json processing, so plugins have an alternate mechanism to modify this behavior.
1 parent 97f7086 commit f302ab1

File tree

2 files changed

+41
-5
lines changed

2 files changed

+41
-5
lines changed

lib/class-wp-theme-json.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -791,7 +791,7 @@ private static function compute_preset_classes( $settings, $selector ) {
791791
array(
792792
array(
793793
'name' => $class['property_name'],
794-
'value' => $value[ $preset['value_key'] ],
794+
'value' => $value[ $preset['value_key'] ] . ' !important',
795795
),
796796
)
797797
);

phpunit/class-wp-theme-json-test.php

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -280,11 +280,11 @@ function test_get_stylesheet() {
280280
);
281281

282282
$this->assertEquals(
283-
':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}:root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey;}.has-grey-background-color{background-color: grey;}',
283+
':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}:root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
284284
$theme_json->get_stylesheet()
285285
);
286286
$this->assertEquals(
287-
':root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey;}.has-grey-background-color{background-color: grey;}',
287+
':root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
288288
$theme_json->get_stylesheet( 'block_styles' )
289289
);
290290
$this->assertEquals(
@@ -319,15 +319,51 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() {
319319
);
320320

321321
$this->assertEquals(
322-
'.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey;}.wp-block-group.has-grey-background-color{background-color: grey;}',
322+
'.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
323323
$theme_json->get_stylesheet()
324324
);
325325
$this->assertEquals(
326-
'.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey;}.wp-block-group.has-grey-background-color{background-color: grey;}',
326+
'.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
327327
$theme_json->get_stylesheet( 'block_styles' )
328328
);
329329
}
330330

331+
public function test_get_stylesheet_preset_values_are_marked_as_important() {
332+
$theme_json = new WP_Theme_JSON(
333+
array(
334+
'settings' => array(
335+
'defaults' => array(
336+
'color' => array(
337+
'palette' => array(
338+
array(
339+
'slug' => 'grey',
340+
'color' => 'grey',
341+
),
342+
),
343+
),
344+
),
345+
),
346+
'styles' => array(
347+
'core/post-title/h2' => array(
348+
'color' => array(
349+
'text' => 'red',
350+
'background' => 'blue',
351+
),
352+
'typography' => array(
353+
'fontSize' => '12px',
354+
'lineHeight' => '1.3',
355+
),
356+
),
357+
),
358+
)
359+
);
360+
361+
$this->assertEquals(
362+
':root{--wp--preset--color--grey: grey;}h2.wp-block-post-title{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
363+
$theme_json->get_stylesheet()
364+
);
365+
}
366+
331367
public function test_merge_incoming_data() {
332368
$root_name = WP_Theme_JSON::ROOT_BLOCK_NAME;
333369
$initial = array(

0 commit comments

Comments
 (0)