Style Engine: Add support for text columns (column-count) (#46566)

WordPress · Dec 15, 2022 · 9615ed0 · 9615ed0
1 parent 3331ee1
commit 9615ed0
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -188,20 +188,22 @@ public function data_wp_style_engine_get_styles() {
 						'fontStyle'      => 'italic',
 						'fontWeight'     => '800',
 						'lineHeight'     => '1.3',
+						'textColumns'    => '2',
 						'textDecoration' => 'underline',
 						'textTransform'  => 'uppercase',
 						'letterSpacing'  => '2',
 					),
 				),
 				'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',