Refactor the filters (duotone) panel as a generic UI Styles component

packages/block-editor/src/components/global-styles/filters-panel.js

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+	DuotonePicker,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable } from './utils';
+import { immutableSet } from '../../utils/object';
+
+const EMPTY_ARRAY = [];
+function useMultiOriginColorPresets(
+	settings,
+	{ presetSetting, defaultSetting }
+) {
+	const disableDefault = ! settings?.color?.[ defaultSetting ];
+	const userPresets =
+		settings?.color?.[ presetSetting ]?.custom || EMPTY_ARRAY;
+	const themePresets =
+		settings?.color?.[ presetSetting ]?.theme || EMPTY_ARRAY;
+	const defaultPresets =
+		settings?.color?.[ presetSetting ]?.default || EMPTY_ARRAY;
+	return useMemo(
+		() => [
+			...userPresets,
+			...themePresets,
+			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+		],
+		[ disableDefault, userPresets, themePresets, defaultPresets ]
+	);
+}
+
+export function useHasFiltersPanel( settings ) {
+	const hasDuotone = useHasDuotoneControl( settings );
+
+	return hasDuotone;
+}
+
+function useHasDuotoneControl( settings ) {
+	return settings.color.customDuotone || settings.color.defaultDuotone;
+}
+
+function FiltersToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Filters' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	duotone: true,
+};
+
+export default function FiltersPanel( {
+	as: Wrapper = FiltersToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+
+	// Duotone
+	const hasDuotoneEnabled = useHasDuotoneControl( settings );
+	const duotonePalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'duotone',
+		defaultSetting: 'defaultDuotone',
+	} );
+	const colorPalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'palette',
+		defaultSetting: 'defaultPalette',
+	} );
+	const duotone = decodeValue( inheritedValue?.filter?.duotone );
+	const setDuotone = ( newValue ) => {
+		const duotonePreset = duotonePalette.find( ( { colors } ) => {
+			return colors === newValue;
+		} );
+		const settedValue = duotonePreset
+			? `var:preset|duotone|${ duotonePreset.slug }`
+			: newValue;
+		onChange( immutableSet( value, [ 'filter', 'duotone' ], settedValue ) );
+	};
+	const hasDuotone = () => !! value?.filter?.duotone;
+	const resetDuotone = () => setDuotone( undefined );
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			filter: {
+				...previousValue.filter,
+				duotone: undefined,
+			},
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ hasDuotoneEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Duotone' ) }
+					hasValue={ hasDuotone }
+					onDeselect={ resetDuotone }
+					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={ true }
+							disableCustomDuotone={ true }
+							value={ duotone }
+							onChange={ setDuotone }
+						/>
+					</VStack>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}

packages/block-editor/src/components/global-styles/hooks.js

@@ -283,6 +283,12 @@ export function useSettingsForBlockElement(
 			updatedSettings.color.customGradient = false;
 		}
 
+		// If filters are not supported by the block/element, disable duotone.
+		if ( ! supportedStyles.includes( 'filter' ) ) {
+			updatedSettings.color.defaultDuotone = false;
+			updatedSettings.color.customDuotone = false;
+		}
+
 		[
 			'lineHeight',
 			'fontStyle',

packages/block-editor/src/components/global-styles/index.js

@@ -18,3 +18,4 @@ export {
 export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
+export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';

packages/edit-site/src/components/global-styles/context-menu.js

@@ -27,7 +27,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
@@ -40,6 +39,7 @@ const {
 	useHasBorderPanel,
 	useHasColorPanel,
 	useHasEffectsPanel,
+	useHasFiltersPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -51,7 +51,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasEffectsPanel = useHasEffectsPanel( settings );
-	const hasFilterPanel = useHasFilterPanel( name );
+	const hasFilterPanel = useHasFiltersPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );

packages/edit-site/src/components/global-styles/filters-panel.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	FiltersPanel: StylesFiltersPanel,
+} = unlock( blockEditorPrivateApis );
+
+export default function FiltersPanel( { name } ) {
+	const [ style ] = useGlobalStyle( '', name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+
+	return (
+		<StylesFiltersPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
+	);
+}

packages/edit-site/src/components/global-styles/screen-filters.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import DuotonePanel from './duotone-panel';
+import FiltersPanel from './filters-panel';
 import BlockPreviewPanel from './block-preview-panel';
 
 /**
@@ -19,7 +19,7 @@ function ScreenFilters( { name } ) {
 		<>
 			<ScreenHeader title={ __( 'Filters' ) } />
 			<BlockPreviewPanel name={ name } />
-			<DuotonePanel name={ name } />
+			<FiltersPanel name={ name } />
 		</>
 	);
 }