From 1ec75a0ba9f5a4c739bda3fcdf86440a8a52fd61 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Wed, 15 Jan 2025 11:21:19 +0530
Subject: [PATCH 1/5] Duotone Settings: Add reset button and improve toggle
 rendering in FiltersPanel

---
 .../components/global-styles/filters-panel.js | 61 +++++++++++++------
 .../src/components/global-styles/style.scss   | 25 ++++++++
 packages/block-editor/src/hooks/duotone.js    |  1 +
 3 files changed, 69 insertions(+), 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
index 64322d0fd5d5c9..1bbfd40db3c892 100644
--- 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
index c51ffa3116d9f0..a1fb53e65c0888 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -77,3 +77,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
index 246e4fde7d8ba8..f61c50ead132a2 100644
--- 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>

From 1c61404e565fa5735372812b4dc20290eea0a039 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Mon, 3 Feb 2025 10:09:27 +0530
Subject: [PATCH 2/5] refactor: revert usage of `clearable` prop

---
 .../src/components/global-styles/filters-panel.js     | 11 +++--------
 .../src/components/global-styles/style.scss           |  5 +++--
 packages/block-editor/src/hooks/duotone.js            |  1 -
 3 files changed, 6 insertions(+), 11 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
index 1bbfd40db3c892..5b42aedc324269 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -120,7 +120,7 @@ const LabeledColorIndicator = ( { indicator, label } ) => (
 );
 
 const renderToggle =
-	( duotone, resetDuotone, clearable ) =>
+	( duotone, resetDuotone ) =>
 	( { onToggle, isOpen } ) => {
 		const toggleProps = {
 			onClick: onToggle,
@@ -140,7 +140,7 @@ const renderToggle =
 						label={ __( 'Duotone' ) }
 					/>
 				</Item>
-				{ clearable && duotone && (
+				{ duotone && (
 					<Button
 						__next40pxDefaultSize
 						label={ __( 'Reset' ) }
@@ -162,7 +162,6 @@ export default function FiltersPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
-	clearable = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -220,11 +219,7 @@ export default function FiltersPanel( {
 					<Dropdown
 						popoverProps={ popoverProps }
 						className="block-editor-global-styles-filters-panel__dropdown"
-						renderToggle={ renderToggle(
-							duotone,
-							resetDuotone,
-							clearable
-						) }
+						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
index a1fb53e65c0888..1fd25815124f3d 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -88,8 +88,9 @@
 	top: $grid-unit;
 	margin: auto $grid-unit auto;
 	opacity: 0;
-	transition: opacity 0.1s ease-in-out;
-	@include reduce-motion("transition");
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-in-out;
+	}
 
 	.block-editor-panel-duotone-settings__dropdown:hover + &,
 	&:focus,
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index f61c50ead132a2..246e4fde7d8ba8 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -143,7 +143,6 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 						setAttributes( { style: newStyle } );
 					} }
 					settings={ settings }
-					clearable
 				/>
 			</InspectorControls>
 			<BlockControls group="block" __experimentalShareWithChildBlocks>

From 300968cca52e998ae2ca3aeb205b91836a573058 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Mon, 3 Feb 2025 15:23:14 +0530
Subject: [PATCH 3/5] refactor: hover on button to show `reset`

---
 .../components/global-styles/filters-panel.js | 90 +++++++++++--------
 .../src/components/global-styles/style.scss   |  7 +-
 2 files changed, 54 insertions(+), 43 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
index 5b42aedc324269..9099139729e122 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -10,7 +10,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -24,7 +23,7 @@ import {
 	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';
 
 /**
@@ -122,35 +121,45 @@ const LabeledColorIndicator = ( { indicator, label } ) => (
 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: __( 'Remove' ),
 		};
 
 		return (
-			<ItemGroup
-				className="block-editor-panel-duotone-settings__dropdown"
-				isBordered
-				isSeparated
-			>
-				<Item as="button" { ...toggleProps }>
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
 					<LabeledColorIndicator
 						indicator={ duotone }
 						label={ __( 'Duotone' ) }
 					/>
-				</Item>
+				</Button>
 				{ duotone && (
 					<Button
 						__next40pxDefaultSize
-						label={ __( 'Reset' ) }
-						className="block-editor-panel-duotone-settings__reset"
 						size="small"
 						icon={ resetIcon }
-						onClick={ resetDuotone }
+						{ ...removeButtonProps }
 					/>
 				) }
-			</ItemGroup>
+			</>
 		);
 	};
 
@@ -216,31 +225,36 @@ export default function FiltersPanel( {
 					isShownByDefault={ defaultControls.duotone }
 					panelId={ panelId }
 				>
-					<Dropdown
-						popoverProps={ popoverProps }
-						className="block-editor-global-styles-filters-panel__dropdown"
-						renderToggle={ renderToggle( duotone, resetDuotone ) }
-						renderContent={ () => (
-							<DropdownContentWrapper paddingSize="small">
-								<MenuGroup label={ __( 'Duotone' ) }>
-									<p>
-										{ __(
-											'Create a two-tone color effect without losing your original image.'
-										) }
-									</p>
-									<DuotonePicker
-										colorPalette={ colorPalette }
-										duotonePalette={ duotonePalette }
-										// TODO: Re-enable both when custom colors are supported for block-level styles.
-										disableCustomColors
-										disableCustomDuotone
-										value={ duotone }
-										onChange={ setDuotone }
-									/>
-								</MenuGroup>
-							</DropdownContentWrapper>
-						) }
-					/>
+					<ItemGroup isBordered isSeparated>
+						<Dropdown
+							popoverProps={ popoverProps }
+							className="block-editor-global-styles-filters-panel__dropdown"
+							renderToggle={ renderToggle(
+								duotone,
+								resetDuotone
+							) }
+							renderContent={ () => (
+								<DropdownContentWrapper paddingSize="small">
+									<MenuGroup label={ __( 'Duotone' ) }>
+										<p>
+											{ __(
+												'Create a two-tone color effect without losing your original image.'
+											) }
+										</p>
+										<DuotonePicker
+											colorPalette={ colorPalette }
+											duotonePalette={ duotonePalette }
+											// TODO: Re-enable both when custom colors are supported for block-level styles.
+											disableCustomColors
+											disableCustomDuotone
+											value={ duotone }
+											onChange={ setDuotone }
+										/>
+									</MenuGroup>
+								</DropdownContentWrapper>
+							) }
+						/>
+					</ItemGroup>
 				</ToolsPanelItem>
 			) }
 		</Wrapper>
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 1fd25815124f3d..4d778aab6b1d5b 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -24,6 +24,7 @@
 .block-editor-global-styles__shadow-dropdown {
 	display: block;
 	padding: 0;
+	position: relative;
 
 	button {
 		width: 100%;
@@ -78,10 +79,6 @@
 	direction: ltr;
 }
 
-.block-editor-panel-duotone-settings__dropdown {
-	position: relative;
-}
-
 .block-editor-panel-duotone-settings__reset {
 	position: absolute;
 	right: 0;
@@ -92,7 +89,7 @@
 		transition: opacity 0.1s ease-in-out;
 	}
 
-	.block-editor-panel-duotone-settings__dropdown:hover + &,
+	.block-editor-global-styles-filters-panel__dropdown:hover &,
 	&:focus,
 	&:hover {
 		opacity: 1;

From d40a130e532f27b086a97b3458737ec4f4c924a6 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Mon, 3 Feb 2025 15:57:10 +0530
Subject: [PATCH 4/5] refactor: remove the usage of `ItemGroup` and add `css`
 for border

---
 .../components/global-styles/filters-panel.js | 56 +++++++++----------
 .../src/components/global-styles/style.scss   |  5 ++
 2 files changed, 30 insertions(+), 31 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
index 9099139729e122..e3e0a043906435 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -225,36 +224,31 @@ export default function FiltersPanel( {
 					isShownByDefault={ defaultControls.duotone }
 					panelId={ panelId }
 				>
-					<ItemGroup isBordered isSeparated>
-						<Dropdown
-							popoverProps={ popoverProps }
-							className="block-editor-global-styles-filters-panel__dropdown"
-							renderToggle={ renderToggle(
-								duotone,
-								resetDuotone
-							) }
-							renderContent={ () => (
-								<DropdownContentWrapper paddingSize="small">
-									<MenuGroup label={ __( 'Duotone' ) }>
-										<p>
-											{ __(
-												'Create a two-tone color effect without losing your original image.'
-											) }
-										</p>
-										<DuotonePicker
-											colorPalette={ colorPalette }
-											duotonePalette={ duotonePalette }
-											// TODO: Re-enable both when custom colors are supported for block-level styles.
-											disableCustomColors
-											disableCustomDuotone
-											value={ duotone }
-											onChange={ setDuotone }
-										/>
-									</MenuGroup>
-								</DropdownContentWrapper>
-							) }
-						/>
-					</ItemGroup>
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="block-editor-global-styles-filters-panel__dropdown"
+						renderToggle={ renderToggle( duotone, resetDuotone ) }
+						renderContent={ () => (
+							<DropdownContentWrapper paddingSize="small">
+								<MenuGroup label={ __( 'Duotone' ) }>
+									<p>
+										{ __(
+											'Create a two-tone color effect without losing your original image.'
+										) }
+									</p>
+									<DuotonePicker
+										colorPalette={ colorPalette }
+										duotonePalette={ duotonePalette }
+										// TODO: Re-enable both when custom colors are supported for block-level styles.
+										disableCustomColors
+										disableCustomDuotone
+										value={ duotone }
+										onChange={ setDuotone }
+									/>
+								</MenuGroup>
+							</DropdownContentWrapper>
+						) }
+					/>
 				</ToolsPanelItem>
 			) }
 		</Wrapper>
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 4d778aab6b1d5b..695e59fff1c162 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -36,6 +36,11 @@
 	}
 }
 
+.block-editor-global-styles-filters-panel__dropdown {
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: $radius-small;
+}
+
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	appearance: none;

From 03515e84b473b9739e4282558068dca5b16e3bfb Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Thu, 6 Feb 2025 17:40:32 +0530
Subject: [PATCH 5/5] refactor: update button label to 'Reset' and adjust
 border color in filters panel

---
 .../block-editor/src/components/global-styles/filters-panel.js | 3 +--
 packages/block-editor/src/components/global-styles/style.scss  | 2 +-
 2 files changed, 2 insertions(+), 3 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
index e3e0a043906435..3aed7255e411b4 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -139,7 +139,7 @@ const renderToggle =
 				duotoneButtonRef.current?.focus();
 			},
 			className: 'block-editor-panel-duotone-settings__reset',
-			label: __( 'Remove' ),
+			label: __( 'Reset' ),
 		};
 
 		return (
@@ -152,7 +152,6 @@ const renderToggle =
 				</Button>
 				{ duotone && (
 					<Button
-						__next40pxDefaultSize
 						size="small"
 						icon={ resetIcon }
 						{ ...removeButtonProps }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 2af2cb83246bb7..3645586f283115 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -59,7 +59,7 @@
 }
 
 .block-editor-global-styles-filters-panel__dropdown {
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid $gray-300;
 	border-radius: $radius-small;
 }