From ea5aca33deb86468e8a067997fb905975bad160e Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 23 Aug 2022 16:37:43 +0200 Subject: [PATCH 1/2] added outline to theme.json --- .../theme-json-reference/theme-json-living.md | 13 +++++ .../wordpress-6.1/class-wp-theme-json-6-1.php | 10 ++++ packages/style-engine/src/styles/index.ts | 2 + .../style-engine/src/styles/outline/index.ts | 55 +++++++++++++++++++ schemas/json/theme.json | 23 ++++++++ 5 files changed, 103 insertions(+) create mode 100644 packages/style-engine/src/styles/outline/index.ts 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 4eb6067209f03b..f21ab0d9b1369a 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 fec35c0d32db28..8dfbd208b6b81c 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 faeb2bb09bb6cb..c4d6232f5f1e19 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -981,6 +981,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", From 6d94d1cc6650bf83f207bd2074491565f13fd6d9 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 23 Aug 2022 17:01:22 +0200 Subject: [PATCH 2/2] linting --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 8dfbd208b6b81c..b97dc87a110b66 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 @@ -326,9 +326,9 @@ public static function remove_insecure_properties( $theme_json ) { 'filter' => array( 'duotone' => null, ), - 'outline' => array( + 'outline' => array( 'color' => null, - 'offset' => null, + 'offset' => null, 'style' => null, 'width' => null, ),