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.

Author: nosolosw

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',
 							),
 						)
 					);

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_values_are_marked_as_important() {
+		$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(