Skip to content

Commit

Permalink
Update theme json for per corner border radii
Browse files Browse the repository at this point in the history 
This updates the theme.json generated stylesheet to handle individual border radius values per corner.

It maintains single string value support for the shorthand expression for all corners at once. This allows backwards compatibility for blocks that have already adopted border radius support.
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Jun 7, 2021
1 parent d4e9c65 commit 3d5196a
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 27 deletions.
66 changes: 42 additions & 24 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,57 +207,70 @@ class WP_Theme_JSON_Gutenberg {
* - 'value': path to the value in theme.json and block attributes.
*/
const PROPERTIES_METADATA = array(
'background' => array(
'background' => array(
'value' => array( 'color', 'gradient' ),
),
'background-color' => array(
'background-color' => array(
'value' => array( 'color', 'background' ),
),
'border-radius' => array(
'border-radius' => array(
'value' => array( 'border', 'radius' ),
),
'border-color' => array(
// This is deliberately separate to the border-radius entry above.
// It allows for backwards compatible shorthand e.g. border-radius: 10px
// while below provides a means to explicitly set the CSS property name
// where the flat array configuration approach builds an incorrect name.
'corner-border-radius' => array(
'value' => array( 'border', 'radius' ),
'properties' => array(
'border-top-left-radius' => 'topLeft',
'border-top-right-radius' => 'topRight',
'border-bottom-left-radius' => 'bottomLeft',
'border-bottom-right-radius' => 'bottomRight',
),
),
'border-color' => array(
'value' => array( 'border', 'color' ),
),
'border-width' => array(
'border-width' => array(
'value' => array( 'border', 'width' ),
),
'border-style' => array(
'border-style' => array(
'value' => array( 'border', 'style' ),
),
'color' => array(
'color' => array(
'value' => array( 'color', 'text' ),
),
'font-family' => array(
'font-family' => array(
'value' => array( 'typography', 'fontFamily' ),
),
'font-size' => array(
'font-size' => array(
'value' => array( 'typography', 'fontSize' ),
),
'font-style' => array(
'font-style' => array(
'value' => array( 'typography', 'fontStyle' ),
),
'font-weight' => array(
'font-weight' => array(
'value' => array( 'typography', 'fontWeight' ),
),
'letter-spacing' => array(
'letter-spacing' => array(
'value' => array( 'typography', 'letterSpacing' ),
),
'line-height' => array(
'line-height' => array(
'value' => array( 'typography', 'lineHeight' ),
),
'margin' => array(
'margin' => array(
'value' => array( 'spacing', 'margin' ),
'properties' => array( 'top', 'right', 'bottom', 'left' ),
),
'padding' => array(
'padding' => array(
'value' => array( 'spacing', 'padding' ),
'properties' => array( 'top', 'right', 'bottom', 'left' ),
),
'text-decoration' => array(
'text-decoration' => array(
'value' => array( 'typography', 'textDecoration' ),
),
'text-transform' => array(
'text-transform' => array(
'value' => array( 'typography', 'textTransform' ),
),
);
Expand Down Expand Up @@ -365,8 +378,12 @@ private static function to_property( $css_name ) {
foreach ( self::PROPERTIES_METADATA as $key => $metadata ) {
$to_property[ $key ] = $key;
if ( self::has_properties( $metadata ) ) {
foreach ( $metadata['properties'] as $property ) {
$to_property[ $key . '-' . $property ] = $key;
foreach ( $metadata['properties'] as $name => $property ) {
if ( is_numeric( $name ) ) {
$to_property[ $key . '-' . $property ] = $key;
} else {
$to_property[ $name ] = $key;
}
}
}
}
Expand Down Expand Up @@ -533,7 +550,7 @@ private static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
private static function get_property_value( $styles, $path ) {
$value = _wp_array_get( $styles, $path, '' );

if ( '' === $value ) {
if ( '' === $value || is_array( $value ) ) {
return $value;
}

Expand Down Expand Up @@ -595,9 +612,10 @@ private static function compute_style_properties( $styles ) {
// they contain multiple values instead of a single one.
// An example of this is the padding property.
if ( self::has_properties( $metadata ) ) {
foreach ( $metadata['properties'] as $property ) {
$properties[] = array(
'name' => $name . '-' . $property,
foreach ( $metadata['properties'] as $key => $property ) {
$property_name = is_numeric( $key ) ? $name . '-' . $property : $key;
$properties[] = array(
'name' => $property_name,
'value' => array_merge( $metadata['value'], array( $property ) ),
);
}
Expand All @@ -611,7 +629,7 @@ private static function compute_style_properties( $styles ) {

foreach ( $properties as $prop ) {
$value = self::get_property_value( $styles, $prop['value'] );
if ( empty( $value ) ) {
if ( empty( $value ) || is_array( $value ) ) {
continue;
}

Expand Down
17 changes: 14 additions & 3 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,9 @@ function test_get_stylesheet() {
),
'blocks' => array(
'core/group' => array(
'border' => array(
'radius' => '10px',
),
'elements' => array(
'link' => array(
'color' => array(
Expand Down Expand Up @@ -154,18 +157,26 @@ function test_get_stylesheet() {
),
),
),
'core/image' => array(
'border' => array(
'radius' => array(
'topLeft' => '10px',
'bottomRight' => '1em',
),
),
),
),
),
'misc' => 'value',
)
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.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;}body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.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;}body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
'body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
$this->assertEquals(
Expand Down Expand Up @@ -882,7 +893,7 @@ function test_remove_insecure_properties_removes_unsafe_preset_settings() {
array(
'name' => 'Blue',
'slug' => 'blue',
'color' => 'var(--color, var(--unsafe--falback))',
'color' => 'var(--color, var(--unsafe--fallback))',
),
array(
'name' => 'Pink',
Expand Down

0 comments on commit 3d5196a

Please sign in to comment.