diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index e4c349024dae5..aea8e67f5b594 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -256,7 +256,6 @@ export default function BorderPanel( { { return ( & { + Pick< BorderControlProps, '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 diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index 3be8e37efa9c4..29a17c8be87e4 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -7,7 +7,6 @@ import type { CSSProperties } from 'react'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -153,27 +152,17 @@ 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 ); @@ -210,9 +199,7 @@ const BorderControlDropdown = ( ); - const renderContent: DropdownComponentProps[ 'renderContent' ] = ( { - onClose, - } ) => ( + const renderContent: DropdownComponentProps[ 'renderContent' ] = () => ( <> @@ -235,37 +222,20 @@ const BorderControlDropdown = ( /> ) } - { showClearButton && ( -
- -
- ) } -
- { ! showClearButton && showResetButton && ( - +
- - ) } +
+
); diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index 8fb2729d817e0..858f0b0c77b19 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -80,10 +80,6 @@ export function useBorderControlDropdown( return cx( styles.clearButton ); }, [ cx ] ); - const resetButtonClassName = useMemo( () => { - return cx( styles.resetButton ); - }, [ cx ] ); - return { ...otherProps, border, @@ -99,7 +95,6 @@ export function useBorderControlDropdown( popoverContentClassName, popoverControlsClassName, clearButtonClassName, - resetButtonClassName, size, __experimentalIsRenderedInSidebar, }; diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index 20000fd8a2792..f71599b274778 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -49,7 +49,6 @@ const UnconnectedBorderControl = ( innerWrapperClassName, inputWidth, isStyleSettable, - showClearButton, label, onBorderChange, onSliderChange, @@ -90,7 +89,6 @@ const UnconnectedBorderControl = ( enableAlpha={ enableAlpha } enableStyle={ enableStyle } isStyleSettable={ isStyleSettable } - showClearButton={ showClearButton } onChange={ onBorderChange } previousStyleSelection={ previousStyleSelection diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts index 9b90b7ead2f9a..9b0f064c51921 100644 --- a/packages/components/src/border-control/border-control/hook.ts +++ b/packages/components/src/border-control/border-control/hook.ts @@ -33,7 +33,6 @@ export function useBorderControl( enableAlpha = true, enableStyle = true, shouldSanitizeBorder = true, - showClearButton, size = 'default', value: border, width, @@ -161,7 +160,6 @@ export function useBorderControl( innerWrapperClassName, inputWidth: wrapperWidth, isStyleSettable, - showClearButton, onBorderChange, onSliderChange, onWidthChange, diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index 1e3db6944e725..da2107fc73a93 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -153,18 +153,6 @@ export const clearButton = css` margin-top: 12px; `; -export const resetButton = css` - justify-content: center; - width: 100%; - - /* Override button component styling */ - && { - border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] }; - border-top-left-radius: 0; - border-top-right-radius: 0; - } -`; - export const borderSlider = () => css` flex: 1 1 60%; ${ rtl( { marginRight: space( 3 ) } )() } diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 860084feea0f7..ecd3f67c9be08 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -57,12 +57,6 @@ 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 @@ -143,10 +137,6 @@ 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. */