Style Engine: Add support for dimensions.minHeight property (#45334)

* Style Engine: Add support for dimensions.minHeight property * Move in alphabetical order * Fix linting issue * Remove class name definitions for dimensions.minHeight. Similar to spacing properties, we don't generate classnames. Only inline styles. Co-authored-by: ramonjd <[email protected]>
WordPress · Nov 1, 2022 · 18bca71 · 18bca71
1 parent 62987d7
commit 18bca71
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 1 deletion.
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -136,6 +136,17 @@ final class WP_Style_Engine {
 				),
 			),
 		),
+		'dimensions' => array(
+			'minHeight' => array(
+				'property_keys' => array(
+					'default' => 'min-height',
+				),
+				'path'          => array( 'dimensions', 'minHeight' ),
+				'css_vars'      => array(
+					'spacing' => '--wp--preset--spacing--$slug',
+				),
+			),
+		),
 		'spacing'    => array(
 			'padding' => array(
 				'property_keys' => array(

diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const minHeight = {
+	name: 'minHeight',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'dimensions', 'minHeight' ],
+			'minHeight'
+		);
+	},
+};
+
+export default [ minHeight ];
diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts
@@ -3,6 +3,7 @@
  */
 import border from './border';
 import color from './color';
+import dimensions from './dimensions';
 import shadow from './shadow';
 import outline from './outline';
 import spacing from './spacing';
@@ -11,6 +12,7 @@ import typography from './typography';
 export const styleDefinitions = [
 	...border,
 	...color,
+	...dimensions,
 	...outline,
 	...spacing,
 	...typography,

diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
@@ -54,6 +54,9 @@ describe( 'generate', () => {
 						gradient:
 							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
 					},
+					dimensions: {
+						minHeight: '50vh',
+					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
 						margin: {
@@ -85,7 +88,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; 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; text-decoration: line-through; text-transform: uppercase; }"
 		);
 	} );
 
@@ -226,6 +229,9 @@ describe( 'getCSSRules', () => {
 						gradient:
 							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
 					},
+					dimensions: {
+						minHeight: '50vh',
+					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
 						margin: { right: '2em', left: '1vw' },
@@ -268,6 +274,11 @@ describe( 'getCSSRules', () => {
 				key: 'backgroundColor',
 				value: '#555555',
 			},
+			{
+				selector: '.some-selector',
+				key: 'minHeight',
+				value: '50vh',
+			},
 			{
 				selector: '.some-selector',
 				key: 'outlineColor',

diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
@@ -38,6 +38,9 @@ export interface Style {
 		bottom?: BorderIndividualStyles< 'bottom' >;
 		left?: BorderIndividualStyles< 'left' >;
 	};
+	dimensions?: {
+		minHeight?: CSSProperties[ 'minHeight' ];
+	};
 	spacing?: {
 		margin?: CSSProperties[ 'margin' ] | Box< 'margin' >;
 		padding?: CSSProperties[ 'padding' ] | Box< 'padding' >;

diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
@@ -163,6 +163,21 @@ public function data_wp_style_engine_get_styles() {
 				),
 			),
 
+			'inline_valid_dimensions_style'                => array(
+				'block_styles'    => array(
+					'dimensions' => array(
+						'minHeight' => '50vh',
+					),
+				),
+				'options'         => null,
+				'expected_output' => array(
+					'css'          => 'min-height:50vh;',
+					'declarations' => array(
+						'min-height' => '50vh',
+					),
+				),
+			),
+
 			'inline_valid_typography_style'                => array(
 				'block_styles'    => array(
 					'typography' => array(