Sync shadow presets support in theme.json

WordPress · Jan 26, 2023 · 8a12e9c · 8a12e9c
1 parent bce22eb
commit 8a12e9c
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 0 deletions.
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' ),
+		),
 	);
 
 	/**
@@ -293,6 +303,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 'shadow.presets' and 'shadow.defaultPresets'.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -333,6 +344,10 @@ class WP_Theme_JSON {
 			'padding'           => null,
 			'units'             => null,
 		),
+		'shadow'                        => array(
+			'presets'        => null,
+			'defaultPresets' => null,
+		),
 		'typography'                    => array(
 			'fluid'          => null,
 			'customFontSize' => null,

diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php
@@ -4128,4 +4128,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',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$styles = 'body{--wp--preset--shadow--natural: 5px 5px 5px 0 black;--wp--preset--shadow--sharp: 5px 5px black;}';
+		$this->assertEquals( $styles, $theme_json->get_stylesheet(), 'Returned of "::get_stylesheet" does not match expectations' );
+		$this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'variables' ) ), 'Returned of "::get_stylesheet" 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);}';
+		$styles         = $global_styles . $element_styles;
+
+		$this->assertEquals( $styles, $theme_json->get_stylesheet() );
+	}
 }