@wordpress/block-editor 12.2.0 → 12.3.1

package/build/components/child-layout-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/child-layout-control/index.js"],"names":["helpText","selfStretch","parentLayout","orientation","ChildLayoutControl","value","childLayout","onChange","flexSize","childLayoutOrientation","newFlexSize"],"mappings":";;;;;;;;AASA;;AANA;;AAKA;;AARA;AACA;AACA;AASA,SAASA,QAAT,CAAmBC,WAAnB,EAAgCC,YAAhC,EAA+C;AAC9C,QAAM;AAAEC,IAAAA,WAAW,GAAG;AAAhB,MAAiCD,YAAvC;;AAEA,MAAKD,WAAW,KAAK,MAArB,EAA8B;AAC7B,WAAO,cAAI,kCAAJ,CAAP;AACA;;AACD,MAAKA,WAAW,KAAK,OAAhB,IAA2BE,WAAW,KAAK,YAAhD,EAA+D;AAC9D,WAAO,cAAI,wBAAJ,CAAP;AACA,GAFD,MAEO,IAAKF,WAAW,KAAK,OAArB,EAA+B;AACrC,WAAO,cAAI,yBAAJ,CAAP;AACA;;AACD,SAAO,cAAI,eAAJ,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACe,SAASG,kBAAT,OAIX;AAAA,MAJwC;AAC3CC,IAAAA,KAAK,EAAEC,WAAW,GAAG,EADsB;AAE3CC,IAAAA,QAF2C;AAG3CL,IAAAA;AAH2C,GAIxC;AACH,QAAM;AAAED,IAAAA,WAAF;AAAeO,IAAAA;AAAf,MAA4BF,WAAlC;AAEA,0BAAW,MAAM;AAChB,QAAKL,WAAW,KAAK,OAAhB,IAA2B,CAAEO,QAAlC,EAA6C;AAC5CD,MAAAA,QAAQ,CAAE,EACT,GAAGD,WADM;AAETL,QAAAA,WAAW,EAAE;AAFJ,OAAF,CAAR;AAIA;AACD,GAPD,EAOG,EAPH;AASA,SACC,qDACC,4BAAC,4CAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,IAAI,EAAG,kBAFR;AAGC,IAAA,KAAK,EAAGQ,sBAAsB,CAAEP,YAAF,CAH/B;AAIC,IAAA,KAAK,EAAGD,WAAW,IAAI,KAJxB;AAKC,IAAA,IAAI,EAAGD,QAAQ,CAAEC,WAAF,EAAeC,YAAf,CALhB;AAMC,IAAA,QAAQ,EAAKG,KAAF,IAAa;AACvB,YAAMK,WAAW,GAAGL,KAAK,KAAK,OAAV,GAAoB,IAApB,GAA2BG,QAA/C;AACAD,MAAAA,QAAQ,CAAE,EACT,GAAGD,WADM;AAETL,QAAAA,WAAW,EAAEI,KAFJ;AAGTG,QAAAA,QAAQ,EAAEE;AAHD,OAAF,CAAR;AAKA,KAbF;AAcC,IAAA,OAAO,EAAG;AAdX,KAgBC,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAG,KADP;AAEC,IAAA,KAAK,EAAG,KAFT;AAGC,IAAA,KAAK,EAAG,cAAI,KAAJ;AAHT,IAhBD,EAqBC,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAG,MADP;AAEC,IAAA,KAAK,EAAG,MAFT;AAGC,IAAA,KAAK,EAAG,cAAI,MAAJ;AAHT,IArBD,EA0BC,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAG,OADP;AAEC,IAAA,KAAK,EAAG,OAFT;AAGC,IAAA,KAAK,EAAG,cAAI,OAAJ;AAHT,IA1BD,CADD,EAiCGT,WAAW,KAAK,OAAhB,IACD,4BAAC,qCAAD;AACC,IAAA,IAAI,EAAG,kBADR;AAEC,IAAA,QAAQ,EAAKI,KAAF,IAAa;AACvBE,MAAAA,QAAQ,CAAE,EACT,GAAGD,WADM;AAETE,QAAAA,QAAQ,EAAEH;AAFD,OAAF,CAAR;AAIA,KAPF;AAQC,IAAA,KAAK,EAAGG;AART,IAlCF,CADD;AAgDA;;AAEM,SAASC,sBAAT,CAAiCP,YAAjC,EAAgD;AACtD,QAAM;AAAEC,IAAAA,WAAW,GAAG;AAAhB,MAAiCD,YAAvC;AAEA,SAAOC,WAAW,KAAK,YAAhB,GAA+B,cAAI,OAAJ,CAA/B,GAA+C,cAAI,QAAJ,CAAtD;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\n\nfunction helpText( selfStretch, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\tif ( selfStretch === 'fill' ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif ( selfStretch === 'fixed' && orientation === 'horizontal' ) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( selfStretch === 'fixed' ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props              Props.\n * @param {Object}   props.value        The child layout value.\n * @param {Function} props.onChange     Function to update the child layout value.\n * @param {Object}   props.parentLayout The parent layout value.\n *\n * @return {WPElement} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst { selfStretch, flexSize } = childLayout;\n\n\tuseEffect( () => {\n\t\tif ( selfStretch === 'fixed' && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: 'fit',\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ToggleGroupControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ selfStretch || 'fit' }\n\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = value !== 'fixed' ? null : flexSize;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...childLayout,\n\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock={ true }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fit' }\n\t\t\t\t\tvalue={ 'fit' }\n\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fill' }\n\t\t\t\t\tvalue={ 'fill' }\n\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\tvalue={ 'fixed' }\n\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...childLayout,\n\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/child-layout-control/index.js"],"names":["helpText","selfStretch","parentLayout","orientation","ChildLayoutControl","value","childLayout","onChange","flexSize","childLayoutOrientation","newFlexSize"],"mappings":";;;;;;;;AASA;;AANA;;AAKA;;AARA;AACA;AACA;AASA,SAASA,QAAT,CAAmBC,WAAnB,EAAgCC,YAAhC,EAA+C;AAC9C,QAAM;AAAEC,IAAAA,WAAW,GAAG;AAAhB,MAAiCD,YAAvC;;AAEA,MAAKD,WAAW,KAAK,MAArB,EAA8B;AAC7B,WAAO,cAAI,kCAAJ,CAAP;AACA;;AACD,MAAKA,WAAW,KAAK,OAAhB,IAA2BE,WAAW,KAAK,YAAhD,EAA+D;AAC9D,WAAO,cAAI,wBAAJ,CAAP;AACA,GAFD,MAEO,IAAKF,WAAW,KAAK,OAArB,EAA+B;AACrC,WAAO,cAAI,yBAAJ,CAAP;AACA;;AACD,SAAO,cAAI,eAAJ,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACe,SAASG,kBAAT,CAA6B;AAC3CC,EAAAA,KAAK,EAAEC,WAAW,GAAG,EADsB;AAE3CC,EAAAA,QAF2C;AAG3CL,EAAAA;AAH2C,CAA7B,EAIX;AACH,QAAM;AAAED,IAAAA,WAAF;AAAeO,IAAAA;AAAf,MAA4BF,WAAlC;AAEA,0BAAW,MAAM;AAChB,QAAKL,WAAW,KAAK,OAAhB,IAA2B,CAAEO,QAAlC,EAA6C;AAC5CD,MAAAA,QAAQ,CAAE,EACT,GAAGD,WADM;AAETL,QAAAA,WAAW,EAAE;AAFJ,OAAF,CAAR;AAIA;AACD,GAPD,EAOG,EAPH;AASA,SACC,qDACC,4BAAC,4CAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,IAAI,EAAG,kBAFR;AAGC,IAAA,KAAK,EAAGQ,sBAAsB,CAAEP,YAAF,CAH/B;AAIC,IAAA,KAAK,EAAGD,WAAW,IAAI,KAJxB;AAKC,IAAA,IAAI,EAAGD,QAAQ,CAAEC,WAAF,EAAeC,YAAf,CALhB;AAMC,IAAA,QAAQ,EAAKG,KAAF,IAAa;AACvB,YAAMK,WAAW,GAAGL,KAAK,KAAK,OAAV,GAAoB,IAApB,GAA2BG,QAA/C;AACAD,MAAAA,QAAQ,CAAE,EACT,GAAGD,WADM;AAETL,QAAAA,WAAW,EAAEI,KAFJ;AAGTG,QAAAA,QAAQ,EAAEE;AAHD,OAAF,CAAR;AAKA,KAbF;AAcC,IAAA,OAAO,EAAG;AAdX,KAgBC,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAG,KADP;AAEC,IAAA,KAAK,EAAG,KAFT;AAGC,IAAA,KAAK,EAAG,cAAI,KAAJ;AAHT,IAhBD,EAqBC,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAG,MADP;AAEC,IAAA,KAAK,EAAG,MAFT;AAGC,IAAA,KAAK,EAAG,cAAI,MAAJ;AAHT,IArBD,EA0BC,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAG,OADP;AAEC,IAAA,KAAK,EAAG,OAFT;AAGC,IAAA,KAAK,EAAG,cAAI,OAAJ;AAHT,IA1BD,CADD,EAiCGT,WAAW,KAAK,OAAhB,IACD,4BAAC,qCAAD;AACC,IAAA,IAAI,EAAG,kBADR;AAEC,IAAA,QAAQ,EAAKI,KAAF,IAAa;AACvBE,MAAAA,QAAQ,CAAE,EACT,GAAGD,WADM;AAETE,QAAAA,QAAQ,EAAEH;AAFD,OAAF,CAAR;AAIA,KAPF;AAQC,IAAA,KAAK,EAAGG;AART,IAlCF,CADD;AAgDA;;AAEM,SAASC,sBAAT,CAAiCP,YAAjC,EAAgD;AACtD,QAAM;AAAEC,IAAAA,WAAW,GAAG;AAAhB,MAAiCD,YAAvC;AAEA,SAAOC,WAAW,KAAK,YAAhB,GAA+B,cAAI,OAAJ,CAA/B,GAA+C,cAAI,QAAJ,CAAtD;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\n\nfunction helpText( selfStretch, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\tif ( selfStretch === 'fill' ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif ( selfStretch === 'fixed' && orientation === 'horizontal' ) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( selfStretch === 'fixed' ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props              Props.\n * @param {Object}   props.value        The child layout value.\n * @param {Function} props.onChange     Function to update the child layout value.\n * @param {Object}   props.parentLayout The parent layout value.\n *\n * @return {WPElement} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst { selfStretch, flexSize } = childLayout;\n\n\tuseEffect( () => {\n\t\tif ( selfStretch === 'fixed' && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: 'fit',\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ToggleGroupControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ selfStretch || 'fit' }\n\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = value !== 'fixed' ? null : flexSize;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...childLayout,\n\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock={ true }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fit' }\n\t\t\t\t\tvalue={ 'fit' }\n\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fill' }\n\t\t\t\t\tvalue={ 'fill' }\n\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\tvalue={ 'fixed' }\n\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...childLayout,\n\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n"]}

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

@@ -9,24 +9,21 @@ exports.default = ColorPaletteControl;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _control = _interopRequireDefault(require("../colors-gradients/control"));
 
 /**
  * Internal dependencies
  */
-function ColorPaletteControl(_ref) {
-  let {
-    onChange,
-    value,
-    ...otherProps
-  } = _ref;
-  return (0, _element.createElement)(_control.default, (0, _extends2.default)({}, otherProps, {
+function ColorPaletteControl({
+  onChange,
+  value,
+  ...otherProps
+}) {
+  return (0, _element.createElement)(_control.default, { ...otherProps,
     onColorChange: onChange,
     colorValue: value,
     gradients: [],
     disableCustomGradients: true
-  }));
+  });
 }
 //# sourceMappingURL=control.js.map

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,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"]}
+{"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,OACMA,UADN;AAEC,IAAA,aAAa,EAAGF,QAFjB;AAGC,IAAA,UAAU,EAAGC,KAHd;AAIC,IAAA,SAAS,EAAG,EAJb;AAKC,IAAA,sBAAsB,EAAG;AAL1B,IADD;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-palette/with-color-context.js

@@ -9,18 +9,10 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _lodash = require("lodash");
-
 var _compose = require("@wordpress/compose");
 
 var _useSetting = _interopRequireDefault(require("../use-setting"));
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -34,12 +26,12 @@ var _default = (0, _compose.createHigherOrderComponent)(WrappedComponent => {
     const disableCustomColorsFeature = !(0, _useSetting.default)('color.custom');
     const colors = props.colors === undefined ? colorsFeature : props.colors;
     const disableCustomColors = props.disableCustomColors === undefined ? disableCustomColorsFeature : props.disableCustomColors;
-    const hasColorsToChoose = !(0, _lodash.isEmpty)(colors) || !disableCustomColors;
-    return (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, props, {
+    const hasColorsToChoose = colors && colors.length > 0 || !disableCustomColors;
+    return (0, _element.createElement)(WrappedComponent, { ...props,
       colors,
       disableCustomColors,
       hasColorsToChoose
-    }));
+    });
   };
 }, 'withColorContext');
 

package/build/components/color-palette/with-color-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/color-palette/with-color-context.js"],"names":["WrappedComponent","props","colorsFeature","disableCustomColorsFeature","colors","undefined","disableCustomColors","hasColorsToChoose"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;eAGe,yCAA8BA,gBAAF,IAAwB;AAClE,SAASC,KAAF,IAAa;AACnB,UAAMC,aAAa,GAAG,yBAAY,eAAZ,CAAtB;AACA,UAAMC,0BAA0B,GAAG,CAAE,yBAAY,cAAZ,CAArC;AACA,UAAMC,MAAM,GACXH,KAAK,CAACG,MAAN,KAAiBC,SAAjB,GAA6BH,aAA7B,GAA6CD,KAAK,CAACG,MADpD;AAEA,UAAME,mBAAmB,GACxBL,KAAK,CAACK,mBAAN,KAA8BD,SAA9B,GACGF,0BADH,GAEGF,KAAK,CAACK,mBAHV;AAIA,UAAMC,iBAAiB,GAAG,CAAE,qBAASH,MAAT,CAAF,IAAuB,CAAEE,mBAAnD;AACA,WACC,4BAAC,gBAAD,6BAEKL,KAFL;AAGEG,MAAAA,MAHF;AAIEE,MAAAA,mBAJF;AAKEC,MAAAA;AALF,OADD;AAUA,GApBD;AAqBA,CAtBc,EAsBZ,kBAtBY,C","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nexport default createHigherOrderComponent( ( WrappedComponent ) => {\n\treturn ( props ) => {\n\t\tconst colorsFeature = useSetting( 'color.palette' );\n\t\tconst disableCustomColorsFeature = ! useSetting( 'color.custom' );\n\t\tconst colors =\n\t\t\tprops.colors === undefined ? colorsFeature : props.colors;\n\t\tconst disableCustomColors =\n\t\t\tprops.disableCustomColors === undefined\n\t\t\t\t? disableCustomColorsFeature\n\t\t\t\t: props.disableCustomColors;\n\t\tconst hasColorsToChoose = ! isEmpty( colors ) || ! disableCustomColors;\n\t\treturn (\n\t\t\t<WrappedComponent\n\t\t\t\t{ ...{\n\t\t\t\t\t...props,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\thasColorsToChoose,\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t};\n}, 'withColorContext' );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/color-palette/with-color-context.js"],"names":["WrappedComponent","props","colorsFeature","disableCustomColorsFeature","colors","undefined","disableCustomColors","hasColorsToChoose","length"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;eAGe,yCAA8BA,gBAAF,IAAwB;AAClE,SAASC,KAAF,IAAa;AACnB,UAAMC,aAAa,GAAG,yBAAY,eAAZ,CAAtB;AACA,UAAMC,0BAA0B,GAAG,CAAE,yBAAY,cAAZ,CAArC;AACA,UAAMC,MAAM,GACXH,KAAK,CAACG,MAAN,KAAiBC,SAAjB,GAA6BH,aAA7B,GAA6CD,KAAK,CAACG,MADpD;AAEA,UAAME,mBAAmB,GACxBL,KAAK,CAACK,mBAAN,KAA8BD,SAA9B,GACGF,0BADH,GAEGF,KAAK,CAACK,mBAHV;AAIA,UAAMC,iBAAiB,GACpBH,MAAM,IAAIA,MAAM,CAACI,MAAP,GAAgB,CAA5B,IAAmC,CAAEF,mBADtC;AAEA,WACC,4BAAC,gBAAD,IAEE,GAAGL,KAFL;AAGEG,MAAAA,MAHF;AAIEE,MAAAA,mBAJF;AAKEC,MAAAA;AALF,MADD;AAUA,GArBD;AAsBA,CAvBc,EAuBZ,kBAvBY,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nexport default createHigherOrderComponent( ( WrappedComponent ) => {\n\treturn ( props ) => {\n\t\tconst colorsFeature = useSetting( 'color.palette' );\n\t\tconst disableCustomColorsFeature = ! useSetting( 'color.custom' );\n\t\tconst colors =\n\t\t\tprops.colors === undefined ? colorsFeature : props.colors;\n\t\tconst disableCustomColors =\n\t\t\tprops.disableCustomColors === undefined\n\t\t\t\t? disableCustomColorsFeature\n\t\t\t\t: props.disableCustomColors;\n\t\tconst hasColorsToChoose =\n\t\t\t( colors && colors.length > 0 ) || ! disableCustomColors;\n\t\treturn (\n\t\t\t<WrappedComponent\n\t\t\t\t{ ...{\n\t\t\t\t\t...props,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\thasColorsToChoose,\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t};\n}, 'withColorContext' );\n"]}

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

@@ -37,11 +37,10 @@ const ColorSelectorSVGIcon = () => (0, _element.createElement)(_components.SVG,
  */
 
 
-const ColorSelectorIcon = _ref => {
-  let {
-    style,
-    className
-  } = _ref;
+const ColorSelectorIcon = ({
+  style,
+  className
+}) => {
   return (0, _element.createElement)("div", {
     className: "block-library-colors-selector__icon-container"
   }, (0, _element.createElement)("div", {
@@ -60,39 +59,33 @@ const ColorSelectorIcon = _ref => {
  */
 
 
-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)))
-    }));
+const renderToggleComponent = ({
+  TextColor,
+  BackgroundColor
+}) => ({
+  onToggle,
+  isOpen
+}) => {
+  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)))
+  }));
 };
 
-const BlockColorsStyleSelector = _ref4 => {
-  let {
-    children,
-    ...other
-  } = _ref4;
+const BlockColorsStyleSelector = ({
+  children,
+  ...other
+}) => {
   (0, _deprecated.default)(`wp.blockEditor.BlockColorsStyleSelector`, {
     alternative: 'block supports API',
     since: '6.1',

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","alternative","since","version","placement"],"mappings":";;;;;;;;;;;AAGA;;AAOA;;AACA;;AACA;;AAZA;AACA;AACA;AAYA,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,GAC1B;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAAF;AAAA,SACA,SAA4B;AAAA,QAA1B;AAAEC,MAAAA,QAAF;AAAYC,MAAAA;AAAZ,KAA0B;;AAC3B,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,GA1BD;AAAA,CADD;;AA6BA,MAAMK,wBAAwB,GAAG,SAA8B;AAAA,MAA5B;AAAEC,IAAAA,QAAF;AAAY,OAAGC;AAAf,GAA4B;AAC9D,2BAAa,yCAAb,EAAuD;AACtDC,IAAAA,WAAW,EAAE,oBADyC;AAEtDC,IAAAA,KAAK,EAAE,KAF+C;AAGtDC,IAAAA,OAAO,EAAE;AAH6C,GAAvD;AAMA,SACC,4BAAC,oBAAD;AACC,IAAA,YAAY,EAAG;AAAEC,MAAAA,SAAS,EAAE;AAAb,KADhB;AAEC,IAAA,SAAS,EAAC,+BAFX;AAGC,IAAA,gBAAgB,EAAC,wCAHlB;AAIC,IAAA,YAAY,EAAGhB,qBAAqB,CAAEY,KAAF,CAJrC;AAKC,IAAA,aAAa,EAAG,MAAMD;AALvB,IADD;AASA,CAhBD;;eAkBeD,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';\nimport deprecated from '@wordpress/deprecated';\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 =\n\t( { TextColor, BackgroundColor } ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst openOnArrowDown = ( event ) => {\n\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonToggle();\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t\t</BackgroundColor>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => {\n\tdeprecated( `wp.blockEditor.BlockColorsStyleSelector`, {\n\t\talternative: 'block supports API',\n\t\tsince: '6.1',\n\t\tversion: '6.3',\n\t} );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\tclassName=\"block-library-colors-selector\"\n\t\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\t\trenderToggle={ renderToggleComponent( other ) }\n\t\t\trenderContent={ () => children }\n\t\t/>\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","alternative","since","version","placement"],"mappings":";;;;;;;;;;;AAGA;;AAOA;;AACA;;AACA;;AAZA;AACA;AACA;AAYA,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,GAC1B,CAAE;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAF,KACA,CAAE;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAF,KAA4B;AAC3B,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,CA3BF;;AA6BA,MAAMK,wBAAwB,GAAG,CAAE;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAF,KAA8B;AAC9D,2BAAa,yCAAb,EAAuD;AACtDC,IAAAA,WAAW,EAAE,oBADyC;AAEtDC,IAAAA,KAAK,EAAE,KAF+C;AAGtDC,IAAAA,OAAO,EAAE;AAH6C,GAAvD;AAMA,SACC,4BAAC,oBAAD;AACC,IAAA,YAAY,EAAG;AAAEC,MAAAA,SAAS,EAAE;AAAb,KADhB;AAEC,IAAA,SAAS,EAAC,+BAFX;AAGC,IAAA,gBAAgB,EAAC,wCAHlB;AAIC,IAAA,YAAY,EAAGhB,qBAAqB,CAAEY,KAAF,CAJrC;AAKC,IAAA,aAAa,EAAG,MAAMD;AALvB,IADD;AASA,CAhBD;;eAkBeD,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';\nimport deprecated from '@wordpress/deprecated';\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 =\n\t( { TextColor, BackgroundColor } ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst openOnArrowDown = ( event ) => {\n\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonToggle();\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t\t</BackgroundColor>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => {\n\tdeprecated( `wp.blockEditor.BlockColorsStyleSelector`, {\n\t\talternative: 'block supports API',\n\t\tsince: '6.1',\n\t\tversion: '6.3',\n\t} );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\tclassName=\"block-library-colors-selector\"\n\t\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\t\trenderToggle={ renderToggleComponent( other ) }\n\t\t\trenderContent={ () => children }\n\t\t/>\n\t);\n};\n\nexport default BlockColorsStyleSelector;\n"]}

package/build/components/colors/utils.js

@@ -9,17 +9,21 @@ exports.getColorClassName = getColorClassName;
 exports.getColorObjectByColorValue = exports.getColorObjectByAttributeValues = void 0;
 exports.getMostReadableColor = getMostReadableColor;
 
-var _lodash = require("lodash");
-
 var _colord = require("colord");
 
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 
+var _object = require("../../utils/object");
+
 /**
  * External dependencies
  */
+
+/**
+ * Internal dependencies
+ */
 (0, _colord.extend)([_names.default, _a11y.default]);
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
@@ -36,7 +40,7 @@ var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 
 const getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
   if (definedColor) {
-    const colorObj = colors === null || colors === void 0 ? void 0 : colors.find(color => color.slug === definedColor);
+    const colorObj = colors?.find(color => color.slug === definedColor);
 
     if (colorObj) {
       return colorObj;
@@ -61,7 +65,7 @@ const getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
 exports.getColorObjectByAttributeValues = getColorObjectByAttributeValues;
 
 const getColorObjectByColorValue = (colors, colorValue) => {
-  return colors === null || colors === void 0 ? void 0 : colors.find(color => color.color === colorValue);
+  return colors?.find(color => color.color === colorValue);
 };
 /**
  * Returns a class based on the context a color is being used and its slug.
@@ -81,7 +85,7 @@ function getColorClassName(colorContextName, colorSlug) {
     return undefined;
   }
 
-  return `has-${(0, _lodash.kebabCase)(colorSlug)}-${colorContextName}`;
+  return `has-${(0, _object.kebabCase)(colorSlug)}-${colorContextName}`;
 }
 /**
  * Given an array of color objects and a color value returns the color value of the most readable color in the array.
@@ -96,12 +100,9 @@ function getColorClassName(colorContextName, colorSlug) {
 function getMostReadableColor(colors, colorValue) {
   const colordColor = (0, _colord.colord)(colorValue);
 
-  const getColorContrast = _ref => {
-    let {
-      color
-    } = _ref;
-    return colordColor.contrast(color);
-  };
+  const getColorContrast = ({
+    color
+  }) => colordColor.contrast(color);
 
   const maxContrast = Math.max(...colors.map(getColorContrast));
   return colors.find(color => getColorContrast(color) === maxContrast).color;

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","find","color","slug","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","getColorContrast","contrast","maxContrast","Math","max","map"],"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,GAAGH,MAAH,aAAGA,MAAH,uBAAGA,MAAM,CAAEI,IAAR,CACdC,KAAF,IAAaA,KAAK,CAACC,IAAN,KAAeL,YADZ,CAAjB;;AAIA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAjBM;AAmBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMK,0BAA0B,GAAG,CAAEP,MAAF,EAAUQ,UAAV,KAA0B;AACnE,SAAOR,MAAP,aAAOA,MAAP,uBAAOA,MAAM,CAAEI,IAAR,CAAgBC,KAAF,IAAaA,KAAK,CAACA,KAAN,KAAgBG,UAA3C,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+Bb,MAA/B,EAAuCQ,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAG,oBAAQN,UAAR,CAApB;;AACA,QAAMO,gBAAgB,GAAG;AAAA,QAAE;AAAEV,MAAAA;AAAF,KAAF;AAAA,WAAiBS,WAAW,CAACE,QAAZ,CAAsBX,KAAtB,CAAjB;AAAA,GAAzB;;AAEA,QAAMY,WAAW,GAAGC,IAAI,CAACC,GAAL,CAAU,GAAGnB,MAAM,CAACoB,GAAP,CAAYL,gBAAZ,CAAb,CAApB;AACA,SAAOf,MAAM,CAACI,IAAP,CAAeC,KAAF,IAAaU,gBAAgB,CAAEV,KAAF,CAAhB,KAA8BY,WAAxD,EACLZ,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } 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 = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\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 colors?.find( ( color ) => color.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\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\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","find","color","slug","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","getColorContrast","contrast","maxContrast","Math","max","map"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AAVA;AACA;AACA;;AAKA;AACA;AACA;AAGA,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,GAAGH,MAAM,EAAEI,IAAR,CACdC,KAAF,IAAaA,KAAK,CAACC,IAAN,KAAeL,YADZ,CAAjB;;AAIA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAjBM;AAmBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMK,0BAA0B,GAAG,CAAEP,MAAF,EAAUQ,UAAV,KAA0B;AACnE,SAAOR,MAAM,EAAEI,IAAR,CAAgBC,KAAF,IAAaA,KAAK,CAACA,KAAN,KAAgBG,UAA3C,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+Bb,MAA/B,EAAuCQ,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAG,oBAAQN,UAAR,CAApB;;AACA,QAAMO,gBAAgB,GAAG,CAAE;AAAEV,IAAAA;AAAF,GAAF,KAAiBS,WAAW,CAACE,QAAZ,CAAsBX,KAAtB,CAA1C;;AAEA,QAAMY,WAAW,GAAGC,IAAI,CAACC,GAAL,CAAU,GAAGnB,MAAM,CAACoB,GAAP,CAAYL,gBAAZ,CAAb,CAApB;AACA,SAAOf,MAAM,CAACI,IAAP,CAAeC,KAAF,IAAaU,gBAAgB,CAAEV,KAAF,CAAhB,KAA8BY,WAAxD,EACLZ,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * Internal dependencies\n */\nimport { kebabCase } from '../../utils/object';\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 = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\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 colors?.find( ( color ) => color.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\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"]}

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

@@ -10,19 +10,13 @@ exports.default = withColors;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _lodash = require("lodash");
-
 var _compose = require("@wordpress/compose");
 
 var _utils = require("./utils");
 
 var _useSetting = _interopRequireDefault(require("../use-setting"));
 
-/**
- * External dependencies
- */
+var _object = require("../../utils/object");
 
 /**
  * WordPress dependencies
@@ -39,10 +33,7 @@ var _useSetting = _interopRequireDefault(require("../use-setting"));
  *
  * @return {string} Capitalized string.
  */
-const upperFirst = _ref => {
-  let [firstLetter, ...rest] = _ref;
-  return firstLetter.toUpperCase() + rest.join('');
-};
+const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join('');
 /**
  * Higher order component factory for injecting the `colorsArray` argument as
  * the colors prop in the `withCustomColors` HOC.
@@ -53,9 +44,9 @@ const upperFirst = _ref => {
  */
 
 
-const withCustomColorPalette = colorsArray => (0, _compose.createHigherOrderComponent)(WrappedComponent => props => (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withCustomColorPalette = colorsArray => (0, _compose.createHigherOrderComponent)(WrappedComponent => props => (0, _element.createElement)(WrappedComponent, { ...props,
   colors: colorsArray
-})), 'withCustomColorPalette');
+}), 'withCustomColorPalette');
 /**
  * Higher order component factory for injecting the editor colors as the
  * `colors` prop in the `withColors` HOC.
@@ -72,9 +63,9 @@ const withEditorColorPalette = () => (0, _compose.createHigherOrderComponent)(Wr
   const themePalette = (0, _useSetting.default)('color.palette.theme');
   const defaultPalette = (0, _useSetting.default)('color.palette.default');
   const allColors = (0, _element.useMemo)(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
-  return (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, props, {
+  return (0, _element.createElement)(WrappedComponent, { ...props,
     colors: allColors
-  }));
+  });
 }, 'withEditorColorPalette');
 /**
  * Helper function used with `createHigherOrderComponent` to create
@@ -91,7 +82,7 @@ function createColorHOC(colorTypes, withColorPalette) {
   const colorMap = colorTypes.reduce((colorObject, colorType) => {
     return { ...colorObject,
       ...(typeof colorType === 'string' ? {
-        [colorType]: (0, _lodash.kebabCase)(colorType)
+        [colorType]: (0, _object.kebabCase)(colorType)
       } : colorType)
     };
   }, {});
@@ -132,16 +123,14 @@ function createColorHOC(colorTypes, withColorPalette) {
         };
       }
 
-      static getDerivedStateFromProps(_ref2, previousState) {
-        let {
-          attributes,
-          colors
-        } = _ref2;
-        return Object.entries(colorMap).reduce((newState, _ref3) => {
-          let [colorAttributeName, colorContext] = _ref3;
+      static getDerivedStateFromProps({
+        attributes,
+        colors
+      }, previousState) {
+        return Object.entries(colorMap).reduce((newState, [colorAttributeName, colorContext]) => {
           const colorObject = (0, _utils.getColorObjectByAttributeValues)(colors, attributes[colorAttributeName], attributes[`custom${upperFirst(colorAttributeName)}`]);
           const previousColorObject = previousState[colorAttributeName];
-          const previousColor = previousColorObject === null || previousColorObject === void 0 ? void 0 : previousColorObject.color;
+          const previousColor = previousColorObject?.color;
           /**
            * The "and previousColorObject" condition checks that a previous color object was already computed.
            * At the start previousColorObject and colorValue are both equal to undefined
@@ -161,11 +150,12 @@ function createColorHOC(colorTypes, withColorPalette) {
       }
 
       render() {
-        return (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, this.props, {
-          colors: undefined
-        }, this.state, this.setters, {
+        return (0, _element.createElement)(WrappedComponent, { ...this.props,
+          colors: undefined,
+          ...this.state,
+          ...this.setters,
           colorUtils: this.colorUtils
-        }));
+        });
       }
 
     };
@@ -196,13 +186,8 @@ function createColorHOC(colorTypes, withColorPalette) {
 
 
 function createCustomColorsHOC(colorsArray) {
-  return function () {
+  return (...colorTypes) => {
     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');
   };
 }
@@ -232,13 +217,8 @@ function createCustomColorsHOC(colorsArray) {
  */
 
 
-function withColors() {
+function withColors(...colorTypes) {
   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":["upperFirst","firstLetter","rest","toUpperCase","join","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","reduce","colorObject","colorType","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","colors","Object","keys","settersAccumulator","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","entries","newState","colorContext","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, 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\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\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'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\t// Some color settings have a special handling for deprecated flags in `useSetting`,\n\t\t\t// so we can't unwrap them by doing const { ... } = useSetting('color')\n\t\t\t// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.\n\t\t\tconst userPalette = useSetting( 'color.palette.custom' );\n\t\t\tconst themePalette = useSetting( 'color.palette.theme' );\n\t\t\tconst defaultPalette = useSetting( 'color.palette.default' );\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\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 = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\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:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\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 Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\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 Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\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[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\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":["upperFirst","firstLetter","rest","toUpperCase","join","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","reduce","colorObject","colorType","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","colors","Object","keys","settersAccumulator","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","entries","newState","colorContext","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, 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';\nimport { kebabCase } from '../../utils/object';\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\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'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\t// Some color settings have a special handling for deprecated flags in `useSetting`,\n\t\t\t// so we can't unwrap them by doing const { ... } = useSetting('color')\n\t\t\t// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.\n\t\t\tconst userPalette = useSetting( 'color.palette.custom' );\n\t\t\tconst themePalette = useSetting( 'color.palette.theme' );\n\t\t\tconst defaultPalette = useSetting( 'color.palette.default' );\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\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 = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\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:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\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 Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\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 Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\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[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\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

@@ -9,12 +9,8 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _components = require("@wordpress/components");
 
 var _useSetting = _interopRequireDefault(require("../use-setting"));
@@ -43,26 +39,25 @@ const TAB_GRADIENT = {
 };
 const TABS_SETTINGS = [TAB_COLOR, TAB_GRADIENT];
 
-function ColorGradientControlInner(_ref) {
-  let {
-    colors,
-    gradients,
-    disableCustomColors,
-    disableCustomGradients,
-    __experimentalIsRenderedInSidebar,
-    className,
-    label,
-    onColorChange,
-    onGradientChange,
-    colorValue,
-    gradientValue,
-    clearable,
-    showTitle = true,
-    enableAlpha,
-    headingLevel
-  } = _ref;
-  const canChooseAColor = onColorChange && (!(0, _lodash.isEmpty)(colors) || !disableCustomColors);
-  const canChooseAGradient = onGradientChange && (!(0, _lodash.isEmpty)(gradients) || !disableCustomGradients);
+function ColorGradientControlInner({
+  colors,
+  gradients,
+  disableCustomColors,
+  disableCustomGradients,
+  __experimentalIsRenderedInSidebar,
+  className,
+  label,
+  onColorChange,
+  onGradientChange,
+  colorValue,
+  gradientValue,
+  clearable,
+  showTitle = true,
+  enableAlpha,
+  headingLevel
+}) {
+  const canChooseAColor = onColorChange && (colors && colors.length > 0 || !disableCustomColors);
+  const canChooseAGradient = onGradientChange && (gradients && gradients.length > 0 || !disableCustomGradients);
 
   if (!canChooseAColor && !canChooseAGradient) {
     return null;
@@ -123,15 +118,19 @@ function ColorGradientControlSelect(props) {
   colorGradientSettings.gradients = (0, _useSetting.default)('color.gradients');
   colorGradientSettings.disableCustomColors = !(0, _useSetting.default)('color.custom');
   colorGradientSettings.disableCustomGradients = !(0, _useSetting.default)('color.customGradient');
-  return (0, _element.createElement)(ColorGradientControlInner, (0, _extends2.default)({}, colorGradientSettings, props));
+  return (0, _element.createElement)(ColorGradientControlInner, { ...colorGradientSettings,
+    ...props
+  });
 }
 
 function ColorGradientControl(props) {
   if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
-    return (0, _element.createElement)(ColorGradientControlInner, props);
+    return (0, _element.createElement)(ColorGradientControlInner, { ...props
+    });
   }
 
-  return (0, _element.createElement)(ColorGradientControlSelect, props);
+  return (0, _element.createElement)(ColorGradientControlSelect, { ...props
+  });
 }
 
 var _default = ColorGradientControl;