diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 207067ea9cabe..71801df2af174 100644 --- 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 index 40432cedf3877..512f6d796c7ec 100644 --- 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 index 201f6b559b06e..113a1f01800ab 100644 --- 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() ); + } }