mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-02-06 23:50:43 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Themes: Adds outline CSS properties support in theme.json.

Browse Source 
Adds the ability to define outline CSS properties for elements and blocks within `theme.json` to render `outline-color`, `outline-offset`, `outline-style`, and `outline-width` styles.

Originally developed and tested in [https://github.com/WordPress/gutenberg/pull/43526 Gutenberg PR 43526].

Props onemaggie, hellofromTonya, audrasjb, ironprogrammer.
Fixes #57354.

git-svn-id: https://develop.svn.wordpress.org/trunk@55008 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork 2022-12-19 20:53:15 +00:00
parent 429829d6d9
commit 008277583b
2 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -192,6 +192,8 @@ class WP_Theme_JSON {
* @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
* `--wp--style--root--padding-*`, and `box-shadow` properties,
* removed the `--wp--style--block-gap` property.
* @since 6.2.0 Added `outline-*` properties.
*
* @var array
*/
const PROPERTIES_METADATA = array(
@ -229,6 +231,10 @@ class WP_Theme_JSON {
'margin-right' => array( 'spacing', 'margin', 'right' ),
'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
'margin-left' => array( 'spacing', 'margin', 'left' ),
'outline-color' => array( 'outline', 'color' ),
'outline-offset' => array( 'outline', 'offset' ),
'outline-style' => array( 'outline', 'style' ),
'outline-width' => array( 'outline', 'width' ),
'padding' => array( 'spacing', 'padding' ),
'padding-top' => array( 'spacing', 'padding', 'top' ),
'padding-right' => array( 'spacing', 'padding', 'right' ),
@ -352,6 +358,8 @@ class WP_Theme_JSON {
* @since 6.1.0 Added new side properties for `border`,
* added new property `shadow`,
* updated `blockGap` to be allowed at any level.
* @since 6.2.0 Added `outline` properties.
*
* @var array
*/
const VALID_STYLES = array(
@ -374,6 +382,12 @@ class WP_Theme_JSON {
'duotone' => null,
),
'shadow' => null,
'outline' => array(
'color' => null,
'offset' => null,
'style' => null,
'width' => null,
),
'spacing' => array(
'margin' => null,
'padding' => null,

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

@ -4090,4 +4090,42 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
),
);
}
/**
* @ticket 57354
*/
public function test_get_stylesheet_returns_outline_styles() {
$theme_json = new WP_Theme_JSON(
array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'styles' => array(
'elements' => array(
'button' => array(
'outline' => array(
'offset' => '3px',
'width' => '3px',
'style' => 'dashed',
'color' => 'red',
),
':hover' => array(
'outline' => array(
'offset' => '3px',
'width' => '3px',
'style' => 'solid',
'color' => 'blue',
),
),
),
),
),
)
);
$base_styles = '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 = '.wp-element-button, .wp-block-button__link{outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}.wp-element-button:hover, .wp-block-button__link:hover{outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';
$expected = $base_styles . $element_styles;
$this->assertSame( $expected, $theme_json->get_stylesheet() );
}
}