Skip to content

Commit

Permalink
Add shadow presets and property in global styles (#46813)
Browse files Browse the repository at this point in the history
  • Loading branch information
@madhusudhand
madhusudhand authored Dec 29, 2022
1 parent a130890 commit aa5bca2
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 0 deletions.
10 changes: 10 additions & 0 deletions docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
13 changes: 13 additions & 0 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
Expand Down Expand Up @@ -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,
Expand Down
14 changes: 14 additions & 0 deletions lib/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
70 changes: 70 additions & 0 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
37 changes: 37 additions & 0 deletions schemas/json/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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" },
Expand All @@ -602,6 +637,7 @@
"properties": {
"appearanceTools": {},
"border": {},
"shadow": {},
"color": {},
"layout": {},
"spacing": {},
Expand Down Expand Up @@ -1952,6 +1988,7 @@
"spacing": {},
"typography": {},
"border": {},
"shadow": {},
"custom": {},
"blocks": {
"description": "Settings defined on a per-block basis.",
Expand Down

1 comment on commit aa5bca2

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3800198371
📝 Reported issues:

Please sign in to comment.