Add reset button to ColorGradientSettingsDropdown

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,14 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 const renderToggle =
 	( settings ) =>
 	( { onToggle, isOpen } ) => {
-		const { colorValue, label } = settings;
+		const {
+			colorValue,
+			gradientValue,
+			onColorChange,
+			onGradientChange,
+			label,
+		} = settings;
+		const colorButtonRef = useRef( undefined );
 
 		const toggleProps = {
 			onClick: onToggle,
@@ -85,15 +99,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 (
-			<Button __next40pxDefaultSize { ...toggleProps }>
-				<LabeledColorIndicator
-					colorValue={ colorValue }
-					label={ label }
-				/>
-			</Button>
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<LabeledColorIndicator
+						colorValue={ value }
+						label={ label }
+					/>
+				</Button>
+				{ value && (
+					<Button
+						__next40pxDefaultSize
+						label={ __( 'Reset' ) }
+						className="block-editor-panel-color-gradient-settings__reset"
+						size="small"
+						icon={ resetIcon }
+						onClick={ () => {
+							clearValue();
+							if ( isOpen ) {
+								onToggle();
+							}
+							// Return focus to parent button
+							colorButtonRef.current?.focus();
+						} }
+					/>
+				) }
+			</>
 		);
 	};
 
@@ -143,8 +187,11 @@ export default function ColorGradientSettingsDropdown( {
 					...setting,
 				};
 				const toggleSettings = {
-					colorValue: setting.gradientValue ?? setting.colorValue,
 					label: setting.label,
+					colorValue: setting.colorValue,
+					gradientValue: setting.gradientValue,
+					onColorChange: setting.onColorChange,
+					onGradientChange: setting.onGradientChange,
 				};
 
 				return (

packages/block-editor/src/components/colors-gradients/style.scss

@@ -140,4 +140,9 @@ $swatch-gap: 12px;
 	&:hover {
 		opacity: 1;
 	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
 }

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

@@ -250,6 +250,9 @@ function ColorPanelDropdown( {
 									icon={ resetIcon }
 									onClick={ () => {
 										resetValue();
+										if ( isOpen ) {
+											onToggle();
+										}
 										// Return focus to parent button
 										colorGradientDropdownButtonRef.current?.focus();
 									} }