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
WordPress · Aug 11, 2021 · e0eb0d6 · e0eb0d6
1 parent bac3908
commit e0eb0d6
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 106 deletions.
diff --git a/packages/block-editor/src/components/border-style-control/style.scss b/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;

diff --git a/packages/block-editor/src/hooks/border.js b/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';
 
@@ -42,22 +62,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>
 	);
 }
@@ -121,3 +192,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,
+		},
+	} );
+}
diff --git a/packages/block-editor/src/hooks/border.scss b/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;
 	}
 }
-
diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/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,79 +69,116 @@ export default function BorderPanel( {
 	getStyle,
 	setStyle,
 } ) {
+	// 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 createHasValueCallback = ( feature ) => () =>
+		!! getStyle( name, feature, 'user' );
+
+	const createResetCallback = ( feature ) => () =>
+		setStyle( name, feature, undefined );
+
+	const handleOnChange = ( feature ) => ( value ) => {
+		setStyle( name, feature, value || undefined );
+	};
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );
 
-	// Border width.
-	const hasBorderWidth = useHasBorderWidthControl( { supports, name } );
-	const borderWidthValue = getStyle( name, 'borderWidth' );
-
-	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
-	const borderStyle = getStyle( name, 'borderStyle' );
+	const showBorderWidth = useHasBorderWidthControl( { supports, name } );
+	const showBorderStyle = useHasBorderStyleControl( { supports, name } );
+	const showBorderColor = useHasBorderColorControl( { supports, name } );
+	const showBorderRadius = useHasBorderRadiusControl( { supports, name } );
 
-	// Border color.
 	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const disableCustomColors = ! useSetting( 'color.custom' );
 	const disableCustomGradients = ! useSetting( 'color.customGradient' );
-	const hasBorderColor = useHasBorderColorControl( { supports, name } );
-	const borderColor = getStyle( name, 'borderColor' );
 
-	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
-	const borderRadiusValues = getStyle( name, 'borderRadius' );
+	const hasBorderRadius = () => {
+		const borderRadius = getStyle( name, 'borderRadius', 'user' );
+
+		if ( typeof borderRadius === 'object' ) {
+			return Object.entries( borderRadius ).some( Boolean );
+		}
+
+		return !! borderRadius;
+	};
+
+	const resetAll = () => {
+		setStyle( name, 'borderColor', undefined );
+		setStyle( name, 'borderRadius', undefined );
+		setStyle( name, 'borderStyle', undefined );
+		setStyle( name, 'borderWidth', undefined );
+	};
 
 	return (
-		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ ( hasBorderWidth || hasBorderStyle ) && (
-				<div className="edit-site-global-styles-sidebar__border-controls-row">
-					{ hasBorderWidth && (
-						<UnitControl
-							value={ borderWidthValue }
-							label={ __( 'Width' ) }
-							min={ MIN_BORDER_WIDTH }
-							onChange={ ( value ) => {
-								setStyle(
-									name,
-									'borderWidth',
-									value || undefined
-								);
-							} }
-							units={ units }
-						/>
-					) }
-					{ hasBorderStyle && (
-						<BorderStyleControl
-							value={ borderStyle }
-							onChange={ ( value ) =>
-								setStyle( name, 'borderStyle', value )
-							}
-						/>
-					) }
-				</div>
+		<ToolsPanel
+			label={ __( 'Border options' ) }
+			header={ __( 'Border' ) }
+			resetAll={ resetAll }
+		>
+			{ showBorderWidth && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'borderWidth' ) }
+					label={ __( 'Width' ) }
+					onDeselect={ createResetCallback( 'borderWidth' ) }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						value={ getStyle( name, 'borderWidth' ) }
+						label={ __( 'Width' ) }
+						min={ MIN_BORDER_WIDTH }
+						onChange={ handleOnChange( 'borderWidth' ) }
+						units={ units }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showBorderStyle && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'borderStyle' ) }
+					label={ __( 'Style' ) }
+					onDeselect={ createResetCallback( 'borderStyle' ) }
+					isShownByDefault={ true }
+				>
+					<BorderStyleControl
+						value={ getStyle( name, 'borderStyle' ) }
+						onChange={ handleOnChange( 'borderStyle' ) }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderColor && (
-				<ColorGradientControl
+			{ showBorderColor && (
+				<ToolsPanelItem
+					hasValue={ createHasValueCallback( 'borderColor' ) }
 					label={ __( 'Color' ) }
-					value={ borderColor }
-					colors={ colors }
-					gradients={ undefined }
-					disableCustomColors={ disableCustomColors }
-					disableCustomGradients={ disableCustomGradients }
-					onColorChange={ ( value ) =>
-						setStyle( name, 'borderColor', value )
-					}
-				/>
+					onDeselect={ createResetCallback( 'borderColor' ) }
+					isShownByDefault={ true }
+				>
+					<ColorGradientControl
+						label={ __( 'Color' ) }
+						value={ getStyle( name, 'borderColor' ) }
+						colors={ colors }
+						gradients={ undefined }
+						disableCustomColors={ disableCustomColors }
+						disableCustomGradients={ disableCustomGradients }
+						onColorChange={ handleOnChange( 'borderColor' ) }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderRadius && (
-				<BorderRadiusControl
-					values={ borderRadiusValues }
-					onChange={ ( value ) =>
-						setStyle( name, 'borderRadius', value )
-					}
-				/>
+			{ showBorderRadius && (
+				<ToolsPanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ createResetCallback( 'borderRadius' ) }
+					isShownByDefault={ true }
+				>
+					<BorderRadiusControl
+						values={ getStyle( name, 'borderRadius' ) }
+						onChange={ handleOnChange( 'borderRadius' ) }
+					/>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -24,17 +24,3 @@
 .edit-site-global-styles-sidebar__reset-button.components-button {
 	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;
-	}
-}