diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 77711a283c51c..c1bb6dd0f9e25 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -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, diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 93a81fe14cd94..9495104357b36 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -4090,4 +4090,42 @@ public function data_update_separator_declarations() { ), ); } + + /** + * @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() ); + } }