From aa5bca218516aa11bd17c017df09a6d828f10b71 Mon Sep 17 00:00:00 2001 From: Madhu Dollu Date: Thu, 29 Dec 2022 16:53:12 +0530 Subject: [PATCH] Add shadow presets and property in global styles (#46813) --- .../theme-json-reference/theme-json-living.md | 10 +++ lib/class-wp-theme-json-gutenberg.php | 13 ++++ lib/theme.json | 14 ++++ phpunit/class-wp-theme-json-test.php | 70 +++++++++++++++++++ schemas/json/theme.json | 37 ++++++++++ 5 files changed, 144 insertions(+) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 7aa790dd977899..24b060605da718 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -52,6 +52,16 @@ Settings related to borders. --- +### shadow + +Settings related to shadows. + +| Property | Type | Default | Props | +| --- | --- | --- |--- | +| palette | array | | name, shadow, slug | + +--- + ### color Settings related to colors. diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 6edcb58d3d1866..ddad36e15fc02d 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -117,6 +117,15 @@ class WP_Theme_JSON_Gutenberg { * @var array */ const PRESETS_METADATA = array( + array( + 'path' => array( 'shadow', 'palette' ), + 'prevent_override' => array( 'shadow', 'defaultPalette' ), + 'use_default_names' => false, + 'value_key' => 'shadow', + 'css_vars' => '--wp--preset--shadow--$slug', + 'classes' => array(), + 'properties' => array( 'box-shadow' ), + ), array( 'path' => array( 'color', 'palette' ), 'prevent_override' => array( 'color', 'defaultPalette' ), @@ -333,6 +342,10 @@ class WP_Theme_JSON_Gutenberg { 'style' => null, 'width' => null, ), + 'shadow' => array( + 'palette' => null, + 'defaultPalette' => null, + ), 'color' => array( 'background' => null, 'custom' => null, diff --git a/lib/theme.json b/lib/theme.json index 40432cedf38777..6221873a032973 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -186,6 +186,20 @@ ], "text": true }, + "shadow": { + "palette": [ + { + "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)" + } + ] + }, "layout": { "definitions": { "default": { diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 6147d301be8166..ca27606ea2e442 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -435,6 +435,76 @@ public function test_get_stylesheet() { $this->assertEquals( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) ); } + /** + * Tests generating the spacing presets array based on the spacing scale provided. + * + * @dataProvider data_set_spacing_sizes_when_invalid + */ + public function test_shadow_preset_styles() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'shadow' => array( + 'palette' => 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() ); + $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'variables' ) ) ); + } + + public function test_get_shadow_styles_for_blocks() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'shadow' => array( + 'palette' => 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() ); + } + public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors() { $theme_json = new WP_Theme_JSON_Gutenberg( array( diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 33c5e547f09033..f4934ef20394b0 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -67,6 +67,40 @@ } } }, + "settingsPropertiesShadow": { + "type": "object", + "properties": { + "shadow": { + "description": "Settings related to shadows.", + "type": "object", + "properties": { + "palette": { + "description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.", + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "description": "Name of the shadow preset, translatable.", + "type": "string" + }, + "slug": { + "description": "Kebab-case unique identifier for the shadow preset.", + "type": "string" + }, + "shadow": { + "description": "CSS box-shadow value", + "type": "string" + } + }, + "required": [ "name", "slug", "shadow" ], + "additionalProperties": false + } + } + } + } + } + }, "settingsPropertiesColor": { "type": "object", "properties": { @@ -586,6 +620,7 @@ { "$ref": "#/definitions/settingsPropertiesAppearanceTools" }, { "$ref": "#/definitions/settingsPropertiesBorder" }, { "$ref": "#/definitions/settingsPropertiesColor" }, + { "$ref": "#/definitions/settingsPropertiesShadow" }, { "$ref": "#/definitions/settingsPropertiesLayout" }, { "$ref": "#/definitions/settingsPropertiesSpacing" }, { "$ref": "#/definitions/settingsPropertiesTypography" }, @@ -602,6 +637,7 @@ "properties": { "appearanceTools": {}, "border": {}, + "shadow": {}, "color": {}, "layout": {}, "spacing": {}, @@ -1952,6 +1988,7 @@ "spacing": {}, "typography": {}, "border": {}, + "shadow": {}, "custom": {}, "blocks": { "description": "Settings defined on a per-block basis.",