refactor: hover on button to show reset

WordPress · Feb 3, 2025 · 23d6b4a · 23d6b4a
1 parent 32a60dc
commit 23d6b4a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 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
@@ -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
@@ -24,6 +24,7 @@
 .block-editor-global-styles__shadow-dropdown {
 	display: block;
 	padding: 0;
+	position: relative;
 
 	button {
 		width: 100%;
@@ -76,10 +77,6 @@
 	direction: ltr;
 }
 
-.block-editor-panel-duotone-settings__dropdown {
-	position: relative;
-}
-
 .block-editor-panel-duotone-settings__reset {
 	position: absolute;
 	right: 0;
@@ -90,7 +87,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;