From 27bb038623933c51d75d38da5a9c1a1e4be850f5 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Mon, 23 Dec 2024 14:18:17 +0100 Subject: [PATCH] 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 Co-authored-by: t-hamano --- .../components/colors-gradients/dropdown.js | 65 ++++++++++++++++--- .../components/colors-gradients/style.scss | 5 ++ .../components/global-styles/color-panel.js | 3 + .../global-styles/shadows-edit-panel.js | 7 +- 4 files changed, 71 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js index 71b27c06e7ccfc..e667927bee7601 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 && ( +