Add reset button to ColorGradientSettingsDropdown (#67800)

* Add reset button to ColorGradientSettingsDropdown

* Toggle if it is open, to avoid multiple selectors being open.

* Always show reset button if hover is not supported.

* Respect clearable setting to display the reset button.

* Toggle if it is open, to avoid multiple selectors being open.

* Apply suggestions from code review

---------

Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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 (
-			<Button __next40pxDefaultSize { ...toggleProps }>
-				<LabeledColorIndicator
-					colorValue={ colorValue }
-					label={ label }
-				/>
-			</Button>
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<LabeledColorIndicator
+						colorValue={ value }
+						label={ label }
+					/>
+				</Button>
+				{ clearable && 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 +188,12 @@ export default function ColorGradientSettingsDropdown( {
 					...setting,
 				};
 				const toggleSettings = {
-					colorValue: setting.gradientValue ?? setting.colorValue,
+					clearable: setting.clearable,
 					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();
 									} }

packages/edit-site/src/components/global-styles/shadows-edit-panel.js

@@ -392,7 +392,12 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 					'aria-expanded': isOpen,
 				};
 				const removeButtonProps = {
-					onClick: onRemove,
+					onClick: () => {
+						if ( isOpen ) {
+							onToggle();
+						}
+						onRemove();
+					},
 					className: clsx(
 						'edit-site-global-styles__shadow-editor__remove-button',
 						{ 'is-open': isOpen }