diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 976955ae0fc49f..d16cadc0b74d03 100644 --- 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 index c241569257a05a..574b69c63beb19 100644 --- 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 index 3a4d401021ae3b..298f16dff00f9d 100644 --- 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 index 3f52a61ae5502f..2602696a0e0229 100644 --- 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 new file mode 100644 index 00000000000000..850f67121dadfd --- /dev/null +++ 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;