Block Supports: Add border color, style and width support

lib/block-supports/border.php

@@ -6,26 +6,36 @@
  */
 
 /**
- * Registers the style attribute used by the border feature if needed for block types that
- * support borders.
+ * Registers the style attribute used by the border feature if needed for block
+ * types that support borders.
  *
  * @param WP_Block_Type $block_type Block Type.
  */
 function gutenberg_register_border_support( $block_type ) {
-	// Determine border related features supported.
-	// Border width, style etc can be added in the future.
-	$has_border_radius_support = gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'radius' ), false );
+	// Determine if any border related features are supported.
+	$has_border_color_support = gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'color' ) );
+	$has_border_support       =
+		gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'radius' ) ) ||
+		gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'style' ) ) ||
+		gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'width' ) ) ||
+		$has_border_color_support;
 
 	// Setup attributes and styles within that if needed.
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
 	}
 
-	if ( $has_border_radius_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+	if ( $has_border_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
 		$block_type->attributes['style'] = array(
 			'type' => 'object',
 		);
 	}
+
+	if ( $has_border_color_support && ! array_key_exists( 'borderColor', $block_type->attributes ) ) {
+		$block_type->attributes['borderColor'] = array(
+			'type' => 'string',
+		);
+	}
 }
 
 /**
@@ -38,40 +48,87 @@ function gutenberg_register_border_support( $block_type ) {
  * @return array Border CSS classes and inline styles.
  */
 function gutenberg_apply_border_support( $block_type, $block_attributes ) {
-	$border_support = _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), false );
+	if ( gutenberg_skip_border_serialization( $block_type ) ) {
+		return array();
+	}
 
+	$classes = array();
+	$styles  = array();
+
+	// Border radius.
 	if (
-		is_array( $border_support ) &&
-		array_key_exists( '__experimentalSkipSerialization', $border_support ) &&
-		$border_support['__experimentalSkipSerialization']
+		gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'radius' ) ) &&
+		isset( $block_attributes['style']['border']['radius'] )
 	) {
-		return array();
+		$border_radius = (int) $block_attributes['style']['border']['radius'];
+		$styles[]      = sprintf( 'border-radius: %dpx;', $border_radius );
 	}
 
-	// Arrays used to ease addition of further border related features in future.
-	$styles = array();
+	// Border style.
+	if (
+		gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'style' ) ) &&
+		isset( $block_attributes['style']['border']['style'] )
+	) {
+		$border_style = $block_attributes['style']['border']['style'];
+		$styles[]     = sprintf( 'border-style: %s;', $border_style );
+	}
 
-	// Border Radius.
-	$has_border_radius_support = gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'radius' ), false );
-	if ( $has_border_radius_support ) {
-		if ( isset( $block_attributes['style']['border']['radius'] ) ) {
-			$border_radius = (int) $block_attributes['style']['border']['radius'];
-			$styles[]      = sprintf( 'border-radius: %dpx;', $border_radius );
-		}
+	// Border width.
+	if (
+		gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'width' ) ) &&
+		isset( $block_attributes['style']['border']['width'] )
+	) {
+		$border_width = intval( $block_attributes['style']['border']['width'] );
+		$styles[]     = sprintf( 'border-width: %dpx;', $border_width );
 	}
 
-	// Border width, style etc can be added here.
+	// Border color.
+	if ( gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'color' ) ) ) {
+		$has_named_border_color  = array_key_exists( 'borderColor', $block_attributes );
+		$has_custom_border_color = isset( $block_attributes['style']['border']['color'] );
+
+		if ( $has_named_border_color || $has_custom_border_color ) {
+			$classes[] = 'has-border-color';
+		}
+
+		if ( $has_named_border_color ) {
+			$classes[] = sprintf( 'has-%s-border-color', $block_attributes['borderColor'] );
+		} elseif ( $has_custom_border_color ) {
+			$border_color = $block_attributes['style']['border']['color'];
+			$styles[]     = sprintf( 'border-color: %s;', $border_color );
+		}
+	}
 
 	// Collect classes and styles.
 	$attributes = array();
 
