diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index f5636c150c3eeb..0fd0aeac60e7c4 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -206,6 +206,12 @@ final class WP_Style_Engine { ), 'path' => array( 'typography', 'lineHeight' ), ), + 'textColumns' => array( + 'property_keys' => array( + 'default' => 'column-count', + ), + 'path' => array( 'typography', 'textColumns' ), + ), 'textDecoration' => array( 'property_keys' => array( 'default' => 'text-decoration', diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts index 48effa0b2b8a95..75e02c96430512 100644 --- a/packages/style-engine/src/styles/typography/index.ts +++ b/packages/style-engine/src/styles/typography/index.ts @@ -76,6 +76,18 @@ const lineHeight = { }, }; +const textColumns = { + name: 'textColumns', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( + style, + options, + [ 'typography', 'textColumns' ], + 'columnCount' + ); + }, +}; + const textDecoration = { name: 'textDecoration', generate: ( style: Style, options: StyleOptions ) => { @@ -107,6 +119,7 @@ export default [ fontWeight, letterSpacing, lineHeight, + textColumns, textDecoration, textTransform, ]; diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js index a94bd8a4256810..fac55b4000e58f 100644 --- a/packages/style-engine/src/test/index.js +++ b/packages/style-engine/src/test/index.js @@ -72,6 +72,7 @@ describe( 'generate', () => { fontWeight: '800', fontFamily: "'Helvetica Neue',sans-serif", lineHeight: '3.3', + textColumns: '2', textDecoration: 'line-through', letterSpacing: '12px', textTransform: 'uppercase', @@ -88,7 +89,7 @@ describe( 'generate', () => { } ) ).toEqual( - ".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }" + ".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; column-count: 2; text-decoration: line-through; text-transform: uppercase; }" ); } ); @@ -242,6 +243,7 @@ describe( 'getCSSRules', () => { fontWeight: '800', fontFamily: "'Helvetica Neue',sans-serif", lineHeight: '3.3', + textColumns: '2', textDecoration: 'line-through', letterSpacing: '12px', textTransform: 'uppercase', @@ -349,6 +351,11 @@ describe( 'getCSSRules', () => { key: 'lineHeight', value: '3.3', }, + { + selector: '.some-selector', + key: 'columnCount', + value: '2', + }, { selector: '.some-selector', key: 'textDecoration', diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts index 0063cd56621c6c..23d3e38cc43c22 100644 --- a/packages/style-engine/src/types.ts +++ b/packages/style-engine/src/types.ts @@ -52,6 +52,7 @@ export interface Style { fontStyle?: CSSProperties[ 'fontStyle' ]; letterSpacing?: CSSProperties[ 'letterSpacing' ]; lineHeight?: CSSProperties[ 'lineHeight' ]; + textColumns?: CSSProperties[ 'columnCount' ]; textDecoration?: CSSProperties[ 'textDecoration' ]; textTransform?: CSSProperties[ 'textTransform' ]; }; diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php index 66d8dd62865272..0588f10ef4fce7 100644 --- a/phpunit/style-engine/style-engine-test.php +++ b/phpunit/style-engine/style-engine-test.php @@ -188,6 +188,7 @@ public function data_wp_style_engine_get_styles() { 'fontStyle' => 'italic', 'fontWeight' => '800', 'lineHeight' => '1.3', + 'textColumns' => '2', 'textDecoration' => 'underline', 'textTransform' => 'uppercase', 'letterSpacing' => '2', @@ -195,13 +196,14 @@ public function data_wp_style_engine_get_styles() { ), 'options' => null, 'expected_output' => array( - 'css' => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;', + 'css' => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;column-count:2;text-decoration:underline;text-transform:uppercase;letter-spacing:2;', 'declarations' => array( 'font-size' => 'clamp(2em, 2vw, 4em)', 'font-family' => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif', 'font-style' => 'italic', 'font-weight' => '800', 'line-height' => '1.3', + 'column-count' => '2', 'text-decoration' => 'underline', 'text-transform' => 'uppercase', 'letter-spacing' => '2',