@wordpress/block-editor 11.4.0 → 11.6.0

package/build-module/hooks/custom-class-name.native.js

@@ -9,8 +9,7 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 /**
- * Filters registered block settings, extending attributes with anchor using ID
- * of the first node.
+ * Filters registered block settings, extending attributes to include `className`.
  *
  * @param {Object} settings Original block settings.
  *
@@ -30,8 +29,8 @@ export function addAttribute(settings) {
   return settings;
 }
 /**
- * Override props assigned to save component to inject anchor ID, if block
- * supports anchor. This is only applied if the block's save result is an
+ * Override props assigned to save component to inject the className, if block
+ * supports customClassName. This is only applied if the block's save result is an
  * element and not a markup string.
  *
  * @param {Object} extraProps Additional props applied to save element.

package/build-module/hooks/custom-class-name.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/custom-class-name.native.js"],"names":["classnames","addFilter","hasBlockSupport","addAttribute","settings","attributes","className","type","addSaveProps","extraProps","blockType"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,eAAT,QAAgC,mBAAhC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,CAAuBC,QAAvB,EAAkC;AACxC,MAAKF,eAAe,CAAEE,QAAF,EAAY,iBAAZ,EAA+B,IAA/B,CAApB,EAA4D;AAC3D;AACAA,IAAAA,QAAQ,CAACC,UAAT,GAAsB,EACrB,GAAGD,QAAQ,CAACC,UADS;AAErBC,MAAAA,SAAS,EAAE;AACVC,QAAAA,IAAI,EAAE;AADI;AAFU,KAAtB;AAMA;;AAED,SAAOH,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,YAAT,CAAuBC,UAAvB,EAAmCC,SAAnC,EAA8CL,UAA9C,EAA2D;AACjE,MACCH,eAAe,CAAEQ,SAAF,EAAa,iBAAb,EAAgC,IAAhC,CAAf,IACAL,UAAU,CAACC,SAFZ,EAGE;AACDG,IAAAA,UAAU,CAACH,SAAX,GAAuBN,UAAU,CAChCS,UAAU,CAACH,SADqB,EAEhCD,UAAU,CAACC,SAFqB,CAAjC;AAIA;;AAED,SAAOG,UAAP;AACA;AAEDR,SAAS,CACR,0BADQ,EAER,kCAFQ,EAGRE,YAHQ,CAAT;AAKAF,SAAS,CACR,kCADQ,EAER,mCAFQ,EAGRO,YAHQ,CAAT","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\tif ( hasBlockSupport( settings, 'customClassName', true ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tclassName: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif (\n\t\thasBlockSupport( blockType, 'customClassName', true ) &&\n\t\tattributes.className\n\t) {\n\t\textraProps.className = classnames(\n\t\t\textraProps.className,\n\t\t\tattributes.className\n\t\t);\n\t}\n\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/custom-class-name/attribute',\n\taddAttribute\n);\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/custom-class-name/save-props',\n\taddSaveProps\n);\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/custom-class-name.native.js"],"names":["classnames","addFilter","hasBlockSupport","addAttribute","settings","attributes","className","type","addSaveProps","extraProps","blockType"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,eAAT,QAAgC,mBAAhC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,CAAuBC,QAAvB,EAAkC;AACxC,MAAKF,eAAe,CAAEE,QAAF,EAAY,iBAAZ,EAA+B,IAA/B,CAApB,EAA4D;AAC3D;AACAA,IAAAA,QAAQ,CAACC,UAAT,GAAsB,EACrB,GAAGD,QAAQ,CAACC,UADS;AAErBC,MAAAA,SAAS,EAAE;AACVC,QAAAA,IAAI,EAAE;AADI;AAFU,KAAtB;AAMA;;AAED,SAAOH,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,YAAT,CAAuBC,UAAvB,EAAmCC,SAAnC,EAA8CL,UAA9C,EAA2D;AACjE,MACCH,eAAe,CAAEQ,SAAF,EAAa,iBAAb,EAAgC,IAAhC,CAAf,IACAL,UAAU,CAACC,SAFZ,EAGE;AACDG,IAAAA,UAAU,CAACH,SAAX,GAAuBN,UAAU,CAChCS,UAAU,CAACH,SADqB,EAEhCD,UAAU,CAACC,SAFqB,CAAjC;AAIA;;AAED,SAAOG,UAAP;AACA;AAEDR,SAAS,CACR,0BADQ,EAER,kCAFQ,EAGRE,YAHQ,CAAT;AAKAF,SAAS,CACR,kCADQ,EAER,mCAFQ,EAGRO,YAHQ,CAAT","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Filters registered block settings, extending attributes to include `className`.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\tif ( hasBlockSupport( settings, 'customClassName', true ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tclassName: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject the className, if block\n * supports customClassName. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif (\n\t\thasBlockSupport( blockType, 'customClassName', true ) &&\n\t\tattributes.className\n\t) {\n\t\textraProps.className = classnames(\n\t\t\textraProps.className,\n\t\t\tattributes.className\n\t\t);\n\t}\n\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/custom-class-name/attribute',\n\taddAttribute\n);\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/custom-class-name/save-props',\n\taddSaveProps\n);\n"]}

package/build-module/hooks/dimensions.js

@@ -1,229 +1,117 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-
-import { __experimentalToolsPanelItem as ToolsPanelItem, __experimentalVStack as VStack } from '@wordpress/components';
-import { Platform, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getBlockSupport } from '@wordpress/blocks';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { getBlockSupport } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
 
 import InspectorControls from '../components/inspector-controls';
-import { GapEdit, hasGapSupport, hasGapValue, resetGap, useIsGapDisabled } from './gap';
-import { MarginEdit, MarginVisualizer, hasMarginSupport, hasMarginValue, resetMargin, useIsMarginDisabled } from './margin';
-import { MinHeightEdit, hasMinHeightSupport, hasMinHeightValue, resetMinHeight, useIsMinHeightDisabled } from './min-height';
-import { PaddingEdit, PaddingVisualizer, hasPaddingSupport, hasPaddingValue, resetPadding, useIsPaddingDisabled } from './padding';
-import { ChildLayoutEdit, hasChildLayoutSupport, hasChildLayoutValue, resetChildLayout, useIsChildLayoutDisabled, childLayoutOrientation } from './child-layout';
-import useSetting from '../components/use-setting';
+import { DimensionsPanel as StylesDimensionsPanel, useHasDimensionsPanel } from '../components/global-styles';
+import { MarginVisualizer } from './margin';
+import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+import { cleanEmptyObject, useBlockSettings } from './utils';
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
 export const AXIAL_SIDES = ['vertical', 'horizontal'];
 
-function useVisualizerMouseOver() {
-  const [isMouseOver, setIsMouseOver] = useState(false);
+function useVisualizer() {
+  const [property, setProperty] = useState(false);
   const {
     hideBlockInterface,
     showBlockInterface
   } = unlock(useDispatch(blockEditorStore));
-
-  const onMouseOver = e => {
-    e.stopPropagation();
-    hideBlockInterface();
-    setIsMouseOver(true);
-  };
-
-  const onMouseOut = e => {
-    e.stopPropagation();
-    showBlockInterface();
-    setIsMouseOver(false);
-  };
-
-  return {
-    isMouseOver,
-    onMouseOver,
-    onMouseOut
-  };
+  useEffect(() => {
+    if (!property) {
+      showBlockInterface();
+    } else {
+      hideBlockInterface();
+    }
+  }, [property, showBlockInterface, hideBlockInterface]);
+  return [property, setProperty];
 }
-/**
- * Inspector controls for dimensions support.
- *
- * @param {Object} props Block props.
- *
- * @return {WPElement} Inspector controls for dimensions and spacing support features.
- */
 
