@wordpress/block-editor 7.0.4 → 8.0.3

package/build/components/caption/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/caption/index.native.js"],"names":["Caption","accessibilityLabelCreator","accessible","inlineToolbar","isSelected","onBlur","onChange","onFocus","placeholder","placeholderTextColor","shouldDisplay","style","value","insertBlocksAfter","undefined","flex","display","fontSize"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,MAAMA,OAAO,GAAG,CAAE;AACjBC,EAAAA,yBADiB;AAEjBC,EAAAA,UAFiB;AAGjBC,EAAAA,aAHiB;AAIjBC,EAAAA,UAJiB;AAKjBC,EAAAA,MALiB;AAMjBC,EAAAA,QANiB;AAOjBC,EAAAA,OAPiB;AAQjBC,EAAAA,WAAW,GAAG,cAAI,aAAJ,CARG;AASjBC,EAAAA,oBATiB;AAUjBC,EAAAA,aAAa,GAAG,IAVC;AAWjBC,EAAAA,KAXiB;AAYjBC,EAAAA,KAZiB;AAajBC,EAAAA,iBAAiB,GAAG,MAAM,CAAE;AAbX,CAAF,KAef,4BAAC,iBAAD;AACC,EAAA,kBAAkB,EACjBZ,yBAAyB,GACtBA,yBAAyB,CAAEW,KAAF,CADH,GAEtBE,SAJL;AAMC,EAAA,iBAAiB,EAAC,QANnB;AAOC,EAAA,UAAU,EAAGZ,UAPd;AAQC,EAAA,KAAK,EAAG;AAAEa,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,OAAO,EAAEN,aAAa,GAAG,MAAH,GAAY;AAA7C;AART,GAUC,4BAAC,qBAAD;AACC,EAAA,8BAA8B,MAD/B;AAEC,EAAA,QAAQ,EAAGC,KAAK,IAAIA,KAAK,CAACM,QAAf,GAA0BN,KAAK,CAACM,QAAhC,GAA2C,EAFvD;AAGC,EAAA,aAAa,EAAGd,aAHjB;AAIC,EAAA,UAAU,EAAGC,UAJd;AAKC,EAAA,MAAM,EAAGC,MALV;AAMC,EAAA,QAAQ,EAAGC,QANZ;AAOC,EAAA,WAAW,EAAGE,WAPf;AAQC,EAAA,oBAAoB,EAAGC,oBARxB;AASC,EAAA,mBAAmB,EAAG,CAAE,GAAF,CATvB;AAUC,EAAA,KAAK,EAAGE,KAVT;AAWC,EAAA,OAAO,EAAC,GAXT;AAYC,EAAA,SAAS,EAAC,QAZX;AAaC,EAAA,qBAAqB,EAAC,aAbvB;AAcC,EAAA,eAAe,EAAGJ,OAdnB;AAeC,EAAA,KAAK,EAAGK,KAfT;AAgBC,EAAA,sBAAsB,EAAG,MACxBC,iBAAiB,CAAE,yBAAa,gBAAb,CAAF,CAjBnB;AAmBC,EAAA,WAAW,EAAG;AAnBf,EAVD,CAfD;;eAiDeb,O","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\nimport { RichText } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\nconst Caption = ( {\n\taccessibilityLabelCreator,\n\taccessible,\n\tinlineToolbar,\n\tisSelected,\n\tonBlur,\n\tonChange,\n\tonFocus,\n\tplaceholder = __( 'Add caption' ),\n\tplaceholderTextColor,\n\tshouldDisplay = true,\n\tstyle,\n\tvalue,\n\tinsertBlocksAfter = () => {},\n} ) => (\n\t<View\n\t\taccessibilityLabel={\n\t\t\taccessibilityLabelCreator\n\t\t\t\t? accessibilityLabelCreator( value )\n\t\t\t\t: undefined\n\t\t}\n\t\taccessibilityRole=\"button\"\n\t\taccessible={ accessible }\n\t\tstyle={ { flex: 1, display: shouldDisplay ? 'flex' : 'none' } }\n\t>\n\t\t<RichText\n\t\t\t__unstableMobileNoFocusOnMount\n\t\t\tfontSize={ style && style.fontSize ? style.fontSize : 14 }\n\t\t\tinlineToolbar={ inlineToolbar }\n\t\t\tisSelected={ isSelected }\n\t\t\tonBlur={ onBlur }\n\t\t\tonChange={ onChange }\n\t\t\tplaceholder={ placeholder }\n\t\t\tplaceholderTextColor={ placeholderTextColor }\n\t\t\trootTagsToEliminate={ [ 'p' ] }\n\t\t\tstyle={ style }\n\t\t\ttagName=\"p\"\n\t\t\ttextAlign=\"center\"\n\t\t\tunderlineColorAndroid=\"transparent\"\n\t\t\tunstableOnFocus={ onFocus }\n\t\t\tvalue={ value }\n\t\t\t__unstableOnSplitAtEnd={ () =>\n\t\t\t\tinsertBlocksAfter( createBlock( 'core/paragraph' ) )\n\t\t\t}\n\t\t\tdeleteEnter={ true }\n\t\t/>\n\t</View>\n);\n\nexport default Caption;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/caption/index.native.js"],"names":["Caption","accessibilityLabelCreator","accessible","inlineToolbar","isSelected","onBlur","onChange","onFocus","placeholder","placeholderTextColor","shouldDisplay","style","value","insertBlocksAfter","undefined","flex","display","fontSize"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,MAAMA,OAAO,GAAG;AAAA,MAAE;AACjBC,IAAAA,yBADiB;AAEjBC,IAAAA,UAFiB;AAGjBC,IAAAA,aAHiB;AAIjBC,IAAAA,UAJiB;AAKjBC,IAAAA,MALiB;AAMjBC,IAAAA,QANiB;AAOjBC,IAAAA,OAPiB;AAQjBC,IAAAA,WAAW,GAAG,cAAI,aAAJ,CARG;AASjBC,IAAAA,oBATiB;AAUjBC,IAAAA,aAAa,GAAG,IAVC;AAWjBC,IAAAA,KAXiB;AAYjBC,IAAAA,KAZiB;AAajBC,IAAAA,iBAAiB,GAAG,MAAM,CAAE;AAbX,GAAF;AAAA,SAef,4BAAC,iBAAD;AACC,IAAA,kBAAkB,EACjBZ,yBAAyB,GACtBA,yBAAyB,CAAEW,KAAF,CADH,GAEtBE,SAJL;AAMC,IAAA,iBAAiB,EAAC,QANnB;AAOC,IAAA,UAAU,EAAGZ,UAPd;AAQC,IAAA,KAAK,EAAG;AAAEa,MAAAA,IAAI,EAAE,CAAR;AAAWC,MAAAA,OAAO,EAAEN,aAAa,GAAG,MAAH,GAAY;AAA7C;AART,KAUC,4BAAC,qBAAD;AACC,IAAA,8BAA8B,MAD/B;AAEC,IAAA,QAAQ,EAAGC,KAAK,IAAIA,KAAK,CAACM,QAAf,GAA0BN,KAAK,CAACM,QAAhC,GAA2C,EAFvD;AAGC,IAAA,aAAa,EAAGd,aAHjB;AAIC,IAAA,UAAU,EAAGC,UAJd;AAKC,IAAA,MAAM,EAAGC,MALV;AAMC,IAAA,QAAQ,EAAGC,QANZ;AAOC,IAAA,WAAW,EAAGE,WAPf;AAQC,IAAA,oBAAoB,EAAGC,oBARxB;AASC,IAAA,mBAAmB,EAAG,CAAE,GAAF,CATvB;AAUC,IAAA,KAAK,EAAGE,KAVT;AAWC,IAAA,OAAO,EAAC,GAXT;AAYC,IAAA,SAAS,EAAC,QAZX;AAaC,IAAA,qBAAqB,EAAC,aAbvB;AAcC,IAAA,eAAe,EAAGJ,OAdnB;AAeC,IAAA,KAAK,EAAGK,KAfT;AAgBC,IAAA,sBAAsB,EAAG,MACxBC,iBAAiB,CAAE,yBAAa,gBAAb,CAAF,CAjBnB;AAmBC,IAAA,WAAW,EAAG;AAnBf,IAVD,CAfe;AAAA,CAAhB;;eAiDeb,O","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\nimport { RichText } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\nconst Caption = ( {\n\taccessibilityLabelCreator,\n\taccessible,\n\tinlineToolbar,\n\tisSelected,\n\tonBlur,\n\tonChange,\n\tonFocus,\n\tplaceholder = __( 'Add caption' ),\n\tplaceholderTextColor,\n\tshouldDisplay = true,\n\tstyle,\n\tvalue,\n\tinsertBlocksAfter = () => {},\n} ) => (\n\t<View\n\t\taccessibilityLabel={\n\t\t\taccessibilityLabelCreator\n\t\t\t\t? accessibilityLabelCreator( value )\n\t\t\t\t: undefined\n\t\t}\n\t\taccessibilityRole=\"button\"\n\t\taccessible={ accessible }\n\t\tstyle={ { flex: 1, display: shouldDisplay ? 'flex' : 'none' } }\n\t>\n\t\t<RichText\n\t\t\t__unstableMobileNoFocusOnMount\n\t\t\tfontSize={ style && style.fontSize ? style.fontSize : 14 }\n\t\t\tinlineToolbar={ inlineToolbar }\n\t\t\tisSelected={ isSelected }\n\t\t\tonBlur={ onBlur }\n\t\t\tonChange={ onChange }\n\t\t\tplaceholder={ placeholder }\n\t\t\tplaceholderTextColor={ placeholderTextColor }\n\t\t\trootTagsToEliminate={ [ 'p' ] }\n\t\t\tstyle={ style }\n\t\t\ttagName=\"p\"\n\t\t\ttextAlign=\"center\"\n\t\t\tunderlineColorAndroid=\"transparent\"\n\t\t\tunstableOnFocus={ onFocus }\n\t\t\tvalue={ value }\n\t\t\t__unstableOnSplitAtEnd={ () =>\n\t\t\t\tinsertBlocksAfter( createBlock( 'core/paragraph' ) )\n\t\t\t}\n\t\t\tdeleteEnter={ true }\n\t\t/>\n\t</View>\n);\n\nexport default Caption;\n"]}

