vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-05 05:04:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Themes: Add shadow presets support for theme.json.

Browse Source 
Adds shadow presets support for `theme.json` within the `WP_Theme_JSON` by 

* Adding it to presets metadata and valid settings.
* Defining the default shadow presets in Core's `theme.json`.

Includes PHPUnit tests. 

References:
* [https://github.com/WordPress/gutenberg/pull/46813 Gutenberg PR 46813]
* [https://github.com/WordPress/gutenberg/pull/47272 Gutenberg PR 47272]

Follow-up to [54162], [52049], [50973].

Props madhudollu, mamaduka, oandregal, scruffian, hellofromTonya.
Fixes #57559.

git-svn-id: https://develop.svn.wordpress.org/trunk@55176 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2023-02-01 18:05:44 +00:00
parent f3b858cb98
commit 7374cdeb74
3 changed files with 100 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/wp-includes/class-wp-theme-json.php
View File

@@ -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,

14
src/wp-includes/theme.json
View File

@@ -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,

71
tests/phpunit/tests/theme/wpThemeJson.php
View File

@@ -4434,4 +4434,75 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
$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() );
}
}