Skip to content

Commit d0a9538

Browse files
ramonjdramonjd
committed
Block Supports: Add presets support for dimensions block supports
This commit enables dimension size presets to theme.json for block supports such as width, height and min-height. This opens up the ability to leverage a defined set of preset values for dimensions block supports, alleviating the need for users to know and manually set the same value across multiple blocks. Props aaronrobertshaw, ramonopoly, andrewserong. Fixes #64413. git-svn-id: https://develop.svn.wordpress.org/trunk@61631 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 5338208 commit d0a9538

4 files changed

Lines changed: 52 additions & 3 deletions

File tree

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,15 @@ class WP_Theme_JSON {
215215
'classes' => array(),
216216
'properties' => array( 'border-radius' ),
217217
),
218+
array(
219+
'path' => array( 'dimensions', 'dimensionSizes' ),
220+
'prevent_override' => false,
221+
'use_default_names' => false,
222+
'value_key' => 'size',
223+
'css_vars' => '--wp--preset--dimension--$slug',
224+
'classes' => array(),
225+
'properties' => array( 'width', 'height', 'min-height' ),
226+
),
218227
);
219228

220229
/**
@@ -438,6 +447,7 @@ class WP_Theme_JSON {
438447
'aspectRatio' => null,
439448
'aspectRatios' => null,
440449
'defaultAspectRatios' => null,
450+
'dimensionSizes' => null,
441451
'height' => null,
442452
'minHeight' => null,
443453
'width' => null,

‎src/wp-includes/style-engine/class-wp-style-engine.php‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,21 +215,27 @@ final class WP_Style_Engine {
215215
'default' => 'height',
216216
),
217217
'path' => array( 'dimensions', 'height' ),
218+
'css_vars' => array(
219+
'dimension' => '--wp--preset--dimension--$slug',
220+
),
218221
),
219222
'minHeight' => array(
220223
'property_keys' => array(
221224
'default' => 'min-height',
222225
),
223226
'path' => array( 'dimensions', 'minHeight' ),
224227
'css_vars' => array(
225-
'spacing' => '--wp--preset--spacing--$slug',
228+
'dimension' => '--wp--preset--dimension--$slug',
226229
),
227230
),
228231
'width' => array(
229232
'property_keys' => array(
230233
'default' => 'width',
231234
),
232235
'path' => array( 'dimensions', 'width' ),
236+
'css_vars' => array(
237+
'dimension' => '--wp--preset--dimension--$slug',
238+
),
233239
),
234240
),
235241
'spacing' => array(

‎tests/phpunit/tests/style-engine/styleEngine.php‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,23 @@ public function data_wp_style_engine_get_styles() {
119119
),
120120
),
121121

122+
'inline_valid_dimension_preset_style' => array(
123+
'block_styles' => array(
124+
'dimensions' => array(
125+
'width' => 'var:preset|dimension|large',
126+
'height' => 'var:preset|dimension|modestly-small',
127+
),
128+
),
129+
'options' => null,
130+
'expected_output' => array(
131+
'css' => 'height:var(--wp--preset--dimension--modestly-small);width:var(--wp--preset--dimension--large);',
132+
'declarations' => array(
133+
'height' => 'var(--wp--preset--dimension--modestly-small)',
134+
'width' => 'var(--wp--preset--dimension--large)',
135+
),
136+
),
137+
),
138+
122139
'inline_valid_box_model_style' => array(
123140
'block_styles' => array(
124141
'spacing' => array(

‎tests/phpunit/tests/theme/wpThemeJson.php‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,20 @@ public function test_get_stylesheet() {
424424
),
425425
),
426426
),
427+
'dimensions' => array(
428+
'dimensionSizes' => array(
429+
array(
430+
'name' => 'Small',
431+
'slug' => 'small',
432+
'size' => '100px',
433+
),
434+
array(
435+
'name' => 'Large',
436+
'slug' => 'large',
437+
'size' => '200px',
438+
),
439+
),
440+
),
427441
'color' => array(
428442
'text' => 'value',
429443
'palette' => array(
@@ -514,6 +528,8 @@ public function test_get_stylesheet() {
514528
),
515529
'dimensions' => array(
516530
'minHeight' => '50vh',
531+
'height' => '500px',
532+
'width' => 'var:preset|dimension|large',
517533
),
518534
'elements' => array(
519535
'link' => array(
@@ -590,8 +606,8 @@ public function test_get_stylesheet() {
590606
)
591607
);
592608

593-
$variables = ':root{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;--wp--preset--border-radius--small: 2px;--wp--preset--border-radius--medium: 4px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
594-
$styles = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;border-radius: var(--wp--preset--border-radius--small);}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-media-text){text-align: center;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
609+
$variables = ':root{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;--wp--preset--border-radius--small: 2px;--wp--preset--border-radius--medium: 4px;--wp--preset--dimension--small: 100px;--wp--preset--dimension--large: 200px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
610+
$styles = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;border-radius: var(--wp--preset--border-radius--small);}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;height: 500px;width: var(--wp--preset--dimension--large);}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-media-text){text-align: center;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
595611
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-big-font-size{font-size: var(--wp--preset--font-size--big) !important;}.has-arial-font-family{font-family: var(--wp--preset--font-family--arial) !important;}';
596612
$all = $variables . $styles . $presets;
597613

0 commit comments

Comments
 (0)