BorderControl: always show Reset button

packages/block-editor/src/components/global-styles/border-panel.js

@@ -256,6 +256,7 @@ export default function BorderPanel( {
 					<BorderBoxControl
 						colors={ colors }
 						enableAlpha
+						showClearButton
 						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }

packages/components/src/border-box-control/border-box-control/README.md

@@ -48,6 +48,7 @@ const MyBorderBoxControl = () => {
 	return (
 		<BorderBoxControl
 			__next40pxDefaultSize
+			showClearButton
 			colors={ colors }
 			label={ __( 'Borders' ) }
 			onChange={ onChange }
@@ -89,6 +90,13 @@ custom colors.
 -   Required: No
 -   Default: `false`
 
+### `showClearButton`: `boolean`
+
+Select whether to display the Clear button.
+
+-   Required: No
+-   Default: `undefined`
+
 ### `enableStyle`: `boolean`
 
 This controls whether to support border style selections.

packages/components/src/border-box-control/border-box-control/component.tsx

@@ -48,6 +48,7 @@ const UnconnectedBorderBoxControl = (
 		disableCustomColors,
 		disableUnits,
 		enableAlpha,
+		showClearButton,
 		enableStyle,
 		hasMixedBorders,
 		hideLabelFromVision,
@@ -103,6 +104,7 @@ const UnconnectedBorderBoxControl = (
 						disableUnits={ disableUnits }
 						disableCustomColors={ disableCustomColors }
 						enableAlpha={ enableAlpha }
+						showClearButton={ showClearButton }
 						enableStyle={ enableStyle }
 						onChange={ onLinkedChange }
 						placeholder={
@@ -177,6 +179,7 @@ const UnconnectedBorderBoxControl = (
  * 	return (
  * 		<BorderBoxControl
  * 			__next40pxDefaultSize
+ * 			showClearButton
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }

packages/components/src/border-box-control/types.ts

@@ -22,7 +22,7 @@ export type BorderSide = keyof Borders;
 
 export type BorderBoxControlProps = ColorProps &
 	LabelProps &
-	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
+	Pick< BorderControlProps, 'showClearButton' | 'enableStyle' | 'size' > & {
 		/**
 		 * A callback function invoked when any border value is changed. The value
 		 * received may be a "flat" border object, one that has properties defining

packages/components/src/border-control/border-control-dropdown/component.tsx

@@ -7,6 +7,7 @@ import type { CSSProperties } from 'react';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -152,17 +153,27 @@ const BorderControlDropdown = (
 		indicatorClassName,
 		indicatorWrapperClassName,
 		isStyleSettable,
+		showClearButton,
 		onReset,
 		onColorChange,
 		onStyleChange,
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		clearButtonClassName,
 		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
 
+	if ( showClearButton === undefined ) {
+		deprecated( `Clear button styles for wp.components.BorderBoxControl`, {
+			since: '6.8',
+			version: '7.1',
+			hint: 'Set the `showClearButton` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	const { color, style } = border || {};
 	const colorObject = getColorObject( color, colors );
 
@@ -224,8 +235,23 @@ const BorderControlDropdown = (
 						/>
 					) }
 				</VStack>
+				{ showClearButton && (
+					<div className={ clearButtonClassName }>
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								onReset();
+							} }
+							disabled={ ! showResetButton }
+							accessibleWhenDisabled
+							__next40pxDefaultSize
+						>
+							{ __( 'Clear' ) }
+						</Button>
+					</div>
+				) }
 			</DropdownContentWrapper>
-			{ showResetButton && (
+			{ ! showClearButton && showResetButton && (
 				<DropdownContentWrapper paddingSize="none">
 					<Button
 						className={ resetButtonClassName }

packages/components/src/border-control/border-control-dropdown/hook.ts

@@ -76,6 +76,10 @@ export function useBorderControlDropdown(
 		return cx( styles.borderControlPopoverContent );
 	}, [ cx ] );
 
+	const clearButtonClassName = useMemo( () => {
+		return cx( styles.clearButton );
+	}, [ cx ] );
+
 	const resetButtonClassName = useMemo( () => {
 		return cx( styles.resetButton );
 	}, [ cx ] );
@@ -94,6 +98,7 @@ export function useBorderControlDropdown(
 		onReset,
 		popoverContentClassName,
 		popoverControlsClassName,
+		clearButtonClassName,
 		resetButtonClassName,
 		size,
 		__experimentalIsRenderedInSidebar,

packages/components/src/border-control/border-control/component.tsx

@@ -49,6 +49,7 @@ const UnconnectedBorderControl = (
 		innerWrapperClassName,
 		inputWidth,
 		isStyleSettable,
+		showClearButton,
 		label,
 		onBorderChange,
 		onSliderChange,
@@ -89,6 +90,7 @@ const UnconnectedBorderControl = (
 								enableAlpha={ enableAlpha }
 								enableStyle={ enableStyle }
 								isStyleSettable={ isStyleSettable }
+								showClearButton={ showClearButton }
 								onChange={ onBorderChange }
 								previousStyleSelection={
 									previousStyleSelection

packages/components/src/border-control/border-control/hook.ts

@@ -33,6 +33,7 @@ export function useBorderControl(
 		enableAlpha = true,
 		enableStyle = true,
 		shouldSanitizeBorder = true,
+		showClearButton,
 		size = 'default',
 		value: border,
 		width,
@@ -160,6 +161,7 @@ export function useBorderControl(
 		innerWrapperClassName,
 		inputWidth: wrapperWidth,
 		isStyleSettable,
+		showClearButton,
 		onBorderChange,
 		onSliderChange,
 		onWidthChange,

packages/components/src/border-control/styles.ts

@@ -147,6 +147,12 @@ export const borderControlPopoverControls = css`
 export const borderControlPopoverContent = css``;
 export const borderColorIndicator = css``;
 
+export const clearButton = css`
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 12px;
+`;
+
 export const resetButton = css`
 	justify-content: center;
 	width: 100%;

packages/components/src/border-control/types.ts

@@ -57,6 +57,12 @@ export type BorderControlProps = ColorProps &
 		 * @default true
 		 */
 		enableStyle?: boolean;
+		/**
+		 * ShowClearButton
+		 *
+		 * @default undefined
+		 */
+		showClearButton?: boolean | undefined;
 		/**
 		 * This flags the `BorderControl` to render with a more compact
 		 * appearance. It restricts the width of the control and prevents it
@@ -137,6 +143,10 @@ export type DropdownProps = ColorProps &
 		 * Whether a border style can be set, based on the border sanitization settings.
 		 */
 		isStyleSettable: boolean;
+		/**
+		 * Show Clear Button
+		 */
+		showClearButton?: boolean;
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */