added outline support for blocks via theme.json (#43526)

* added outline to theme.json * linting
WordPress · Sep 7, 2022 · 40efcbe · 40efcbe
1 parent e6dd3b1
commit 40efcbe
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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",