From b91f971f579c9c52a82a6a543ec89a01b5e78e58 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 26 Jan 2023 13:35:38 +0400 Subject: [PATCH 1/3] Sync shadow presets support in theme.json --- src/wp-includes/class-wp-theme-json.php | 16 ++++- tests/phpunit/tests/theme/wpThemeJson.php | 71 +++++++++++++++++++++++ 2 files changed, 86 insertions(+), 1 deletion(-) 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/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 201f6b559b06e..ac0ae294dba2b 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', + ), + ), + ), + ), + ) + ); + + $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() ); + } } From 020373cad51430d1342260ce6cbcb619dde05f11 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 31 Jan 2023 16:53:31 +0400 Subject: [PATCH 2/3] Add shadow presets to the 'theme.json' file --- src/wp-includes/theme.json | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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, From 5e3e53642a639a3a6d07e8d0f9dbc086b96c68c9 Mon Sep 17 00:00:00 2001 From: hellofromtonya Date: Wed, 1 Feb 2023 11:36:40 -0600 Subject: [PATCH 3/3] Tests improvements --- tests/phpunit/tests/theme/wpThemeJson.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index ac0ae294dba2b..113a1f01800ab 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -4459,9 +4459,9 @@ public function test_shadow_preset_styles() { ) ); - $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' ); + $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' ); } /** @@ -4499,10 +4499,10 @@ public function test_get_shadow_styles_for_blocks() { ) ); - $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; + $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->assertEquals( $styles, $theme_json->get_stylesheet() ); + $this->assertSame( $expected_styles, $theme_json->get_stylesheet() ); } }