Shadow: revert shadow default presets opt-in to opt-out (#60204)

* revert shadow default presets opt-in * add unit tests to verify default presets in block and classic themes
WordPress · Apr 2, 2024 · 2477a6d · 2477a6d
1 parent 792b205
commit 2477a6d
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 12 deletions.
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -38,7 +38,6 @@ Setting that enables the following UI tools:
 - position: sticky
 - spacing: blockGap, margin, padding
 - typography: lineHeight
-- shadow: defaultPresets
 
 
 ---
@@ -73,7 +72,7 @@ Settings related to shadows.
 
 | Property  | Type   | Default | Props  |
 | ---       | ---    | ---    |---   |
-| defaultPresets | boolean | false |  |
+| defaultPresets | boolean | true |  |
 | presets | array |  | name, shadow, slug |
 
 ---

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -695,7 +695,6 @@ public static function get_element_class_name( $element ) {
 		array( 'spacing', 'margin' ),
 		array( 'spacing', 'padding' ),
 		array( 'typography', 'lineHeight' ),
-		array( 'shadow', 'defaultPresets' ),
 	);
 
 	/**

diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -319,6 +319,17 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 			}
 			$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;
 
+			if ( ! isset( $theme_support_data['settings']['shadow'] ) ) {
+				$theme_support_data['settings']['shadow'] = array();
+			}
+			/*
+			 * Shadow presets are explicitly disabled for classic themes until a
+			 * decision is made for whether the default presets should match the
+			 * other presets or if they should be disabled by default in classic
+			 * themes. See https://github.com/WordPress/gutenberg/issues/59989.
+			 */
+			$theme_support_data['settings']['shadow']['defaultPresets'] = false;
+
 			// Allow themes to enable all border settings via theme_support.
 			if ( current_theme_supports( 'border' ) ) {
 				$theme_support_data['settings']['border']['color']  = true;

diff --git a/lib/theme.json b/lib/theme.json
@@ -191,7 +191,7 @@
 			"text": true
 		},
 		"shadow": {
-			"defaultPresets": false,
+			"defaultPresets": true,
 			"presets": [
 				{
 					"name": "Natural",

diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php
@@ -194,6 +194,22 @@ public function test_translations_are_applied() {
 					'padding'  => true,
 					'blockGap' => true,
 				),
+				'shadow'     => array(
+					'presets' => array(
+						'theme' => array(
+							array(
+								'name'   => 'Natural',
+								'slug'   => 'natural',
+								'shadow' => '2px 2px 3px #000',
+							),
+							array(
+								'name'   => 'Test',
+								'slug'   => 'test',
+								'shadow' => '2px 2px 3px #000',
+							),
+						),
+					),
+				),
 				'blocks'     => array(
 					'core/paragraph' => array(
 						'color' => array(
@@ -540,6 +556,22 @@ public function test_merges_child_theme_json_into_parent_theme_json() {
 					),
 				),
 			),
+			'shadow'     => array(
+				'presets' => array(
+					'theme' => array(
+						array(
+							'name'   => 'Natural',
+							'slug'   => 'natural',
+							'shadow' => '2px 2px 3px #000',
+						),
+						array(
+							'name'   => 'Test',
+							'slug'   => 'test',
+							'shadow' => '2px 2px 3px #000',
+						),
+					),
+				),
+			),
 			'spacing'    => array(
 				'blockGap' => true,
 				'units'    => array( 'rem' ),
@@ -1039,4 +1071,72 @@ public function test_get_style_variations_returns_all_variations() {
 			$actual_settings
 		);
 	}
+
+	public function test_theme_shadow_presets_do_not_override_default_shadow_presets() {
+		switch_theme( 'block-theme' );
+
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+		$theme_json          = $theme_json_resolver->get_merged_data();
+		$actual_settings     = $theme_json->get_settings()['shadow']['presets'];
+
+		$expected_settings = array(
+			'default' => array(
+				array(
+					'name'   => 'Natural',
+					'shadow' => '6px 6px 9px rgba(0, 0, 0, 0.2)',
+					'slug'   => 'natural',
+				),
+				array(
+					'name'   => 'Deep',
+					'shadow' => '12px 12px 50px rgba(0, 0, 0, 0.4)',
+					'slug'   => 'deep',
+				),
+				array(
+					'name'   => 'Sharp',
+					'shadow' => '6px 6px 0px rgba(0, 0, 0, 0.2)',
+					'slug'   => 'sharp',
+				),
+				array(
+					'name'   => 'Outlined',
+					'shadow' => '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+					'slug'   => 'outlined',
+				),
+				array(
+					'name'   => 'Crisp',
+					'shadow' => '6px 6px 0px rgba(0, 0, 0, 1)',
+					'slug'   => 'crisp',
+				),
+			),
+			'theme'   => array(
+				array(
+					'name'   => 'Test',
+					'shadow' => '2px 2px 3px #000',
+					'slug'   => 'test',
+				),
+			),
+		);
+
+		wp_recursive_ksort( $actual_settings );
+		wp_recursive_ksort( $expected_settings );
+
+		$this->assertSame(
+			$expected_settings,
+			$actual_settings
+		);
+	}
+
+	public function test_shadow_default_presets_value_for_block_and_classic_themes() {
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+		$theme_json          = $theme_json_resolver->get_merged_data();
+
+		$default_presets_for_classic = $theme_json->get_settings()['shadow']['defaultPresets'];
+		$this->assertFalse( $default_presets_for_classic );
+
+		switch_theme( 'block-theme' );
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+		$theme_json          = $theme_json_resolver->get_merged_data();
+
+		$default_presets_for_block = $theme_json->get_settings()['shadow']['defaultPresets'];
+		$this->assertTrue( $default_presets_for_block );
+	}
 }
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
@@ -289,9 +289,6 @@ public function test_get_settings_appearance_true_opts_in() {
 			'typography' => array(
 				'lineHeight' => true,
 			),
-			'shadow'     => array(
-				'defaultPresets' => true,
-			),
 			'blocks'     => array(
 				'core/paragraph' => array(
 					'typography' => array(
@@ -331,9 +328,6 @@ public function test_get_settings_appearance_true_opts_in() {
 					'typography' => array(
 						'lineHeight' => false,
 					),
-					'shadow'     => array(
-						'defaultPresets' => true,
-					),
 				),
 			),
 		);

diff --git a/phpunit/data/themedir1/block-theme/theme.json b/phpunit/data/themedir1/block-theme/theme.json
@@ -49,6 +49,20 @@
 			"padding": true,
 			"blockGap": true
 		},
+		"shadow": {
+			"presets": [
+				{
+					"name": "Natural",
+					"slug": "natural",
+					"shadow": "2px 2px 3px #000"
+				},
+				{
+					"name": "Test",
+					"slug": "test",
+					"shadow": "2px 2px 3px #000"
+				}
+			]
+		},
 		"blocks": {
 			"core/paragraph": {
 				"color": {

diff --git a/schemas/json/theme.json b/schemas/json/theme.json
@@ -20,7 +20,7 @@
 			"type": "object",
 			"properties": {
 				"appearanceTools": {
-					"description": "Setting that enables the following UI tools:\n\n- background: backgroundImage, backgroundSize\n- border: color, radius, style, width\n- color: link, heading, button, caption\n- dimensions: aspectRatio, minHeight\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight\n- shadow: defaultPresets",
+					"description": "Setting that enables the following UI tools:\n\n- background: backgroundImage, backgroundSize\n- border: color, radius, style, width\n- color: link, heading, button, caption\n- dimensions: aspectRatio, minHeight\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight",
 					"type": "boolean",
 					"default": false
 				}
@@ -77,7 +77,7 @@
 						"defaultPresets": {
 							"description": "Allow users to choose shadows from the default shadow presets.",
 							"type": "boolean",
-							"default": false
+							"default": true
 						},
 						"presets": {
 							"description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.",