Themes: Add shadow presets support for theme.json.

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
+71
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() );
}
}