+	if ( ! empty( $classes ) ) {
+		$attributes['class'] = implode( ' ', $classes );
+	}
+
 	if ( ! empty( $styles ) ) {
 		$attributes['style'] = implode( ' ', $styles );
 	}
 
 	return $attributes;
 }
 
+/**
+ * Checks whether serialization of the current block's border properties should
+ * occur.
+ *
+ * @param WP_Block_type $block_type       Block type.
+ *
+ * @return boolean
+ */
+function gutenberg_skip_border_serialization( $block_type ) {
+	$border_support = _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), false );
+
+	return is_array( $border_support ) &&
+		array_key_exists( '__experimentalSkipSerialization', $border_support ) &&
+		$border_support['__experimentalSkipSerialization'];
+}
+
 // Register the block support.
 WP_Block_Supports::get_instance()->register(
 	'border',

lib/class-wp-theme-json.php

@@ -198,6 +198,10 @@ class WP_Theme_JSON {
 					'class_suffix'  => 'background-color',
 					'property_name' => 'background-color',
 				),
+				array(
+					'class_suffix'  => 'border-color',
+					'property_name' => 'border-color',
+				),
 			),
 		),
 		array(

lib/experimental-default-theme.json

@@ -171,7 +171,10 @@
 				"units": [ "px", "em", "rem", "vh", "vw" ]
 			},
 			"border": {
-				"customRadius": false
+				"customColor": false,
+				"customRadius": false,
+				"customStyle": false,
+				"customWidth": false
 			}
 		}
 	}

lib/global-styles.php

@@ -260,6 +260,7 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
 	$allowed_preset_attributes = array(
 		'background',
 		'background-color',
+		'border-color',
 		'color',
 		'font-family',
 		'font-size',

packages/block-editor/src/components/border-style-control/index.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { CustomSelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_STYLE = {
+	key: 'default',
+	name: __( 'Default' ),
+	style: { borderStyle: undefined },
+};
+
+const BORDER_STYLES = [
+	DEFAULT_STYLE,
+	{
+		key: 'none',
+		name: __( 'None' ),
+		style: { borderStyle: 'none' },
+	},
+	{
+		key: 'solid',
+		name: __( 'Solid' ),
+		style: { borderStyle: 'solid' },
+	},
+	{
+		key: 'dashed',
+		name: __( 'Dashed' ),
+		style: { borderStyle: 'dashed' },
+	},
+	{
+		key: 'dotted',
+		name: __( 'Dotted' ),
+		style: { borderStyle: 'dotted' },
+	},
+];
+
+/**
+ * Control to display border style options.
+ *
+ * @param  {Object}   props          Component props.
+ * @param  {Object}   props.onChange Handler for changing border style selection.
+ * @param  {Object}   props.value    Currently selected border style value.
+ *
+ * @return {WPElement}      Custom border style select control.
+ */
+export default function BorderStyleControl( { onChange, value } ) {
+	const style = BORDER_STYLES.find( ( option ) => option.key === value );
+
+	return (
+		<fieldset className="components-border-style-control">
+			<CustomSelectControl
+				className="components-border-style-control__select"
+				label={ __( 'Border style' ) }
+				options={ BORDER_STYLES }
+				value={ style || DEFAULT_STYLE }
+				onChange={ ( { selectedItem } ) =>
+					selectedItem.key === 'default'
+						? onChange( undefined )
+						: onChange( selectedItem.key )
+				}
+			/>
+		</fieldset>
+	);
+}

packages/block-editor/src/components/border-style-control/style.scss

@@ -0,0 +1,14 @@
+.components-border-style-control__select {
+	margin-bottom: 24px;
+
+	button {
+		width: 100%;
+	}
+
+	ul {
+		li,
+		li:last-child {
+			margin: 6px;
+		}
+	}
+}

packages/block-editor/src/components/index.js

@@ -32,6 +32,7 @@ export {
 	BlockVerticalAlignmentToolbar,
 	BlockVerticalAlignmentControl,
 } from './block-vertical-alignment-control';
+export { default as __experimentalBorderStyleControl } from './border-style-control';
 export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPaletteControl } from './color-palette/control';