Skip to content

Commit

Permalink
Borders: Use new border control components in block support (#37770)
Browse files Browse the repository at this point in the history 
This updates border block support to utilise the new `BorderBoxControl` component and offer support for individual side border configuration.

Co-authored-by: Ramon <[email protected]>
Co-authored-by: André <[email protected]>
  • Loading branch information
@aaronrobertshaw @ramonjd @oandregal
3 people authored Apr 14, 2022
1 parent c123b25 commit 5424ec0
Show file tree
Hide file tree
Showing 22 changed files with 1,518 additions and 832 deletions.
6 changes: 5 additions & 1 deletion docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,13 @@ Border styles.
| Property | Type | Props |
| --- | --- |--- |
| color | string | |
| radius | string | |
| radius | undefined | |
| style | string | |
| width | string | |
| top | undefined | |
| right | undefined | |
| bottom | undefined | |
| left | undefined | |

---

Expand Down
72 changes: 69 additions & 3 deletions lib/block-supports/border.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function gutenberg_register_border_support( $block_type ) {
* Adds CSS classes and inline styles for border styles to the incoming
* attributes array. This will be applied to the block markup in the front-end.
*
* @param WP_Block_type $block_type Block type.
* @param WP_Block_Type $block_type Block type.
* @param array $block_attributes Block attributes.
*
* @return array Border CSS classes and inline styles.
Expand All @@ -50,6 +50,10 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

$classes = array();
$styles = array();
$sides = array( 'top', 'right', 'bottom', 'left' );

$has_border_color_support = gutenberg_has_border_feature_support( $block_type, 'color' );
$has_border_width_support = gutenberg_has_border_feature_support( $block_type, 'width' );

// Border radius.
if (
Expand Down Expand Up @@ -88,7 +92,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

// Border width.
if (
gutenberg_has_border_feature_support( $block_type, 'width' ) &&
$has_border_width_support &&
isset( $block_attributes['style']['border']['width'] ) &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
) {
Expand All @@ -104,7 +108,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

// Border color.
if (
gutenberg_has_border_feature_support( $block_type, 'color' ) &&
$has_border_color_support &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
) {
$has_named_border_color = array_key_exists( 'borderColor', $block_attributes );
Expand All @@ -122,6 +126,18 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
}
}

// Generate styles for individual border sides.
if ( $has_border_color_support || $has_border_width_support ) {
foreach ( $sides as $side ) {
$border = _wp_array_get( $block_attributes, array( 'style', 'border', $side ), false );

if ( is_array( $border ) && ! empty( $border ) ) {
$split_border_styles = gutenberg_generate_individual_border_classes_and_styles( $side, $border, $block_type );
$styles = array_merge( $styles, $split_border_styles );
}
}
}

// Collect classes and styles.
$attributes = array();

Expand All @@ -136,6 +152,56 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
return $attributes;
}

/**
* Generates longhand CSS styles for an individual side border.
*
* If some values are omitted from the border configuration, using shorthand
* styles would lead to `initial` values being used instead of the more
* desirable inherited values. This could also lead to browser inconsistencies.
*
* @param string $side The side the styles are being generated for.
* @param array $border Array containing border color, style, and width values.
* @param WP_Block_Type $block_type Block type.
*
* @return array Longhand CSS border styles for a single side.
*/
function gutenberg_generate_individual_border_classes_and_styles( $side, $border, $block_type ) {
$styles = array();

if (
isset( $border['width'] ) &&
null !== $border['width'] &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
) {
$styles[] = sprintf( 'border-%s-width: %s;', $side, $border['width'] );
}

if (
isset( $border['style'] ) &&
null !== $border['style'] &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
) {
$styles[] = sprintf( 'border-%s-style: %s;', $side, $border['style'] );
}

$border_color = _wp_array_get( $border, array( 'color' ), null );

if (
$border_color &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
) {
$has_color_preset = strpos( $border_color, 'var:preset|color|' ) !== false;
if ( $has_color_preset ) {
$named_color_slug = substr( $border_color, strrpos( $border_color, '|' ) + 1 );
$styles [] = sprintf( 'border-%s-color: var(--wp--preset--color--%s);', $side, $named_color_slug );
} else {
$styles [] = sprintf( 'border-%s-color: %s;', $side, $border['color'] );
}
}

return $styles;
}

/**
* Checks whether the current block type supports the border feature requested.
*
Expand Down
92 changes: 92 additions & 0 deletions lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,57 @@
* @access private
*/
class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
/**
* Metadata for style properties.
*
* Each element is a direct mapping from the CSS property name to the
* path to the value in theme.json & block attributes.
*/
const PROPERTIES_METADATA = array(
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
'border-color' => array( 'border', 'color' ),
'border-width' => array( 'border', 'width' ),
'border-style' => array( 'border', 'style' ),
'border-top-color' => array( 'border', 'top', 'color' ),
'border-top-width' => array( 'border', 'top', 'width' ),
'border-top-style' => array( 'border', 'top', 'style' ),
'border-right-color' => array( 'border', 'right', 'color' ),
'border-right-width' => array( 'border', 'right', 'width' ),
'border-right-style' => array( 'border', 'right', 'style' ),
'border-bottom-color' => array( 'border', 'bottom', 'color' ),
'border-bottom-width' => array( 'border', 'bottom', 'width' ),
'border-bottom-style' => array( 'border', 'bottom', 'style' ),
'border-left-color' => array( 'border', 'left', 'color' ),
'border-left-width' => array( 'border', 'left', 'width' ),
'border-left-style' => array( 'border', 'left', 'style' ),
'color' => array( 'color', 'text' ),
'font-family' => array( 'typography', 'fontFamily' ),
'font-size' => array( 'typography', 'fontSize' ),
'font-style' => array( 'typography', 'fontStyle' ),
'font-weight' => array( 'typography', 'fontWeight' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
'margin' => array( 'spacing', 'margin' ),
'margin-top' => array( 'spacing', 'margin', 'top' ),
'margin-right' => array( 'spacing', 'margin', 'right' ),
'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
'margin-left' => array( 'spacing', 'margin', 'left' ),
'padding' => array( 'spacing', 'padding' ),
'padding-top' => array( 'spacing', 'padding', 'top' ),
'padding-right' => array( 'spacing', 'padding', 'right' ),
'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'padding-left' => array( 'spacing', 'padding', 'left' ),
'--wp--style--block-gap' => array( 'spacing', 'blockGap' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
'filter' => array( 'filter', 'duotone' ),
);

/**
* Presets are a set of values that serve
Expand Down Expand Up @@ -197,6 +248,47 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
),
);

/**
* The valid properties under the styles key.
*
* @var array
*/
const VALID_STYLES = array(
'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
'top' => null,
'right' => null,
'bottom' => null,
'left' => null,
),
'color' => array(
'background' => null,
'gradient' => null,
'text' => null,
),
'filter' => array(
'duotone' => null,
),
'spacing' => array(
'margin' => null,
'padding' => null,
'blockGap' => 'top',
),
'typography' => array(
'fontFamily' => null,
'fontSize' => null,
'fontStyle' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textDecoration' => null,
'textTransform' => null,
),
);

/**
* Returns the current theme's wanted patterns(slugs) to be
* registered from Pattern Directory.
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/border-radius-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@
align-items: flex-start;

> .components-unit-control-wrapper {
width: calc(50% - 26px);
width: 110px;
margin-bottom: 0;
margin-right: #{ $grid-unit-10 };
flex-shrink: 0;
}

.components-range-control {
width: calc(50% - 26px);
flex: 1;
margin-bottom: 0;

.components-base-control__field {
Expand Down Expand Up @@ -49,6 +51,7 @@
.component-border-radius-control__linked-button.has-icon {
display: flex;
justify-content: center;
margin-left: 2px;

svg {
margin-right: 0;
Expand Down
Loading

0 comments on commit 5424ec0

Please sign in to comment.