Separator: Add borderWidth style support

lib/client-assets.php

@@ -689,6 +689,20 @@ function gutenberg_extend_settings_custom_units( $settings ) {
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' );
 
+/**
+ * Extends block editor settings to determine whether to use custom border controls.
+ * Currently experimental.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_extend_settings_custom_border( $settings ) {
+	$settings['__experimentalEnableCustomBorder'] = get_theme_support( 'experimental-custom-border' );
+	return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_border' );
+
 /**
  * Extends block editor settings to determine whether to use custom spacing controls.
  * Currently experimental.
@@ -705,7 +719,7 @@ function gutenberg_extend_settings_custom_spacing( $settings ) {
 
 
 /**
- * Extends block editor settings to determine whether to use custom spacing controls.
+ * Extends block editor settings to determine whether to use custom link colors.
  * Currently experimental.
  *
  * @param array $settings Default editor settings.

packages/block-editor/src/hooks/border.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+import {
+	PanelBody,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { Platform } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import { cleanEmptyObject } from './utils';
+
+export const BORDER_SUPPORT_KEY = '__experimentalEnableCustomBorder';
+
+export function BorderEdit( props ) {
+	const isDisabled = useIsBorderDisabled( props );
+
+	if ( isDisabled ) {
+		return null;
+	}
+
+	return Platform.select( {
+		web: (
+			<InspectorControls>
+				<PanelBody title={ __( 'Border' ) }>
+					<BorderWidthControls { ...props } />
+				</PanelBody>
+			</InspectorControls>
+		),
+		native: null,
+	} );
+}
+
+function BorderWidthControls( props ) {
+	const {
+		attributes: { style },
+		setAttributes,
+	} = props;
+
+	const onChange = ( next ) => {
+		const newStyle = {
+			...style,
+			border: {
+				width: next,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const value = parseFloat( style?.border?.width || 0 );
+
+	return (
+		<UnitControl
+			label={ __( 'Width' ) }
+			max={ 50 }
+			min={ 0 }
+			onChange={ onChange }
+			style={ { maxWidth: 80 } }
+			unit="px"
+			units={ [ { value: 'px', label: 'px' } ] }
+			value={ value }
+		/>
+	);
+}
+
+export const borderStyleMappings = {
+	'--wp--style--border--width': [ 'border', 'width' ],
+};
+
+/**
+ * Custom hook that checks if border settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean} Whether setting is disabled.
+ */
+function useIsBorderDisabled( { name: blockName } = {} ) {
+	const isDisabled = useSelect( ( select ) => {
+		const editorSettings = select( 'core/block-editor' ).getSettings();
+		return ! editorSettings[ BORDER_SUPPORT_KEY ];
+	} );
+
+	return ! hasBlockSupport( blockName, BORDER_SUPPORT_KEY ) || isDisabled;
+}

packages/block-editor/src/hooks/style.js

@@ -15,6 +15,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  */
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography';
+import { BORDER_SUPPORT_KEY, BorderEdit, borderStyleMappings } from './border';
 import {
 	PADDING_SUPPORT_KEY,
 	PaddingEdit,
@@ -24,6 +25,7 @@ import SpacingPanelControl from '../components/spacing-panel-control';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
+	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
 	PADDING_SUPPORT_KEY,
 ];
@@ -53,6 +55,7 @@ function compileStyleValue( uncompiledValue ) {
  */
 export function getInlineStyles( styles = {} ) {
 	const mappings = {
+		...borderStyleMappings,
 		...paddingStyleMappings,
 		lineHeight: [ 'typography', 'lineHeight' ],
 		fontSize: [ 'typography', 'fontSize' ],
@@ -168,6 +171,7 @@ export const withBlockControls = createHigherOrderComponent(
 			<TypographyPanel key="typography" { ...props } />,
 			<ColorEdit key="colors" { ...props } />,
 			<BlockEdit key="edit" { ...props } />,
+			<BorderEdit key="border" { ...props } />,
 			hasPaddingSupport && (
 				<SpacingPanelControl key="spacing">
 					<PaddingEdit { ...props } />

packages/block-library/src/separator/block.json

@@ -10,6 +10,7 @@
 		}
 	},
 	"supports": {
-		"anchor": true
+		"anchor": true,
+		"__experimentalEnableCustomBorder": true
 	}
 }

packages/block-library/src/separator/style.scss

@@ -4,6 +4,7 @@
 	// Wide style
 	&.is-style-wide {
 		border-bottom-width: 1px;
+		border-bottom-width: var(--wp--style--border--width, 1px);
 	}
 
 	// Dots style

packages/block-library/src/separator/theme.scss

@@ -1,6 +1,6 @@
 .wp-block-separator {
 	border: none;
-	border-bottom: 2px solid $dark-gray-100;
+	border-bottom: var(--wp--style--border--width, 2px) solid $dark-gray-100;
 	margin-left: auto;
 	margin-right: auto;
 
@@ -12,9 +12,11 @@
 	&.has-background:not(.is-style-dots) {
 		border-bottom: none;
 		height: 1px;
+		height: var(--wp--style--border--width, 1px);
 	}
 
 	&.has-background:not(.is-style-wide):not(.is-style-dots) {
 		height: 2px;
+		height: calc(var(--wp--style--border--width, 1px) * 2);
 	}
 }

packages/components/src/unit-control/styles/unit-control-styles.js

@@ -54,14 +54,16 @@ export const ValueInput = styled( NumberControl )`
 const unitSizeStyles = ( { size } ) => {
 	const sizes = {
 		default: {
-			top: 1,
 			height: 28,
+			lineHeight: '24px',
 			minHeight: 28,
+			top: 1,
 		},
 		small: {
-			top: 1,
 			height: 22,
+			lineHeight: '18px',
 			minHeight: 22,
+			top: 1,
 		},
 	};
 
@@ -93,21 +95,11 @@ const baseUnitLabelStyles = ( props ) => {
 	`;
 };
 
-const unitLabelPaddingStyles = ( { size } ) => {
-	const sizes = {
-		default: '6px 2px',
-		small: '4px 2px',
-	};
-
-	return css( { padding: sizes[ size ] } );
-};
-
 export const UnitLabel = styled.div`
 	&&& {
 		pointer-events: none;
 
 		${ baseUnitLabelStyles };
-		${ unitLabelPaddingStyles };
 	}
 `;
 

packages/editor/src/components/provider/index.js

@@ -116,6 +116,7 @@ class EditorProvider extends Component {
 				'__experimentalBlockPatternCategories',
 				'__experimentalDisableCustomUnits',
 				'__experimentalDisableCustomLineHeight',
+				'__experimentalEnableCustomBorder',
 				'__experimentalEnableCustomSpacing',
 				'__experimentalEnableLegacyWidgetBlock',
 				'__experimentalEnableLinkColor',