From 18bca7131939f99f0a8c942f26b342b50aeafaf1 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 2 Nov 2022 10:39:09 +1100 Subject: [PATCH] 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 --- .../style-engine/class-wp-style-engine.php | 11 +++++++++++ .../src/styles/dimensions/index.ts | 19 +++++++++++++++++++ packages/style-engine/src/styles/index.ts | 2 ++ packages/style-engine/src/test/index.js | 13 ++++++++++++- packages/style-engine/src/types.ts | 3 +++ phpunit/style-engine/style-engine-test.php | 15 +++++++++++++++ 6 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 packages/style-engine/src/styles/dimensions/index.ts diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 54f60131a55267..f5636c150c3eeb 100644 --- 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 new file mode 100644 index 00000000000000..df3568f7799133 --- /dev/null +++ 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 index f4cb09e18fb7bb..5dc1b8743e2ab4 100644 --- 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 index cbddab4d5ca8db..a94bd8a4256810 100644 --- 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 index a700816f218ce8..0063cd56621c6c 100644 --- 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 index aa3fdb29871527..5f4c57453e8a8f 100644 --- 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(