diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 0096a41be04baf..3b3d40ffd73359 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -158,6 +158,19 @@ Color styles. --- +### outline + +Outline styles. + +| Property | Type | Props | +| --- | --- |--- | +| color | string | | +| offset | string | | +| style | string | | +| width | string | | + +--- + ### spacing Spacing styles. diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 56a71c68cf34b2..86227b473c89b5 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -66,6 +66,10 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { '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' ), @@ -322,6 +326,12 @@ public static function remove_insecure_properties( $theme_json ) { 'filter' => array( 'duotone' => null, ), + 'outline' => array( + 'color' => null, + 'offset' => null, + 'style' => null, + 'width' => null, + ), 'spacing' => array( 'margin' => null, 'padding' => null, diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts index 90b312c215bbee..f4cb09e18fb7bb 100644 --- a/packages/style-engine/src/styles/index.ts +++ b/packages/style-engine/src/styles/index.ts @@ -4,12 +4,14 @@ import border from './border'; import color from './color'; import shadow from './shadow'; +import outline from './outline'; import spacing from './spacing'; import typography from './typography'; export const styleDefinitions = [ ...border, ...color, + ...outline, ...spacing, ...typography, ...shadow, diff --git a/packages/style-engine/src/styles/outline/index.ts b/packages/style-engine/src/styles/outline/index.ts new file mode 100644 index 00000000000000..c6c3101fa90272 --- /dev/null +++ b/packages/style-engine/src/styles/outline/index.ts @@ -0,0 +1,55 @@ +/** + * Internal dependencies + */ +import type { GeneratedCSSRule, Style, StyleOptions } from '../../types'; +import { generateRule } from '../utils'; + +const color = { + name: 'color', + generate: ( + style: Style, + options: StyleOptions, + path: string[] = [ 'outline', 'color' ], + ruleKey: string = 'outlineColor' + ): GeneratedCSSRule[] => { + return generateRule( style, options, path, ruleKey ); + }, +}; + +const offset = { + name: 'offset', + generate: ( + style: Style, + options: StyleOptions, + path: string[] = [ 'outline', 'offset' ], + ruleKey: string = 'outlineColor' + ): GeneratedCSSRule[] => { + return generateRule( style, options, path, ruleKey ); + }, +}; + +const outlineStyle = { + name: 'style', + generate: ( + style: Style, + options: StyleOptions, + path: string[] = [ 'outline', 'style' ], + ruleKey: string = 'outlineStyle' + ): GeneratedCSSRule[] => { + return generateRule( style, options, path, ruleKey ); + }, +}; + +const width = { + name: 'width', + generate: ( + style: Style, + options: StyleOptions, + path: string[] = [ 'outline', 'width' ], + ruleKey: string = 'outlineWidth' + ): GeneratedCSSRule[] => { + return generateRule( style, options, path, ruleKey ); + }, +}; + +export default [ color, outlineStyle, offset, width ]; diff --git a/schemas/json/theme.json b/schemas/json/theme.json index dacedec103e0ae..62e27ff14611d9 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -986,6 +986,29 @@ }, "additionalProperties": false }, + "outline": { + "description": "Outline styles.", + "type": "object", + "properties": { + "color": { + "description": "Sets the `outline-color` CSS property.", + "type": "string" + }, + "offset": { + "description": "Sets the `outline-offset` CSS property.", + "type": "string" + }, + "style": { + "description": "Sets the `outline-style` CSS property.", + "type": "string" + }, + "width": { + "description": "Sets the `outline-width` CSS property.", + "type": "string" + } + }, + "additionalProperties": false + }, "spacing": { "description": "Spacing styles.", "type": "object",