Update border support use of ToolsPanel

These changes include adding a new border group to the inspector controls slots and updating the border tools panel to match the latest changes to that component.
WordPress · Sep 15, 2021 · 637f84f · 637f84f
1 parent b0dbe58
commit 637f84f
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 69 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -129,6 +129,11 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot
+				__experimentalGroup="border"
+				bubblesVirtually={ bubblesVirtually }
+				label={ __( 'Border' ) }
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="dimensions"
 				bubblesVirtually={ bubblesVirtually }

diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -5,13 +5,15 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
 
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	border: InspectorControlsBorder,
 	dimensions: InspectorControlsDimensions,
 };
 

diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -39,6 +36,7 @@ import { cleanEmptyObject } from './utils';
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
 export function BorderPanel( props ) {
+	const { clientId } = props;
 	const isDisabled = useIsBorderDisabled( props );
 	const isSupported = hasBorderSupport( props.name );
 
@@ -67,68 +65,75 @@ export function BorderPanel( props ) {
 		'__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, borderColor: undefined } );
-	};
+	const createResetAllFilter = (
+		borderAttribute,
+		topLevelAttributes = {}
+	) => ( newAttributes ) => ( {
+		...newAttributes,
+		...topLevelAttributes,
+		style: {
+			...newAttributes.style,
+			border: {
+				...newAttributes.style?.border,
+				[ borderAttribute ]: undefined,
+			},
+		},
+	} );
 
 	return (
-		<InspectorControls>
-			<ToolsPanel
-				className="block-editor-hooks__border-controls"
-				label={ __( 'Border options' ) }
-				header={ __( 'Border' ) }
-				resetAll={ resetAll }
-			>
-				{ 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>
-				) }
-			</ToolsPanel>
+		<InspectorControls __experimentalGroup="border">
+			{ isWidthSupported && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasBorderWidthValue( props ) }
+					label={ __( 'Width' ) }
+					onDeselect={ () => resetBorderWidth( props ) }
+					isShownByDefault={ defaultBorderControls?.width }
+					resetAllFilter={ createResetAllFilter( 'width' ) }
+					panelId={ clientId }
+				>
+					<BorderWidthEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ isStyleSupported && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasBorderStyleValue( props ) }
+					label={ __( 'Style' ) }
+					onDeselect={ () => resetBorderStyle( props ) }
+					isShownByDefault={ defaultBorderControls?.style }
+					resetAllFilter={ createResetAllFilter( 'style' ) }
+					panelId={ clientId }
+				>
+					<BorderStyleEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ isColorSupported && (
+				<ToolsPanelItem
+					hasValue={ () => hasBorderColorValue( props ) }
+					label={ __( 'Color' ) }
+					onDeselect={ () => resetBorderColor( props ) }
+					isShownByDefault={ defaultBorderControls?.color }
+					resetAllFilter={ createResetAllFilter( 'color', {
+						borderColor: undefined,
+					} ) }
+					panelId={ clientId }
+				>
+					<BorderColorEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ isRadiusSupported && (
+				<ToolsPanelItem
+					hasValue={ () => hasBorderRadiusValue( props ) }
+					label={ __( 'Radius' ) }
+					onDeselect={ () => resetBorderRadius( props ) }
+					isShownByDefault={ defaultBorderControls?.radius }
+					resetAllFilter={ createResetAllFilter( 'radius' ) }
+					panelId={ clientId }
+				>
+					<BorderRadiusEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 		</InspectorControls>
 	);
 }

diff --git a/packages/components/src/tools-panel/styles.js b/packages/components/src/tools-panel/styles.js
@@ -91,6 +91,11 @@ export const ToolsPanelItem = css`
 			margin-bottom: 0;
 		}
 	}
+
+	.block-editor-color-gradient-control__color-indicator > span {
+		display: inline-flex;
+		align-items: center;
+	}
 `;
 
 export const DropdownMenu = css`

diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -112,11 +112,7 @@ export default function BorderPanel( {
 	};
 
 	return (
-		<ToolsPanel
-			label={ __( 'Border options' ) }
-			header={ __( 'Border' ) }
-			resetAll={ resetAll }
-		>
+		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
 			{ showBorderWidth && (
 				<ToolsPanelItem
 					className="single-column"