Skip to content

Commit dc9dc24

Browse files
andrewserongandrewserong
committed
Editor: introduce border.radiusSizes support in theme.json.
Adds site front end rendering logic for the `border.radiusSizes` border radius presets, as well as the required logic in `WP_Theme_JSON` and the style engine. Props aaronrobertshaw, youknowriad, ramonopoly, poena, joen, jameskoster, richtabor, asafm7, fabiankaegy Fixes #63799. git-svn-id: https://develop.svn.wordpress.org/trunk@60892 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 223c4ec commit dc9dc24

File tree

4 files changed

+63
-6
lines changed

4 files changed

+63
-6
lines changed

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ class WP_Theme_JSON {
126126
* @since 6.6.0 Added the `dimensions.aspectRatios` and `dimensions.defaultAspectRatios` presets.
127127
* Updated the 'prevent_override' value for font size presets to use 'typography.defaultFontSizes'
128128
* and spacing size presets to use `spacing.defaultSpacingSizes`.
129+
* @since 6.9.0 Added `border.radiusSizes`.
129130
* @var array
130131
*/
131132
const PRESETS_METADATA = array(
@@ -205,6 +206,15 @@ class WP_Theme_JSON {
205206
'classes' => array(),
206207
'properties' => array( 'box-shadow' ),
207208
),
209+
array(
210+
'path' => array( 'border', 'radiusSizes' ),
211+
'prevent_override' => false,
212+
'use_default_names' => false,
213+
'value_key' => 'size',
214+
'css_vars' => '--wp--preset--border-radius--$slug',
215+
'classes' => array(),
216+
'properties' => array( 'border-radius' ),
217+
),
208218
);
209219

210220
/**
@@ -384,6 +394,7 @@ class WP_Theme_JSON {
384394
* `background.backgroundSize` and `dimensions.aspectRatio`.
385395
* @since 6.6.0 Added support for 'dimensions.aspectRatios', 'dimensions.defaultAspectRatios',
386396
* 'typography.defaultFontSizes', and 'spacing.defaultSpacingSizes'.
397+
* @since 6.9.0 Added support for `border.radiusSizes`.
387398
* @var array
388399
*/
389400
const VALID_SETTINGS = array(
@@ -394,10 +405,11 @@ class WP_Theme_JSON {
394405
'backgroundSize' => null,
395406
),
396407
'border' => array(
397-
'color' => null,
398-
'radius' => null,
399-
'style' => null,
400-
'width' => null,
408+
'color' => null,
409+
'radius' => null,
410+
'radiusSizes' => null,
411+
'style' => null,
412+
'width' => null,
401413
),
402414
'color' => array(
403415
'background' => null,

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,9 @@ final class WP_Style_Engine {
142142
'individual' => 'border-%s-radius',
143143
),
144144
'path' => array( 'border', 'radius' ),
145+
'css_vars' => array(
146+
'border-radius' => '--wp--preset--border-radius--$slug',
147+
),
145148
),
146149
'style' => array(
147150
'property_keys' => array(

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ public function tear_down() {
3030
* @ticket 60175
3131
* @ticket 61720
3232
* @ticket 62189
33+
* @ticket 63799
3334
*
3435
* @covers ::wp_style_engine_get_styles
3536
*
@@ -171,6 +172,29 @@ public function data_wp_style_engine_get_styles() {
171172
),
172173
),
173174

175+
'inline_valid_border_radius_presets' => array(
176+
'block_styles' => array(
177+
'border' => array(
178+
'radius' => array(
179+
'topLeft' => 'var:preset|border-radius|large',
180+
'topRight' => 'var:preset|border-radius|large',
181+
'bottomLeft' => 'var:preset|border-radius|large',
182+
'bottomRight' => 'var:preset|border-radius|large',
183+
),
184+
),
185+
),
186+
'options' => null,
187+
'expected_output' => array(
188+
'css' => 'border-top-left-radius:var(--wp--preset--border-radius--large);border-top-right-radius:var(--wp--preset--border-radius--large);border-bottom-left-radius:var(--wp--preset--border-radius--large);border-bottom-right-radius:var(--wp--preset--border-radius--large);',
189+
'declarations' => array(
190+
'border-top-left-radius' => 'var(--wp--preset--border-radius--large)',
191+
'border-top-right-radius' => 'var(--wp--preset--border-radius--large)',
192+
'border-bottom-left-radius' => 'var(--wp--preset--border-radius--large)',
193+
'border-bottom-right-radius' => 'var(--wp--preset--border-radius--large)',
194+
),
195+
),
196+
),
197+
174198
'inline_valid_dimensions_style' => array(
175199
'block_styles' => array(
176200
'dimensions' => array(

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -397,12 +397,27 @@ public function test_get_settings_appearance_false_does_not_opt_in() {
397397
* @ticket 61165
398398
* @ticket 61630
399399
* @ticket 61704
400+
* @ticket 63799
400401
*/
401402
public function test_get_stylesheet() {
402403
$theme_json = new WP_Theme_JSON(
403404
array(
404405
'version' => WP_Theme_JSON::LATEST_SCHEMA,
405406
'settings' => array(
407+
'border' => array(
408+
'radiusSizes' => array(
409+
array(
410+
'name' => 'Small',
411+
'slug' => 'small',
412+
'size' => '2px',
413+
),
414+
array(
415+
'name' => 'Medium',
416+
'slug' => 'medium',
417+
'size' => '4px',
418+
),
419+
),
420+
),
406421
'color' => array(
407422
'text' => 'value',
408423
'palette' => array(
@@ -477,6 +492,9 @@ public function test_get_stylesheet() {
477492
),
478493
'blocks' => array(
479494
'core/cover' => array(
495+
'border' => array(
496+
'radius' => 'var:preset|border-radius|small',
497+
),
480498
'dimensions' => array(
481499
'aspectRatio' => '16/9',
482500
),
@@ -566,8 +584,8 @@ public function test_get_stylesheet() {
566584
)
567585
);
568586

569-
$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-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;}';
570-
$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;}: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);}';
587+
$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;}';
588+
$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);}';
571589
$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;}';
572590
$all = $variables . $styles . $presets;
573591

0 commit comments

Comments
 (0)