diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 71b27c06e7ccf..e667927bee760 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -15,6 +15,13 @@ import {
__experimentalHStack as HStack,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { reset as resetIcon } from '@wordpress/icons';
/**
* Internal dependencies
@@ -76,7 +83,15 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
const renderToggle =
( settings ) =>
( { onToggle, isOpen } ) => {
- const { colorValue, label } = settings;
+ const {
+ clearable,
+ colorValue,
+ gradientValue,
+ onColorChange,
+ onGradientChange,
+ label,
+ } = settings;
+ const colorButtonRef = useRef( undefined );
const toggleProps = {
onClick: onToggle,
@@ -85,15 +100,45 @@ const renderToggle =
{ 'is-open': isOpen }
),
'aria-expanded': isOpen,
+ ref: colorButtonRef,
+ };
+
+ const clearValue = () => {
+ if ( colorValue ) {
+ onColorChange();
+ } else if ( gradientValue ) {
+ onGradientChange();
+ }
};
+ const value = colorValue ?? gradientValue;
+
return (
-
+ <>
+
+ { clearable && value && (
+