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 64322d0fd5d5c..3aed7255e411b 100644
--- 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 } ) => (
);
+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 (
+ <>
+
+ { duotone && (
+
+ ) }
+ >
+ );
+ };
+
export default function FiltersPanel( {
as: Wrapper = FiltersToolsPanel,
value,
@@ -182,24 +226,7 @@ export default function FiltersPanel( {
{
- const toggleProps = {
- onClick: onToggle,
- className: clsx( { 'is-open': isOpen } ),
- 'aria-expanded': isOpen,
- };
-
- return (
-
- -
-
-
-
- );
- } }
+ renderToggle={ renderToggle( duotone, resetDuotone ) }
renderContent={ () => (
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 5684cf9c0d303..3645586f28311 100644
--- 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;
+ }
+}