Duotone Settings: Add reset button and improve toggle rendering in Fi…

…ltersPanel
yogeshbhutkar · Jan 15, 2025 · e751b98 · e751b98
1 parent aa38b22
commit e751b98
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 18 deletions.
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -21,9 +21,11 @@ import {
 	Dropdown,
 	Flex,
 	FlexItem,
+	Button,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
+import { reset as resetIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -117,6 +119,41 @@ const LabeledColorIndicator = ( { indicator, label } ) => (
 	</HStack>
 );
 
+const renderToggle =
+	( duotone, resetDuotone, clearable ) =>
+	( { onToggle, isOpen } ) => {
+		const toggleProps = {
+			onClick: onToggle,
+			className: clsx( { 'is-open': isOpen } ),
+			'aria-expanded': isOpen,
+		};
+
+		return (
+			<ItemGroup
+				className="block-editor-panel-duotone-settings__dropdown"
+				isBordered
+				isSeparated
+			>
+				<Item as="button" { ...toggleProps }>
+					<LabeledColorIndicator
+						indicator={ duotone }
+						label={ __( 'Duotone' ) }
+					/>
+				</Item>
+				{ clearable && duotone && (
+					<Button
+						__next40pxDefaultSize
+						label={ __( 'Reset' ) }
+						className="block-editor-panel-duotone-settings__reset"
+						size="small"
+						icon={ resetIcon }
+						onClick={ resetDuotone }
+					/>
+				) }
+			</ItemGroup>
+		);
+	};
+
 export default function FiltersPanel( {
 	as: Wrapper = FiltersToolsPanel,
 	value,
@@ -125,6 +162,7 @@ export default function FiltersPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	clearable = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -182,24 +220,11 @@ export default function FiltersPanel( {
 					<Dropdown
 						popoverProps={ popoverProps }
 						className="block-editor-global-styles-filters-panel__dropdown"
-						renderToggle={ ( { onToggle, isOpen } ) => {
-							const toggleProps = {
-								onClick: onToggle,
-								className: clsx( { 'is-open': isOpen } ),
-								'aria-expanded': isOpen,
-							};
-
-							return (
-								<ItemGroup isBordered isSeparated>
-									<Item as="button" { ...toggleProps }>
-										<LabeledColorIndicator
-											indicator={ duotone }
-											label={ __( 'Duotone' ) }
-										/>
-									</Item>
-								</ItemGroup>
-							);
-						} }
+						renderToggle={ renderToggle(
+							duotone,
+							resetDuotone,
+							clearable
+						) }
 						renderContent={ () => (
 							<DropdownContentWrapper paddingSize="small">
 								<MenuGroup label={ __( 'Duotone' ) }>

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -75,3 +75,28 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
+
+.block-editor-panel-duotone-settings__dropdown {
+	position: relative;
+}
+
+.block-editor-panel-duotone-settings__reset {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	transition: opacity 0.1s ease-in-out;
+	@include reduce-motion("transition");
+
+	.block-editor-panel-duotone-settings__dropdown:hover + &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -143,6 +143,7 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 						setAttributes( { style: newStyle } );
 					} }
 					settings={ settings }
+					clearable
 				/>
 			</InspectorControls>
 			<BlockControls group="block" __experimentalShareWithChildBlocks>