From 8ec53b1d1deee1473083a8e8035d4a4b076a9e10 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Mon, 20 Feb 2023 16:32:14 +0100
Subject: [PATCH 01/15] create a panel for filters

---
 .../components/global-styles/context-menu.js  | 11 ++++++++++
 .../components/global-styles/filter-panel.js  |  9 ++++++++
 .../global-styles/screen-filters.js           | 22 +++++++++++++++++++
 .../src/components/global-styles/ui.js        |  5 +++++
 4 files changed, 47 insertions(+)
 create mode 100644 packages/edit-site/src/components/global-styles/filter-panel.js
 create mode 100644 packages/edit-site/src/components/global-styles/screen-filters.js

diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
index d2753e48774e8..fa352c833ca38 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -30,6 +30,7 @@ import { useMemo } from '@wordpress/element';
 import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
+import { useHasFilterPanel } from './filter-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
@@ -55,6 +56,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasEffectsPanel = useHasShadowControl( name );
+	const hasFilterPanel = useHasFilterPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
@@ -117,6 +119,15 @@ function ContextMenu( { name, parentMenu = '' } ) {
 						{ __( 'Shadow' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasFilterPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path={ parentMenu + '/filters' }
+						aria-label={ __( 'Filters styles' ) }
+					>
+						{ __( 'Filters' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }
diff --git a/packages/edit-site/src/components/global-styles/filter-panel.js b/packages/edit-site/src/components/global-styles/filter-panel.js
new file mode 100644
index 0000000000000..c226ae29e9633
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/filter-panel.js
@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { useSupportedStyles } from './hooks';
+
+export function useHasFilterPanel( name ) {
+	const supports = useSupportedStyles( name );
+	return supports.includes( 'filter' );
+}
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
new file mode 100644
index 0000000000000..6c37701d0be8c
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-filters.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+
+function ScreenFilters() {
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Filters' ) }
+				description={ __( 'TODO description' ) }
+			/>
+		</>
+	);
+}
+
+export default ScreenFilters;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 13c1d0f2067a1..bb922a3c4895d 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -24,6 +24,7 @@ import ScreenBlockList from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
+import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -205,6 +206,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenBackgroundColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
+				<ScreenFilters name={ name } variation={ variation } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

From 8cd83ff4cf5589970362d9a5686b50e032fe33d2 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 21 Feb 2023 10:59:18 +0100
Subject: [PATCH 02/15] created a duotone panel

---
 .../global-styles/screen-duotone.js           | 19 +++++++
 .../global-styles/screen-filters.js           | 52 ++++++++++++++++++-
 .../src/components/global-styles/style.scss   |  4 ++
 .../src/components/global-styles/ui.js        |  7 +++
 4 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 packages/edit-site/src/components/global-styles/screen-duotone.js

diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/screen-duotone.js
new file mode 100644
index 0000000000000..da7aba73e53ce
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-duotone.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+
+function ScreenDuotone() {
+	return (
+		<>
+			<ScreenHeader title={ __( 'Duotone panel!' ) } />
+		</>
+	);
+}
+
+export default ScreenDuotone;
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
index 6c37701d0be8c..bf7387c8370bb 100644
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ b/packages/edit-site/src/components/global-styles/screen-filters.js
@@ -2,21 +2,71 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
+import Subtitle from './subtitle';
+import { NavigationButtonAsItem } from './navigation-button';
+import { useSupportedStyles } from './hooks';
+import BlockPreviewPanel from './block-preview-panel';
 
-function ScreenFilters() {
+function ScreenFilters( { name } ) {
+	const parentMenu =
+		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Filters' ) }
 				description={ __( 'TODO description' ) }
 			/>
+			<BlockPreviewPanel name={ name } />
+
+			<div className="edit-site-global-styles-screen-filters">
+				<VStack spacing={ 10 }>
+					<VStack spacing={ 3 }>
+						<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							<DuotoneItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
+						</ItemGroup>
+					</VStack>
+				</VStack>
+			</div>
 		</>
 	);
 }
 
+function DuotoneItem( { name, parentMenu, variation = '' } ) {
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
+	const supports = useSupportedStyles( name );
+	const hasSupport = supports.includes( 'filter' );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem
+			path={ parentMenu + urlPrefix + '/filters/duotone' }
+			aria-label={ __( 'Duotone styles' ) }
+		>
+			<HStack justify="flex-start">
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Duotone' ) }
+				</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
 export default ScreenFilters;
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 22634292a6bab..14f1e3658c5a1 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -43,6 +43,10 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles-screen-filters {
+	margin: $grid-unit-20;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index bb922a3c4895d..07e7d94aef56e 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -25,6 +25,7 @@ import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
 import ScreenFilters from './screen-filters';
+import ScreenDuotone from './screen-duotone';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -210,6 +211,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenFilters name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/filters/duotone' }
+			>
+				<ScreenDuotone name={ name } variation={ variation } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

From 0ab2804854f31a84dd0e495a1209b3e022adc02d Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 21 Feb 2023 13:32:43 +0100
Subject: [PATCH 03/15] add the duotone picker to the panel, changed filters
 icon

---
 .../components/global-styles/context-menu.js  |  3 +-
 .../global-styles/screen-duotone.js           | 50 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
index fa352c833ca38..cf71183edbe7f 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -12,6 +12,7 @@ import {
 import {
 	typography,
 	border,
+	filter,
 	shadow,
 	color,
 	layout,
@@ -121,7 +122,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				) }
 				{ hasFilterPanel && (
 					<NavigationButtonAsItem
-						icon={ typography }
+						icon={ filter }
 						path={ parentMenu + '/filters' }
 						aria-label={ __( 'Filters styles' ) }
 					>
diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/screen-duotone.js
index da7aba73e53ce..e432bdf2544a6 100644
--- a/packages/edit-site/src/components/global-styles/screen-duotone.js
+++ b/packages/edit-site/src/components/global-styles/screen-duotone.js
@@ -2,16 +2,66 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { DuotonePicker } from '@wordpress/components';
+import { useSetting } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
 
+const EMPTY_ARRAY = [];
+
+function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
+	const disableDefault = ! useSetting( defaultSetting );
+	const userPresets =
+		useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
+	const themePresets =
+		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
+	const defaultPresets =
+		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+	return useMemo(
+		() => [
+			...userPresets,
+			...themePresets,
+			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+		],
+		[ disableDefault, userPresets, themePresets, defaultPresets ]
+	);
+}
+
 function ScreenDuotone() {
+	const duotone = 'unset';
+
+	const duotonePalette = useMultiOriginPresets( {
+		presetSetting: 'color.duotone',
+		defaultSetting: 'color.defaultDuotone',
+	} );
+	const colorPalette = useMultiOriginPresets( {
+		presetSetting: 'color.palette',
+		defaultSetting: 'color.defaultPalette',
+	} );
+	const disableCustomColors = ! useSetting( 'color.custom' );
+	const disableCustomDuotone =
+		! useSetting( 'color.customDuotone' ) ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
+	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
+		return null;
+	}
 	return (
 		<>
 			<ScreenHeader title={ __( 'Duotone panel!' ) } />
+			<div className="edit-site-global-styles-screen-filters">
+				<DuotonePicker
+					colorPalette={ colorPalette }
+					duotonePalette={ duotonePalette }
+					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
+					value={ duotone }
+				/>
+			</div>
 		</>
 	);
 }

From e4744378a6ad3a197e51fb821b5aafe8d0b44e00 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 21 Feb 2023 16:19:30 +0100
Subject: [PATCH 04/15] add the duotone picker to the panel, changed filters
 icon

---
 .../global-styles/screen-duotone.js           | 26 +++++++++++++++----
 .../src/components/global-styles/ui.js        |  4 +--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/screen-duotone.js
index e432bdf2544a6..c11fff3ffcf52 100644
--- a/packages/edit-site/src/components/global-styles/screen-duotone.js
+++ b/packages/edit-site/src/components/global-styles/screen-duotone.js
@@ -3,13 +3,19 @@
  */
 import { __ } from '@wordpress/i18n';
 import { DuotonePicker } from '@wordpress/components';
-import { useSetting } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	useSetting,
+} from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
+import { unlock } from '../../private-apis';
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -31,8 +37,11 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 	);
 }
 
-function ScreenDuotone() {
-	const duotone = 'unset';
+function ScreenDuotone( { name } ) {
+	const [ themeDuotone, setThemeDuotone ] = useGlobalSetting(
+		'filter.duotone',
+		name
+	);
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -52,14 +61,21 @@ function ScreenDuotone() {
 	}
 	return (
 		<>
-			<ScreenHeader title={ __( 'Duotone panel!' ) } />
+			<ScreenHeader
+				title={ __( 'Duotone' ) }
+				description={ __(
+					'Create a two-tone color effect without losing your original image.'
+				) }
+			/>
+			<BlockPreviewPanel name={ name } />
 			<div className="edit-site-global-styles-screen-filters">
 				<DuotonePicker
 					colorPalette={ colorPalette }
 					duotonePalette={ duotonePalette }
 					disableCustomColors={ disableCustomColors }
 					disableCustomDuotone={ disableCustomDuotone }
-					value={ duotone }
+					value={ themeDuotone }
+					onChange={ setThemeDuotone }
 				/>
 			</div>
 		</>
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 07e7d94aef56e..ffcefe78a4095 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -208,13 +208,13 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
-				<ScreenFilters name={ name } variation={ variation } />
+				<ScreenFilters name={ name } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/filters/duotone' }
 			>
-				<ScreenDuotone name={ name } variation={ variation } />
+				<ScreenDuotone name={ name } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>

From 2404cc384f8a98e32e44fcecb926e79d22dbe8d5 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 21 Feb 2023 19:13:17 +0100
Subject: [PATCH 05/15] fixed selectors for the block in the editor, save the
 value correctly for presets

---
 .../components/global-styles/use-global-styles-output.js   | 7 ++++---
 .../block-editor/src/components/global-styles/utils.js     | 2 ++
 .../src/components/global-styles/screen-duotone.js         | 4 ++--
 .../src/components/global-styles/screen-filters.js         | 4 +++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index da518889223e2..847526ef00daf 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -790,9 +790,10 @@ export const toStyles = (
 				if ( duotoneDeclarations.length > 0 ) {
 					ruleset =
 						ruleset +
-						`${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
+						`${ scopeSelector(
+							selector,
+							duotoneSelector
+						) }{${ duotoneDeclarations.join( ';' ) };}`;
 				}
 			}
 
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index 4e0dbedfcafec..e8ca27d4b97e4 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -57,6 +57,7 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'color', 'duotone' ],
+		valueKey: 'colors',
 		cssVarInfix: 'duotone',
 		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
 		classes: [],
@@ -95,6 +96,7 @@ export const PRESET_METADATA = [
 export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
+	'filter.duotone': 'duotone',
 	'elements.link.color.text': 'color',
 	'elements.link.:hover.color.text': 'color',
 	'elements.link.typography.fontFamily': 'font-family',
diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/screen-duotone.js
index c11fff3ffcf52..1aba717492b34 100644
--- a/packages/edit-site/src/components/global-styles/screen-duotone.js
+++ b/packages/edit-site/src/components/global-styles/screen-duotone.js
@@ -15,7 +15,7 @@ import { useMemo } from '@wordpress/element';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../private-apis';
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -38,7 +38,7 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 }
 
 function ScreenDuotone( { name } ) {
-	const [ themeDuotone, setThemeDuotone ] = useGlobalSetting(
+	const [ themeDuotone, setThemeDuotone ] = useGlobalStyle(
 		'filter.duotone',
 		name
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
index bf7387c8370bb..8b3fc16f4b6ae 100644
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ b/packages/edit-site/src/components/global-styles/screen-filters.js
@@ -25,7 +25,9 @@ function ScreenFilters( { name } ) {
 		<>
 			<ScreenHeader
 				title={ __( 'Filters' ) }
-				description={ __( 'TODO description' ) }
+				description={ __(
+					'Filter and effects work without replacing your original image'
+				) }
 			/>
 			<BlockPreviewPanel name={ name } />
 

From 057a95dac354586d6d791111f16c31bd46fc01c6 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 22 Feb 2023 09:42:11 +0100
Subject: [PATCH 06/15] move everything to a single panel

---
 .../global-styles/screen-duotone.js           | 39 +++++++------
 .../global-styles/screen-filters.js           | 56 ++-----------------
 .../src/components/global-styles/style.scss   |  4 --
 .../src/components/global-styles/ui.js        |  7 ---
 4 files changed, 27 insertions(+), 79 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/screen-duotone.js
index 1aba717492b34..8b6a3c3350bc0 100644
--- a/packages/edit-site/src/components/global-styles/screen-duotone.js
+++ b/packages/edit-site/src/components/global-styles/screen-duotone.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { DuotonePicker } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	DuotonePicker,
+} from '@wordpress/components';
 import {
 	privateApis as blockEditorPrivateApis,
 	useSetting,
@@ -12,7 +15,6 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../private-apis';
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -61,23 +63,24 @@ function ScreenDuotone( { name } ) {
 	}
 	return (
 		<>
-			<ScreenHeader
-				title={ __( 'Duotone' ) }
-				description={ __(
-					'Create a two-tone color effect without losing your original image.'
-				) }
-			/>
 			<BlockPreviewPanel name={ name } />
-			<div className="edit-site-global-styles-screen-filters">
-				<DuotonePicker
-					colorPalette={ colorPalette }
-					duotonePalette={ duotonePalette }
-					disableCustomColors={ disableCustomColors }
-					disableCustomDuotone={ disableCustomDuotone }
-					value={ themeDuotone }
-					onChange={ setThemeDuotone }
-				/>
-			</div>
+			<ToolsPanel label={ __( 'Duotone' ) } headingLevel={ 3 }>
+				<span className="span-columns">
+					{ __(
+						'Create a two-tone color effect without losing your original image.'
+					) }
+				</span>
+				<div className="span-columns">
+					<DuotonePicker
+						colorPalette={ colorPalette }
+						duotonePalette={ duotonePalette }
+						disableCustomColors={ disableCustomColors }
+						disableCustomDuotone={ disableCustomDuotone }
+						value={ themeDuotone }
+						onChange={ setThemeDuotone }
+					/>
+				</div>
+			</ToolsPanel>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
index 8b3fc16f4b6ae..7ca75db6b6fed 100644
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ b/packages/edit-site/src/components/global-styles/screen-filters.js
@@ -2,25 +2,18 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenDuotone from './screen-duotone';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import Subtitle from './subtitle';
-import { NavigationButtonAsItem } from './navigation-button';
-import { useSupportedStyles } from './hooks';
-import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenFilters( { name } ) {
-	const parentMenu =
-		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 	return (
 		<>
 			<ScreenHeader
@@ -29,46 +22,9 @@ function ScreenFilters( { name } ) {
 					'Filter and effects work without replacing your original image'
 				) }
 			/>
-			<BlockPreviewPanel name={ name } />
-
-			<div className="edit-site-global-styles-screen-filters">
-				<VStack spacing={ 10 }>
-					<VStack spacing={ 3 }>
-						<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<DuotoneItem
-								name={ name }
-								parentMenu={ parentMenu }
-							/>
-						</ItemGroup>
-					</VStack>
-				</VStack>
-			</div>
+			<ScreenDuotone name={ name } />
 		</>
 	);
 }
 
-function DuotoneItem( { name, parentMenu, variation = '' } ) {
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'filter' );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/filters/duotone' }
-			aria-label={ __( 'Duotone styles' ) }
-		>
-			<HStack justify="flex-start">
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Duotone' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
 export default ScreenFilters;
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 14f1e3658c5a1..22634292a6bab 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -43,10 +43,6 @@
 	border-radius: $radius-block-ui;
 }
 
-.edit-site-global-styles-screen-filters {
-	margin: $grid-unit-20;
-}
-
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index ffcefe78a4095..15168b1e7f599 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -25,7 +25,6 @@ import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
 import ScreenFilters from './screen-filters';
-import ScreenDuotone from './screen-duotone';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -211,12 +210,6 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenFilters name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/filters/duotone' }
-			>
-				<ScreenDuotone name={ name } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

From 5b1de81846886c687973f016f177db0a1849b906 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 22 Feb 2023 09:43:24 +0100
Subject: [PATCH 07/15] move preview panel to filters component

---
 .../edit-site/src/components/global-styles/screen-duotone.js    | 2 --
 .../edit-site/src/components/global-styles/screen-filters.js    | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/screen-duotone.js
index 8b6a3c3350bc0..e7ac720d65a81 100644
--- a/packages/edit-site/src/components/global-styles/screen-duotone.js
+++ b/packages/edit-site/src/components/global-styles/screen-duotone.js
@@ -15,7 +15,6 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../private-apis';
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
@@ -63,7 +62,6 @@ function ScreenDuotone( { name } ) {
 	}
 	return (
 		<>
-			<BlockPreviewPanel name={ name } />
 			<ToolsPanel label={ __( 'Duotone' ) } headingLevel={ 3 }>
 				<span className="span-columns">
 					{ __(
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
index 7ca75db6b6fed..3612ebdb6008f 100644
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ b/packages/edit-site/src/components/global-styles/screen-filters.js
@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ScreenDuotone from './screen-duotone';
+import BlockPreviewPanel from './block-preview-panel';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ function ScreenFilters( { name } ) {
 					'Filter and effects work without replacing your original image'
 				) }
 			/>
+			<BlockPreviewPanel name={ name } />
 			<ScreenDuotone name={ name } />
 		</>
 	);

From 4cc35f50de0ab9ea6bad61aaa92ff89fc6ba99f9 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 22 Feb 2023 16:20:54 +0100
Subject: [PATCH 08/15] disable custom duotone for this PR

---
 .../src/components/global-styles/screen-duotone.js     | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/screen-duotone.js
index e7ac720d65a81..683d8dfb782a8 100644
--- a/packages/edit-site/src/components/global-styles/screen-duotone.js
+++ b/packages/edit-site/src/components/global-styles/screen-duotone.js
@@ -52,12 +52,8 @@ function ScreenDuotone( { name } ) {
 		presetSetting: 'color.palette',
 		defaultSetting: 'color.defaultPalette',
 	} );
-	const disableCustomColors = ! useSetting( 'color.custom' );
-	const disableCustomDuotone =
-		! useSetting( 'color.customDuotone' ) ||
-		( colorPalette?.length === 0 && disableCustomColors );
 
-	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
+	if ( duotonePalette?.length === 0 ) {
 		return null;
 	}
 	return (
@@ -72,8 +68,8 @@ function ScreenDuotone( { name } ) {
 					<DuotonePicker
 						colorPalette={ colorPalette }
 						duotonePalette={ duotonePalette }
-						disableCustomColors={ disableCustomColors }
-						disableCustomDuotone={ disableCustomDuotone }
+						disableCustomColors={ true }
+						disableCustomDuotone={ true }
 						value={ themeDuotone }
 						onChange={ setThemeDuotone }
 					/>

From 5c564febd0e3c43ba4cacfe37d3e58ccb32b77bf Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Thu, 23 Feb 2023 13:52:07 +0000
Subject: [PATCH 09/15] dont output unset

---
 lib/class-wp-theme-json-gutenberg.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 1e828edcaddc3..982b42c5ca08a 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2425,8 +2425,10 @@ function( $pseudo_selector ) use ( $selector ) {
 		$declarations_duotone = array();
 		foreach ( $declarations as $index => $declaration ) {
 			if ( 'filter' === $declaration['name'] ) {
-				unset( $declarations[ $index ] );
-				$declarations_duotone[] = $declaration;
+				if ( 'unset' !== $declaration['value'] ) {
+					$declarations_duotone[] = $declaration;
+					unset( $declarations[ $index ] );
+				}
 			}
 		}
 

From 308e118f915942d815b9502532c784beced46faf Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 23 Feb 2023 18:01:42 -0600
Subject: [PATCH 10/15] Simplify conditional nesting

---
 lib/class-wp-theme-json-gutenberg.php | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 982b42c5ca08a..1626fa90f55c0 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2424,11 +2424,12 @@ function( $pseudo_selector ) use ( $selector ) {
 		 */
 		$declarations_duotone = array();
 		foreach ( $declarations as $index => $declaration ) {
-			if ( 'filter' === $declaration['name'] ) {
-				if ( 'unset' !== $declaration['value'] ) {
-					$declarations_duotone[] = $declaration;
-					unset( $declarations[ $index ] );
-				}
+			if (
+				'filter' === $declaration['name'] &&
+				'unset' !== $declaration['value']
+			) {
+				$declarations_duotone[] = $declaration;
+				unset( $declarations[ $index ] );
 			}
 		}
 

From e9bf428c2808f618f2d165d254428972f8abf862 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 23 Feb 2023 18:15:46 -0600
Subject: [PATCH 11/15] Fix filter declarations not being unset

---
 lib/class-wp-theme-json-gutenberg.php | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 1626fa90f55c0..7334cb6e97cde 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2424,11 +2424,19 @@ function( $pseudo_selector ) use ( $selector ) {
 		 */
 		$declarations_duotone = array();
 		foreach ( $declarations as $index => $declaration ) {
-			if (
-				'filter' === $declaration['name'] &&
-				'unset' !== $declaration['value']
-			) {
-				$declarations_duotone[] = $declaration;
+			if ( 'filter' === $declaration['name'] ) {
+				/*
+				 * 'unset' filters happen when a filter is unset
+				 * in the site-editor UI. Because the 'unset' value
+				 * in the user origin overrides the value in the
+				 * theme origin, we can skip rendering anything
+				 * here as no filter needs to be applied anymore.
+				 * So only add declarations to with values other
+				 * than 'unset'.
+				 */
+				if ( 'unset' !== $declaration['value'] ) {
+					$declarations_duotone[] = $declaration;
+				}
 				unset( $declarations[ $index ] );
 			}
 		}

From 1495b0fc66f947addc4e4d97ded697c1310f056a Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 23 Feb 2023 18:40:23 -0600
Subject: [PATCH 12/15] Rename DuotoneScreen to DuotonePanel

---
 .../global-styles/{screen-duotone.js => duotone-panel.js}     | 4 ++--
 .../edit-site/src/components/global-styles/screen-filters.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/edit-site/src/components/global-styles/{screen-duotone.js => duotone-panel.js} (96%)

diff --git a/packages/edit-site/src/components/global-styles/screen-duotone.js b/packages/edit-site/src/components/global-styles/duotone-panel.js
similarity index 96%
rename from packages/edit-site/src/components/global-styles/screen-duotone.js
rename to packages/edit-site/src/components/global-styles/duotone-panel.js
index 683d8dfb782a8..f2ddd1aef35a9 100644
--- a/packages/edit-site/src/components/global-styles/screen-duotone.js
+++ b/packages/edit-site/src/components/global-styles/duotone-panel.js
@@ -38,7 +38,7 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 	);
 }
 
-function ScreenDuotone( { name } ) {
+function DuotonePanel( { name } ) {
 	const [ themeDuotone, setThemeDuotone ] = useGlobalStyle(
 		'filter.duotone',
 		name
@@ -79,4 +79,4 @@ function ScreenDuotone( { name } ) {
 	);
 }
 
-export default ScreenDuotone;
+export default DuotonePanel;
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
index 3612ebdb6008f..7bea994071223 100644
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ b/packages/edit-site/src/components/global-styles/screen-filters.js
@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ScreenDuotone from './screen-duotone';
+import DuotonePanel from './duotone-panel';
 import BlockPreviewPanel from './block-preview-panel';
 
 /**
@@ -24,7 +24,7 @@ function ScreenFilters( { name } ) {
 				) }
 			/>
 			<BlockPreviewPanel name={ name } />
-			<ScreenDuotone name={ name } />
+			<DuotonePanel name={ name } />
 		</>
 	);
 }

From 05f561eabbcf3a4a4ec32a07677cf94400926fc2 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 23 Feb 2023 18:44:00 -0600
Subject: [PATCH 13/15] Use default header level for duotone panel

---
 .../edit-site/src/components/global-styles/duotone-panel.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/duotone-panel.js b/packages/edit-site/src/components/global-styles/duotone-panel.js
index f2ddd1aef35a9..c8cf095df4fe2 100644
--- a/packages/edit-site/src/components/global-styles/duotone-panel.js
+++ b/packages/edit-site/src/components/global-styles/duotone-panel.js
@@ -58,7 +58,7 @@ function DuotonePanel( { name } ) {
 	}
 	return (
 		<>
-			<ToolsPanel label={ __( 'Duotone' ) } headingLevel={ 3 }>
+			<ToolsPanel label={ __( 'Duotone' ) }>
 				<span className="span-columns">
 					{ __(
 						'Create a two-tone color effect without losing your original image.'

From 59a12c369c6756550656a68da74ff9b6529ba817 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 23 Feb 2023 18:59:56 -0600
Subject: [PATCH 14/15] Rename filter-panel.js to filter-utils.js

---
 packages/edit-site/src/components/global-styles/context-menu.js | 2 +-
 .../global-styles/{filter-panel.js => filter-utils.js}          | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/edit-site/src/components/global-styles/{filter-panel.js => filter-utils.js} (100%)

diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
index cf71183edbe7f..1aff63dd30714 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -31,7 +31,7 @@ import { useMemo } from '@wordpress/element';
 import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
-import { useHasFilterPanel } from './filter-panel';
+import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
diff --git a/packages/edit-site/src/components/global-styles/filter-panel.js b/packages/edit-site/src/components/global-styles/filter-utils.js
similarity index 100%
rename from packages/edit-site/src/components/global-styles/filter-panel.js
rename to packages/edit-site/src/components/global-styles/filter-utils.js

From 7b843ec2f26e22905623a7a5558eefecd37569b2 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 23 Feb 2023 19:05:38 -0600
Subject: [PATCH 15/15] Remove description from Filters screen header

It seemed redundant with the duotone one on the same page now.
---
 .../src/components/global-styles/screen-filters.js         | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
index 7bea994071223..da1587afa9955 100644
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ b/packages/edit-site/src/components/global-styles/screen-filters.js
@@ -17,12 +17,7 @@ import ScreenHeader from './header';
 function ScreenFilters( { name } ) {
 	return (
 		<>
-			<ScreenHeader
-				title={ __( 'Filters' ) }
-				description={ __(
-					'Filter and effects work without replacing your original image'
-				) }
-			/>
+			<ScreenHeader title={ __( 'Filters' ) } />
 			<BlockPreviewPanel name={ name } />
 			<DuotonePanel name={ name } />
 		</>