Changeset 60892

Timestamp:

10/02/2025 11:53:19 PM (6 weeks ago)

Author:

andrewserong

Message:

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.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (4 diffs)
• src/wp-includes/style-engine/class-wp-style-engine.php (modified) (1 diff)
• tests/phpunit/tests/style-engine/styleEngine.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (4 diffs)

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

@@ -127 +127 @@
      *              Updated the 'prevent_override' value for font size presets to use 'typography.defaultFontSizes'
      *              and spacing size presets to use `spacing.defaultSpacingSizes`.
+     * @since 6.9.0 Added `border.radiusSizes`.
      * @var array
      */
@@ -206 +207 @@
             'properties'        => array( 'box-shadow' ),
         ),
+        array(
+            'path'              => array( 'border', 'radiusSizes' ),
+            'prevent_override'  => false,
+            'use_default_names' => false,
+            'value_key'         => 'size',
+            'css_vars'          => '--wp--preset--border-radius--$slug',
+            'classes'           => array(),
+            'properties'        => array( 'border-radius' ),
+        ),
     );
 
@@ -385 +395 @@
      * @since 6.6.0 Added support for 'dimensions.aspectRatios', 'dimensions.defaultAspectRatios',
      *              'typography.defaultFontSizes', and 'spacing.defaultSpacingSizes'.
+     * @since 6.9.0 Added support for `border.radiusSizes`.
      * @var array
      */
@@ -395 +406 @@
         ),
         'border'                        => array(
-            'color'  => null,
-            'radius' => null,
-            'style'  => null,
-            'width'  => null,
+            'color'       => null,
+            'radius'      => null,
+            'radiusSizes' => null,
+            'style'       => null,
+            'width'       => null,
         ),
         'color'                         => array(

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

@@ -143 +143 @@
                 ),
                 'path'          => array( 'border', 'radius' ),
+                'css_vars'      => array(
+                    'border-radius' => '--wp--preset--border-radius--$slug',
+                ),
             ),
             'style'  => array(

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

@@ -31 +31 @@
      * @ticket 61720
      * @ticket 62189
+     * @ticket 63799
      *
      * @covers ::wp_style_engine_get_styles
@@ -172 +173 @@
             ),
 
+            'inline_valid_border_radius_presets'           => array(
+                'block_styles'    => array(
+                    'border' => array(
+                        'radius' => array(
+                            'topLeft'     => 'var:preset|border-radius|large',
+                            'topRight'    => 'var:preset|border-radius|large',
+                            'bottomLeft'  => 'var:preset|border-radius|large',
+                            'bottomRight' => 'var:preset|border-radius|large',
+                        ),
+                    ),
+                ),
+                'options'         => null,
+                'expected_output' => array(
+                    '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);',
+                    'declarations' => array(
+                        '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)',
+                    ),
+                ),
+            ),
+
             'inline_valid_dimensions_style'                => array(
                 'block_styles'    => array(

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -398 +398 @@
      * @ticket 61630
      * @ticket 61704
+     * @ticket 63799
      */
     public function test_get_stylesheet() {
@@ -404 +405 @@
                 'version'  => WP_Theme_JSON::LATEST_SCHEMA,
                 'settings' => array(
+                    'border'     => array(
+                        'radiusSizes' => array(
+                            array(
+                                'name' => 'Small',
+                                'slug' => 'small',
+                                'size' => '2px',
+                            ),
+                            array(
+                                'name' => 'Medium',
+                                'slug' => 'medium',
+                                'size' => '4px',
+                            ),
+                        ),
+                    ),
                     'color'      => array(
                         'text'      => 'value',
@@ -478 +493 @@
                     'blocks'   => array(
                         'core/cover'        => array(
+                            'border'     => array(
+                                'radius' => 'var:preset|border-radius|small',
+                            ),
                             'dimensions' => array(
                                 'aspectRatio' => '16/9',
@@ -567 +585 @@
         );
 
-        $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;}';
-        $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);}';
+        $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;}';
+        $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);}';
         $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;}';
         $all       = $variables . $styles . $presets;