Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadow: add shadow presets support via theme.json #46813

Merged
merged 1 commit into from
Dec 29, 2022
Merged

Shadow: add shadow presets support via theme.json #46813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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