package/build/components/color-palette/control.js

@@ -16,11 +16,12 @@ var _control = _interopRequireDefault(require("../colors-gradients/control"));
 /**
  * Internal dependencies
  */
-function ColorPaletteControl({
-  onChange,
-  value,
-  ...otherProps
-}) {
+function ColorPaletteControl(_ref) {
+  let {
+    onChange,
+    value,
+    ...otherProps
+  } = _ref;
   return (0, _element.createElement)(_control.default, (0, _extends2.default)({}, otherProps, {
     onColorChange: onChange,
     colorValue: value,

package/build/components/color-palette/control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/color-palette/control.js"],"names":["ColorPaletteControl","onChange","value","otherProps"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,mBAAT,CAA8B;AAC5CC,EAAAA,QAD4C;AAE5CC,EAAAA,KAF4C;AAG5C,KAAGC;AAHyC,CAA9B,EAIX;AACH,SACC,4BAAC,gBAAD,6BACMA,UADN;AAEC,IAAA,aAAa,EAAGF,QAFjB;AAGC,IAAA,UAAU,EAAGC,KAHd;AAIC,IAAA,SAAS,EAAG,EAJb;AAKC,IAAA,sBAAsB,EAAG;AAL1B,KADD;AASA","sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\n\nexport default function ColorPaletteControl( {\n\tonChange,\n\tvalue,\n\t...otherProps\n} ) {\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...otherProps }\n\t\t\tonColorChange={ onChange }\n\t\t\tcolorValue={ value }\n\t\t\tgradients={ [] }\n\t\t\tdisableCustomGradients={ true }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/color-palette/control.js"],"names":["ColorPaletteControl","onChange","value","otherProps"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,mBAAT,OAIX;AAAA,MAJyC;AAC5CC,IAAAA,QAD4C;AAE5CC,IAAAA,KAF4C;AAG5C,OAAGC;AAHyC,GAIzC;AACH,SACC,4BAAC,gBAAD,6BACMA,UADN;AAEC,IAAA,aAAa,EAAGF,QAFjB;AAGC,IAAA,UAAU,EAAGC,KAHd;AAIC,IAAA,SAAS,EAAG,EAJb;AAKC,IAAA,sBAAsB,EAAG;AAL1B,KADD;AASA","sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\n\nexport default function ColorPaletteControl( {\n\tonChange,\n\tvalue,\n\t...otherProps\n} ) {\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...otherProps }\n\t\t\tonColorChange={ onChange }\n\t\t\tcolorValue={ value }\n\t\t\tgradients={ [] }\n\t\t\tdisableCustomGradients={ true }\n\t\t/>\n\t);\n}\n"]}

package/build/components/color-style-selector/index.js

@@ -33,10 +33,11 @@ const ColorSelectorSVGIcon = () => (0, _element.createElement)(_components.SVG,
  */
 
 
-const ColorSelectorIcon = ({
-  style,
-  className
-}) => {
+const ColorSelectorIcon = _ref => {
+  let {
+    style,
+    className
+  } = _ref;
   return (0, _element.createElement)("div", {
     className: "block-library-colors-selector__icon-container"
   }, (0, _element.createElement)("div", {
@@ -55,39 +56,47 @@ const ColorSelectorIcon = ({
  */
 
 
-const renderToggleComponent = ({
-  TextColor,
-  BackgroundColor
-}) => ({
-  onToggle,
-  isOpen
-}) => {
-  const openOnArrowDown = event => {
-    if (!isOpen && event.keyCode === _keycodes.DOWN) {
-      event.preventDefault();
-      onToggle();
-    }
-  };
+const renderToggleComponent = _ref2 => {
+  let {
+    TextColor,
+    BackgroundColor
+  } = _ref2;
+  return _ref3 => {
+    let {
+      onToggle,
+      isOpen
+    } = _ref3;
+
+    const openOnArrowDown = event => {
+      if (!isOpen && event.keyCode === _keycodes.DOWN) {
+        event.preventDefault();
+        onToggle();
+      }
+    };
 
-  return (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, {
-    className: "components-toolbar__control block-library-colors-selector__toggle",
-    label: (0, _i18n.__)('Open Colors Selector'),
-    onClick: onToggle,
-    onKeyDown: openOnArrowDown,
-    icon: (0, _element.createElement)(BackgroundColor, null, (0, _element.createElement)(TextColor, null, (0, _element.createElement)(ColorSelectorIcon, null)))
-  }));
+    return (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, {
+      className: "components-toolbar__control block-library-colors-selector__toggle",
+      label: (0, _i18n.__)('Open Colors Selector'),
+      onClick: onToggle,
+      onKeyDown: openOnArrowDown,
+      icon: (0, _element.createElement)(BackgroundColor, null, (0, _element.createElement)(TextColor, null, (0, _element.createElement)(ColorSelectorIcon, null)))
+    }));
+  };
 };
 
-const BlockColorsStyleSelector = ({
-  children,
-  ...other
-}) => (0, _element.createElement)(_components.Dropdown, {
-  position: "bottom right",
-  className: "block-library-colors-selector",
-  contentClassName: "block-library-colors-selector__popover",
-  renderToggle: renderToggleComponent(other),
-  renderContent: () => children
-});
+const BlockColorsStyleSelector = _ref4 => {
+  let {
+    children,
+    ...other
+  } = _ref4;
+  return (0, _element.createElement)(_components.Dropdown, {
+    position: "bottom right",
+    className: "block-library-colors-selector",
+    contentClassName: "block-library-colors-selector__popover",
+    renderToggle: renderToggleComponent(other),
+    renderContent: () => children
+  });
+};
 
 var _default = BlockColorsStyleSelector;
 exports.default = _default;

package/build/components/color-style-selector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/color-style-selector/index.js"],"names":["ColorSelectorSVGIcon","ColorSelectorIcon","style","className","renderToggleComponent","TextColor","BackgroundColor","onToggle","isOpen","openOnArrowDown","event","keyCode","DOWN","preventDefault","BlockColorsStyleSelector","children","other"],"mappings":";;;;;;;;;AAGA;;AAOA;;AACA;;AAXA;AACA;AACA;AAWA,MAAMA,oBAAoB,GAAG,MAC5B,4BAAC,eAAD;AAAK,EAAA,KAAK,EAAC,6BAAX;AAAyC,EAAA,OAAO,EAAC;AAAjD,GACC,4BAAC,gBAAD;AAAM,EAAA,CAAC,EAAC;AAAR,EADD,CADD;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMC,iBAAiB,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAF,KAA4B;AACrD,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AACC,IAAA,SAAS,EAAI,GAAGA,SAAW,iDAD5B;AAEC,IAAA,KAAK,EAAGD;AAFT,KAIC,4BAAC,oBAAD,OAJD,CADD,CADD;AAUA,CAXD;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,qBAAqB,GAAG,CAAE;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAF,KAAsC,CAAE;AACrEC,EAAAA,QADqE;AAErEC,EAAAA;AAFqE,CAAF,KAG7D;AACN,QAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,QAAK,CAAEF,MAAF,IAAYE,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,MAAAA,KAAK,CAACG,cAAN;AACAN,MAAAA,QAAQ;AACR;AACD,GALD;;AAOA,SACC,4BAAC,wBAAD,QACC,4BAAC,yBAAD;AACC,IAAA,SAAS,EAAC,mEADX;AAEC,IAAA,KAAK,EAAG,cAAI,sBAAJ,CAFT;AAGC,IAAA,OAAO,EAAGA,QAHX;AAIC,IAAA,SAAS,EAAGE,eAJb;AAKC,IAAA,IAAI,EACH,4BAAC,eAAD,QACC,4BAAC,SAAD,QACC,4BAAC,iBAAD,OADD,CADD;AANF,IADD,CADD;AAiBA,CA5BD;;AA8BA,MAAMK,wBAAwB,GAAG,CAAE;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAF,KAChC,4BAAC,oBAAD;AACC,EAAA,QAAQ,EAAC,cADV;AAEC,EAAA,SAAS,EAAC,+BAFX;AAGC,EAAA,gBAAgB,EAAC,wCAHlB;AAIC,EAAA,YAAY,EAAGZ,qBAAqB,CAAEY,KAAF,CAJrC;AAKC,EAAA,aAAa,EAAG,MAAMD;AALvB,EADD;;eAUeD,wB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tDropdown,\n\tToolbarGroup,\n\tSVG,\n\tPath,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\nconst ColorSelectorSVGIcon = () => (\n\t<SVG xmlns=\"https://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n\t\t<Path d=\"M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z\" />\n\t</SVG>\n);\n\n/**\n * Color Selector Icon component.\n *\n * @param {Object} props           Component properties.\n * @param {Object} props.style     Style object.\n * @param {string} props.className Class name for component.\n *\n * @return {*} React Icon component.\n */\nconst ColorSelectorIcon = ( { style, className } ) => {\n\treturn (\n\t\t<div className=\"block-library-colors-selector__icon-container\">\n\t\t\t<div\n\t\t\t\tclassName={ `${ className } block-library-colors-selector__state-selection` }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<ColorSelectorSVGIcon />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n/**\n * Renders the Colors Selector Toolbar with the icon button.\n *\n * @param {Object} props                 Component properties.\n * @param {Object} props.TextColor       Text color component that wraps icon.\n * @param {Object} props.BackgroundColor Background color component that wraps icon.\n *\n * @return {*} React toggle button component.\n */\nconst renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {\n\tonToggle,\n\tisOpen,\n} ) => {\n\tconst openOnArrowDown = ( event ) => {\n\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\tevent.preventDefault();\n\t\t\tonToggle();\n\t\t}\n\t};\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\tonClick={ onToggle }\n\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\ticon={\n\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t</BackgroundColor>\n\t\t\t\t}\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => (\n\t<Dropdown\n\t\tposition=\"bottom right\"\n\t\tclassName=\"block-library-colors-selector\"\n\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\trenderToggle={ renderToggleComponent( other ) }\n\t\trenderContent={ () => children }\n\t/>\n);\n\nexport default BlockColorsStyleSelector;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/color-style-selector/index.js"],"names":["ColorSelectorSVGIcon","ColorSelectorIcon","style","className","renderToggleComponent","TextColor","BackgroundColor","onToggle","isOpen","openOnArrowDown","event","keyCode","DOWN","preventDefault","BlockColorsStyleSelector","children","other"],"mappings":";;;;;;;;;AAGA;;AAOA;;AACA;;AAXA;AACA;AACA;AAWA,MAAMA,oBAAoB,GAAG,MAC5B,4BAAC,eAAD;AAAK,EAAA,KAAK,EAAC,6BAAX;AAAyC,EAAA,OAAO,EAAC;AAAjD,GACC,4BAAC,gBAAD;AAAM,EAAA,CAAC,EAAC;AAAR,EADD,CADD;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMC,iBAAiB,GAAG,QAA4B;AAAA,MAA1B;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAA0B;AACrD,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AACC,IAAA,SAAS,EAAI,GAAGA,SAAW,iDAD5B;AAEC,IAAA,KAAK,EAAGD;AAFT,KAIC,4BAAC,oBAAD,OAJD,CADD,CADD;AAUA,CAXD;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,qBAAqB,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAAF;AAAA,SAAsC,SAG7D;AAAA,QAH+D;AACrEC,MAAAA,QADqE;AAErEC,MAAAA;AAFqE,KAG/D;;AACN,UAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,UAAK,CAAEF,MAAF,IAAYE,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,QAAAA,KAAK,CAACG,cAAN;AACAN,QAAAA,QAAQ;AACR;AACD,KALD;;AAOA,WACC,4BAAC,wBAAD,QACC,4BAAC,yBAAD;AACC,MAAA,SAAS,EAAC,mEADX;AAEC,MAAA,KAAK,EAAG,cAAI,sBAAJ,CAFT;AAGC,MAAA,OAAO,EAAGA,QAHX;AAIC,MAAA,SAAS,EAAGE,eAJb;AAKC,MAAA,IAAI,EACH,4BAAC,eAAD,QACC,4BAAC,SAAD,QACC,4BAAC,iBAAD,OADD,CADD;AANF,MADD,CADD;AAiBA,GA5B6B;AAAA,CAA9B;;AA8BA,MAAMK,wBAAwB,GAAG;AAAA,MAAE;AAAEC,IAAAA,QAAF;AAAY,OAAGC;AAAf,GAAF;AAAA,SAChC,4BAAC,oBAAD;AACC,IAAA,QAAQ,EAAC,cADV;AAEC,IAAA,SAAS,EAAC,+BAFX;AAGC,IAAA,gBAAgB,EAAC,wCAHlB;AAIC,IAAA,YAAY,EAAGZ,qBAAqB,CAAEY,KAAF,CAJrC;AAKC,IAAA,aAAa,EAAG,MAAMD;AALvB,IADgC;AAAA,CAAjC;;eAUeD,wB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tDropdown,\n\tToolbarGroup,\n\tSVG,\n\tPath,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\nconst ColorSelectorSVGIcon = () => (\n\t<SVG xmlns=\"https://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n\t\t<Path d=\"M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z\" />\n\t</SVG>\n);\n\n/**\n * Color Selector Icon component.\n *\n * @param {Object} props           Component properties.\n * @param {Object} props.style     Style object.\n * @param {string} props.className Class name for component.\n *\n * @return {*} React Icon component.\n */\nconst ColorSelectorIcon = ( { style, className } ) => {\n\treturn (\n\t\t<div className=\"block-library-colors-selector__icon-container\">\n\t\t\t<div\n\t\t\t\tclassName={ `${ className } block-library-colors-selector__state-selection` }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<ColorSelectorSVGIcon />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n/**\n * Renders the Colors Selector Toolbar with the icon button.\n *\n * @param {Object} props                 Component properties.\n * @param {Object} props.TextColor       Text color component that wraps icon.\n * @param {Object} props.BackgroundColor Background color component that wraps icon.\n *\n * @return {*} React toggle button component.\n */\nconst renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {\n\tonToggle,\n\tisOpen,\n} ) => {\n\tconst openOnArrowDown = ( event ) => {\n\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\tevent.preventDefault();\n\t\t\tonToggle();\n\t\t}\n\t};\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\tonClick={ onToggle }\n\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\ticon={\n\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t</BackgroundColor>\n\t\t\t\t}\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => (\n\t<Dropdown\n\t\tposition=\"bottom right\"\n\t\tclassName=\"block-library-colors-selector\"\n\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\trenderToggle={ renderToggleComponent( other ) }\n\t\trenderContent={ () => children }\n\t/>\n);\n\nexport default BlockColorsStyleSelector;\n"]}

package/build/components/colors/color-panel.js

@@ -34,25 +34,27 @@ const resolveContrastCheckerColor = (color, colorSettings, detectedColor) => {
   return color;
 };
 
-function ColorPanel({
-  title,
-  colorSettings,
-  colorPanelProps,
-  contrastCheckers,
-  detectedBackgroundColor,
-  detectedColor,
-  panelChildren,
-  initialOpen
-}) {
+function ColorPanel(_ref) {
+  let {
+    title,
+    colorSettings,
+    colorPanelProps,
+    contrastCheckers,
+    detectedBackgroundColor,
+    detectedColor,
+    panelChildren,
+    initialOpen
+  } = _ref;
   return (0, _element.createElement)(_panelColorSettings.default, (0, _extends2.default)({
     title: title,
     initialOpen: initialOpen,
     colorSettings: Object.values(colorSettings)
-  }, colorPanelProps), contrastCheckers && (Array.isArray(contrastCheckers) ? contrastCheckers.map(({
-    backgroundColor,
-    textColor,
-    ...rest
-  }) => {
+  }, colorPanelProps), contrastCheckers && (Array.isArray(contrastCheckers) ? contrastCheckers.map(_ref2 => {
+    let {
+      backgroundColor,
+      textColor,
+      ...rest
+    } = _ref2;
     backgroundColor = resolveContrastCheckerColor(backgroundColor, colorSettings, detectedBackgroundColor);
     textColor = resolveContrastCheckerColor(textColor, colorSettings, detectedColor);
     return (0, _element.createElement)(_contrastChecker.default, (0, _extends2.default)({
@@ -60,9 +62,10 @@ function ColorPanel({
       backgroundColor: backgroundColor,
       textColor: textColor
     }, rest));
-  }) : (0, _lodash.map)(colorSettings, ({
-    value
-  }) => {
+  }) : (0, _lodash.map)(colorSettings, _ref3 => {
+    let {
+      value
+    } = _ref3;
     let {
       backgroundColor,
       textColor

package/build/components/colors/color-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/color-panel.js"],"names":["resolveContrastCheckerColor","color","colorSettings","detectedColor","ColorPanel","title","colorPanelProps","contrastCheckers","detectedBackgroundColor","panelChildren","initialOpen","Object","values","Array","isArray","map","backgroundColor","textColor","rest","value"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,2BAA2B,GAAG,CAAEC,KAAF,EAASC,aAAT,EAAwBC,aAAxB,KAA2C;AAC9E,MAAK,OAAOF,KAAP,KAAiB,UAAtB,EAAmC;AAClC,WAAOA,KAAK,CAAEC,aAAF,CAAZ;AACA,GAFD,MAEO,IAAKD,KAAK,KAAK,IAAf,EAAsB;AAC5B,WAAOE,aAAP;AACA;;AACD,SAAOF,KAAP;AACA,CAPD;;AASe,SAASG,UAAT,CAAqB;AACnCC,EAAAA,KADmC;AAEnCH,EAAAA,aAFmC;AAGnCI,EAAAA,eAHmC;AAInCC,EAAAA,gBAJmC;AAKnCC,EAAAA,uBALmC;AAMnCL,EAAAA,aANmC;AAOnCM,EAAAA,aAPmC;AAQnCC,EAAAA;AARmC,CAArB,EASX;AACH,SACC,4BAAC,2BAAD;AACC,IAAA,KAAK,EAAGL,KADT;AAEC,IAAA,WAAW,EAAGK,WAFf;AAGC,IAAA,aAAa,EAAGC,MAAM,CAACC,MAAP,CAAeV,aAAf;AAHjB,KAIMI,eAJN,GAMGC,gBAAgB,KACfM,KAAK,CAACC,OAAN,CAAeP,gBAAf,IACCA,gBAAgB,CAACQ,GAAjB,CACA,CAAE;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA,SAAnB;AAA8B,OAAGC;AAAjC,GAAF,KAA+C;AAC9CF,IAAAA,eAAe,GAAGhB,2BAA2B,CAC5CgB,eAD4C,EAE5Cd,aAF4C,EAG5CM,uBAH4C,CAA7C;AAKAS,IAAAA,SAAS,GAAGjB,2BAA2B,CACtCiB,SADsC,EAEtCf,aAFsC,EAGtCC,aAHsC,CAAvC;AAKA,WACC,4BAAC,wBAAD;AACC,MAAA,GAAG,EAAI,GAAGa,eAAiB,IAAIC,SAAW,EAD3C;AAEC,MAAA,eAAe,EAAGD,eAFnB;AAGC,MAAA,SAAS,EAAGC;AAHb,OAIMC,IAJN,EADD;AAQA,GApBD,CADD,GAuBC,iBAAKhB,aAAL,EAAoB,CAAE;AAAEiB,IAAAA;AAAF,GAAF,KAAiB;AACrC,QAAI;AACHH,MAAAA,eADG;AAEHC,MAAAA;AAFG,QAGAV,gBAHJ;AAIAS,IAAAA,eAAe,GAAGhB,2BAA2B,CAC5CgB,eAAe,IAAIG,KADyB,EAE5CjB,aAF4C,EAG5CM,uBAH4C,CAA7C;AAKAS,IAAAA,SAAS,GAAGjB,2BAA2B,CACtCiB,SAAS,IAAIE,KADyB,EAEtCjB,aAFsC,EAGtCC,aAHsC,CAAvC;AAKA,WACC,4BAAC,wBAAD,6BACMI,gBADN;AAEC,MAAA,GAAG,EAAI,GAAGS,eAAiB,IAAIC,SAAW,EAF3C;AAGC,MAAA,eAAe,EAAGD,eAHnB;AAIC,MAAA,SAAS,EAAGC;AAJb,OADD;AAQC,GAvBD,CAxBc,CANnB,EAsDG,OAAOR,aAAP,KAAyB,UAAzB,GACCA,aAAa,CAAEP,aAAF,CADd,GAECO,aAxDJ,CADD;AA4DA","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport PanelColorSettings from '../panel-color-settings';\nimport ContrastChecker from '../contrast-checker';\n\nconst resolveContrastCheckerColor = ( color, colorSettings, detectedColor ) => {\n\tif ( typeof color === 'function' ) {\n\t\treturn color( colorSettings );\n\t} else if ( color === true ) {\n\t\treturn detectedColor;\n\t}\n\treturn color;\n};\n\nexport default function ColorPanel( {\n\ttitle,\n\tcolorSettings,\n\tcolorPanelProps,\n\tcontrastCheckers,\n\tdetectedBackgroundColor,\n\tdetectedColor,\n\tpanelChildren,\n\tinitialOpen,\n} ) {\n\treturn (\n\t\t<PanelColorSettings\n\t\t\ttitle={ title }\n\t\t\tinitialOpen={ initialOpen }\n\t\t\tcolorSettings={ Object.values( colorSettings ) }\n\t\t\t{ ...colorPanelProps }\n\t\t>\n\t\t\t{ contrastCheckers &&\n\t\t\t\t( Array.isArray( contrastCheckers )\n\t\t\t\t\t? contrastCheckers.map(\n\t\t\t\t\t\t\t( { backgroundColor, textColor, ...rest } ) => {\n\t\t\t\t\t\t\t\tbackgroundColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\t\tdetectedBackgroundColor\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\ttextColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\t\ttextColor,\n\t\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\t\tdetectedColor\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ContrastChecker\n\t\t\t\t\t\t\t\t\t\tkey={ `${ backgroundColor }-${ textColor }` }\n\t\t\t\t\t\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t\t\t\t\t\t\ttextColor={ textColor }\n\t\t\t\t\t\t\t\t\t\t{ ...rest }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t  )\n\t\t\t\t\t: map( colorSettings, ( { value } ) => {\n\t\t\t\t\t\t\tlet {\n\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\ttextColor,\n\t\t\t\t\t\t\t} = contrastCheckers;\n\t\t\t\t\t\t\tbackgroundColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\tbackgroundColor || value,\n\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\tdetectedBackgroundColor\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\ttextColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\ttextColor || value,\n\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\tdetectedColor\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ContrastChecker\n\t\t\t\t\t\t\t\t\t{ ...contrastCheckers }\n\t\t\t\t\t\t\t\t\tkey={ `${ backgroundColor }-${ textColor }` }\n\t\t\t\t\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t\t\t\t\t\ttextColor={ textColor }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t  } ) ) }\n\t\t\t{ typeof panelChildren === 'function'\n\t\t\t\t? panelChildren( colorSettings )\n\t\t\t\t: panelChildren }\n\t\t</PanelColorSettings>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors/color-panel.js"],"names":["resolveContrastCheckerColor","color","colorSettings","detectedColor","ColorPanel","title","colorPanelProps","contrastCheckers","detectedBackgroundColor","panelChildren","initialOpen","Object","values","Array","isArray","map","backgroundColor","textColor","rest","value"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,2BAA2B,GAAG,CAAEC,KAAF,EAASC,aAAT,EAAwBC,aAAxB,KAA2C;AAC9E,MAAK,OAAOF,KAAP,KAAiB,UAAtB,EAAmC;AAClC,WAAOA,KAAK,CAAEC,aAAF,CAAZ;AACA,GAFD,MAEO,IAAKD,KAAK,KAAK,IAAf,EAAsB;AAC5B,WAAOE,aAAP;AACA;;AACD,SAAOF,KAAP;AACA,CAPD;;AASe,SAASG,UAAT,OASX;AAAA,MATgC;AACnCC,IAAAA,KADmC;AAEnCH,IAAAA,aAFmC;AAGnCI,IAAAA,eAHmC;AAInCC,IAAAA,gBAJmC;AAKnCC,IAAAA,uBALmC;AAMnCL,IAAAA,aANmC;AAOnCM,IAAAA,aAPmC;AAQnCC,IAAAA;AARmC,GAShC;AACH,SACC,4BAAC,2BAAD;AACC,IAAA,KAAK,EAAGL,KADT;AAEC,IAAA,WAAW,EAAGK,WAFf;AAGC,IAAA,aAAa,EAAGC,MAAM,CAACC,MAAP,CAAeV,aAAf;AAHjB,KAIMI,eAJN,GAMGC,gBAAgB,KACfM,KAAK,CAACC,OAAN,CAAeP,gBAAf,IACCA,gBAAgB,CAACQ,GAAjB,CACA,SAA+C;AAAA,QAA7C;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA,SAAnB;AAA8B,SAAGC;AAAjC,KAA6C;AAC9CF,IAAAA,eAAe,GAAGhB,2BAA2B,CAC5CgB,eAD4C,EAE5Cd,aAF4C,EAG5CM,uBAH4C,CAA7C;AAKAS,IAAAA,SAAS,GAAGjB,2BAA2B,CACtCiB,SADsC,EAEtCf,aAFsC,EAGtCC,aAHsC,CAAvC;AAKA,WACC,4BAAC,wBAAD;AACC,MAAA,GAAG,EAAI,GAAGa,eAAiB,IAAIC,SAAW,EAD3C;AAEC,MAAA,eAAe,EAAGD,eAFnB;AAGC,MAAA,SAAS,EAAGC;AAHb,OAIMC,IAJN,EADD;AAQA,GApBD,CADD,GAuBC,iBAAKhB,aAAL,EAAoB,SAAiB;AAAA,QAAf;AAAEiB,MAAAA;AAAF,KAAe;AACrC,QAAI;AACHH,MAAAA,eADG;AAEHC,MAAAA;AAFG,QAGAV,gBAHJ;AAIAS,IAAAA,eAAe,GAAGhB,2BAA2B,CAC5CgB,eAAe,IAAIG,KADyB,EAE5CjB,aAF4C,EAG5CM,uBAH4C,CAA7C;AAKAS,IAAAA,SAAS,GAAGjB,2BAA2B,CACtCiB,SAAS,IAAIE,KADyB,EAEtCjB,aAFsC,EAGtCC,aAHsC,CAAvC;AAKA,WACC,4BAAC,wBAAD,6BACMI,gBADN;AAEC,MAAA,GAAG,EAAI,GAAGS,eAAiB,IAAIC,SAAW,EAF3C;AAGC,MAAA,eAAe,EAAGD,eAHnB;AAIC,MAAA,SAAS,EAAGC;AAJb,OADD;AAQC,GAvBD,CAxBc,CANnB,EAsDG,OAAOR,aAAP,KAAyB,UAAzB,GACCA,aAAa,CAAEP,aAAF,CADd,GAECO,aAxDJ,CADD;AA4DA","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport PanelColorSettings from '../panel-color-settings';\nimport ContrastChecker from '../contrast-checker';\n\nconst resolveContrastCheckerColor = ( color, colorSettings, detectedColor ) => {\n\tif ( typeof color === 'function' ) {\n\t\treturn color( colorSettings );\n\t} else if ( color === true ) {\n\t\treturn detectedColor;\n\t}\n\treturn color;\n};\n\nexport default function ColorPanel( {\n\ttitle,\n\tcolorSettings,\n\tcolorPanelProps,\n\tcontrastCheckers,\n\tdetectedBackgroundColor,\n\tdetectedColor,\n\tpanelChildren,\n\tinitialOpen,\n} ) {\n\treturn (\n\t\t<PanelColorSettings\n\t\t\ttitle={ title }\n\t\t\tinitialOpen={ initialOpen }\n\t\t\tcolorSettings={ Object.values( colorSettings ) }\n\t\t\t{ ...colorPanelProps }\n\t\t>\n\t\t\t{ contrastCheckers &&\n\t\t\t\t( Array.isArray( contrastCheckers )\n\t\t\t\t\t? contrastCheckers.map(\n\t\t\t\t\t\t\t( { backgroundColor, textColor, ...rest } ) => {\n\t\t\t\t\t\t\t\tbackgroundColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\t\tdetectedBackgroundColor\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\ttextColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\t\ttextColor,\n\t\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\t\tdetectedColor\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ContrastChecker\n\t\t\t\t\t\t\t\t\t\tkey={ `${ backgroundColor }-${ textColor }` }\n\t\t\t\t\t\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t\t\t\t\t\t\ttextColor={ textColor }\n\t\t\t\t\t\t\t\t\t\t{ ...rest }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t  )\n\t\t\t\t\t: map( colorSettings, ( { value } ) => {\n\t\t\t\t\t\t\tlet {\n\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\ttextColor,\n\t\t\t\t\t\t\t} = contrastCheckers;\n\t\t\t\t\t\t\tbackgroundColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\tbackgroundColor || value,\n\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\tdetectedBackgroundColor\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\ttextColor = resolveContrastCheckerColor(\n\t\t\t\t\t\t\t\ttextColor || value,\n\t\t\t\t\t\t\t\tcolorSettings,\n\t\t\t\t\t\t\t\tdetectedColor\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ContrastChecker\n\t\t\t\t\t\t\t\t\t{ ...contrastCheckers }\n\t\t\t\t\t\t\t\t\tkey={ `${ backgroundColor }-${ textColor }` }\n\t\t\t\t\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t\t\t\t\t\ttextColor={ textColor }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t  } ) ) }\n\t\t\t{ typeof panelChildren === 'function'\n\t\t\t\t? panelChildren( colorSettings )\n\t\t\t\t: panelChildren }\n\t\t</PanelColorSettings>\n\t);\n}\n"]}

package/build/components/colors/index.js

@@ -1,10 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "createCustomColorsHOC", {
+  enumerable: true,
+  get: function () {
+    return _withColors.createCustomColorsHOC;
+  }
+});
 Object.defineProperty(exports, "getColorClassName", {
   enumerable: true,
   get: function () {
@@ -23,12 +27,6 @@ Object.defineProperty(exports, "getColorObjectByColorValue", {
     return _utils.getColorObjectByColorValue;
   }
 });
-Object.defineProperty(exports, "createCustomColorsHOC", {
-  enumerable: true,
-  get: function () {
-    return _withColors.createCustomColorsHOC;
-  }
-});
 Object.defineProperty(exports, "withColors", {
   enumerable: true,
   get: function () {
@@ -39,4 +37,8 @@ Object.defineProperty(exports, "withColors", {
 var _utils = require("./utils");
 
 var _withColors = _interopRequireWildcard(require("./with-colors"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/build/components/colors/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAKA","sourcesContent":["export {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n\tgetColorObjectByColorValue,\n} from './utils';\nexport { createCustomColorsHOC, default as withColors } from './with-colors';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAKA","sourcesContent":["export {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n\tgetColorObjectByColorValue,\n} from './utils';\nexport { createCustomColorsHOC, default as withColors } from './with-colors';\n"]}

package/build/components/colors/utils.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getColorClassName = getColorClassName;
-exports.getMostReadableColor = getMostReadableColor;
 exports.getColorObjectByColorValue = exports.getColorObjectByAttributeValues = void 0;
+exports.getMostReadableColor = getMostReadableColor;
 
 var _lodash = require("lodash");
 
@@ -99,8 +99,11 @@ function getColorClassName(colorContextName, colorSlug) {
 
 function getMostReadableColor(colors, colorValue) {
   const colordColor = (0, _colord.colord)(colorValue);
-  return (0, _lodash.maxBy)(colors, ({
-    color
-  }) => colordColor.contrast(color)).color;
+  return (0, _lodash.maxBy)(colors, _ref => {
+    let {
+      color
+    } = _ref;
+    return colordColor.contrast(color);
+  }).color;
 }
 //# sourceMappingURL=utils.js.map

package/build/components/colors/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","contrast"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAMA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,MAAMC,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAG,kBAAMH,MAAN,EAAc;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAd,CAAjB;;AAEA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAfM;AAiBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAO,kBAAMP,MAAN,EAAc;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAd,CAAP;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAO,uBAAWD,SAAX,CAAwB,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAG,oBAAQN,UAAR,CAApB;AACA,SAAO,mBAAOP,MAAP,EAAe,CAAE;AAAEK,IAAAA;AAAF,GAAF,KAAiBQ,WAAW,CAACC,QAAZ,CAAsBT,KAAtB,CAAhC,EACLA,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { find, kebabCase, maxBy } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = find( colors, { slug: definedColor } );\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn find( colors, { color: colorValue } );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\treturn maxBy( colors, ( { color } ) => colordColor.contrast( color ) )\n\t\t.color;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","contrast"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAMA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,MAAMC,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAG,kBAAMH,MAAN,EAAc;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAd,CAAjB;;AAEA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAfM;AAiBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAO,kBAAMP,MAAN,EAAc;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAd,CAAP;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAO,uBAAWD,SAAX,CAAwB,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAG,oBAAQN,UAAR,CAApB;AACA,SAAO,mBAAOP,MAAP,EAAe;AAAA,QAAE;AAAEK,MAAAA;AAAF,KAAF;AAAA,WAAiBQ,WAAW,CAACC,QAAZ,CAAsBT,KAAtB,CAAjB;AAAA,GAAf,EACLA,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { find, kebabCase, maxBy } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = find( colors, { slug: definedColor } );\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn find( colors, { color: colorValue } );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\treturn maxBy( colors, ( { color } ) => colordColor.contrast( color ) )\n\t\t.color;\n}\n"]}

package/build/components/colors/with-colors.js

@@ -114,10 +114,11 @@ function createColorHOC(colorTypes, withColorPalette) {
         };
       }
 
-      static getDerivedStateFromProps({
-        attributes,
-        colors
-      }, previousState) {
+      static getDerivedStateFromProps(_ref, previousState) {
+        let {
+          attributes,
+          colors
+        } = _ref;
         return (0, _lodash.reduce)(colorMap, (newState, colorContext, colorAttributeName) => {
           const colorObject = (0, _utils.getColorObjectByAttributeValues)(colors, attributes[colorAttributeName], attributes[`custom${(0, _lodash.upperFirst)(colorAttributeName)}`]);
           const previousColorObject = previousState[colorAttributeName];
@@ -176,8 +177,13 @@ function createColorHOC(colorTypes, withColorPalette) {
 
 
 function createCustomColorsHOC(colorsArray) {
-  return (...colorTypes) => {
+  return function () {
     const withColorPalette = withCustomColorPalette(colorsArray);
+
+    for (var _len = arguments.length, colorTypes = new Array(_len), _key = 0; _key < _len; _key++) {
+      colorTypes[_key] = arguments[_key];
+    }
+
     return (0, _compose.createHigherOrderComponent)(createColorHOC(colorTypes, withColorPalette), 'withCustomColors');
   };
 }
@@ -207,8 +213,13 @@ function createCustomColorsHOC(colorsArray) {
  */
 
 
-function withColors(...colorTypes) {
+function withColors() {
   const withColorPalette = withEditorColorPalette();
+
+  for (var _len2 = arguments.length, colorTypes = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    colorTypes[_key2] = arguments[_key2];
+  }
+
   return (0, _compose.createHigherOrderComponent)(createColorHOC(colorTypes, withColorPalette), 'withColors');
 }
 //# sourceMappingURL=with-colors.js.map

package/build/components/colors/with-colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["DEFAULT_COLORS","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","colors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isString, kebabCase, reduce, upperFirst } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport useSetting from '../use-setting';\n\nconst DEFAULT_COLORS = [];\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst colors = useSetting( 'color.palette' ) || DEFAULT_COLORS;\n\t\t\treturn <WrappedComponent { ...props } colors={ colors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {WPComponent} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( isString( colorType )\n\t\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t\t: colorType ),\n\t\t\t};\n\t\t},\n\t\t{}\n\t);\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor: this.getMostReadableColor.bind(\n\t\t\t\t\t\t\tthis\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName = upperFirst(\n\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t( newState, colorContext, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t\t) }`\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[\n\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t] = previousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["DEFAULT_COLORS","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","colors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isString, kebabCase, reduce, upperFirst } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport useSetting from '../use-setting';\n\nconst DEFAULT_COLORS = [];\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst colors = useSetting( 'color.palette' ) || DEFAULT_COLORS;\n\t\t\treturn <WrappedComponent { ...props } colors={ colors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {WPComponent} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( isString( colorType )\n\t\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t\t: colorType ),\n\t\t\t};\n\t\t},\n\t\t{}\n\t);\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor: this.getMostReadableColor.bind(\n\t\t\t\t\t\t\tthis\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName = upperFirst(\n\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t( newState, colorContext, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t\t) }`\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[\n\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t] = previousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"]}

package/build/components/colors-gradients/control.js

@@ -19,10 +19,6 @@ var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
-var _colors = require("../colors");
-
-var _gradients = require("../gradients");
-
 var _useSetting = _interopRequireDefault(require("../use-setting"));
 
 /**
@@ -36,55 +32,24 @@ var _useSetting = _interopRequireDefault(require("../use-setting"));
 /**
  * Internal dependencies
  */
-// translators: first %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = (0, _i18n.__)('(Color: %s)'); // translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
-
-const gradientIndicatorAriaLabel = (0, _i18n.__)('(Gradient: %s)');
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 
-function VisualLabel({
-  colors,
-  gradients,
-  label,
-  currentTab,
-  colorValue,
-  gradientValue
-}) {
-  let value, ariaLabel;
-
-  if (currentTab === 'color') {
-    if (colorValue) {
-      value = colorValue;
-      const colorObject = (0, _colors.getColorObjectByColorValue)(colors, value);
-      const colorName = colorObject && colorObject.name;
-      ariaLabel = (0, _i18n.sprintf)(colorIndicatorAriaLabel, colorName || value);
-    }
-  } else if (currentTab === 'gradient' && gradientValue) {
-    value = gradientValue;
-    const gradientObject = (0, _gradients.__experimentalGetGradientObjectByGradientValue)(gradients, value);
-    const gradientName = gradientObject && gradientObject.name;
-    ariaLabel = (0, _i18n.sprintf)(gradientIndicatorAriaLabel, gradientName || value);
-  }
-
-  return (0, _element.createElement)(_element.Fragment, null, label, !!value && (0, _element.createElement)(_components.ColorIndicator, {
-    colorValue: value,
-    "aria-label": ariaLabel
-  }));
-}
-
-function ColorGradientControlInner({
-  colors,
-  gradients,
-  disableCustomColors,
-  disableCustomGradients,
-  className,
-  label,
-  onColorChange,
-  onGradientChange,
-  colorValue,
-  gradientValue,
-  clearable
-}) {
+function ColorGradientControlInner(_ref) {
+  let {
+    colors,
+    gradients,
+    disableCustomColors,
+    disableCustomGradients,
+    __experimentalHasMultipleOrigins,
+    className,
+    label,
+    onColorChange,
+    onGradientChange,
+    colorValue,
+    gradientValue,
+    clearable,
+    showTitle = true
+  } = _ref;
   const canChooseAColor = onColorChange && (!(0, _lodash.isEmpty)(colors) || !disableCustomColors);
   const canChooseAGradient = onGradientChange && (!(0, _lodash.isEmpty)(gradients) || !disableCustomGradients);
   const [currentTab, setCurrentTab] = (0, _element.useState)(gradientValue ? 'gradient' : !!canChooseAColor && 'color');
@@ -96,15 +61,10 @@ function ColorGradientControlInner({
   return (0, _element.createElement)(_components.BaseControl, {
     className: (0, _classnames.default)('block-editor-color-gradient-control', className)
   }, (0, _element.createElement)("fieldset", null, (0, _element.createElement)(_components.__experimentalVStack, {
-    space: 3
-  }, (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
+    spacing: 1
+  }, showTitle && (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
     className: "block-editor-color-gradient-control__color-indicator"
-  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, (0, _element.createElement)(VisualLabel, {
-    currentTab: currentTab,
-    label: label,
-    colorValue: colorValue,
-    gradientValue: gradientValue
-  })))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
     value: currentTab,
     onChange: setCurrentTab,
     label: (0, _i18n.__)('Select color type'),
@@ -124,6 +84,7 @@ function ColorGradientControlInner({
     } : onColorChange,
     colors,
     disableCustomColors,
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     clearable: clearable
   }), (currentTab === 'gradient' || !canChooseAColor) && (0, _element.createElement)(_components.GradientPicker, {
     value: gradientValue,
@@ -133,6 +94,7 @@ function ColorGradientControlInner({
     } : onGradientChange,
     gradients,
     disableCustomGradients,
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     clearable: clearable
   }))));
 }