Themes: Add shadow presets support for theme.json.

Adds shadow presets support for `theme.json` within the `WP_Theme_JSON` by * Adding it to presets metadata and valid settings. * Defining the default shadow presets in Core's `theme.json`. Includes PHPUnit tests. References: * [WordPress/gutenberg#46813 Gutenberg PR 46813] * [WordPress/gutenberg#47272 Gutenberg PR 47272] Follow-up to [54162], [52049], [50973]. Props madhudollu, mamaduka, oandregal, scruffian, hellofromTonya. Fixes #57559. git-svn-id: https://develop.svn.wordpress.org/trunk@55176 602fd350-edb4-49c9-b593-d223f7449a82
WordPress · Feb 1, 2023 · 7374cde · 7374cde
1 parent f3b858c
commit 7374cde
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php
@@ -115,6 +115,7 @@ class WP_Theme_JSON {
 	 *              `use_default_names` preset key, and simplified the metadata structure.
 	 * @since 6.0.0 Replaced `override` with `prevent_override` and updated the
 	 *              `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
+	 * @since 6.2.0 Added 'shadow' presets.
 	 * @var array
 	 */
 	const PRESETS_METADATA = array(
@@ -176,6 +177,15 @@ class WP_Theme_JSON {
 			'classes'           => array(),
 			'properties'        => array( 'padding', 'margin' ),
 		),
+		array(
+			'path'              => array( 'shadow', 'presets' ),
+			'prevent_override'  => array( 'shadow', 'defaultPresets' ),
+			'use_default_names' => false,
+			'value_key'         => 'shadow',
+			'css_vars'          => '--wp--preset--shadow--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'box-shadow' ),
+		),
 	);
 
 	/**
@@ -294,7 +304,7 @@ class WP_Theme_JSON {
 	 *              and `typography`, and renamed others according to the new schema.
 	 * @since 6.0.0 Added `color.defaultDuotone`.
 	 * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
-	 * @since 6.2.0 Added `dimensions.minHeight`.
+	 * @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', and 'shadow.defaultPresets'.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -338,6 +348,10 @@ class WP_Theme_JSON {
 			'padding'           => null,
 			'units'             => null,
 		),
+		'shadow'                        => array(
+			'presets'        => null,
+			'defaultPresets' => null,
+		),
 		'typography'                    => array(
 			'fluid'          => null,
 			'customFontSize' => null,

diff --git a/src/wp-includes/theme.json b/src/wp-includes/theme.json
@@ -325,6 +325,20 @@
 				}
 			}
 		},
+		"shadow": {
+			"presets": [
+				{
+					"name": "Natural",
+					"slug": "natural",
+					"shadow": "0 .2rem .3rem 0 rgba(0,0,0, 0.3), 0 .5rem .6rem 0 rgba(0,0,0, 0.4)"
+				},
+				{
+					"name": "Sharp",
+					"slug": "sharp",
+					"shadow": ".5rem .5rem 0 0 rgba(0,0,0, 0.4)"
+				}
+			]
+		},
 		"spacing": {
 			"blockGap": null,
 			"margin": false,

diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php
@@ -4434,4 +4434,75 @@ public function test_get_stylesheet_returns_outline_styles() {
 		$expected = $base_styles . $element_styles;
 		$this->assertSame( $expected, $theme_json->get_stylesheet() );
 	}
+
+	/**
+	 * @ticket 57559
+	 */
+	public function test_shadow_preset_styles() {
+		$theme_json = new WP_Theme_JSON(
+			array(
+				'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+				'settings' => array(
+					'shadow' => array(
+						'presets' => array(
+							array(
+								'slug'   => 'natural',
+								'shadow' => '5px 5px 5px 0 black',
+							),
+							array(
+								'slug'   => 'sharp',
+								'shadow' => '5px 5px black',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected_styles = 'body{--wp--preset--shadow--natural: 5px 5px 5px 0 black;--wp--preset--shadow--sharp: 5px 5px black;}';
+		$this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" does not match expectations' );
+		$this->assertSame( $expected_styles, $theme_json->get_stylesheet( array( 'variables' ) ), 'Styles returned from "::get_stylesheet()" when requiring "variables" type does not match expectations' );
+	}
+
+	/**
+	 * @ticket 57559
+	 */
+	public function test_get_shadow_styles_for_blocks() {
+		$theme_json = new WP_Theme_JSON(
+			array(
+				'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+				'settings' => array(
+					'shadow' => array(
+						'presets' => array(
+							array(
+								'slug'   => 'natural',
+								'shadow' => '5px 5px 0 0 black',
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'blocks'   => array(
+						'core/paragraph' => array(
+							'shadow' => 'var(--wp--preset--shadow--natural)',
+						),
+					),
+					'elements' => array(
+						'button' => array(
+							'shadow' => 'var:preset|shadow|natural',
+						),
+						'link'   => array(
+							'shadow' => array( 'ref' => 'styles.elements.button.shadow' ),
+						),
+					),
+				),
+			)
+		);
+
+		$global_styles   = 'body{--wp--preset--shadow--natural: 5px 5px 0 0 black;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+		$element_styles  = 'a:where(:not(.wp-element-button)){box-shadow: var(--wp--preset--shadow--natural);}.wp-element-button, .wp-block-button__link{box-shadow: var(--wp--preset--shadow--natural);}p{box-shadow: var(--wp--preset--shadow--natural);}';
+		$expected_styles = $global_styles . $element_styles;
+
+		$this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
+	}
 }