+function DimensionsInspectorControl(_ref) {
+  let {
+    children,
+    resetAllFilter
+  } = _ref;
+  const attributesResetAllFilter = useCallback(attributes => {
+    const existingStyle = attributes.style;
+    const updatedStyle = resetAllFilter(existingStyle);
+    return { ...attributes,
+      style: updatedStyle
+    };
+  }, [resetAllFilter]);
+  return createElement(InspectorControls, {
+    group: "dimensions",
+    resetAllFilter: attributesResetAllFilter
+  }, children);
+}
 
 export function DimensionsPanel(props) {
-  const isGapDisabled = useIsGapDisabled(props);
-  const isPaddingDisabled = useIsPaddingDisabled(props);
-  const isMarginDisabled = useIsMarginDisabled(props);
-  const isMinHeightDisabled = useIsMinHeightDisabled(props);
-  const isChildLayoutDisabled = useIsChildLayoutDisabled(props);
-  const isDisabled = useIsDimensionsDisabled(props);
-  const isSupported = hasDimensionsSupport(props);
-  const spacingSizes = useSetting('spacing.spacingSizes');
-  const paddingMouseOver = useVisualizerMouseOver();
-  const marginMouseOver = useVisualizerMouseOver();
+  var _settings$spacing, _settings$spacing2;
 
-  if (isDisabled || !isSupported) {
+  const {
+    clientId,
+    name,
+    attributes,
+    setAttributes,
+    __unstableParentLayout
+  } = props;
+  const settings = useBlockSettings(name, __unstableParentLayout);
+  const isEnabled = useHasDimensionsPanel(settings);
+  const value = attributes.style;
+  const [visualizedProperty, setVisualizedProperty] = useVisualizer();
+
+  const onChange = newStyle => {
+    setAttributes({
+      style: cleanEmptyObject(newStyle)
+    });
+  };
+
+  if (!isEnabled) {
     return null;
   }
 
   const defaultDimensionsControls = getBlockSupport(props.name, [DIMENSIONS_SUPPORT_KEY, '__experimentalDefaultControls']);
   const defaultSpacingControls = getBlockSupport(props.name, [SPACING_SUPPORT_KEY, '__experimentalDefaultControls']);
-
-  const createResetAllFilter = (attribute, featureSet) => newAttributes => {
-    var _newAttributes$style;
-
-    return { ...newAttributes,
-      style: { ...newAttributes.style,
-        [featureSet]: { ...((_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : _newAttributes$style[featureSet]),
-          [attribute]: undefined
-        }
-      }
-    };
+  const defaultControls = { ...defaultDimensionsControls,
+    ...defaultSpacingControls
   };
-
-  const spacingClassnames = classnames({
-    'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0
-  });
-  const {
-    __unstableParentLayout: parentLayout
-  } = props;
-  return createElement(Fragment, null, createElement(InspectorControls, {
-    group: "dimensions"
-  }, !isPaddingDisabled && createElement(ToolsPanelItem, {
-    className: spacingClassnames,
-    hasValue: () => hasPaddingValue(props),
-    label: __('Padding'),
-    onDeselect: () => resetPadding(props),
-    resetAllFilter: createResetAllFilter('padding', 'spacing'),
-    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.padding,
-    panelId: props.clientId
-  }, createElement(PaddingEdit, _extends({
-    onMouseOver: paddingMouseOver.onMouseOver,
-    onMouseOut: paddingMouseOver.onMouseOut
-  }, props))), !isMarginDisabled && createElement(ToolsPanelItem, {
-    className: spacingClassnames,
-    hasValue: () => hasMarginValue(props),
-    label: __('Margin'),
-    onDeselect: () => resetMargin(props),
-    resetAllFilter: createResetAllFilter('margin', 'spacing'),
-    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.margin,
-    panelId: props.clientId
-  }, createElement(MarginEdit, _extends({
-    onMouseOver: marginMouseOver.onMouseOver,
-    onMouseOut: marginMouseOver.onMouseOut
-  }, props))), !isGapDisabled && createElement(ToolsPanelItem, {
-    className: spacingClassnames,
-    hasValue: () => hasGapValue(props),
-    label: __('Block spacing'),
-    onDeselect: () => resetGap(props),
-    resetAllFilter: createResetAllFilter('blockGap', 'spacing'),
-    isShownByDefault: defaultSpacingControls === null || defaultSpacingControls === void 0 ? void 0 : defaultSpacingControls.blockGap,
-    panelId: props.clientId
-  }, createElement(GapEdit, props)), !isMinHeightDisabled && createElement(ToolsPanelItem, {
-    hasValue: () => hasMinHeightValue(props),
-    label: __('Min. height'),
-    onDeselect: () => resetMinHeight(props),
-    resetAllFilter: createResetAllFilter('minHeight', 'dimensions'),
-    isShownByDefault: defaultDimensionsControls === null || defaultDimensionsControls === void 0 ? void 0 : defaultDimensionsControls.minHeight,
-    panelId: props.clientId
-  }, createElement(MinHeightEdit, props)), !isChildLayoutDisabled && createElement(VStack, {
-    as: ToolsPanelItem,
-    spacing: 2,
-    hasValue: () => hasChildLayoutValue(props),
-    label: childLayoutOrientation(parentLayout),
-    onDeselect: () => resetChildLayout(props),
-    resetAllFilter: createResetAllFilter('selfStretch', 'layout'),
-    isShownByDefault: false,
-    panelId: props.clientId
-  }, createElement(ChildLayoutEdit, props))), !isPaddingDisabled && createElement(PaddingVisualizer, _extends({
-    forceShow: paddingMouseOver.isMouseOver
-  }, props)), !isMarginDisabled && createElement(MarginVisualizer, _extends({
-    forceShow: marginMouseOver.isMouseOver
+  return createElement(Fragment, null, createElement(StylesDimensionsPanel, {
+    as: DimensionsInspectorControl,
+    panelId: clientId,
+    name: name,
+    settings: settings,
+    value: value,
+    onChange: onChange,
+    defaultControls: defaultControls,
+    onVisualize: setVisualizedProperty
+  }), !!(settings !== null && settings !== void 0 && (_settings$spacing = settings.spacing) !== null && _settings$spacing !== void 0 && _settings$spacing.padding) && createElement(PaddingVisualizer, _extends({
+    forceShow: visualizedProperty === 'padding'
+  }, props)), !!(settings !== null && settings !== void 0 && (_settings$spacing2 = settings.spacing) !== null && _settings$spacing2 !== void 0 && _settings$spacing2.margin) && createElement(MarginVisualizer, _extends({
+    forceShow: visualizedProperty === 'margin'
   }, props)));
 }
 /**
- * Determine whether there is dimensions related block support.
- *
- * @param {Object} props Block props.
- *
- * @return {boolean} Whether there is support.
- */
-
-export function hasDimensionsSupport(props) {
-  if (Platform.OS !== 'web') {
-    return false;
-  }
-
-  const {
-    name: blockName
-  } = props;
-  return hasGapSupport(blockName) || hasMinHeightSupport(blockName) || hasPaddingSupport(blockName) || hasMarginSupport(blockName) || hasChildLayoutSupport(props);
-}
-/**
- * Determines whether dimensions support has been disabled.
- *
- * @param {Object} props Block properties.
- *
- * @return {boolean} If spacing support is completely disabled.
+ * @deprecated
  */
 
-const useIsDimensionsDisabled = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const gapDisabled = useIsGapDisabled(props);
-  const minHeightDisabled = useIsMinHeightDisabled(props);
-  const paddingDisabled = useIsPaddingDisabled(props);
-  const marginDisabled = useIsMarginDisabled(props);
-  const childLayoutDisabled = useIsChildLayoutDisabled(props);
-  return gapDisabled && minHeightDisabled && paddingDisabled && marginDisabled && childLayoutDisabled;
-};
-/**
- * Custom hook to retrieve which padding/margin/blockGap is supported
- * e.g. top, right, bottom or left.
- *
- * Sides are opted into by default. It is only if a specific side is set to
- * false that it is omitted.
- *
- * @param {string} blockName Block name.
- * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
- *
- * @return {string[] | undefined} Strings representing the custom sides available.
- */
-
-
-export function useCustomSides(blockName, feature) {
-  var _support$feature;
-
-  const support = getBlockSupport(blockName, SPACING_SUPPORT_KEY); // Skip when setting is boolean as theme isn't setting arbitrary sides.
-
-  if (!support || typeof support[feature] === 'boolean') {
-    return;
-  } // Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).
-
-
-  if (Array.isArray(support[feature])) {
-    return support[feature];
-  } // Finally, attempt to return `.sides` if the setting is an object.
-
-
-  if ((_support$feature = support[feature]) !== null && _support$feature !== void 0 && _support$feature.sides) {
-    return support[feature].sides;
-  }
+export function useCustomSides() {
+  deprecated('wp.blockEditor.__experimentalUseCustomSides', {
+    since: '6.3',
+    version: '6.4'
+  });
 }
 /**
  * Custom hook to determine whether the sides configured in the

package/build-module/hooks/dimensions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/dimensions.js"],"names":["classnames","__experimentalToolsPanelItem","ToolsPanelItem","__experimentalVStack","VStack","Platform","useState","__","getBlockSupport","useDispatch","InspectorControls","GapEdit","hasGapSupport","hasGapValue","resetGap","useIsGapDisabled","MarginEdit","MarginVisualizer","hasMarginSupport","hasMarginValue","resetMargin","useIsMarginDisabled","MinHeightEdit","hasMinHeightSupport","hasMinHeightValue","resetMinHeight","useIsMinHeightDisabled","PaddingEdit","PaddingVisualizer","hasPaddingSupport","hasPaddingValue","resetPadding","useIsPaddingDisabled","ChildLayoutEdit","hasChildLayoutSupport","hasChildLayoutValue","resetChildLayout","useIsChildLayoutDisabled","childLayoutOrientation","useSetting","store","blockEditorStore","unlock","DIMENSIONS_SUPPORT_KEY","SPACING_SUPPORT_KEY","ALL_SIDES","AXIAL_SIDES","useVisualizerMouseOver","isMouseOver","setIsMouseOver","hideBlockInterface","showBlockInterface","onMouseOver","e","stopPropagation","onMouseOut","DimensionsPanel","props","isGapDisabled","isPaddingDisabled","isMarginDisabled","isMinHeightDisabled","isChildLayoutDisabled","isDisabled","useIsDimensionsDisabled","isSupported","hasDimensionsSupport","spacingSizes","paddingMouseOver","marginMouseOver","defaultDimensionsControls","name","defaultSpacingControls","createResetAllFilter","attribute","featureSet","newAttributes","style","undefined","spacingClassnames","length","__unstableParentLayout","parentLayout","padding","clientId","margin","blockGap","minHeight","OS","blockName","gapDisabled","minHeightDisabled","paddingDisabled","marginDisabled","childLayoutDisabled","useCustomSides","feature","support","Array","isArray","sides","useIsDimensionsSupportValid","some","side","includes","console","warn","every"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { Platform, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tGapEdit,\n\thasGapSupport,\n\thasGapValue,\n\tresetGap,\n\tuseIsGapDisabled,\n} from './gap';\nimport {\n\tMarginEdit,\n\tMarginVisualizer,\n\thasMarginSupport,\n\thasMarginValue,\n\tresetMargin,\n\tuseIsMarginDisabled,\n} from './margin';\nimport {\n\tMinHeightEdit,\n\thasMinHeightSupport,\n\thasMinHeightValue,\n\tresetMinHeight,\n\tuseIsMinHeightDisabled,\n} from './min-height';\nimport {\n\tPaddingEdit,\n\tPaddingVisualizer,\n\thasPaddingSupport,\n\thasPaddingValue,\n\tresetPadding,\n\tuseIsPaddingDisabled,\n} from './padding';\nimport {\n\tChildLayoutEdit,\n\thasChildLayoutSupport,\n\thasChildLayoutValue,\n\tresetChildLayout,\n\tuseIsChildLayoutDisabled,\n\tchildLayoutOrientation,\n} from './child-layout';\nimport useSetting from '../components/use-setting';\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\nexport const DIMENSIONS_SUPPORT_KEY = 'dimensions';\nexport const SPACING_SUPPORT_KEY = 'spacing';\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\nexport const AXIAL_SIDES = [ 'vertical', 'horizontal' ];\n\nfunction useVisualizerMouseOver() {\n\tconst [ isMouseOver, setIsMouseOver ] = useState( false );\n\tconst { hideBlockInterface, showBlockInterface } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tconst onMouseOver = ( e ) => {\n\t\te.stopPropagation();\n\t\thideBlockInterface();\n\t\tsetIsMouseOver( true );\n\t};\n\tconst onMouseOut = ( e ) => {\n\t\te.stopPropagation();\n\t\tshowBlockInterface();\n\t\tsetIsMouseOver( false );\n\t};\n\treturn { isMouseOver, onMouseOver, onMouseOut };\n}\n\n/**\n * Inspector controls for dimensions support.\n *\n * @param {Object} props Block props.\n *\n * @return {WPElement} Inspector controls for dimensions and spacing support features.\n */\nexport function DimensionsPanel( props ) {\n\tconst isGapDisabled = useIsGapDisabled( props );\n\tconst isPaddingDisabled = useIsPaddingDisabled( props );\n\tconst isMarginDisabled = useIsMarginDisabled( props );\n\tconst isMinHeightDisabled = useIsMinHeightDisabled( props );\n\tconst isChildLayoutDisabled = useIsChildLayoutDisabled( props );\n\tconst isDisabled = useIsDimensionsDisabled( props );\n\tconst isSupported = hasDimensionsSupport( props );\n\tconst spacingSizes = useSetting( 'spacing.spacingSizes' );\n\tconst paddingMouseOver = useVisualizerMouseOver();\n\tconst marginMouseOver = useVisualizerMouseOver();\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\tconst defaultDimensionsControls = getBlockSupport( props.name, [\n\t\tDIMENSIONS_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst defaultSpacingControls = getBlockSupport( props.name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst createResetAllFilter =\n\t\t( attribute, featureSet ) => ( newAttributes ) => ( {\n\t\t\t...newAttributes,\n\t\t\tstyle: {\n\t\t\t\t...newAttributes.style,\n\t\t\t\t[ featureSet ]: {\n\t\t\t\t\t...newAttributes.style?.[ featureSet ],\n\t\t\t\t\t[ attribute ]: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t} );\n\n\tconst spacingClassnames = classnames( {\n\t\t'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,\n\t} );\n\n\tconst { __unstableParentLayout: parentLayout } = props;\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls group=\"dimensions\">\n\t\t\t\t{ ! isPaddingDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tclassName={ spacingClassnames }\n\t\t\t\t\t\thasValue={ () => hasPaddingValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Padding' ) }\n\t\t\t\t\t\tonDeselect={ () => resetPadding( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter(\n\t\t\t\t\t\t\t'padding',\n\t\t\t\t\t\t\t'spacing'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.padding }\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<PaddingEdit\n\t\t\t\t\t\t\tonMouseOver={ paddingMouseOver.onMouseOver }\n\t\t\t\t\t\t\tonMouseOut={ paddingMouseOver.onMouseOut }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isMarginDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tclassName={ spacingClassnames }\n\t\t\t\t\t\thasValue={ () => hasMarginValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Margin' ) }\n\t\t\t\t\t\tonDeselect={ () => resetMargin( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter(\n\t\t\t\t\t\t\t'margin',\n\t\t\t\t\t\t\t'spacing'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.margin }\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MarginEdit\n\t\t\t\t\t\t\tonMouseOver={ marginMouseOver.onMouseOver }\n\t\t\t\t\t\t\tonMouseOut={ marginMouseOver.onMouseOut }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isGapDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tclassName={ spacingClassnames }\n\t\t\t\t\t\thasValue={ () => hasGapValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Block spacing' ) }\n\t\t\t\t\t\tonDeselect={ () => resetGap( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter(\n\t\t\t\t\t\t\t'blockGap',\n\t\t\t\t\t\t\t'spacing'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tisShownByDefault={ defaultSpacingControls?.blockGap }\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<GapEdit { ...props } />\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isMinHeightDisabled && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => hasMinHeightValue( props ) }\n\t\t\t\t\t\tlabel={ __( 'Min. height' ) }\n\t\t\t\t\t\tonDeselect={ () => resetMinHeight( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter(\n\t\t\t\t\t\t\t'minHeight',\n\t\t\t\t\t\t\t'dimensions'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tisShownByDefault={\n\t\t\t\t\t\t\tdefaultDimensionsControls?.minHeight\n\t\t\t\t\t\t}\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MinHeightEdit { ...props } />\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ ! isChildLayoutDisabled && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\thasValue={ () => hasChildLayoutValue( props ) }\n\t\t\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\t\t\tonDeselect={ () => resetChildLayout( props ) }\n\t\t\t\t\t\tresetAllFilter={ createResetAllFilter(\n\t\t\t\t\t\t\t'selfStretch',\n\t\t\t\t\t\t\t'layout'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\t\tpanelId={ props.clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChildLayoutEdit { ...props } />\n\t\t\t\t\t</VStack>\n\t\t\t\t) }\n\t\t\t</InspectorControls>\n\t\t\t{ ! isPaddingDisabled && (\n\t\t\t\t<PaddingVisualizer\n\t\t\t\t\tforceShow={ paddingMouseOver.isMouseOver }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! isMarginDisabled && (\n\t\t\t\t<MarginVisualizer\n\t\t\t\t\tforceShow={ marginMouseOver.isMouseOver }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Determine whether there is dimensions related block support.\n *\n * @param {Object} props Block props.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasDimensionsSupport( props ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst { name: blockName } = props;\n\n\treturn (\n\t\thasGapSupport( blockName ) ||\n\t\thasMinHeightSupport( blockName ) ||\n\t\thasPaddingSupport( blockName ) ||\n\t\thasMarginSupport( blockName ) ||\n\t\thasChildLayoutSupport( props )\n\t);\n}\n\n/**\n * Determines whether dimensions support has been disabled.\n *\n * @param {Object} props Block properties.\n *\n * @return {boolean} If spacing support is completely disabled.\n */\nconst useIsDimensionsDisabled = ( props = {} ) => {\n\tconst gapDisabled = useIsGapDisabled( props );\n\tconst minHeightDisabled = useIsMinHeightDisabled( props );\n\tconst paddingDisabled = useIsPaddingDisabled( props );\n\tconst marginDisabled = useIsMarginDisabled( props );\n\tconst childLayoutDisabled = useIsChildLayoutDisabled( props );\n\n\treturn (\n\t\tgapDisabled &&\n\t\tminHeightDisabled &&\n\t\tpaddingDisabled &&\n\t\tmarginDisabled &&\n\t\tchildLayoutDisabled\n\t);\n};\n\n/**\n * Custom hook to retrieve which padding/margin/blockGap is supported\n * e.g. top, right, bottom or left.\n *\n * Sides are opted into by default. It is only if a specific side is set to\n * false that it is omitted.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {string[] | undefined} Strings representing the custom sides available.\n */\nexport function useCustomSides( blockName, feature ) {\n\tconst support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );\n\n\t// Skip when setting is boolean as theme isn't setting arbitrary sides.\n\tif ( ! support || typeof support[ feature ] === 'boolean' ) {\n\t\treturn;\n\t}\n\n\t// Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).\n\tif ( Array.isArray( support[ feature ] ) ) {\n\t\treturn support[ feature ];\n\t}\n\n\t// Finally, attempt to return `.sides` if the setting is an object.\n\tif ( support[ feature ]?.sides ) {\n\t\treturn support[ feature ].sides;\n\t}\n}\n\n/**\n * Custom hook to determine whether the sides configured in the\n * block support are valid. A dimension property cannot declare\n * support for a mix of axial and individual sides.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {boolean} If the feature has a valid configuration of sides.\n */\nexport function useIsDimensionsSupportValid( blockName, feature ) {\n\tconst sides = useCustomSides( blockName, feature );\n\n\tif (\n\t\tsides &&\n\t\tsides.some( ( side ) => ALL_SIDES.includes( side ) ) &&\n\t\tsides.some( ( side ) => AXIAL_SIDES.includes( side ) )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`The ${ feature } support for the \"${ blockName }\" block can not be configured to support both axial and arbitrary sides.`\n\t\t);\n\t\treturn false;\n\t}\n\n\tif (\n\t\tsides?.length &&\n\t\tfeature === 'blockGap' &&\n\t\t! AXIAL_SIDES.every( ( side ) => sides.includes( side ) )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`The ${ feature } support for the \"${ blockName }\" block can not be configured to support arbitrary sides.`\n\t\t);\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/dimensions.js"],"names":["useState","useEffect","useCallback","useDispatch","getBlockSupport","deprecated","InspectorControls","DimensionsPanel","StylesDimensionsPanel","useHasDimensionsPanel","MarginVisualizer","PaddingVisualizer","store","blockEditorStore","unlock","cleanEmptyObject","useBlockSettings","DIMENSIONS_SUPPORT_KEY","SPACING_SUPPORT_KEY","ALL_SIDES","AXIAL_SIDES","useVisualizer","property","setProperty","hideBlockInterface","showBlockInterface","DimensionsInspectorControl","children","resetAllFilter","attributesResetAllFilter","attributes","existingStyle","style","updatedStyle","props","clientId","name","setAttributes","__unstableParentLayout","settings","isEnabled","value","visualizedProperty","setVisualizedProperty","onChange","newStyle","defaultDimensionsControls","defaultSpacingControls","defaultControls","spacing","padding","margin","useCustomSides","since","version","useIsDimensionsSupportValid","blockName","feature","sides","some","side","includes","console","warn","length","every"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tDimensionsPanel as StylesDimensionsPanel,\n\tuseHasDimensionsPanel,\n} from '../components/global-styles';\nimport { MarginVisualizer } from './margin';\nimport { PaddingVisualizer } from './padding';\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\nimport { cleanEmptyObject, useBlockSettings } from './utils';\n\nexport const DIMENSIONS_SUPPORT_KEY = 'dimensions';\nexport const SPACING_SUPPORT_KEY = 'spacing';\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\nexport const AXIAL_SIDES = [ 'vertical', 'horizontal' ];\n\nfunction useVisualizer() {\n\tconst [ property, setProperty ] = useState( false );\n\tconst { hideBlockInterface, showBlockInterface } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tuseEffect( () => {\n\t\tif ( ! property ) {\n\t\t\tshowBlockInterface();\n\t\t} else {\n\t\t\thideBlockInterface();\n\t\t}\n\t}, [ property, showBlockInterface, hideBlockInterface ] );\n\n\treturn [ property, setProperty ];\n}\n\nfunction DimensionsInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributes.style;\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\tstyle: updatedStyle,\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"dimensions\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function DimensionsPanel( props ) {\n\tconst {\n\t\tclientId,\n\t\tname,\n\t\tattributes,\n\t\tsetAttributes,\n\t\t__unstableParentLayout,\n\t} = props;\n\tconst settings = useBlockSettings( name, __unstableParentLayout );\n\tconst isEnabled = useHasDimensionsPanel( settings );\n\tconst value = attributes.style;\n\tconst [ visualizedProperty, setVisualizedProperty ] = useVisualizer();\n\tconst onChange = ( newStyle ) => {\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\t};\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst defaultDimensionsControls = getBlockSupport( props.name, [\n\t\tDIMENSIONS_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultSpacingControls = getBlockSupport( props.name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultControls = {\n\t\t...defaultDimensionsControls,\n\t\t...defaultSpacingControls,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<StylesDimensionsPanel\n\t\t\t\tas={ DimensionsInspectorControl }\n\t\t\t\tpanelId={ clientId }\n\t\t\t\tname={ name }\n\t\t\t\tsettings={ settings }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\tonVisualize={ setVisualizedProperty }\n\t\t\t/>\n\t\t\t{ !! settings?.spacing?.padding && (\n\t\t\t\t<PaddingVisualizer\n\t\t\t\t\tforceShow={ visualizedProperty === 'padding' }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! settings?.spacing?.margin && (\n\t\t\t\t<MarginVisualizer\n\t\t\t\t\tforceShow={ visualizedProperty === 'margin' }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * @deprecated\n */\nexport function useCustomSides() {\n\tdeprecated( 'wp.blockEditor.__experimentalUseCustomSides', {\n\t\tsince: '6.3',\n\t\tversion: '6.4',\n\t} );\n}\n\n/**\n * Custom hook to determine whether the sides configured in the\n * block support are valid. A dimension property cannot declare\n * support for a mix of axial and individual sides.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   The feature custom sides relate to e.g. padding or margins.\n *\n * @return {boolean} If the feature has a valid configuration of sides.\n */\nexport function useIsDimensionsSupportValid( blockName, feature ) {\n\tconst sides = useCustomSides( blockName, feature );\n\n\tif (\n\t\tsides &&\n\t\tsides.some( ( side ) => ALL_SIDES.includes( side ) ) &&\n\t\tsides.some( ( side ) => AXIAL_SIDES.includes( side ) )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`The ${ feature } support for the \"${ blockName }\" block can not be configured to support both axial and arbitrary sides.`\n\t\t);\n\t\treturn false;\n\t}\n\n\tif (\n\t\tsides?.length &&\n\t\tfeature === 'blockGap' &&\n\t\t! AXIAL_SIDES.every( ( side ) => sides.includes( side ) )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`The ${ feature } support for the \"${ blockName }\" block can not be configured to support arbitrary sides.`\n\t\t);\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n"]}

package/build-module/hooks/duotone.js

@@ -71,15 +71,41 @@ function useMultiOriginPresets(_ref2) {
   return useMemo(() => [...userPresets, ...themePresets, ...(disableDefault ? EMPTY_ARRAY : defaultPresets)], [disableDefault, userPresets, themePresets, defaultPresets]);
 }
 
-function DuotonePanel(_ref3) {
+export function getColorsFromDuotonePreset(duotone, duotonePalette) {
+  if (!duotone) {
+    return;
+  }
+
+  const preset = duotonePalette === null || duotonePalette === void 0 ? void 0 : duotonePalette.find(_ref3 => {
+    let {
+      slug
+    } = _ref3;
+    return duotone === `var:preset|duotone|${slug}`;
+  });
+  return preset ? preset.colors : undefined;
+}
+export function getDuotonePresetFromColors(colors, duotonePalette) {
+  if (!colors || !Array.isArray(colors)) {
+    return;
+  }
+
+  const preset = duotonePalette === null || duotonePalette === void 0 ? void 0 : duotonePalette.find(duotonePreset => {
+    var _duotonePreset$colors;
+
+    return duotonePreset === null || duotonePreset === void 0 ? void 0 : (_duotonePreset$colors = duotonePreset.colors) === null || _duotonePreset$colors === void 0 ? void 0 : _duotonePreset$colors.every((val, index) => val === colors[index]);
+  });
+  return preset ? `var:preset|duotone|${preset.slug}` : undefined;
+}
+
+function DuotonePanel(_ref4) {
   var _style$color;
 
   let {
     attributes,
     setAttributes
-  } = _ref3;
+  } = _ref4;
   const style = attributes === null || attributes === void 0 ? void 0 : attributes.style;
-  const duotone = style === null || style === void 0 ? void 0 : (_style$color = style.color) === null || _style$color === void 0 ? void 0 : _style$color.duotone;
+  const duotoneStyle = style === null || style === void 0 ? void 0 : (_style$color = style.color) === null || _style$color === void 0 ? void 0 : _style$color.duotone;
   const duotonePalette = useMultiOriginPresets({
     presetSetting: 'color.duotone',
     defaultSetting: 'color.defaultDuotone'
@@ -95,6 +121,7 @@ function DuotonePanel(_ref3) {
     return null;
   }
 
+  const duotonePresetOrColors = !Array.isArray(duotoneStyle) ? getColorsFromDuotonePreset(duotoneStyle, duotonePalette) : duotoneStyle;
   return createElement(BlockControls, {
     group: "block",
     __experimentalShareWithChildBlocks: true
@@ -103,11 +130,13 @@ function DuotonePanel(_ref3) {
     colorPalette: colorPalette,
     disableCustomDuotone: disableCustomDuotone,
     disableCustomColors: disableCustomColors,
-    value: duotone,
+    value: duotonePresetOrColors,
     onChange: newDuotone => {
+      const maybePreset = getDuotonePresetFromColors(newDuotone, duotonePalette);
       const newStyle = { ...style,
         color: { ...(style === null || style === void 0 ? void 0 : style.color),
-          duotone: newDuotone
+          duotone: maybePreset !== null && maybePreset !== void 0 ? maybePreset : newDuotone // use preset or fallback to custom colors.
+
         }
       };
       setAttributes({
@@ -157,8 +186,12 @@ const withDuotoneControls = createHigherOrderComponent(BlockEdit => props => {
   const hasDuotoneSupport = hasBlockSupport(props.name, 'color.__experimentalDuotone');
   const isContentLocked = useSelect(select => {
     return select(blockEditorStore).__unstableGetContentLockingParent(props.clientId);
-  }, [props.clientId]);
-  return createElement(Fragment, null, createElement(BlockEdit, props), hasDuotoneSupport && !isContentLocked && createElement(DuotonePanel, props));
+  }, [props.clientId]); // CAUTION: code added before this line will be executed
+  // for all blocks, not just those that support duotone. Code added
+  // above this line should be carefully evaluated for its impact on
+  // performance.
+
+  return createElement(Fragment, null, hasDuotoneSupport && !isContentLocked && createElement(DuotonePanel, props), createElement(BlockEdit, props));
 }, 'withDuotoneControls');
 /**
  * Function that scopes a selector with another one. This works a bit like
@@ -189,6 +222,41 @@ function scopeSelector(scope, selector) {
   });
   return selectorsScoped.join(', ');
 }
+
+function BlockDuotoneStyles(_ref5) {
+  let {
+    name,
+    duotoneStyle,
+    id
+  } = _ref5;
+  const duotonePalette = useMultiOriginPresets({
+    presetSetting: 'color.duotone',
+    defaultSetting: 'color.defaultDuotone'
+  });
+  const element = useContext(BlockList.__unstableElementContext); // Portals cannot exist without a container.
+  // Guard against empty Duotone styles.
+
+  if (!element || !duotoneStyle) {
+    return null;
+  }
+
+  let colors = duotoneStyle;
+
+  if (!Array.isArray(colors) && colors !== 'unset') {
+    colors = getColorsFromDuotonePreset(colors, duotonePalette);
+  }
+
+  const duotoneSupportSelectors = getBlockSupport(name, 'color.__experimentalDuotone'); // Extra .editor-styles-wrapper specificity is needed in the editor
+  // since we're not using inline styles to apply the filter. We need to
+  // override duotone applied by global styles and theme.json.
+
+  const selectorsGroup = scopeSelector(`.editor-styles-wrapper .${id}`, duotoneSupportSelectors);
+  return createPortal(createElement(InlineDuotone, {
+    selector: selectorsGroup,
+    id: id,
+    colors: colors
+  }), element);
+}
 /**
  * Override the default block element to include duotone styles.
  *
@@ -202,24 +270,18 @@ const withDuotoneStyles = createHigherOrderComponent(BlockListBlock => props =>
   var _props$attributes, _props$attributes$sty, _props$attributes$sty2;
 
   const duotoneSupport = getBlockSupport(props.name, 'color.__experimentalDuotone');
-  const colors = props === null || props === void 0 ? void 0 : (_props$attributes = props.attributes) === null || _props$attributes === void 0 ? void 0 : (_props$attributes$sty = _props$attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : (_props$attributes$sty2 = _props$attributes$sty.color) === null || _props$attributes$sty2 === void 0 ? void 0 : _props$attributes$sty2.duotone;
-
-  if (!duotoneSupport || !colors) {
-    return createElement(BlockListBlock, props);
-  }
-
-  const id = `wp-duotone-${useInstanceId(BlockListBlock)}`; // Extra .editor-styles-wrapper specificity is needed in the editor
-  // since we're not using inline styles to apply the filter. We need to
-  // override duotone applied by global styles and theme.json.
+  const id = `wp-duotone-${useInstanceId(BlockListBlock)}`;
+  const className = duotoneSupport ? classnames(props === null || props === void 0 ? void 0 : props.className, id) : props === null || props === void 0 ? void 0 : props.className;
+  const duotoneStyle = props === null || props === void 0 ? void 0 : (_props$attributes = props.attributes) === null || _props$attributes === void 0 ? void 0 : (_props$attributes$sty = _props$attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : (_props$attributes$sty2 = _props$attributes$sty.color) === null || _props$attributes$sty2 === void 0 ? void 0 : _props$attributes$sty2.duotone; // CAUTION: code added before this line will be executed
+  // for all blocks, not just those that support duotone. Code added
+  // above this line should be carefully evaluated for its impact on
+  // performance.
 
-  const selectorsGroup = scopeSelector(`.editor-styles-wrapper .${id}`, duotoneSupport);
-  const className = classnames(props === null || props === void 0 ? void 0 : props.className, id);
-  const element = useContext(BlockList.__unstableElementContext);
-  return createElement(Fragment, null, element && createPortal(createElement(InlineDuotone, {
-    selector: selectorsGroup,
-    id: id,
-    colors: colors
-  }), element), createElement(BlockListBlock, _extends({}, props, {
+  return createElement(Fragment, null, duotoneSupport && duotoneStyle && createElement(BlockDuotoneStyles, {
+    name: props === null || props === void 0 ? void 0 : props.name,
+    duotoneStyle: duotoneStyle,
+    id: id
+  }), createElement(BlockListBlock, _extends({}, props, {
     className: className
   })));
 }, 'withDuotoneStyles');