Adding text decoration

Fixing camel case style prop name
WordPress · May 2, 2022 · be71be4 · be71be4
1 parent 97ef4c7
commit be71be4
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 3 deletions.
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
@@ -159,6 +159,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],
 		support: [ 'typography', '__experimentalTextDecoration' ],
+		useEngine: true,
 	},
 	textTransform: {
 		value: [ 'typography', 'textTransform' ],

diff --git a/packages/style-engine/src/styles/typography/fontSize.ts b/packages/style-engine/src/styles/typography/fontSize.ts
@@ -21,7 +21,7 @@ const fontSize = {
 			? [
 					{
 						selector: options?.selector,
-						key: 'font-size',
+						key: 'fontSize',
 						value: styleValue,
 					},
 			  ]

diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts
@@ -3,5 +3,6 @@
  */
 import fontSize from './fontSize';
 import lineHeight from './lineHeight';
+import textDecoration from './textDecoration';
 
-export default [ fontSize, lineHeight ];
+export default [ fontSize, lineHeight, textDecoration ];
diff --git a/packages/style-engine/src/styles/typography/lineHeight.ts b/packages/style-engine/src/styles/typography/lineHeight.ts
@@ -21,7 +21,7 @@ const lineHeight = {
 			? [
 					{
 						selector: options?.selector,
-						key: 'line-height',
+						key: 'lineHeight',
 						value: styleValue,
 					},
 			  ]

diff --git a/packages/style-engine/src/styles/typography/textDecoration.ts b/packages/style-engine/src/styles/typography/textDecoration.ts
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+
+const textDecoration = {
+	name: 'lineHeight',
+	generate: ( style: Style, options: StyleOptions ) => {
+		const styleValue: string | undefined = get(
+			style,
+			[ 'typography', 'textDecoration' ],
+			null
+		);
+
+		return styleValue
+			? [
+					{
+						selector: options?.selector,
+						key: 'textDecoration',
+						value: styleValue,
+					},
+			  ]
+			: [];
+	},
+};
+
+export default textDecoration;