@wordpress/block-editor 7.0.4 → 8.0.3

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

@@ -100,10 +100,11 @@ function createColorHOC(colorTypes, withColorPalette) {
         };
       }
 
-      static getDerivedStateFromProps({
-        attributes,
-        colors
-      }, previousState) {
+      static getDerivedStateFromProps(_ref, previousState) {
+        let {
+          attributes,
+          colors
+        } = _ref;
         return reduce(colorMap, (newState, colorContext, colorAttributeName) => {
           const colorObject = getColorObjectByAttributeValues(colors, attributes[colorAttributeName], attributes[`custom${upperFirst(colorAttributeName)}`]);
           const previousColorObject = previousState[colorAttributeName];
@@ -162,8 +163,13 @@ function createColorHOC(colorTypes, withColorPalette) {
 
 
 export 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 createHigherOrderComponent(createColorHOC(colorTypes, withColorPalette), 'withCustomColors');
   };
 }
@@ -192,8 +198,13 @@ export function createCustomColorsHOC(colorsArray) {
  * @return {Function} Higher-order component.
  */
 
-export default function withColors(...colorTypes) {
+export default function withColors() {
   const withColorPalette = withEditorColorPalette();
+
+  for (var _len2 = arguments.length, colorTypes = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    colorTypes[_key2] = arguments[_key2];
+  }
+
   return createHigherOrderComponent(createColorHOC(colorTypes, withColorPalette), 'withColors');
 }
 //# sourceMappingURL=with-colors.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["isString","kebabCase","reduce","upperFirst","Component","compose","createHigherOrderComponent","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSetting","DEFAULT_COLORS","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","colors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","constructor","setters","createSetters","colorUtils","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":["isString","kebabCase","reduce","upperFirst","Component","compose","createHigherOrderComponent","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSetting","DEFAULT_COLORS","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","colors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,SAAnB,EAA8BC,MAA9B,EAAsCC,UAAtC,QAAwD,QAAxD;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,OAAT,EAAkBC,0BAAlB,QAAoD,oBAApD;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,0BAFD,EAGCC,+BAHD,EAICC,oBAJD,QAKO,SALP;AAMA,OAAOC,UAAP,MAAuB,gBAAvB;AAEA,MAAMC,cAAc,GAAG,EAAvB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,sBAAsB,GAAKC,WAAF,IAC9BR,0BAA0B,CACvBS,gBAAF,IAA0BC,KAAF,IACvB,cAAC,gBAAD,eAAuBA,KAAvB;AAA+B,EAAA,MAAM,EAAGF;AAAxC,GAFwB,EAIzB,wBAJyB,CAD3B;AAQA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,sBAAsB,GAAG,MAC9BX,0BAA0B,CACvBS,gBAAF,IAA0BC,KAAF,IAAa;AACpC,QAAME,MAAM,GAAGP,UAAU,CAAE,eAAF,CAAV,IAAiCC,cAAhD;AACA,SAAO,cAAC,gBAAD,eAAuBI,KAAvB;AAA+B,IAAA,MAAM,EAAGE;AAAxC,KAAP;AACA,CAJwB,EAKzB,wBALyB,CAD3B;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,cAAT,CAAyBC,UAAzB,EAAqCC,gBAArC,EAAwD;AACvD,QAAMC,QAAQ,GAAGpB,MAAM,CACtBkB,UADsB,EAEtB,CAAEG,WAAF,EAAeC,SAAf,KAA8B;AAC7B,WAAO,EACN,GAAGD,WADG;AAEN,UAAKvB,QAAQ,CAAEwB,SAAF,CAAR,GACF;AAAE,SAAEA,SAAF,GAAevB,SAAS,CAAEuB,SAAF;AAA1B,OADE,GAEFA,SAFH;AAFM,KAAP;AAMA,GATqB,EAUtB,EAVsB,CAAvB;AAaA,SAAOnB,OAAO,CAAE,CACfgB,gBADe,EAEbN,gBAAF,IAAwB;AACvB,WAAO,cAAcX,SAAd,CAAwB;AAC9BqB,MAAAA,WAAW,CAAET,KAAF,EAAU;AACpB,cAAOA,KAAP;AAEA,aAAKU,OAAL,GAAe,KAAKC,aAAL,EAAf;AACA,aAAKC,UAAL,GAAkB;AACjBlB,UAAAA,oBAAoB,EAAE,KAAKA,oBAAL,CAA0BmB,IAA1B,CACrB,IADqB;AADL,SAAlB;AAMA,aAAKC,KAAL,GAAa,EAAb;AACA;;AAEDpB,MAAAA,oBAAoB,CAAEqB,UAAF,EAAe;AAClC,cAAM;AAAEb,UAAAA;AAAF,YAAa,KAAKF,KAAxB;AACA,eAAON,oBAAoB,CAAEQ,MAAF,EAAUa,UAAV,CAA3B;AACA;;AAEDJ,MAAAA,aAAa,GAAG;AACf,eAAOzB,MAAM,CACZoB,QADY,EAEZ,CACCU,kBADD,EAECC,YAFD,EAGCC,kBAHD,KAIK;AACJ,gBAAMC,4BAA4B,GAAGhC,UAAU,CAC9C+B,kBAD8C,CAA/C;AAGA,gBAAME,wBAAwB,GAAI,SAASD,4BAA8B,EAAzE;AACAH,UAAAA,kBAAkB,CAChB,MAAMG,4BAA8B,EADpB,CAAlB,GAEI,KAAKE,cAAL,CACHH,kBADG,EAEHE,wBAFG,CAFJ;AAMA,iBAAOJ,kBAAP;AACA,SAlBW,EAmBZ,EAnBY,CAAb;AAqBA;;AAEDK,MAAAA,cAAc,CAAEH,kBAAF,EAAsBE,wBAAtB,EAAiD;AAC9D,eAASL,UAAF,IAAkB;AACxB,gBAAMR,WAAW,GAAGf,0BAA0B,CAC7C,KAAKQ,KAAL,CAAWE,MADkC,EAE7Ca,UAF6C,CAA9C;AAIA,eAAKf,KAAL,CAAWsB,aAAX,CAA0B;AACzB,aAAEJ,kBAAF,GACCX,WAAW,IAAIA,WAAW,CAACgB,IAA3B,GACGhB,WAAW,CAACgB,IADf,GAEGC,SAJqB;AAKzB,aAAEJ,wBAAF,GACCb,WAAW,IAAIA,WAAW,CAACgB,IAA3B,GACGC,SADH,GAEGT;AARqB,WAA1B;AAUA,SAfD;AAgBA;;AAE8B,aAAxBU,wBAAwB,OAE9BC,aAF8B,EAG7B;AAAA,YAFD;AAAEC,UAAAA,UAAF;AAAczB,UAAAA;AAAd,SAEC;AACD,eAAOhB,MAAM,CACZoB,QADY,EAEZ,CAAEsB,QAAF,EAAYX,YAAZ,EAA0BC,kBAA1B,KAAkD;AACjD,gBAAMX,WAAW,GAAGd,+BAA+B,CAClDS,MADkD,EAElDyB,UAAU,CAAET,kBAAF,CAFwC,EAGlDS,UAAU,CACR,SAASxC,UAAU,CACnB+B,kBADmB,CAEjB,EAHM,CAHwC,CAAnD;AAUA,gBAAMW,mBAAmB,GACxBH,aAAa,CAAER,kBAAF,CADd;AAEA,gBAAMY,aAAa,GAAGD,mBAAH,aAAGA,mBAAH,uBAAGA,mBAAmB,CAAEE,KAA3C;AACA;AACP;AACA;AACA;AACA;;AACO,cACCD,aAAa,KAAKvB,WAAW,CAACwB,KAA9B,IACAF,mBAFD,EAGE;AACDD,YAAAA,QAAQ,CACPV,kBADO,CAAR,GAEIW,mBAFJ;AAGA,WAPD,MAOO;AACND,YAAAA,QAAQ,CAAEV,kBAAF,CAAR,GAAiC,EAChC,GAAGX,WAD6B;AAEhCyB,cAAAA,KAAK,EAAEzC,iBAAiB,CACvB0B,YADuB,EAEvBV,WAAW,CAACgB,IAFW;AAFQ,aAAjC;AAOA;;AACD,iBAAOK,QAAP;AACA,SAtCW,EAuCZ,EAvCY,CAAb;AAyCA;;AAEDK,MAAAA,MAAM,GAAG;AACR,eACC,cAAC,gBAAD,eAEK,KAAKjC,KAFV;AAGEE,UAAAA,MAAM,EAAEsB;AAHV,WAIK,KAAKV,KAJV,EAKK,KAAKJ,OALV;AAMEE,UAAAA,UAAU,EAAE,KAAKA;AANnB,WADD;AAWA;;AAzH6B,KAA/B;AA2HA,GA9Hc,CAAF,CAAd;AAgIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASsB,qBAAT,CAAgCpC,WAAhC,EAA8C;AACpD,SAAO,YAAqB;AAC3B,UAAMO,gBAAgB,GAAGR,sBAAsB,CAAEC,WAAF,CAA/C;;AAD2B,sCAAhBM,UAAgB;AAAhBA,MAAAA,UAAgB;AAAA;;AAE3B,WAAOd,0BAA0B,CAChCa,cAAc,CAAEC,UAAF,EAAcC,gBAAd,CADkB,EAEhC,kBAFgC,CAAjC;AAIA,GAND;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAAS8B,UAAT,GAAqC;AACnD,QAAM9B,gBAAgB,GAAGJ,sBAAsB,EAA/C;;AADmD,qCAAbG,UAAa;AAAbA,IAAAA,UAAa;AAAA;;AAEnD,SAAOd,0BAA0B,CAChCa,cAAc,CAAEC,UAAF,EAAcC,gBAAd,CADkB,EAEhC,YAFgC,CAAjC;AAIA","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-module/components/colors-gradients/control.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -11,68 +11,31 @@ import { every, isEmpty } from 'lodash';
  */
 
 import { useState } from '@wordpress/element';
-import { BaseControl, __experimentalVStack as VStack, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, ColorIndicator, ColorPalette, GradientPicker } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { BaseControl, __experimentalVStack as VStack, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, ColorPalette, GradientPicker } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
-import useSetting from '../use-setting'; // translators: first %s: the color name or value (e.g. red or #ff0000)
-
-const colorIndicatorAriaLabel = __('(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 = __('(Gradient: %s)');
-
+import useSetting from '../use-setting';
 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 = getColorObjectByColorValue(colors, value);
-      const colorName = colorObject && colorObject.name;
-      ariaLabel = sprintf(colorIndicatorAriaLabel, colorName || value);
-    }
-  } else if (currentTab === 'gradient' && gradientValue) {
-    value = gradientValue;
-
-    const gradientObject = __experimentalGetGradientObjectByGradientValue(gradients, value);
-
-    const gradientName = gradientObject && gradientObject.name;
-    ariaLabel = sprintf(gradientIndicatorAriaLabel, gradientName || value);
-  }
-
-  return createElement(Fragment, null, label, !!value && createElement(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 && (!isEmpty(colors) || !disableCustomColors);
   const canChooseAGradient = onGradientChange && (!isEmpty(gradients) || !disableCustomGradients);
   const [currentTab, setCurrentTab] = useState(gradientValue ? 'gradient' : !!canChooseAColor && 'color');
@@ -84,15 +47,10 @@ function ColorGradientControlInner({
   return createElement(BaseControl, {
     className: classnames('block-editor-color-gradient-control', className)
   }, createElement("fieldset", null, createElement(VStack, {
-    space: 3
-  }, createElement("legend", null, createElement("div", {
+    spacing: 1
+  }, showTitle && createElement("legend", null, createElement("div", {
     className: "block-editor-color-gradient-control__color-indicator"
-  }, createElement(BaseControl.VisualLabel, null, createElement(VisualLabel, {
-    currentTab: currentTab,
-    label: label,
-    colorValue: colorValue,
-    gradientValue: gradientValue
-  })))), canChooseAColor && canChooseAGradient && createElement(ToggleGroupControl, {
+  }, createElement(BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && createElement(ToggleGroupControl, {
     value: currentTab,
     onChange: setCurrentTab,
     label: __('Select color type'),
@@ -112,6 +70,7 @@ function ColorGradientControlInner({
     } : onColorChange,
     colors,
     disableCustomColors,
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     clearable: clearable
   }), (currentTab === 'gradient' || !canChooseAColor) && createElement(GradientPicker, {
     value: gradientValue,
@@ -121,6 +80,7 @@ function ColorGradientControlInner({
     } : onGradientChange,
     gradients,
     disableCustomGradients,
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     clearable: clearable
   }))));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["classnames","every","isEmpty","useState","BaseControl","__experimentalVStack","VStack","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","ColorIndicator","ColorPalette","GradientPicker","sprintf","__","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","VisualLabel","colors","gradients","label","currentTab","colorValue","gradientValue","value","ariaLabel","colorObject","colorName","name","gradientObject","gradientName","ColorGradientControlInner","disableCustomColors","disableCustomGradients","className","onColorChange","onGradientChange","clearable","canChooseAColor","canChooseAGradient","setCurrentTab","newColor","newGradient","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tColorIndicator,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(Color: %s)' );\n\n// 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%)\nconst gradientIndicatorAriaLabel = __( '(Gradient: %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nfunction VisualLabel( {\n\tcolors,\n\tgradients,\n\tlabel,\n\tcurrentTab,\n\tcolorValue,\n\tgradientValue,\n} ) {\n\tlet value, ariaLabel;\n\tif ( currentTab === 'color' ) {\n\t\tif ( colorValue ) {\n\t\t\tvalue = colorValue;\n\t\t\tconst colorObject = getColorObjectByColorValue( colors, value );\n\t\t\tconst colorName = colorObject && colorObject.name;\n\t\t\tariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );\n\t\t}\n\t} else if ( currentTab === 'gradient' && gradientValue ) {\n\t\tvalue = gradientValue;\n\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\tgradients,\n\t\t\tvalue\n\t\t);\n\t\tconst gradientName = gradientObject && gradientObject.name;\n\t\tariaLabel = sprintf(\n\t\t\tgradientIndicatorAriaLabel,\n\t\t\tgradientName || value\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ label }\n\t\t\t{ !! value && (\n\t\t\t\t<ColorIndicator colorValue={ value } aria-label={ ariaLabel } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) || ! disableCustomGradients );\n\tconst [ currentTab, setCurrentTab ] = useState(\n\t\tgradientValue ? 'gradient' : !! canChooseAColor && 'color'\n\t);\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset>\n\t\t\t\t<VStack space={ 3 }>\n\t\t\t\t\t<legend>\n\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t<VisualLabel\n\t\t\t\t\t\t\t\t\tcurrentTab={ currentTab }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\tvalue={ currentTab }\n\t\t\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\t\t\tlabel={ __( 'Select color type' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"color\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'color' || ! canChooseAGradient ) && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tvalue={ colorValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t: onColorChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'gradient' || ! canChooseAColor ) && (\n\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\tvalue={ gradientValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t: onGradientChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["classnames","every","isEmpty","useState","BaseControl","__experimentalVStack","VStack","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","ColorPalette","GradientPicker","__","useSetting","colorsAndGradientKeys","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalHasMultipleOrigins","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","canChooseAColor","canChooseAGradient","currentTab","setCurrentTab","newColor","newGradient","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) || ! disableCustomGradients );\n\tconst [ currentTab, setCurrentTab ] = useState(\n\t\tgradientValue ? 'gradient' : !! canChooseAColor && 'color'\n\t);\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset>\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\tvalue={ currentTab }\n\t\t\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\t\t\tlabel={ __( 'Select color type' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"color\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'color' || ! canChooseAGradient ) && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tvalue={ colorValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t: onColorChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'gradient' || ! canChooseAColor ) && (\n\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\tvalue={ gradientValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t: onGradientChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}

package/build-module/components/colors-gradients/panel-color-gradient-settings.js

@@ -12,6 +12,7 @@ import { every, isEmpty } from 'lodash';
 
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -28,18 +29,21 @@ const gradientIndicatorAriaLabel = __('(%s: gradient %s)');
 
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 
-const Indicators = ({
-  colors,
-  gradients,
-  settings
-}) => {
-  return settings.map(({
-    colorValue,
-    gradientValue,
-    label,
-    colors: availableColors,
-    gradients: availableGradients
-  }, index) => {
+const Indicators = _ref => {
+  let {
+    colors,
+    gradients,
+    settings
+  } = _ref;
+  return settings.map((_ref2, index) => {
+    let {
+      colorValue,
+      gradientValue,
+      label,
+      colors: availableColors,
+      gradients: availableGradients
+    } = _ref2;
+
     if (!colorValue && !gradientValue) {
       return null;
     }
@@ -63,18 +67,21 @@ const Indicators = ({
   });
 };
 
-export const PanelColorGradientSettingsInner = ({
-  className,
-  colors,
-  gradients,
-  disableCustomColors,
-  disableCustomGradients,
-  children,
-  settings,
-  title,
-  showTitle = true,
-  ...props
-}) => {
+export const PanelColorGradientSettingsInner = _ref3 => {
+  let {
+    className,
+    colors,
+    gradients,
+    disableCustomColors,
+    disableCustomGradients,
+    children,
+    settings,
+    title,
+    showTitle = true,
+    __experimentalHasMultipleOrigins,
+    ...props
+  } = _ref3;
+
   if (isEmpty(colors) && isEmpty(gradients) && disableCustomColors && disableCustomGradients && every(settings, setting => isEmpty(setting.colors) && isEmpty(setting.gradients) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
     return null;
   }
@@ -90,20 +97,90 @@ export const PanelColorGradientSettingsInner = ({
     className: classnames('block-editor-panel-color-gradient-settings', className),
     title: showTitle ? titleElement : undefined
   }, props), settings.map((setting, index) => createElement(ColorGradientControl, _extends({
+    showTitle: showTitle,
     key: index,
     colors,
     gradients,
     disableCustomColors,
-    disableCustomGradients
+    disableCustomGradients,
+    __experimentalHasMultipleOrigins
   }, setting))), children);
 };
 
-const PanelColorGradientSettingsSelect = props => {
-  const colorGradientSettings = {};
+function useCommonSingleMultipleSelects() {
+  return {
+    disableCustomColors: !useSetting('color.custom'),
+    disableCustomGradients: !useSetting('color.customGradient')
+  };
+}
+
+const PanelColorGradientSettingsSingleSelect = props => {
+  const colorGradientSettings = useCommonSingleMultipleSelects();
   colorGradientSettings.colors = useSetting('color.palette');
   colorGradientSettings.gradients = useSetting('color.gradients');
-  colorGradientSettings.disableCustomColors = !useSetting('color.custom');
-  colorGradientSettings.disableCustomGradients = !useSetting('color.customGradient');
+  return createElement(PanelColorGradientSettingsInner, _extends({}, colorGradientSettings, props));
+};
+
+const PanelColorGradientSettingsMultipleSelect = props => {
+  const colorGradientSettings = useCommonSingleMultipleSelects();
+  const userColors = useSetting('color.palette.user');
+  const themeColors = useSetting('color.palette.theme');
+  const coreColors = useSetting('color.palette.core');
+  colorGradientSettings.colors = useMemo(() => {
+    const result = [];
+
+    if (coreColors && coreColors.length) {
+      result.push({
+        name: __('Core'),
+        colors: coreColors
+      });
+    }
+
+    if (themeColors && themeColors.length) {
+      result.push({
+        name: __('Theme'),
+        colors: themeColors
+      });
+    }
+
+    if (userColors && userColors.length) {
+      result.push({
+        name: __('User'),
+        colors: userColors
+      });
+    }
+
+    return result;
+  }, [coreColors, themeColors, userColors]);
+  const userGradients = useSetting('color.gradients.user');
+  const themeGradients = useSetting('color.gradients.theme');
+  const coreGradients = useSetting('color.gradients.core');
+  colorGradientSettings.gradients = useMemo(() => {
+    const result = [];
+
+    if (coreGradients && coreGradients.length) {
+      result.push({
+        name: __('Core'),
+        gradients: coreGradients
+      });
+    }
+
+    if (themeGradients && themeGradients.length) {
+      result.push({
+        name: __('Theme'),
+        gradients: themeGradients
+      });
+    }
+
+    if (userGradients && userGradients.length) {
+      result.push({
+        name: __('User'),
+        gradients: userGradients
+      });
+    }
+
+    return result;
+  }, [userGradients, themeGradients, coreGradients]);
   return createElement(PanelColorGradientSettingsInner, _extends({}, colorGradientSettings, props));
 };
 
@@ -112,7 +189,11 @@ const PanelColorGradientSettings = props => {
     return createElement(PanelColorGradientSettingsInner, props);
   }
 
-  return createElement(PanelColorGradientSettingsSelect, props);
+  if (props.__experimentalHasMultipleOrigins) {
+    return createElement(PanelColorGradientSettingsMultipleSelect, props);
+  }
+
+  return createElement(PanelColorGradientSettingsSingleSelect, props);
 };
 
 export default PanelColorGradientSettings;

package/build-module/components/colors-gradients/panel-color-gradient-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["classnames","every","isEmpty","PanelBody","ColorIndicator","sprintf","__","ColorGradientControl","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","colorValue","gradientValue","label","availableColors","availableGradients","index","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","props","setting","undefined","titleElement","PanelColorGradientSettingsSelect","colorGradientSettings","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors || colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) || colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients || gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) || gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue || gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tkey={ index }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["classnames","every","isEmpty","PanelBody","ColorIndicator","sprintf","__","useMemo","ColorGradientControl","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","index","colorValue","gradientValue","label","availableColors","availableGradients","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","__experimentalHasMultipleOrigins","props","setting","undefined","titleElement","useCommonSingleMultipleSelects","PanelColorGradientSettingsSingleSelect","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","userColors","themeColors","coreColors","result","length","push","userGradients","themeGradients","coreGradients","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,KAAT,EAAgBC,OAAhB,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,cAApB,QAA0C,uBAA1C;AACA,SAASC,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,WAAjC;AACA,SAASC,0BAAT,QAA2C,WAA3C;AACA,SAASC,8CAAT,QAA+D,cAA/D;AACA,OAAOC,UAAP,MAAuB,gBAAvB,C,CAEA;;AACA,MAAMC,uBAAuB,GAAGN,EAAE,CAAE,gBAAF,CAAlC,C,CAEA;;;AACA,MAAMO,0BAA0B,GAAGP,EAAE,CAAE,mBAAF,CAArC;;AAEA,MAAMQ,qBAAqB,GAAG,CAC7B,QAD6B,EAE7B,qBAF6B,EAG7B,WAH6B,EAI7B,wBAJ6B,CAA9B;;AAOA,MAAMC,UAAU,GAAG,QAAuC;AAAA,MAArC;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,SAAV;AAAqBC,IAAAA;AAArB,GAAqC;AACzD,SAAOA,QAAQ,CAACC,GAAT,CACN,QAQCC,KARD,KASK;AAAA,QARJ;AACCC,MAAAA,UADD;AAECC,MAAAA,aAFD;AAGCC,MAAAA,KAHD;AAICP,MAAAA,MAAM,EAAEQ,eAJT;AAKCP,MAAAA,SAAS,EAAEQ;AALZ,KAQI;;AACJ,QAAK,CAAEJ,UAAF,IAAgB,CAAEC,aAAvB,EAAuC;AACtC,aAAO,IAAP;AACA;;AACD,QAAII,SAAJ;;AACA,QAAKL,UAAL,EAAkB;AACjB,YAAMM,WAAW,GAAGlB,0BAA0B,CAC7Ce,eAAe,IAAIR,MAD0B,EAE7CK,UAF6C,CAA9C;AAIAK,MAAAA,SAAS,GAAGrB,OAAO,CAClBO,uBADkB,EAElBW,KAAK,CAACK,WAAN,EAFkB,EAGhBD,WAAW,IAAIA,WAAW,CAACE,IAA7B,IAAuCR,UAHrB,CAAnB;AAKA,KAVD,MAUO;AACN,YAAMS,cAAc,GAAGpB,8CAA8C,CACpEe,kBAAkB,IAAIR,SAD8C,EAEpEI,UAFoE,CAArE;;AAIAK,MAAAA,SAAS,GAAGrB,OAAO,CAClBQ,0BADkB,EAElBU,KAAK,CAACK,WAAN,EAFkB,EAGhBE,cAAc,IAAIA,cAAc,CAACD,IAAnC,IAA6CP,aAH3B,CAAnB;AAKA;;AAED,WACC,cAAC,cAAD;AACC,MAAA,GAAG,EAAGF,KADP;AAEC,MAAA,UAAU,EAAGC,UAAU,IAAIC,aAF5B;AAGC,oBAAaI;AAHd,MADD;AAOA,GA5CK,CAAP;AA8CA,CA/CD;;AAiDA,OAAO,MAAMK,+BAA+B,GAAG,SAYxC;AAAA,MAZ0C;AAChDC,IAAAA,SADgD;AAEhDhB,IAAAA,MAFgD;AAGhDC,IAAAA,SAHgD;AAIhDgB,IAAAA,mBAJgD;AAKhDC,IAAAA,sBALgD;AAMhDC,IAAAA,QANgD;AAOhDjB,IAAAA,QAPgD;AAQhDkB,IAAAA,KARgD;AAShDC,IAAAA,SAAS,GAAG,IAToC;AAUhDC,IAAAA,gCAVgD;AAWhD,OAAGC;AAX6C,GAY1C;;AACN,MACCrC,OAAO,CAAEc,MAAF,CAAP,IACAd,OAAO,CAAEe,SAAF,CADP,IAEAgB,mBAFA,IAGAC,sBAHA,IAIAjC,KAAK,CACJiB,QADI,EAEFsB,OAAF,IACCtC,OAAO,CAAEsC,OAAO,CAACxB,MAAV,CAAP,IACAd,OAAO,CAAEsC,OAAO,CAACvB,SAAV,CADP,KAEEuB,OAAO,CAACP,mBAAR,KAAgCQ,SAAhC,IACDD,OAAO,CAACP,mBAHT,MAIEO,OAAO,CAACN,sBAAR,KAAmCO,SAAnC,IACDD,OAAO,CAACN,sBALT,CAHG,CALN,EAeE;AACD,WAAO,IAAP;AACA;;AAED,QAAMQ,YAAY,GACjB;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGN,KADH,EAEC,cAAC,UAAD;AACC,IAAA,MAAM,EAAGpB,MADV;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IAFD,CADD;AAWA,SACC,cAAC,SAAD;AACC,IAAA,SAAS,EAAGlB,UAAU,CACrB,4CADqB,EAErBgC,SAFqB,CADvB;AAKC,IAAA,KAAK,EAAGK,SAAS,GAAGK,YAAH,GAAkBD;AALpC,KAMMF,KANN,GAQGrB,QAAQ,CAACC,GAAT,CAAc,CAAEqB,OAAF,EAAWpB,KAAX,KACf,cAAC,oBAAD;AACC,IAAA,SAAS,EAAGiB,SADb;AAEC,IAAA,GAAG,EAAGjB,KAFP;AAIEJ,IAAAA,MAJF;AAKEC,IAAAA,SALF;AAMEgB,IAAAA,mBANF;AAOEC,IAAAA,sBAPF;AAQEI,IAAAA;AARF,KASKE,OATL,EADC,CARH,EAsBGL,QAtBH,CADD;AA0BA,CArEM;;AAuEP,SAASQ,8BAAT,GAA0C;AACzC,SAAO;AACNV,IAAAA,mBAAmB,EAAE,CAAEtB,UAAU,CAAE,cAAF,CAD3B;AAENuB,IAAAA,sBAAsB,EAAE,CAAEvB,UAAU,CAAE,sBAAF;AAF9B,GAAP;AAIA;;AAED,MAAMiC,sCAAsC,GAAKL,KAAF,IAAa;AAC3D,QAAMM,qBAAqB,GAAGF,8BAA8B,EAA5D;AACAE,EAAAA,qBAAqB,CAAC7B,MAAtB,GAA+BL,UAAU,CAAE,eAAF,CAAzC;AACAkC,EAAAA,qBAAqB,CAAC5B,SAAtB,GAAkCN,UAAU,CAAE,iBAAF,CAA5C;AACA,SACC,cAAC,+BAAD,eACWkC,qBADX,EACqCN,KADrC,EADD;AAKA,CATD;;AAWA,MAAMO,wCAAwC,GAAKP,KAAF,IAAa;AAC7D,QAAMM,qBAAqB,GAAGF,8BAA8B,EAA5D;AACA,QAAMI,UAAU,GAAGpC,UAAU,CAAE,oBAAF,CAA7B;AACA,QAAMqC,WAAW,GAAGrC,UAAU,CAAE,qBAAF,CAA9B;AACA,QAAMsC,UAAU,GAAGtC,UAAU,CAAE,oBAAF,CAA7B;AACAkC,EAAAA,qBAAqB,CAAC7B,MAAtB,GAA+BT,OAAO,CAAE,MAAM;AAC7C,UAAM2C,MAAM,GAAG,EAAf;;AACA,QAAKD,UAAU,IAAIA,UAAU,CAACE,MAA9B,EAAuC;AACtCD,MAAAA,MAAM,CAACE,IAAP,CAAa;AACZvB,QAAAA,IAAI,EAAEvB,EAAE,CAAE,MAAF,CADI;AAEZU,QAAAA,MAAM,EAAEiC;AAFI,OAAb;AAIA;;AACD,QAAKD,WAAW,IAAIA,WAAW,CAACG,MAAhC,EAAyC;AACxCD,MAAAA,MAAM,CAACE,IAAP,CAAa;AACZvB,QAAAA,IAAI,EAAEvB,EAAE,CAAE,OAAF,CADI;AAEZU,QAAAA,MAAM,EAAEgC;AAFI,OAAb;AAIA;;AACD,QAAKD,UAAU,IAAIA,UAAU,CAACI,MAA9B,EAAuC;AACtCD,MAAAA,MAAM,CAACE,IAAP,CAAa;AACZvB,QAAAA,IAAI,EAAEvB,EAAE,CAAE,MAAF,CADI;AAEZU,QAAAA,MAAM,EAAE+B;AAFI,OAAb;AAIA;;AACD,WAAOG,MAAP;AACA,GArBqC,EAqBnC,CAAED,UAAF,EAAcD,WAAd,EAA2BD,UAA3B,CArBmC,CAAtC;AAuBA,QAAMM,aAAa,GAAG1C,UAAU,CAAE,sBAAF,CAAhC;AACA,QAAM2C,cAAc,GAAG3C,UAAU,CAAE,uBAAF,CAAjC;AACA,QAAM4C,aAAa,GAAG5C,UAAU,CAAE,sBAAF,CAAhC;AACAkC,EAAAA,qBAAqB,CAAC5B,SAAtB,GAAkCV,OAAO,CAAE,MAAM;AAChD,UAAM2C,MAAM,GAAG,EAAf;;AACA,QAAKK,aAAa,IAAIA,aAAa,CAACJ,MAApC,EAA6C;AAC5CD,MAAAA,MAAM,CAACE,IAAP,CAAa;AACZvB,QAAAA,IAAI,EAAEvB,EAAE,CAAE,MAAF,CADI;AAEZW,QAAAA,SAAS,EAAEsC;AAFC,OAAb;AAIA;;AACD,QAAKD,cAAc,IAAIA,cAAc,CAACH,MAAtC,EAA+C;AAC9CD,MAAAA,MAAM,CAACE,IAAP,CAAa;AACZvB,QAAAA,IAAI,EAAEvB,EAAE,CAAE,OAAF,CADI;AAEZW,QAAAA,SAAS,EAAEqC;AAFC,OAAb;AAIA;;AACD,QAAKD,aAAa,IAAIA,aAAa,CAACF,MAApC,EAA6C;AAC5CD,MAAAA,MAAM,CAACE,IAAP,CAAa;AACZvB,QAAAA,IAAI,EAAEvB,EAAE,CAAE,MAAF,CADI;AAEZW,QAAAA,SAAS,EAAEoC;AAFC,OAAb;AAIA;;AACD,WAAOH,MAAP;AACA,GArBwC,EAqBtC,CAAEG,aAAF,EAAiBC,cAAjB,EAAiCC,aAAjC,CArBsC,CAAzC;AAsBA,SACC,cAAC,+BAAD,eACWV,qBADX,EACqCN,KADrC,EADD;AAKA,CA1DD;;AA4DA,MAAMiB,0BAA0B,GAAKjB,KAAF,IAAa;AAC/C,MACCtC,KAAK,CAAEa,qBAAF,EAA2B2C,GAAF,IAAWlB,KAAK,CAACmB,cAAN,CAAsBD,GAAtB,CAApC,CADN,EAEE;AACD,WAAO,cAAC,+BAAD,EAAsClB,KAAtC,CAAP;AACA;;AACD,MAAKA,KAAK,CAACD,gCAAX,EAA8C;AAC7C,WAAO,cAAC,wCAAD,EAA+CC,KAA/C,CAAP;AACA;;AACD,SAAO,cAAC,sCAAD,EAA6CA,KAA7C,CAAP;AACA,CAVD;;AAYA,eAAeiB,0BAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors || colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) || colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients || gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) || gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue || gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalHasMultipleOrigins,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tshowTitle={ showTitle }\n\t\t\t\t\tkey={ index }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nfunction useCommonSingleMultipleSelects() {\n\treturn {\n\t\tdisableCustomColors: ! useSetting( 'color.custom' ),\n\t\tdisableCustomGradients: ! useSetting( 'color.customGradient' ),\n\t};\n}\n\nconst PanelColorGradientSettingsSingleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettingsMultipleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tconst userColors = useSetting( 'color.palette.user' );\n\tconst themeColors = useSetting( 'color.palette.theme' );\n\tconst coreColors = useSetting( 'color.palette.core' );\n\tcolorGradientSettings.colors = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( coreColors && coreColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Core' ),\n\t\t\t\tcolors: coreColors,\n\t\t\t} );\n\t\t}\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Theme' ),\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif ( userColors && userColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'User' ),\n\t\t\t\tcolors: userColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ coreColors, themeColors, userColors ] );\n\n\tconst userGradients = useSetting( 'color.gradients.user' );\n\tconst themeGradients = useSetting( 'color.gradients.theme' );\n\tconst coreGradients = useSetting( 'color.gradients.core' );\n\tcolorGradientSettings.gradients = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( coreGradients && coreGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Core' ),\n\t\t\t\tgradients: coreGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Theme' ),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( userGradients && userGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'User' ),\n\t\t\t\tgradients: userGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ userGradients, themeGradients, coreGradients ] );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\tif ( props.__experimentalHasMultipleOrigins ) {\n\t\treturn <PanelColorGradientSettingsMultipleSelect { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSingleSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}

package/build-module/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -15,32 +15,36 @@ import { useMemo } from '@wordpress/element';
  */
 
 import { blockSettingsScreens } from '../block-settings';
-export default function PanelColorGradientSettings({
-  settings,
-  title
-}) {
+export default function PanelColorGradientSettings(_ref) {
+  let {
+    settings,
+    title
+  } = _ref;
   const navigation = useNavigation();
   const mappedSettings = useMemo(() => {
-    return settings.map(({
-      onColorChange,
-      colorValue,
-      onGradientChange,
-      gradientValue,
-      label
-    }) => createElement(ColorControl, {
-      onPress: () => {
-        navigation.navigate(blockSettingsScreens.color, {
-          onColorChange,
-          colorValue: gradientValue || colorValue,
-          gradientValue,
-          onGradientChange,
-          label
-        });
-      },
-      key: `color-setting-${label}`,
-      label: label,
-      color: gradientValue || colorValue
-    }));
+    return settings.map(_ref2 => {
+      let {
+        onColorChange,
+        colorValue,
+        onGradientChange,
+        gradientValue,
+        label
+      } = _ref2;
+      return createElement(ColorControl, {
+        onPress: () => {
+          navigation.navigate(blockSettingsScreens.color, {
+            onColorChange,
+            colorValue: gradientValue || colorValue,
+            gradientValue,
+            onGradientChange,
+            label
+          });
+        },
+        key: `color-setting-${label}`,
+        label: label,
+        color: gradientValue || colorValue
+      });
+    });
   }, [settings]);
   return createElement(PanelBody, {
     title: title

package/build-module/components/colors-gradients/panel-color-gradient-settings.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js"],"names":["useNavigation","ColorControl","PanelBody","useMemo","blockSettingsScreens","PanelColorGradientSettings","settings","title","navigation","mappedSettings","map","onColorChange","colorValue","onGradientChange","gradientValue","label","navigate","color"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,0BAA9B;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,SAAvB,QAAwC,uBAAxC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,mBAArC;AAEA,eAAe,SAASC,0BAAT,CAAqC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAArC,EAA2D;AACzE,QAAMC,UAAU,GAAGR,aAAa,EAAhC;AAEA,QAAMS,cAAc,GAAGN,OAAO,CAAE,MAAM;AACrC,WAAOG,QAAQ,CAACI,GAAT,CACN,CAAE;AACDC,MAAAA,aADC;AAEDC,MAAAA,UAFC;AAGDC,MAAAA,gBAHC;AAIDC,MAAAA,aAJC;AAKDC,MAAAA;AALC,KAAF,KAOC,cAAC,YAAD;AACC,MAAA,OAAO,EAAG,MAAM;AACfP,QAAAA,UAAU,CAACQ,QAAX,CAAqBZ,oBAAoB,CAACa,KAA1C,EAAiD;AAChDN,UAAAA,aADgD;AAEhDC,UAAAA,UAAU,EAAEE,aAAa,IAAIF,UAFmB;AAGhDE,UAAAA,aAHgD;AAIhDD,UAAAA,gBAJgD;AAKhDE,UAAAA;AALgD,SAAjD;AAOA,OATF;AAUC,MAAA,GAAG,EAAI,iBAAiBA,KAAO,EAVhC;AAWC,MAAA,KAAK,EAAGA,KAXT;AAYC,MAAA,KAAK,EAAGD,aAAa,IAAIF;AAZ1B,MARK,CAAP;AAwBA,GAzB6B,EAyB3B,CAAEN,QAAF,CAzB2B,CAA9B;AA2BA,SAAO,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGC;AAAnB,KAA6BE,cAA7B,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { ColorControl, PanelBody } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { blockSettingsScreens } from '../block-settings';\n\nexport default function PanelColorGradientSettings( { settings, title } ) {\n\tconst navigation = useNavigation();\n\n\tconst mappedSettings = useMemo( () => {\n\t\treturn settings.map(\n\t\t\t( {\n\t\t\t\tonColorChange,\n\t\t\t\tcolorValue,\n\t\t\t\tonGradientChange,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t} ) => (\n\t\t\t\t<ColorControl\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tnavigation.navigate( blockSettingsScreens.color, {\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tcolorValue: gradientValue || colorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tkey={ `color-setting-${ label }` }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tcolor={ gradientValue || colorValue }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t}, [ settings ] );\n\n\treturn <PanelBody title={ title }>{ mappedSettings }</PanelBody>;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js"],"names":["useNavigation","ColorControl","PanelBody","useMemo","blockSettingsScreens","PanelColorGradientSettings","settings","title","navigation","mappedSettings","map","onColorChange","colorValue","onGradientChange","gradientValue","label","navigate","color"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,0BAA9B;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,SAAvB,QAAwC,uBAAxC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,mBAArC;AAEA,eAAe,SAASC,0BAAT,OAA2D;AAAA,MAAtB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAsB;AACzE,QAAMC,UAAU,GAAGR,aAAa,EAAhC;AAEA,QAAMS,cAAc,GAAGN,OAAO,CAAE,MAAM;AACrC,WAAOG,QAAQ,CAACI,GAAT,CACN;AAAA,UAAE;AACDC,QAAAA,aADC;AAEDC,QAAAA,UAFC;AAGDC,QAAAA,gBAHC;AAIDC,QAAAA,aAJC;AAKDC,QAAAA;AALC,OAAF;AAAA,aAOC,cAAC,YAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfP,UAAAA,UAAU,CAACQ,QAAX,CAAqBZ,oBAAoB,CAACa,KAA1C,EAAiD;AAChDN,YAAAA,aADgD;AAEhDC,YAAAA,UAAU,EAAEE,aAAa,IAAIF,UAFmB;AAGhDE,YAAAA,aAHgD;AAIhDD,YAAAA,gBAJgD;AAKhDE,YAAAA;AALgD,WAAjD;AAOA,SATF;AAUC,QAAA,GAAG,EAAI,iBAAiBA,KAAO,EAVhC;AAWC,QAAA,KAAK,EAAGA,KAXT;AAYC,QAAA,KAAK,EAAGD,aAAa,IAAIF;AAZ1B,QAPD;AAAA,KADM,CAAP;AAwBA,GAzB6B,EAyB3B,CAAEN,QAAF,CAzB2B,CAA9B;AA2BA,SAAO,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGC;AAAnB,KAA6BE,cAA7B,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { ColorControl, PanelBody } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { blockSettingsScreens } from '../block-settings';\n\nexport default function PanelColorGradientSettings( { settings, title } ) {\n\tconst navigation = useNavigation();\n\n\tconst mappedSettings = useMemo( () => {\n\t\treturn settings.map(\n\t\t\t( {\n\t\t\t\tonColorChange,\n\t\t\t\tcolorValue,\n\t\t\t\tonGradientChange,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t} ) => (\n\t\t\t\t<ColorControl\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tnavigation.navigate( blockSettingsScreens.color, {\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tcolorValue: gradientValue || colorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tkey={ `color-setting-${ label }` }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tcolor={ gradientValue || colorValue }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t}, [ settings ] );\n\n\treturn <PanelBody title={ title }>{ mappedSettings }</PanelBody>;\n}\n"]}