From fc91941fb0c5b7aa33b228f1c1cc2fa6d6ec935f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 4 Mar 2021 11:20:20 +0100 Subject: [PATCH 1/4] Add test cases --- phpunit/class-wp-theme-json-test.php | 44 +++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index a74c88a51dcede..5da2fa6795a846 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -280,11 +280,11 @@ function test_get_stylesheet() { ); $this->assertEquals( - ':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;}', + ':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;}', $theme_json->get_stylesheet() ); $this->assertEquals( - ':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;}', + ':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;}', $theme_json->get_stylesheet( 'block_styles' ) ); $this->assertEquals( @@ -319,15 +319,51 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ); $this->assertEquals( - '.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;}', + ".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;}", $theme_json->get_stylesheet() ); $this->assertEquals( - '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey;}.wp-block-group.has-grey-background-color{background-color: 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;}', $theme_json->get_stylesheet( 'block_styles' ) ); } + public function test_get_stylesheet_preset_classes_are_prepended_with_block_selectors(){ + $theme_json = new WP_Theme_JSON( + array( + 'settings' => array( + 'defaults' => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), + ), + ), + ), + ), + 'styles' => array( + 'core/post-title/h2' => array( + 'color' => array( + 'text' => 'red', + 'background' => 'blue', + ), + 'typography' => array( + 'fontSize' => '12px', + 'lineHeight' => '1.3' + ), + ), + ), + ) + ); + + $this->assertEquals( + ":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;}", + $theme_json->get_stylesheet() + ); + } + public function test_merge_incoming_data() { $root_name = WP_Theme_JSON::ROOT_BLOCK_NAME; $initial = array( From 980a0b6c981970388430d374cbe5d017c865c29c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 4 Mar 2021 11:26:24 +0100 Subject: [PATCH 2/4] 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. --- lib/class-wp-theme-json.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php index 716113f371def7..32f3513fff8b9b 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json.php @@ -791,7 +791,7 @@ private static function compute_preset_classes( $settings, $selector ) { array( array( 'name' => $class['property_name'], - 'value' => $value[ $preset['value_key'] ], + 'value' => $value[ $preset['value_key'] ] . ' !important', ), ) ); From c1b48bd90542d5f6952404676b7d173be827b35b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 4 Mar 2021 11:28:58 +0100 Subject: [PATCH 3/4] Rename test --- phpunit/class-wp-theme-json-test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 5da2fa6795a846..e3e90fd9db313e 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -328,7 +328,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ); } - public function test_get_stylesheet_preset_classes_are_prepended_with_block_selectors(){ + public function test_get_stylesheet_preset_values_are_marked_as_important(){ $theme_json = new WP_Theme_JSON( array( 'settings' => array( From 16498413a2b03ce5b1282687510b5314b0eb453d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 4 Mar 2021 12:25:36 +0100 Subject: [PATCH 4/4] Make linter happy --- phpunit/class-wp-theme-json-test.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index e3e90fd9db313e..81e77bcb234692 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -319,7 +319,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ); $this->assertEquals( - ".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;}", + '.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;}', $theme_json->get_stylesheet() ); $this->assertEquals( @@ -328,7 +328,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ); } - public function test_get_stylesheet_preset_values_are_marked_as_important(){ + public function test_get_stylesheet_preset_values_are_marked_as_important() { $theme_json = new WP_Theme_JSON( array( 'settings' => array( @@ -345,13 +345,13 @@ public function test_get_stylesheet_preset_values_are_marked_as_important(){ ), 'styles' => array( 'core/post-title/h2' => array( - 'color' => array( - 'text' => 'red', + 'color' => array( + 'text' => 'red', 'background' => 'blue', ), 'typography' => array( - 'fontSize' => '12px', - 'lineHeight' => '1.3' + 'fontSize' => '12px', + 'lineHeight' => '1.3', ), ), ), @@ -359,7 +359,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important(){ ); $this->assertEquals( - ":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;}", + ':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;}', $theme_json->get_stylesheet() ); }