Borders: Use new border control components in block support (#37770)

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]>
WordPress · Apr 14, 2022 · 5424ec0 · 5424ec0
1 parent c123b25
commit 5424ec0
Showing 22 changed files with 1,518 additions and 832 deletions.
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -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 |  |
 
 ---
 

diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php
@@ -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.
@@ -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 (
@@ -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' )
 	) {
@@ -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 );
@@ -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();
 
@@ -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.
  *

diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
@@ -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
@@ -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.

diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -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 {
@@ -49,6 +51,7 @@
 	.component-border-radius-control__linked-button.has-icon {
 		display: flex;
 		justify-content: center;
+		margin-left: 2px;
 
 		svg {
 			margin-right: 0;