diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php
index 561ed126158675..38e34bbf7fa206 100644
--- a/lib/block-supports/duotone.php
+++ b/lib/block-supports/duotone.php
@@ -437,7 +437,9 @@ function gutenberg_render_duotone_support( $block_content, $block ) {
'slug' => wp_unique_id( sanitize_key( implode( '-', $block['attrs']['style']['color']['duotone'] ) . '-' ) ),
'colors' => $block['attrs']['style']['color']['duotone'],
);
- $filter_property = gutenberg_get_duotone_filter_property( $filter_preset );
+ $filter_property = 0 < count( $filter_preset['colors'] )
+ ? gutenberg_get_duotone_filter_property( $filter_preset )
+ : 'none';
$filter_id = gutenberg_get_duotone_filter_id( $filter_preset );
$filter_svg = gutenberg_get_duotone_filter_svg( $filter_preset );
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 163846d52e415a..2f8ea32bfe1438 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -13,6 +13,7 @@ import { SVG } from '@wordpress/components';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import { useMemo, useContext, createPortal } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -59,82 +60,100 @@ export function getValuesFromColors( colors = [] ) {
* @property {number[]} a Alpha values.
*/
+/**
+ * The SVG part of the duotone filter.
+ *
+ * @param {Object} props Duotone props.
+ * @param {string} props.id Unique id for this duotone filter.
+ * @param {string[]} props.colors Color strings from dark to light.
+ *
+ * @returns {WPElement} Duotone SVG.
+ */
+function DuotoneFilterSvg( { id, colors } ) {
+ const values = getValuesFromColors( colors );
+ return (
+
+ );
+}
+
/**
* SVG and stylesheet needed for rendering the duotone filter.
*
- * @param {Object} props Duotone props.
- * @param {string} props.selector Selector to apply the filter to.
- * @param {string} props.id Unique id for this duotone filter.
- * @param {Values} props.values R, G, B, and A values to filter with.
+ * @param {Object} props Duotone props.
+ * @param {string} props.selector Selector to apply the filter to.
+ * @param {string} props.id Unique id for this duotone filter.
+ * @param {string[]} props.colors Color strings from dark to light.
*
* @return {WPElement} Duotone element.
*/
-function DuotoneFilter( { selector, id, values } ) {
+function DuotoneFilter( { selector, id, colors } ) {
const stylesheet = `
${ selector } {
- filter: url( #${ id } );
+ filter: ${ colors.length > 0 ? `url( #${ id } )` : 'none' };
}
`;
return (
<>
-
+ { colors.length > 0 && (
+
+ ) }
>
);
@@ -148,11 +167,17 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
const defaultPresets =
useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+ const unsetPreset = {
+ colors: EMPTY_ARRAY,
+ slug: 'unset',
+ name: __( 'Unset' ),
+ };
return useMemo(
() => [
...userPresets,
...themePresets,
...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+ unsetPreset,
],
[ disableDefault, userPresets, themePresets, defaultPresets ]
);
@@ -297,9 +322,9 @@ const withDuotoneStyles = createHigherOrderComponent(
props.name,
'color.__experimentalDuotone'
);
- const values = props?.attributes?.style?.color?.duotone;
+ const colors = props?.attributes?.style?.color?.duotone;
- if ( ! duotoneSupport || ! values ) {
+ if ( ! duotoneSupport || ! colors ) {
return ;
}
@@ -324,7 +349,7 @@ const withDuotoneStyles = createHigherOrderComponent(
,
element
) }
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
index 6e801f98b820f0..7e0ee881ebae11 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.js
@@ -36,7 +36,10 @@ function DuotonePicker( {
{
const style = {
- background: getGradientFromCSSColors( colors, '135deg' ),
+ background:
+ slug === 'unset'
+ ? `red`
+ : getGradientFromCSSColors( colors, '135deg' ),
color: 'transparent',
};
const tooltipText =