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 && ( +