Update border support to use ToolsPanel

Update border support to display via progressive disclosure panel

Updating border support UI styling for grid layout

Update border global styles panel

Fix border global style hasValue checks

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

@@ -6,7 +6,6 @@
 
 	.components-border-style-control__buttons {
 		display: inline-flex;
-		margin-bottom: $grid-unit-30;
 
 		.components-button.has-icon {
 			min-width: 30px;

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

@@ -2,19 +2,39 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import {
+	BorderColorEdit,
+	hasBorderColorValue,
+	resetBorderColor,
+} from './border-color';
+import {
+	BorderRadiusEdit,
+	hasBorderRadiusValue,
+	resetBorderRadius,
+} from './border-radius';
+import {
+	BorderStyleEdit,
+	hasBorderStyleValue,
+	resetBorderStyle,
+} from './border-style';
+import {
+	BorderWidthEdit,
+	hasBorderWidthValue,
+	resetBorderWidth,
+} from './border-width';
 import InspectorControls from '../components/inspector-controls';
 import useSetting from '../components/use-setting';
-import { BorderColorEdit } from './border-color';
-import { BorderRadiusEdit } from './border-radius';
-import { BorderStyleEdit } from './border-style';
-import { BorderWidthEdit } from './border-width';
+import { cleanEmptyObject } from './utils';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
@@ -39,22 +59,73 @@ export function BorderPanel( props ) {
 		return null;
 	}
 
+	const defaultBorderControls = getBlockSupport( props.name, [
+		BORDER_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
+	// Callback to reset all block support attributes controlled via this panel.
+	const resetAll = () => {
+		const { style } = props.attributes;
+		const newStyle = cleanEmptyObject( {
+			...style,
+			border: undefined,
+		} );
+
+		props.setAttributes( { style: newStyle } );
+	};
+
 	return (
 		<InspectorControls>
-			<PanelBody
+			<ToolsPanel
 				className="block-editor-hooks__border-controls"
-				title={ __( 'Border' ) }
-				initialOpen={ false }
+				label={ __( 'Border options' ) }
+				header={ __( 'Border' ) }
+				resetAll={ resetAll }
 			>
-				{ ( isWidthSupported || isStyleSupported ) && (
-					<div className="block-editor-hooks__border-controls-row">
-						{ isWidthSupported && <BorderWidthEdit { ...props } /> }
-						{ isStyleSupported && <BorderStyleEdit { ...props } /> }
-					</div>
+				{ isWidthSupported && (
+					<ToolsPanelItem
+						className="single-column"
+						hasValue={ () => hasBorderWidthValue( props ) }
+						label={ __( 'Width' ) }
+						onDeselect={ () => resetBorderWidth( props ) }
+						isShownByDefault={ defaultBorderControls?.width }
+					>
+						<BorderWidthEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				{ isStyleSupported && (
+					<ToolsPanelItem
+						className="single-column"
+						hasValue={ () => hasBorderStyleValue( props ) }
+						label={ __( 'Style' ) }
+						onDeselect={ () => resetBorderStyle( props ) }
+						isShownByDefault={ defaultBorderControls?.style }
+					>
+						<BorderStyleEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				{ isColorSupported && (
+					<ToolsPanelItem
+						hasValue={ () => hasBorderColorValue( props ) }
+						label={ __( 'Color' ) }
+						onDeselect={ () => resetBorderColor( props ) }
+						isShownByDefault={ defaultBorderControls?.color }
+					>
+						<BorderColorEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				{ isRadiusSupported && (
+					<ToolsPanelItem
+						hasValue={ () => hasBorderRadiusValue( props ) }
+						label={ __( 'Radius' ) }
+						onDeselect={ () => resetBorderRadius( props ) }
+						isShownByDefault={ defaultBorderControls?.radius }
+					>
+						<BorderRadiusEdit { ...props } />
+					</ToolsPanelItem>
 				) }
-				{ isColorSupported && <BorderColorEdit { ...props } /> }
-				{ isRadiusSupported && <BorderRadiusEdit { ...props } /> }
-			</PanelBody>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 }
@@ -118,3 +189,22 @@ const useIsBorderDisabled = () => {
 
 	return configs.every( Boolean );
 };
+
+/**
+ * Returns a new style object where the specified border attribute has been
+ * removed.
+ *
+ * @param {Object} style     Styles from block attributes.
+ * @param {string} attribute The border style attribute to clear.
+ *
+ * @return {Object} Style object with the specified attribute removed.
+ */
+export function removeBorderAttribute( style, attribute ) {
+	return cleanEmptyObject( {
+		...style,
+		border: {
+			...style?.border,
+			[ attribute ]: undefined,
+		},
+	} );
+}

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

@@ -1,19 +1,11 @@
-.block-editor-hooks__border-controls {
-	.block-editor-hooks__border-controls-row {
-		display: flex;
-		justify-content: space-between;
-
-		> * {
-			width: calc(50% - #{ $grid-unit-10 });
-		}
+.block-editor-block-inspector .block-editor-hooks__border-controls,
+.edit-site .components-progressive-disclosure-panel {
+	.components-unit-control-wrapper,
+	.components-border-style-control {
+		grid-column: span 1;
 	}
 
-	.components-unit-control-wrapper {
-		margin-bottom: $grid-unit-30;
-
-		&:last-child {
-			margin-bottom: $grid-unit-10;
-		}
+	.components-base-control__field {
+		margin-bottom: 0;
 	}
 }
-

packages/edit-site/src/components/global-styles/border-panel.js

@@ -7,7 +7,8 @@ import {
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -68,6 +69,19 @@ function useHasBorderWidthControl( name ) {
 }
 
 export default function BorderPanel( { name } ) {
+	// To better reflect if the user has customized a value we need to
+	// ensure the style value being checked is from the `user` origin.
+	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
+	const createHasValueCallback = ( feature ) => () => 
+		!! userBorderStyles?.[ feature ];
+
+	const createResetCallback = ( setStyle ) => () =>
+		setStyle( undefined );
+
+	const handleOnChange = ( setStyle ) => ( value ) => {
+		setStyle( value || undefined );
+	};
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
 			'px',
@@ -77,70 +91,108 @@ export default function BorderPanel( { name } ) {
 	} );
 
 	// Border width.
-	const hasBorderWidth = useHasBorderWidthControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 	const [ borderWidthValue, setBorderWidth ] = useStyle(
 		'border.width',
 		name
 	);
 
 	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( name );
+	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
 	// Border color.
+	const showBorderColor = useHasBorderColorControl( name );
+	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
 	const [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );
 	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
 	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
-	const hasBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
 
 	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( name );
+	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
 		'border.radius',
 		name
 	);
+	const hasBorderRadius = () => {
+		const borderValues = userBorderStyles?.[ 'radius' ];
+		if ( typeof borderValues === 'object' ) {
+			return Object.entries( borderValues ).some( Boolean );
+		}
+		return !! borderValues;
+	}
+
+	const resetAll = () => {
+		setBorderColor( undefined );
+		setBorderRadius( undefined );
+		setBorderStyle( undefined );
+		setBorderWidth( undefined );
+	}
 
 	return (
-		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ ( hasBorderWidth || hasBorderStyle ) && (
-				<div className="edit-site-global-styles-sidebar__border-controls-row">
-					{ hasBorderWidth && (
+		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
+			{ showBorderWidth && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'width' ) }
+					label={ __( 'Width' ) }
+					onDeselect={ createResetCallback( setBorderWidth ) }
+					isShownByDefault={ true }
+					>
 						<UnitControl
 							value={ borderWidthValue }
 							label={ __( 'Width' ) }
 							min={ MIN_BORDER_WIDTH }
-							onChange={ ( value ) => {
-								setBorderWidth( value || undefined );
-							} }
+							onChange={ handleOnChange( setBorderWidth ) }
 							units={ units }
 						/>
-					) }
-					{ hasBorderStyle && (
-						<BorderStyleControl
-							value={ borderStyle }
-							onChange={ setBorderStyle }
-						/>
-					) }
-				</div>
+					</ToolsPanelItem>
+			)}
+			{ showBorderStyle && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'style' ) }
+					label={ __( 'Style' ) }
+					onDeselect={ createResetCallback( setBorderStyle ) }
+					isShownByDefault={ true }
+				>
+					<BorderStyleControl
+						value={ borderStyle }
+						onChange={ handleOnChange( setBorderStyle ) }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderColor && (
-				<ColorGradientControl
+			{ showBorderColor && (
+				<ToolsPanelItem
+					hasValue={ createHasValueCallback( 'color' ) }
 					label={ __( 'Color' ) }
-					colorValue={ borderColor }
-					colors={ colors }
-					gradients={ undefined }
-					disableCustomColors={ disableCustomColors }
-					disableCustomGradients={ disableCustomGradients }
-					onColorChange={ setBorderColor }
-				/>
+					onDeselect={ createResetCallback( setBorderColor ) }
+					isShownByDefault={ true }
+				>
+					<ColorGradientControl
+						label={ __( 'Color' ) }
+						colorValue={ borderColor }
+						colors={ colors }
+						gradients={ undefined }
+						disableCustomColors={ disableCustomColors }
+						disableCustomGradients={ disableCustomGradients }
+						onColorChange={ handleOnChange( setBorderColor ) }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderRadius && (
-				<BorderRadiusControl
-					values={ borderRadiusValues }
-					onChange={ setBorderRadius }
-				/>
+			{ showBorderRadius && (
+				<ToolsPanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ createResetCallback( setBorderRadius ) }
+					isShownByDefault={ true }
+				>
+					<BorderRadiusControl
+						values={ borderRadiusValues }
+						onChange={ handleOnChange( setBorderRadius ) }
+					/>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 }

packages/edit-site/src/components/sidebar/style.scss

@@ -25,20 +25,6 @@
 	margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-15;
-
-	> * {
-		width: calc(50% - #{ $grid-unit-10 });
-	}
-
-	.components-border-style-control__buttons {
-		margin-bottom: 0;
-	}
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;