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

…FiltersPanel (#68672) * Duotone Settings: Add reset button and improve toggle rendering in FiltersPanel * refactor: revert usage of `clearable` prop * refactor: hover on button to show `reset` * refactor: remove the usage of `ItemGroup` and add `css` for border * refactor: update button label to 'Reset' and adjust border color in filters panel Co-authored-by: yogeshbhutkar <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Feb 7, 2025 · 1777430 · 1777430
1 parent d7e8549
commit 1777430
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 21 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
@@ -9,8 +9,6 @@ import clsx from 'clsx';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -21,9 +19,11 @@ import {
 	Dropdown,
 	Flex,
 	FlexItem,
+	Button,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useRef } from '@wordpress/element';
+import { reset as resetIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -117,6 +117,50 @@ const LabeledColorIndicator = ( { indicator, label } ) => (
 	</HStack>
 );
 
+const renderToggle =
+	( duotone, resetDuotone ) =>
+	( { onToggle, isOpen } ) => {
+		const duotoneButtonRef = useRef( undefined );
+
+		const toggleProps = {
+			onClick: onToggle,
+			className: clsx( { 'is-open': isOpen } ),
+			'aria-expanded': isOpen,
+			ref: duotoneButtonRef,
+		};
+
+		const removeButtonProps = {
+			onClick: () => {
+				if ( isOpen ) {
+					onToggle();
+				}
+				resetDuotone();
+				// Return focus to parent button.
+				duotoneButtonRef.current?.focus();
+			},
+			className: 'block-editor-panel-duotone-settings__reset',
+			label: __( 'Reset' ),
+		};
+
+		return (
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<LabeledColorIndicator
+						indicator={ duotone }
+						label={ __( 'Duotone' ) }
+					/>
+				</Button>
+				{ duotone && (
+					<Button
+						size="small"
+						icon={ resetIcon }
+						{ ...removeButtonProps }
+					/>
+				) }
+			</>
+		);
+	};
+
 export default function FiltersPanel( {
 	as: Wrapper = FiltersToolsPanel,
 	value,
@@ -182,24 +226,7 @@ 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 ) }
 						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
@@ -58,6 +58,11 @@
 	}
 }
 
+.block-editor-global-styles-filters-panel__dropdown {
+	border: 1px solid $gray-300;
+	border-radius: $radius-small;
+}
+
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	appearance: none;
@@ -100,3 +105,25 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
+
+.block-editor-panel-duotone-settings__reset {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	.block-editor-global-styles-filters-panel__dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}