From 8da1330300d77ebdd7102a96b1e69020bfcfbf9d Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Fri, 14 Apr 2023 16:49:40 +0200
Subject: [PATCH 01/10] add a filter slot and insert StylesFiltersPanel on the
 duotone hook

---
 .../inspector-controls-tabs/styles-tab.js     |  1 +
 .../components/inspector-controls/groups.js   |  2 +
 packages/block-editor/src/hooks/duotone.js    | 66 ++++++++++++-------
 packages/block-editor/src/hooks/utils.js      | 17 +++++
 4 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
index 3a7f625d10de2..c901e9cddbe14 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -32,6 +32,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
+			<InspectorControls.Slot group="filter" label={ __( 'Filter' ) } />
 			<InspectorControls.Slot
 				group="typography"
 				label={ __( 'Typography' ) }
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index f1adbb66252b5..c59795c41351e 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -7,6 +7,7 @@ const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
+const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -22,6 +23,7 @@ const groups = {
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
+	filter: InspectorControlsFilter,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	settings: InspectorControlsDefault, // Alias for default.
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index c3aac777a396b..5a0c494d1976a 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -23,6 +23,7 @@ import { useSelect } from '@wordpress/data';
  */
 import {
 	BlockControls,
+	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
@@ -34,7 +35,9 @@ import {
 } from '../components/duotone';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
+import { useBlockSettings } from './utils';
 import { store as blockEditorStore } from '../store';
+import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 
 const EMPTY_ARRAY = [];
 
@@ -106,9 +109,10 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanel( { attributes, setAttributes } ) {
+function DuotonePanel( { attributes, setAttributes, name } ) {
 	const style = attributes?.style;
 	const duotoneStyle = style?.color?.duotone;
+	const settings = useBlockSettings( name );
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -132,30 +136,42 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		: duotoneStyle;
 
 	return (
-		<BlockControls group="block" __experimentalShareWithChildBlocks>
-			<DuotoneControl
-				duotonePalette={ duotonePalette }
-				colorPalette={ colorPalette }
-				disableCustomDuotone={ disableCustomDuotone }
-				disableCustomColors={ disableCustomColors }
-				value={ duotonePresetOrColors }
-				onChange={ ( newDuotone ) => {
-					const maybePreset = getDuotonePresetFromColors(
-						newDuotone,
-						duotonePalette
-					);
-
-					const newStyle = {
-						...style,
-						color: {
-							...style?.color,
-							duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
-						},
-					};
-					setAttributes( { style: newStyle } );
-				} }
-			/>
-		</BlockControls>
+		<>
+			<InspectorControls group="filter">
+				<StylesFiltersPanel
+					value={ style }
+					onChange={ ( newStyle ) => {
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</InspectorControls>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DuotoneControl
+					duotonePalette={ duotonePalette }
+					colorPalette={ colorPalette }
+					disableCustomDuotone={ disableCustomDuotone }
+					disableCustomColors={ disableCustomColors }
+					value={ duotonePresetOrColors }
+					onChange={ ( newDuotone ) => {
+						const maybePreset = getDuotonePresetFromColors(
+							newDuotone,
+							duotonePalette
+						);
+
+						const newStyle = {
+							...style,
+							color: {
+								...style?.color,
+								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</BlockControls>
+		</>
 	);
 }
 
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 6db0bad2eb64f..7d22aa998fc5a 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -150,9 +150,14 @@ export function useBlockSettings( name, parentLayout ) {
 	const borderWidth = useSetting( 'border.width' );
 	const customColorsEnabled = useSetting( 'color.custom' );
 	const customColors = useSetting( 'color.palette.custom' );
+	const customDuotone = useSetting( 'color.customDuotone' );
 	const themeColors = useSetting( 'color.palette.theme' );
 	const defaultColors = useSetting( 'color.palette.default' );
 	const defaultPalette = useSetting( 'color.defaultPalette' );
+	const defaultDuotone = useSetting( 'color.defaultDuotone' );
+	const userDuotonePalette = useSetting( 'color.duotone.custom' );
+	const themeDuotonePalette = useSetting( 'color.duotone.theme' );
+	const defaultDuotonePalette = useSetting( 'color.duotone.default' );
 	const userGradientPalette = useSetting( 'color.gradients.custom' );
 	const themeGradientPalette = useSetting( 'color.gradients.theme' );
 	const defaultGradientPalette = useSetting( 'color.gradients.default' );
@@ -175,10 +180,17 @@ export function useBlockSettings( name, parentLayout ) {
 					theme: themeGradientPalette,
 					default: defaultGradientPalette,
 				},
+				duotone: {
+					custom: userDuotonePalette,
+					theme: themeDuotonePalette,
+					default: defaultDuotonePalette,
+				},
 				defaultGradients,
 				defaultPalette,
+				defaultDuotone,
 				custom: customColorsEnabled,
 				customGradient: areCustomGradientsEnabled,
+				customDuotone,
 				background: isBackgroundEnabled,
 				link: isLinkEnabled,
 				text: isTextEnabled,
@@ -245,9 +257,14 @@ export function useBlockSettings( name, parentLayout ) {
 		borderWidth,
 		customColorsEnabled,
 		customColors,
+		customDuotone,
 		themeColors,
 		defaultColors,
 		defaultPalette,
+		defaultDuotone,
+		userDuotonePalette,
+		themeDuotonePalette,
+		defaultDuotonePalette,
 		userGradientPalette,
 		themeGradientPalette,
 		defaultGradientPalette,

From cf970bcc29a4b213c3acfaa46fef4e3527e3906f Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Fri, 14 Apr 2023 17:13:10 +0200
Subject: [PATCH 02/10] fixed duotone value and onchange function

---
 packages/block-editor/src/hooks/duotone.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 5a0c494d1976a..be434b7f1c448 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -139,8 +139,13 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 		<>
 			<InspectorControls group="filter">
 				<StylesFiltersPanel
-					value={ style }
-					onChange={ ( newStyle ) => {
+					value={ { filter: style?.filter } }
+					onChange={ ( newDuotone ) => {
+						const newStyle = {
+							color: {
+								...newDuotone?.filter,
+							},
+						};
 						setAttributes( { style: newStyle } );
 					} }
 					settings={ settings }

From af984c067a9f8ece0ae976a2844aea3cebe9914c Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Fri, 14 Apr 2023 17:19:38 +0200
Subject: [PATCH 03/10] removed label from slot

---
 .../src/components/inspector-controls-tabs/styles-tab.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
index c901e9cddbe14..453b737cfbe3a 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -32,7 +32,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
-			<InspectorControls.Slot group="filter" label={ __( 'Filter' ) } />
+			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot
 				group="typography"
 				label={ __( 'Typography' ) }

From 057be540953b7fa6aca33ce7c8f516540d37f8f2 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Fri, 14 Apr 2023 17:30:07 +0200
Subject: [PATCH 04/10] enable custom colors and duotone

---
 .../src/components/global-styles/filters-panel.js        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 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 b630fc4023b1c..af205feae1908 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -110,6 +110,11 @@ export default function FiltersPanel( {
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
 
+	const disableCustomColors = ! settings?.color?.custom;
+	const disableCustomDuotone =
+		! settings?.color?.customDuotone ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -144,8 +149,8 @@ export default function FiltersPanel( {
 						<DuotonePicker
 							colorPalette={ colorPalette }
 							duotonePalette={ duotonePalette }
-							disableCustomColors={ true }
-							disableCustomDuotone={ true }
+							disableCustomColors={ disableCustomColors }
+							disableCustomDuotone={ disableCustomDuotone }
 							value={ duotone }
 							onChange={ setDuotone }
 						/>

From f96d20241e3584ae183e03acdb375905ed563dfc Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 18 Apr 2023 16:17:28 +0200
Subject: [PATCH 05/10] fix custom colors on inspector panel

---
 packages/block-editor/src/hooks/duotone.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index be434b7f1c448..c308cfb58a5b4 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -139,7 +139,7 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 		<>
 			<InspectorControls group="filter">
 				<StylesFiltersPanel
-					value={ { filter: style?.filter } }
+					value={ { filter: { duotone: duotonePresetOrColors } } }
 					onChange={ ( newDuotone ) => {
 						const newStyle = {
 							color: {

From 799269e4618b26d6821909afbc9ea0046645f389 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 19 Apr 2023 11:49:35 +0200
Subject: [PATCH 06/10] changed the panel to act as a dropdown

---
 .../components/global-styles/filters-panel.js | 109 +++++++++++++++---
 1 file changed, 94 insertions(+), 15 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 af205feae1908..31da4a581cef6 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -1,11 +1,26 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+	ColorIndicator,
 	DuotonePicker,
+	DuotoneSwatch,
+	Dropdown,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -75,6 +90,37 @@ const DEFAULT_CONTROLS = {
 	duotone: true,
 };
 
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+	className: 'block-editor-duotone-control__popover',
+	headerTitle: __( 'Duotone' ),
+	variant: 'toolbar',
+};
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			{ indicators.map( ( indicator, index ) => (
+				<Flex key={ index } expanded={ false }>
+					{ indicator === 'unset' || ! indicator ? (
+						<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+					) : (
+						<DuotoneSwatch values={ indicator } />
+					) }
+				</Flex>
+			) ) }
+		</ZStack>
+		<FlexItem
+			className="block-editor-panel-color-gradient-settings__color-name"
+			title={ label }
+		>
+			{ label }
+		</FlexItem>
+	</HStack>
+);
+
 export default function FiltersPanel( {
 	as: Wrapper = FiltersToolsPanel,
 	value,
@@ -140,21 +186,54 @@ export default function FiltersPanel( {
 					isShownByDefault={ defaultControls.duotone }
 					panelId={ panelId }
 				>
-					<VStack>
-						<p>
-							{ __(
-								'Create a two-tone color effect without losing your original image.'
-							) }
-						</p>
-						<DuotonePicker
-							colorPalette={ colorPalette }
-							duotonePalette={ duotonePalette }
-							disableCustomColors={ disableCustomColors }
-							disableCustomDuotone={ disableCustomDuotone }
-							value={ duotone }
-							onChange={ setDuotone }
-						/>
-					</VStack>
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="block-editor-tools-panel-color-gradient-settings__dropdown"
+						renderToggle={ ( { onToggle, isOpen } ) => {
+							const toggleProps = {
+								onClick: onToggle,
+								className: classnames(
+									'block-editor-panel-color-gradient-settings__dropdown',
+									{ 'is-open': isOpen }
+								),
+								'aria-expanded': isOpen,
+							};
+
+							return (
+								<ItemGroup isBordered isSeparated>
+									<Button { ...toggleProps }>
+										<LabeledColorIndicators
+											indicators={ [ duotone ] }
+											label={ __( 'Duotone' ) }
+										/>
+									</Button>
+								</ItemGroup>
+							);
+						} }
+						renderContent={ () => (
+							<DropdownContentWrapper paddingSize="medium">
+								<VStack>
+									<p>
+										{ __(
+											'Create a two-tone color effect without losing your original image.'
+										) }
+									</p>
+									<DuotonePicker
+										colorPalette={ colorPalette }
+										duotonePalette={ duotonePalette }
+										disableCustomColors={
+											disableCustomColors
+										}
+										disableCustomDuotone={
+											disableCustomDuotone
+										}
+										value={ duotone }
+										onChange={ setDuotone }
+									/>
+								</VStack>
+							</DropdownContentWrapper>
+						) }
+					/>
 				</ToolsPanelItem>
 			) }
 		</Wrapper>

From b8f60bca4d6208e192e18e7b0367cc1f88069988 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 19 Apr 2023 12:17:02 +0200
Subject: [PATCH 07/10] disable custom duotone on GS

---
 .../src/components/global-styles/filters-panel.js         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/filters-panel.js b/packages/edit-site/src/components/global-styles/filters-panel.js
index 11096efa00f00..f62d6901073f3 100644
--- a/packages/edit-site/src/components/global-styles/filters-panel.js
+++ b/packages/edit-site/src/components/global-styles/filters-panel.js
@@ -27,7 +27,13 @@ export default function FiltersPanel( { name } ) {
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
-			settings={ settings }
+			settings={ {
+				...settings,
+				color: {
+					...settings.color,
+					customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
+				},
+			} }
 		/>
 	);
 }

From aabd1199406bc7aee7672246ad058b7309c013db Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 19 Apr 2023 12:19:31 +0200
Subject: [PATCH 08/10] removed border of popover

---
 .../block-editor/src/components/global-styles/filters-panel.js   | 1 -
 1 file changed, 1 deletion(-)

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 31da4a581cef6..2b6c57d44c1bc 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -96,7 +96,6 @@ const popoverProps = {
 	shift: true,
 	className: 'block-editor-duotone-control__popover',
 	headerTitle: __( 'Duotone' ),
-	variant: 'toolbar',
 };
 
 const LabeledColorIndicators = ( { indicators, label } ) => (

From 6e7e6eccfa8daf4b030cb99c5a54ef28d2e6cb51 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 19 Apr 2023 17:12:12 +0200
Subject: [PATCH 09/10] use classnames that are component specific

---
 .../src/components/global-styles/filters-panel.js  | 14 +++-----------
 .../src/components/global-styles/style.scss        |  3 ++-
 2 files changed, 5 insertions(+), 12 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 2b6c57d44c1bc..dd1ec6dc40787 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -111,12 +111,7 @@ const LabeledColorIndicators = ( { indicators, label } ) => (
 				</Flex>
 			) ) }
 		</ZStack>
-		<FlexItem
-			className="block-editor-panel-color-gradient-settings__color-name"
-			title={ label }
-		>
-			{ label }
-		</FlexItem>
+		<FlexItem title={ label }>{ label }</FlexItem>
 	</HStack>
 );
 
@@ -187,14 +182,11 @@ export default function FiltersPanel( {
 				>
 					<Dropdown
 						popoverProps={ popoverProps }
-						className="block-editor-tools-panel-color-gradient-settings__dropdown"
+						className="block-editor-global-styles-filters-panel__dropdown"
 						renderToggle={ ( { onToggle, isOpen } ) => {
 							const toggleProps = {
 								onClick: onToggle,
-								className: classnames(
-									'block-editor-panel-color-gradient-settings__dropdown',
-									{ 'is-open': isOpen }
-								),
+								className: classnames( { 'is-open': isOpen } ),
 								'aria-expanded': isOpen,
 							};
 
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index bf62586c2b6f0..7e0cb4d8f68ff 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -6,11 +6,12 @@
 	width: 230px;
 }
 
+.block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles-effects-panel__shadow-dropdown {
 	display: block;
 	padding: 0;
 
-	> button {
+	button {
 		width: 100%;
 		padding: $grid-unit-10;
 

From 3b5bb9ac6dbe3357da0fd68d5518d6a970ea3ace Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 19 Apr 2023 17:26:03 +0200
Subject: [PATCH 10/10] simplify LabeledColorIndicator

---
 .../components/global-styles/filters-panel.js | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 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 dd1ec6dc40787..000daf92a8dd5 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -98,18 +98,16 @@ const popoverProps = {
 	headerTitle: __( 'Duotone' ),
 };
 
-const LabeledColorIndicators = ( { indicators, label } ) => (
+const LabeledColorIndicator = ( { indicator, label } ) => (
 	<HStack justify="flex-start">
 		<ZStack isLayered={ false } offset={ -8 }>
-			{ indicators.map( ( indicator, index ) => (
-				<Flex key={ index } expanded={ false }>
-					{ indicator === 'unset' || ! indicator ? (
-						<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
-					) : (
-						<DuotoneSwatch values={ indicator } />
-					) }
-				</Flex>
-			) ) }
+			<Flex expanded={ false }>
+				{ indicator === 'unset' || ! indicator ? (
+					<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+				) : (
+					<DuotoneSwatch values={ indicator } />
+				) }
+			</Flex>
 		</ZStack>
 		<FlexItem title={ label }>{ label }</FlexItem>
 	</HStack>
@@ -193,8 +191,8 @@ export default function FiltersPanel( {
 							return (
 								<ItemGroup isBordered isSeparated>
 									<Button { ...toggleProps }>
-										<LabeledColorIndicators
-											indicators={ [ duotone ] }
+										<LabeledColorIndicator
+											indicator={ duotone }
 											label={ __( 'Duotone' ) }
 										/>
 									</Button>