npm - @wordpress/block-editor - Versions diffs - 9.6.0 → 9.8.0 - Mend

@wordpress/block-editor 9.6.0 → 9.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (462) hide show

package/build/components/border-radius-control/index.js CHANGED Viewed

@@ -31,10 +31,10 @@ var _utils = require("./utils");
  * Internal dependencies
  */
 const DEFAULT_VALUES = {
-  topLeft: null,
-  topRight: null,
-  bottomLeft: null,
-  bottomRight: null
+  topLeft: undefined,
+  topRight: undefined,
+  bottomLeft: undefined,
+  bottomRight: undefined
 };
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUES = {
@@ -57,11 +57,21 @@ function BorderRadiusControl(_ref) {
     onChange,
     values
   } = _ref;
-  const [isLinked, setIsLinked] = (0, _element.useState)(!(0, _utils.hasDefinedValues)(values) || !(0, _utils.hasMixedValues)(values));
+  const [isLinked, setIsLinked] = (0, _element.useState)(!(0, _utils.hasDefinedValues)(values) || !(0, _utils.hasMixedValues)(values)); // Tracking selected units via internal state allows filtering of CSS unit
+  // only values from being saved while maintaining preexisting unit selection
+  // behaviour. Filtering CSS unit only values prevents invalid style values.
+  const [selectedUnits, setSelectedUnits] = (0, _element.useState)({
+    flat: typeof values === 'string' ? (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values)[1] : undefined,
+    topLeft: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values === null || values === void 0 ? void 0 : values.topLeft)[1],
+    topRight: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values === null || values === void 0 ? void 0 : values.topRight)[1],
+    bottomLeft: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values === null || values === void 0 ? void 0 : values.bottomLeft)[1],
+    bottomRight: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values === null || values === void 0 ? void 0 : values.bottomRight)[1]
+  });
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _useSetting.default)('spacing.units') || ['px', 'em', 'rem']
   });
-  const unit = (0, _utils.getAllUnit)(values);
+  const unit = (0, _utils.getAllUnit)(selectedUnits);
   const unitConfig = units && units.find(item => item.value === unit);
   const step = (unitConfig === null || unitConfig === void 0 ? void 0 : unitConfig.step) || 1;
   const [allValue] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)((0, _utils.getAllValue)(values));
@@ -74,13 +84,17 @@ function BorderRadiusControl(_ref) {
   return (0, _element.createElement)("fieldset", {
     className: "components-border-radius-control"
-  }, (0, _element.createElement)("legend", null, (0, _i18n.__)('Radius')), (0, _element.createElement)("div", {
+  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, {
+    as: "legend"
+  }, (0, _i18n.__)('Radius')), (0, _element.createElement)("div", {
     className: "components-border-radius-control__wrapper"
   }, isLinked ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_allInputControl.default, {
     className: "components-border-radius-control__unit-control",
     values: values,
     min: MIN_BORDER_RADIUS_VALUE,
     onChange: onChange,
+    selectedUnits: selectedUnits,
+    setSelectedUnits: setSelectedUnits,
     units: units
   }), (0, _element.createElement)(_components.RangeControl, {
     label: (0, _i18n.__)('Border radius'),
@@ -96,6 +110,8 @@ function BorderRadiusControl(_ref) {
   })) : (0, _element.createElement)(_inputControls.default, {
     min: MIN_BORDER_RADIUS_VALUE,
     onChange: onChange,
+    selectedUnits: selectedUnits,
+    setSelectedUnits: setSelectedUnits,
     values: values || DEFAULT_VALUES,
     units: units
   }), (0, _element.createElement)(_linkedButton.default, {

package/build/components/border-radius-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["DEFAULT_VALUES","topLeft","topRight","bottomLeft","bottomRight","MIN_BORDER_RADIUS_VALUE","MAX_BORDER_RADIUS_VALUES","px","em","rem","BorderRadiusControl","onChange","values","isLinked","setIsLinked","units","availableUnits","unit","unitConfig","find","item","value","step","allValue","toggleLinked","handleSliderChange","next"~~,"undefined"~~],"mappings":";;;;;;;;;~~AAQA~~;;~~AALA~~;;~~AAMA~~;;AAKA;;AACA;;AACA;;AACA;;AACA;;~~AAlBA~~;AACA;AACA;;~~AASA~~;AACA;AACA;AAYA,MAAMA,cAAc,GAAG;AACtBC,EAAAA,OAAO,~~EAAE~~,~~IADa~~;AAEtBC,EAAAA,QAAQ,~~EAAE~~,~~IAFY~~;~~AAGtBC~~,EAAAA,UAAU,~~EAAE~~,~~IAHU~~;~~AAItBC~~,EAAAA,WAAW,~~EAAE~~;AAJS,CAAvB;AAMA,~~MAAMC~~,uBAAuB,GAAG,CAAhC;AACA,MAAMC,wBAAwB,GAAG;AAChCC,EAAAA,EAAE,EAAE,GAD4B;AAEhCC,EAAAA,EAAE,EAAE,EAF4B;AAGhCC,EAAAA,GAAG,EAAE;AAH2B,CAAjC;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,mBAAT,OAAqD;AAAA,MAAvB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAuB;AACnE,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBACjC,CAAE,6BAAkBF,MAAlB,CAAF,IAAgC,CAAE,2BAAgBA,MAAhB,CADD,CAAlC;~~AAIA~~,~~QAAMG~~,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd;AADpB,GAAhB,CAAd;AAIA,QAAMC,IAAI,GAAG,uBAAYL,~~MAAZ~~,CAAb;AACA,QAAMM,UAAU,GAAGH,KAAK,IAAIA,KAAK,CAACI,IAAN,CAAcC,IAAF,IAAYA,IAAI,CAACC,KAAL,KAAeJ,IAAvC,CAA5B;AACA,QAAMK,IAAI,GAAG,CAAAJ,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEI,IAAZ,KAAoB,CAAjC;AAEA,QAAM,CAAEC,QAAF,IAAe,gEACpB,~~wBAAaX~~,MAAb,CADoB,CAArB;;AAIA,~~QAAMY~~,YAAY,GAAG,~~MAAMV~~,WAAW,CAAE,CAAED,QAAJ,CAAtC;;AAEA,~~QAAMY~~,kBAAkB,GAAKC,IAAF,IAAY;~~AACtCf~~,IAAAA,QAAQ,~~CAAEe~~,IAAI,~~KAAKC~~,SAAT,GAAsB,~~GAAGD~~,IAAM,GAAGT,IAAM,EAAxC,~~GAA4CU~~,SAA9C,CAAR;AACA,GAFD;;AAIA,SACC;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,~~4CAAU~~,cAAI,QAAJ,~~CAAV~~,CADD,~~EAEC~~;AAAK,IAAA,SAAS,EAAC;AAAf,~~KACGd~~,QAAQ,GACT,qDACC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,gDADX;AAEC,IAAA,MAAM,EAAGD,MAFV;AAGC,IAAA,GAAG,EAAGP,uBAHP;AAIC,IAAA,QAAQ,EAAGM,QAJZ;AAKC,IAAA,~~KAAK~~,EAAGI;~~AALT~~,IADD,~~EAQC~~,4BAAC,wBAAD;AACC,IAAA,KAAK,EAAG,cAAI,eAAJ,CADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,SAAS,EAAC,iDAHX;AAIC,IAAA,KAAK,EAAGQ,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAe,EAJrB;AAKC,IAAA,GAAG,~~EAAGlB~~,uBALP;AAMC,IAAA,GAAG,EAAGC,wBAAwB,~~CAAEW~~,IAAF,CAN/B;AAOC,IAAA,eAAe,EAAG,CAPnB;AAQC,IAAA,cAAc,EAAG,KARlB;AASC,IAAA,QAAQ,EAAGQ,kBATZ;AAUC,IAAA,IAAI,EAAGH;AAVR,~~IARD~~,CADS,~~GAuBT~~,4BAAC,sBAAD;AACC,IAAA,GAAG,~~EAAGjB~~,uBADP;AAEC,IAAA,QAAQ,EAAGM,QAFZ;AAGC,IAAA,~~MAAM~~,EAAGC,MAAM,~~IAAIZ~~,~~cAHpB~~;~~AAIC~~,IAAA,KAAK,~~EAAGe~~;~~AAJT~~,~~IAxBF~~,~~EA+BC~~,4BAAC,qBAAD;AAAc,IAAA,OAAO,EAAGS,YAAxB;AAAuC,IAAA,QAAQ,~~EAAGX~~;AAAlD,~~IA/BD~~,~~CAFD~~,CADD;~~AAsCA~~","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tRangeControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport LinkedButton from './linked-button';\nimport useSetting from '../use-setting';\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasDefinedValues,\n\thasMixedValues,\n} from './utils';\n\nconst DEFAULT_VALUES = {\n\ttopLeft: ~~null~~,\n\ttopRight: ~~null~~,\n\tbottomLeft: ~~null~~,\n\tbottomRight: ~~null~~,\n};\nconst MIN_BORDER_RADIUS_VALUE = 0;\nconst MAX_BORDER_RADIUS_VALUES = {\n\tpx: 100,\n\tem: 20,\n\trem: 20,\n};\n\n/\n Control to display border radius options.\n \n @param {Object} props Component props.\n * @param {Function} props.onChange Callback to handle onChange.\n * @param {Object} props.values Border radius values.\n \n @return {WPElement} Custom border radius control.\n */\nexport default function BorderRadiusControl( { onChange, values } ) {\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasDefinedValues( values ) \|\| ! hasMixedValues( values )\n\t);\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) \|\| [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst unit = getAllUnit( ~~values~~ );\n\tconst unitConfig = units && units.find( ( item ) => item.value === unit );\n\tconst step = unitConfig?.step \|\| 1;\n\n\tconst [ allValue ] = parseQuantityAndUnitFromRawValue(\n\t\tgetAllValue( values )\n\t);\n\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( next !== undefined ? `${ next }${ unit }` : undefined );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"components-border-radius-control\">\n\t\t\t<legend>{ __( 'Radius' ) }</~~legend~~>\n\t\t\t<div className=\"components-border-radius-control__wrapper\">\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\tvalues={ values }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\t\tvalue={ allValue ?? '' }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ unit ] }\n\t\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<InputControls\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalues={ values \|\| DEFAULT_VALUES }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["DEFAULT_VALUES","topLeft","undefined","topRight","bottomLeft","bottomRight","MIN_BORDER_RADIUS_VALUE","MAX_BORDER_RADIUS_VALUES","px","em","rem","BorderRadiusControl","onChange","values","isLinked","setIsLinked","selectedUnits","setSelectedUnits","flat","units","availableUnits","unit","unitConfig","find","item","value","step","allValue","toggleLinked","handleSliderChange","next"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tBaseControl,\n\tRangeControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport LinkedButton from './linked-button';\nimport useSetting from '../use-setting';\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasDefinedValues,\n\thasMixedValues,\n} from './utils';\n\nconst DEFAULT_VALUES = {\n\ttopLeft: undefined,\n\ttopRight: undefined,\n\tbottomLeft: undefined,\n\tbottomRight: undefined,\n};\nconst MIN_BORDER_RADIUS_VALUE = 0;\nconst MAX_BORDER_RADIUS_VALUES = {\n\tpx: 100,\n\tem: 20,\n\trem: 20,\n};\n\n/\n Control to display border radius options.\n \n @param {Object} props Component props.\n * @param {Function} props.onChange Callback to handle onChange.\n * @param {Object} props.values Border radius values.\n \n @return {WPElement} Custom border radius control.\n */\nexport default function BorderRadiusControl( { onChange, values } ) {\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasDefinedValues( values ) \|\| ! hasMixedValues( values )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS unit only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState( {\n\t\tflat:\n\t\t\ttypeof values === 'string'\n\t\t\t\t? parseQuantityAndUnitFromRawValue( values )[ 1 ]\n\t\t\t\t: undefined,\n\t\ttopLeft: parseQuantityAndUnitFromRawValue( values?.topLeft )[ 1 ],\n\t\ttopRight: parseQuantityAndUnitFromRawValue( values?.topRight )[ 1 ],\n\t\tbottomLeft: parseQuantityAndUnitFromRawValue( values?.bottomLeft )[ 1 ],\n\t\tbottomRight: parseQuantityAndUnitFromRawValue(\n\t\t\tvalues?.bottomRight\n\t\t)[ 1 ],\n\t} );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) \|\| [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst unit = getAllUnit( selectedUnits );\n\tconst unitConfig = units && units.find( ( item ) => item.value === unit );\n\tconst step = unitConfig?.step \|\| 1;\n\n\tconst [ allValue ] = parseQuantityAndUnitFromRawValue(\n\t\tgetAllValue( values )\n\t);\n\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( next !== undefined ? `${ next }${ unit }` : undefined );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"components-border-radius-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ __( 'Radius' ) }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<div className=\"components-border-radius-control__wrapper\">\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\tvalues={ values }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tselectedUnits={ selectedUnits }\n\t\t\t\t\t\t\tsetSelectedUnits={ setSelectedUnits }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\t\tvalue={ allValue ?? '' }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ unit ] }\n\t\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<InputControls\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tselectedUnits={ selectedUnits }\n\t\t\t\t\t\tsetSelectedUnits={ setSelectedUnits }\n\t\t\t\t\t\tvalues={ values \|\| DEFAULT_VALUES }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n"]}

package/build/components/border-radius-control/input-controls.js CHANGED Viewed

@@ -28,6 +28,8 @@ const CORNERS = {
 function BoxInputControls(_ref) {
   let {
     onChange,
+    selectedUnits,
+    setSelectedUnits,
     values: valuesProp,
     ...props
   } = _ref;
@@ -35,11 +37,21 @@ function BoxInputControls(_ref) {
   const createHandleOnChange = corner => next => {
     if (!onChange) {
       return;
-    }
+    } // Filter out CSS-unit-only values to prevent invalid styles.
+    const isNumeric = !isNaN(parseFloat(next));
+    const nextValue = isNumeric ? next : undefined;
     onChange({ ...values,
-      [corner]: next ? next : undefined
+      [corner]: nextValue
     });
+  };
+  const createHandleOnUnitChange = side => next => {
+    const newUnits = { ...selectedUnits
+    };
+    newUnits[side] = next;
+    setSelectedUnits(newUnits);
   }; // For shorthand style & backwards compatibility, handle flat string value.
@@ -55,17 +67,20 @@ function BoxInputControls(_ref) {
   return (0, _element.createElement)("div", {
     className: "components-border-radius-control__input-controls-wrapper"
   }, Object.entries(CORNERS).map(_ref2 => {
-    let [key, label] = _ref2;
+    let [corner, label] = _ref2;
+    const [parsedQuantity, parsedUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values[corner]);
+    const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
     return (0, _element.createElement)(_components.Tooltip, {
       text: label,
       position: "top",
-      key: key
+      key: corner
     }, (0, _element.createElement)("div", {
       className: "components-border-radius-control__tooltip-wrapper"
     }, (0, _element.createElement)(_components.__experimentalUnitControl, (0, _extends2.default)({}, props, {
       "aria-label": label,
-      value: values[key],
-      onChange: createHandleOnChange(key)
+      value: [parsedQuantity, computedUnit].join(''),
+      onChange: createHandleOnChange(corner),
+      onUnitChange: createHandleOnUnitChange(corner)
     }))));
   }));
 }

package/build/components/border-radius-control/input-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/input-controls.js"],"names":["CORNERS","topLeft","topRight","bottomLeft","bottomRight","BoxInputControls","onChange","values","valuesProp","props","createHandleOnChange","corner","next","undefined","Object","entries","map","~~key~~","~~label~~"],"mappings":";;;;;;;;;;;;;AAGA;;~~AAIA~~;;~~AAPA~~;AACA;AACA;~~AAOA~~,MAAMA,OAAO,GAAG;AACfC,EAAAA,OAAO,EAAE,cAAI,UAAJ,CADM;AAEfC,EAAAA,QAAQ,EAAE,cAAI,WAAJ,CAFK;AAGfC,EAAAA,UAAU,EAAE,cAAI,aAAJ,CAHG;AAIfC,EAAAA,WAAW,EAAE,cAAI,cAAJ;AAJE,CAAhB;;AAOe,SAASC,gBAAT,~~OAIX~~;AAAA,~~MAJsC~~;AACzCC,IAAAA,QADyC;AAEzCC,IAAAA,MAAM,EAAEC,~~UAFiC~~;~~AAGzC~~,OAAGC;~~AAHsC~~,~~GAItC~~;;AACH,QAAMC,oBAAoB,GAAKC,MAAF,IAAgBC,IAAF,IAAY;AACtD,QAAK,~~CAAEN~~,QAAP,EAAkB;AACjB;AACA~~;;AAEDA~~,IAAAA,QAAQ,CAAE,EACT,~~GAAGC~~,MADM;AAET,OAAEI,MAAF,~~GAAYC~~,~~IAAI~~,~~GAAGA~~,~~IAAH~~,~~GAAUC~~;~~AAFjB~~,~~KAAF~~,CAAR;~~AAIA~~,~~GATD~~,~~CADG~~,~~CAYH~~;;;AACA,~~QAAMN~~,MAAM,GACX,OAAOC,UAAP,KAAsB,QAAtB,GACGA,UADH,GAEG;~~AACAP~~,IAAAA,OAAO,~~EAAEO~~,UADT;~~AAEAN~~,IAAAA,QAAQ,~~EAAEM~~,UAFV;~~AAGAL~~,IAAAA,UAAU,~~EAAEK~~,UAHZ;~~AAIAJ~~,IAAAA,WAAW,~~EAAEI~~;AAJb,GAHJ,~~CAbG~~,~~CAuBH~~;AACA;AACA;;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,~~KACGM~~,MAAM,CAACC,OAAP,~~CAAgBf~~,OAAhB,~~EAA0BgB~~,GAA1B,CAA+B;AAAA,~~QAAE~~,CAAEC,~~GAAF~~,~~EAAOC~~,~~KAAP~~,~~CAAF~~;~~AAAA~~,~~WAChC~~,4BAAC,mBAAD;AAAS,MAAA,IAAI,~~EAAGA~~,KAAhB;AAAwB,MAAA,QAAQ,EAAC,KAAjC;AAAuC,MAAA,GAAG,~~EAAGD~~;AAA7C,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,qCAAD,~~6BACMR~~,KADN;AAEC,~~oBAAaS~~,KAFd;AAGC,MAAA,KAAK,~~EAAGX~~,~~MAAM~~,~~CAAEU~~,~~GAAF~~,~~CAHf~~;~~AAIC~~,MAAA,QAAQ,~~EAAGP~~,oBAAoB,~~CAAEO~~,~~GAAF~~;~~AAJhC~~,OADD,CADD,~~CADgC~~;~~AAAA~~,~~GAA/B~~,CADH,CADD;~~AAgBA~~","sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst CORNERS = {\n\ttopLeft: __( 'Top left' ),\n\ttopRight: __( 'Top right' ),\n\tbottomLeft: __( 'Bottom left' ),\n\tbottomRight: __( 'Bottom right' ),\n};\n\nexport default function BoxInputControls( {\n\tonChange,\n\tvalues: valuesProp,\n\t...props\n} ) {\n\tconst createHandleOnChange = ( corner ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonChange( {\n\t\t\t...values,\n\t\t\t[ corner ]: ~~next~~ ? next : ~~undefined,\~~n\t\t} );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t };\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t{ Object.entries( CORNERS ).map( ( [ ~~key~~, label ] ) => (\n\t\t\t\t<Tooltip text={ label } position=\"top\" key={ ~~key~~ }>\n\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\tvalue={ ~~values~~[ ~~key~~ ] }\n\t\t\t\t\t\t\tonChange={ createHandleOnChange( ~~key~~ ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Tooltip>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/input-controls.js"],"names":["CORNERS","topLeft","topRight","bottomLeft","bottomRight","BoxInputControls","onChange","selectedUnits","setSelectedUnits","values","valuesProp","props","createHandleOnChange","corner","next","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","side","newUnits","Object","entries","map","label","parsedQuantity","parsedUnit","computedUnit","flat","join"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;AAQA,MAAMA,OAAO,GAAG;AACfC,EAAAA,OAAO,EAAE,cAAI,UAAJ,CADM;AAEfC,EAAAA,QAAQ,EAAE,cAAI,WAAJ,CAFK;AAGfC,EAAAA,UAAU,EAAE,cAAI,aAAJ,CAHG;AAIfC,EAAAA,WAAW,EAAE,cAAI,cAAJ;AAJE,CAAhB;;AAOe,SAASC,gBAAT,OAMX;AAAA,MANsC;AACzCC,IAAAA,QADyC;AAEzCC,IAAAA,aAFyC;AAGzCC,IAAAA,gBAHyC;AAIzCC,IAAAA,MAAM,EAAEC,UAJiC;AAKzC,OAAGC;AALsC,GAMtC;;AACH,QAAMC,oBAAoB,GAAKC,MAAF,IAAgBC,IAAF,IAAY;AACtD,QAAK,CAAER,QAAP,EAAkB;AACjB;AACA,KAHqD,CAKtD;;;AACA,UAAMS,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEH,IAAF,CAAZ,CAAzB;AACA,UAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAH,GAAUK,SAArC;AAEAb,IAAAA,QAAQ,CAAE,EACT,GAAGG,MADM;AAET,OAAEI,MAAF,GAAYK;AAFH,KAAF,CAAR;AAIA,GAbD;;AAeA,QAAME,wBAAwB,GAAKC,IAAF,IAAcP,IAAF,IAAY;AACxD,UAAMQ,QAAQ,GAAG,EAAE,GAAGf;AAAL,KAAjB;AACAe,IAAAA,QAAQ,CAAED,IAAF,CAAR,GAAmBP,IAAnB;AACAN,IAAAA,gBAAgB,CAAEc,QAAF,CAAhB;AACA,GAJD,CAhBG,CAsBH;;;AACA,QAAMb,MAAM,GACX,OAAOC,UAAP,KAAsB,QAAtB,GACGA,UADH,GAEG;AACAT,IAAAA,OAAO,EAAES,UADT;AAEAR,IAAAA,QAAQ,EAAEQ,UAFV;AAGAP,IAAAA,UAAU,EAAEO,UAHZ;AAIAN,IAAAA,WAAW,EAAEM;AAJb,GAHJ,CAvBG,CAiCH;AACA;AACA;;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGa,MAAM,CAACC,OAAP,CAAgBxB,OAAhB,EAA0ByB,GAA1B,CAA+B,SAAyB;AAAA,QAAvB,CAAEZ,MAAF,EAAUa,KAAV,CAAuB;AACzD,UAAM,CAAEC,cAAF,EAAkBC,UAAlB,IACL,gEAAkCnB,MAAM,CAAEI,MAAF,CAAxC,CADD;AAGA,UAAMgB,YAAY,GAAGpB,MAAM,CAAEI,MAAF,CAAN,GAClBe,UADkB,GAElBrB,aAAa,CAAEM,MAAF,CAAb,IAA2BN,aAAa,CAACuB,IAF5C;AAIA,WACC,4BAAC,mBAAD;AAAS,MAAA,IAAI,EAAGJ,KAAhB;AAAwB,MAAA,QAAQ,EAAC,KAAjC;AAAuC,MAAA,GAAG,EAAGb;AAA7C,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,qCAAD,6BACMF,KADN;AAEC,oBAAae,KAFd;AAGC,MAAA,KAAK,EAAG,CAAEC,cAAF,EAAkBE,YAAlB,EAAiCE,IAAjC,CACP,EADO,CAHT;AAMC,MAAA,QAAQ,EAAGnB,oBAAoB,CAAEC,MAAF,CANhC;AAOC,MAAA,YAAY,EAAGO,wBAAwB,CACtCP,MADsC;AAPxC,OADD,CADD,CADD;AAiBA,GAzBC,CADH,CADD;AA8BA","sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst CORNERS = {\n\ttopLeft: __( 'Top left' ),\n\ttopRight: __( 'Top right' ),\n\tbottomLeft: __( 'Bottom left' ),\n\tbottomRight: __( 'Bottom right' ),\n};\n\nexport default function BoxInputControls( {\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\t...props\n} ) {\n\tconst createHandleOnChange = ( corner ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tonChange( {\n\t\t\t...values,\n\t\t\t[ corner ]: nextValue,\n\t\t} );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tnewUnits[ side ] = next;\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t };\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ corner ] );\n\n\t\t\t\tconst computedUnit = values[ corner ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ corner ] \|\| selectedUnits.flat;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tooltip text={ label } position=\"top\" key={ corner }>\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\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\tonChange={ createHandleOnChange( corner ) }\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tcorner\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</div>\n\t);\n}\n"]}

package/build/components/border-radius-control/utils.js CHANGED Viewed

@@ -33,27 +33,24 @@ function mode(inputArray) {
   return arr.sort((a, b) => inputArray.filter(v => v === b).length - inputArray.filter(v => v === a).length).shift();
 }
 /**
- * Returns the most common CSS unit in the radius values.
- * Falls back to `px` as a default unit.
+ * Returns the most common CSS unit from the current CSS unit selections.
  *
- * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values. Default: `px`.
+ * - If a single flat border radius is set, its unit will be used
+ * - If individual corner selections, the most common of those will be used
+ * - Failing any unit selections a default of 'px' is returned.
+ *
+ * @param {Object} selectedUnits Unit selections for flat radius & each corner.
+ * @return {string} Most common CSS unit from current selections. Default: `px`.
  */
 function getAllUnit() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  if (typeof values === 'string') {
-    const [, unit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values);
-    return unit || 'px';
-  }
-  const allUnits = Object.values(values).map(value => {
-    const [, unit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
-    return unit;
-  });
-  return mode(allUnits) || 'px';
+  let selectedUnits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    flat,
+    ...cornerUnits
+  } = selectedUnits;
+  return flat || mode(Object.values(cornerUnits).filter(Boolean)) || 'px';
 }
 /**
  * Gets the 'all' input value and unit from values data.

package/build/components/border-radius-control/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/utils.js"],"names":["mode","inputArray","arr","sort","a","b","filter","v","length","shift","getAllUnit","~~values~~","~~unit~~","~~allUnits~~","Object","~~map~~","~~value~~","getAllValue","parsedQuantitiesAndUnits","allValues","every","allValue","undefined","hasMixedValues","isMixed","isNaN","parseFloat","hasDefinedValues","filteredValues"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,IAAT,CAAeC,UAAf,EAA4B;AAClC,QAAMC,GAAG,GAAG,CAAE,GAAGD,UAAL,CAAZ;AACA,SAAOC,GAAG,CACRC,IADK,CAEL,CAAEC,CAAF,EAAKC,CAAL,KACCJ,UAAU,CAACK,MAAX,CAAqBC,CAAF,IAASA,CAAC,KAAKF,CAAlC,EAAsCG,MAAtC,GACAP,UAAU,CAACK,MAAX,CAAqBC,CAAF,IAASA,CAAC,KAAKH,CAAlC,EAAsCI,MAJlC,EAMLC,KANK,EAAP;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,UAAT,~~GAAmC~~;AAAA,~~MAAdC~~,~~MAAc~~,uEAAL,EAAK~~;;AACzC~~,~~MAAK~~,~~OAAOA~~,~~MAAP~~,~~KAAkB,QAAvB,EAAkC~~;~~AACjC~~,~~UAAM~~,~~GAAIC,IAAJ,IAAa,gEAAkCD,MAAlC,CAAnB~~;AACA,~~WAAOC~~,IAAI,IAAI,~~IAAf;AACA;;AAED~~,~~QAAMC,QAAQ,GAAGC,~~MAAM,~~CAACH~~,MAAP,~~CAAeA~~,~~MAAf~~,~~EAAwBI~~,~~GAAxB~~,~~CAA+BC~~,~~KAAF~~,~~IAAa;AAC1D~~,~~UAAM~~,~~GAAIJ~~,~~IAAJ,IAAa,gEAAkCI,KAAlC,CAAnB~~;~~AACA,WAAOJ,IAAP~~;~~AACA,GAHgB,CAAjB;AAKA,SAAOZ,IAAI,CAAEa,QAAF,CAAJ,IAAoB,IAA3B;AACA;~~AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,~~SAASI~~,WAAT,GAAoC;AAAA,~~MAAdN~~,MAAc,uEAAL,EAAK;;AAC1C;AACD;AACA;AACA;AACA;AACC,MAAK,OAAOA,MAAP,KAAkB,QAAvB,EAAkC;AACjC,WAAOA,MAAP;AACA;;AAED,~~QAAMO~~,wBAAwB,GAAGJ,MAAM,~~CAACH~~,MAAP,CAAeA,MAAf,EAAwBI,GAAxB,CAA+BC,KAAF,IAC7D,gEAAkCA,KAAlC,CADgC,CAAjC;AAIA,~~QAAMG~~,SAAS,~~GAAGD~~,wBAAwB,~~CAACH~~,GAAzB,CACfC,KAAF;AAAA;;AAAA,sBAAaA,KAAK,CAAE,CAAF,CAAlB,6CAA2B,EAA3B;AAAA,GADiB,CAAlB;AAGA,~~QAAMH~~,QAAQ,~~GAAGK~~,wBAAwB,~~CAACH~~,GAAzB,CAAgCC,KAAF,IAAaA,KAAK,CAAE,CAAF,CAAhD,CAAjB;AAEA,QAAMA,KAAK,~~GAAGG~~,SAAS,~~CAACC~~,KAAV,~~CAAmBb~~,CAAF,IAASA,CAAC,~~KAAKY~~,SAAS,CAAE,CAAF,CAAzC,IACXA,SAAS,CAAE,CAAF,CADE,GAEX,EAFH;AAGA,~~QAAMP~~,IAAI,~~GAAGZ~~,IAAI,~~CAAEa~~,QAAF,CAAjB;AAEA,~~QAAMQ~~,QAAQ,GAAGL,KAAK,KAAK,CAAV,IAAeA,KAAf,GAAwB,GAAGA,KAAO,~~GAAGJ~~,IAAM,EAA3C,GAA+CU,SAAhE;AAEA,SAAOD,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASE,cAAT,GAAuC;AAAA,MAAdZ,MAAc,uEAAL,EAAK;AAC7C,QAAMU,QAAQ,~~GAAGJ~~,WAAW,~~CAAEN~~,MAAF,CAA5B;AACA,QAAMa,OAAO,GACZ,OAAOb,MAAP,KAAkB,QAAlB,GAA6B,KAA7B,GAAqCc,KAAK,CAAEC,UAAU,CAAEL,QAAF,CAAZ,CAD3C;AAGA,SAAOG,OAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,gBAAT,CAA2BhB,MAA3B,EAAoC;AAC1C,MAAK,CAAEA,MAAP,EAAgB;AACf,WAAO,KAAP;AACA,GAHyC,CAK1C;;;AACA,MAAK,OAAOA,MAAP,KAAkB,QAAvB,EAAkC;AACjC,WAAO,IAAP;AACA,GARyC,CAU1C;AACA;;;AACA,QAAMiB,cAAc,~~GAAGd~~,MAAM,~~CAACH~~,MAAP,CAAeA,MAAf,~~EAAwBL~~,MAAxB,~~CAAkCU~~,KAAF,IAAa;AACnE,WAAO,CAAC,CAAEA,KAAH,IAAYA,KAAK,KAAK,CAA7B;AACA,GAFsB,CAAvB;AAIA,SAAO,CAAC,CAAEY,cAAc,~~CAACpB~~,MAAzB;AACA","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';\n\n/\n Gets the (non-undefined) item with the highest occurrence within an array\n * Based in part on: https://stackoverflow.com/a/20762713\n \n Undefined values are always sorted to the end by `sort`, so this function\n * returns the first element, to always prioritize real values over undefined\n * values.\n \n See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description\n \n @param {Array<any>} inputArray Array of items to check.\n * @return {any} The item with the most occurrences.\n /\nexport function mode( inputArray ) {\n\tconst arr = [ ...inputArray ];\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tinputArray.filter( ( v ) => v === b ).length -\n\t\t\t\tinputArray.filter( ( v ) => v === a ).length\n\t\t)\n\t\t.shift();\n}\n\n/\n Returns the most common CSS unit in the ~~radius~~ ~~values~~.\n * ~~Falls~~ ~~back~~ to ~~`px`~~ as a default ~~unit~~.\n \n @param {Object~~\|string~~} ~~values~~ ~~Radius~~ ~~values~~.\n * @return {string} Most common CSS unit in ~~values~~. Default: `px`.\n /\nexport function getAllUnit( ~~values~~ = {} ) {\n\~~tif~~ ~~( typeof values === 'string' )~~ {~~\n\t\tconst~~ [ , ~~unit~~ ] = ~~parseQuantityAndUnitFromRawValue( values )~~;\n\t\treturn ~~unit \|\| 'px';\~~n\t}\~~n\n\tconst~~ ~~allUnits~~ = Object.values( ~~values~~ ).~~map~~( ( ~~value~~ ) => {\n\t~~\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( value~~ );\n~~\t\treturn unit;\n\t~~} ~~);\n~~\n\~~treturn mode( allUnits ) \|\| 'px';\~~n~~}\n\n~~/\n Gets the 'all' input value and unit from values data.\n \n @param {Object\|string} values Radius values.\n * @return {string} A value + unit for the 'all' input.\n /\nexport function getAllValue( values = {} ) {\n\t/\n\t Border radius support was originally a single pixel value.\n\t \n\t To maintain backwards compatibility treat this case as the all value.\n\t /\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) =>\n\t\tparseQuantityAndUnitFromRawValue( value )\n\t);\n\n\tconst allValues = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue = value === 0 \|\| value ? `${ value }${ unit }` : undefined;\n\n\treturn allValue;\n}\n\n/\n Checks to determine if values are mixed.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n /\nexport function hasMixedValues( values = {} ) {\n\tconst allValue = getAllValue( values );\n\tconst isMixed =\n\t\ttypeof values === 'string' ? false : isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/\n Checks to determine if values are defined.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value \|\| value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/utils.js"],"names":["mode","inputArray","arr","sort","a","b","filter","v","length","shift","getAllUnit","selectedUnits","flat","cornerUnits","Object","values","Boolean","getAllValue","parsedQuantitiesAndUnits","map","value","allValues","allUnits","every","unit","allValue","undefined","hasMixedValues","isMixed","isNaN","parseFloat","hasDefinedValues","filteredValues"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';\n\n/\n Gets the (non-undefined) item with the highest occurrence within an array\n * Based in part on: https://stackoverflow.com/a/20762713\n \n Undefined values are always sorted to the end by `sort`, so this function\n * returns the first element, to always prioritize real values over undefined\n * values.\n \n See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description\n \n @param {Array<any>} inputArray Array of items to check.\n * @return {any} The item with the most occurrences.\n /\nexport function mode( inputArray ) {\n\tconst arr = [ ...inputArray ];\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tinputArray.filter( ( v ) => v === b ).length -\n\t\t\t\tinputArray.filter( ( v ) => v === a ).length\n\t\t)\n\t\t.shift();\n}\n\n/\n Returns the most common CSS unit from the current CSS unit selections.\n \n - If a single flat border radius is set, its unit will be used\n * - If individual corner selections, the most common of those will be used\n * - Failing any unit selections a default of 'px' is returned.\n \n @param {Object} selectedUnits Unit selections for flat radius & each corner.\n * @return {string} Most common CSS unit from current selections. Default: `px`.\n /\nexport function getAllUnit( selectedUnits = {} ) {\n\tconst { flat, ...cornerUnits } = selectedUnits;\n\treturn (\n\t\tflat \|\| mode( Object.values( cornerUnits ).filter( Boolean ) ) \|\| 'px'\n\t);\n}\n\n/\n Gets the 'all' input value and unit from values data.\n \n @param {Object\|string} values Radius values.\n * @return {string} A value + unit for the 'all' input.\n /\nexport function getAllValue( values = {} ) {\n\t/\n\t Border radius support was originally a single pixel value.\n\t \n\t To maintain backwards compatibility treat this case as the all value.\n\t /\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) =>\n\t\tparseQuantityAndUnitFromRawValue( value )\n\t);\n\n\tconst allValues = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue = value === 0 \|\| value ? `${ value }${ unit }` : undefined;\n\n\treturn allValue;\n}\n\n/\n Checks to determine if values are mixed.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n /\nexport function hasMixedValues( values = {} ) {\n\tconst allValue = getAllValue( values );\n\tconst isMixed =\n\t\ttypeof values === 'string' ? false : isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/\n Checks to determine if values are defined.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value \|\| value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n"]}

package/build/components/colors/utils.js CHANGED Viewed

@@ -99,11 +99,15 @@ function getColorClassName(colorContextName, colorSlug) {
 function getMostReadableColor(colors, colorValue) {
   const colordColor = (0, _colord.colord)(colorValue);
-  return (0, _lodash.maxBy)(colors, _ref => {
+  const getColorContrast = _ref => {
     let {
       color
     } = _ref;
     return colordColor.contrast(color);
-  }).color;
+  };
+  const maxContrast = Math.max(...colors.map(getColorContrast));
+  return colors.find(color => getColorContrast(color) === maxContrast).color;
 }
 //# sourceMappingURL=utils.js.map

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

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

@@ -32,6 +32,17 @@ var _useSetting = _interopRequireDefault(require("../use-setting"));
  * Internal dependencies
  */
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return {string} Capitalized string.
+ */
+const upperFirst = _ref => {
+  let [firstLetter, ...rest] = _ref;
+  return firstLetter.toUpperCase() + rest.join('');
+};
 /**
  * Higher order component factory for injecting the `colorsArray` argument as
  * the colors prop in the `withCustomColors` HOC.
@@ -40,6 +51,8 @@ var _useSetting = _interopRequireDefault(require("../use-setting"));
  *
  * @return {Function} The higher order component.
  */
 const withCustomColorPalette = colorsArray => (0, _compose.createHigherOrderComponent)(WrappedComponent => props => (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, props, {
   colors: colorsArray
 })), 'withCustomColorPalette');
@@ -102,7 +115,7 @@ function createColorHOC(colorTypes, withColorPalette) {
       createSetters() {
         return (0, _lodash.reduce)(colorMap, (settersAccumulator, colorContext, colorAttributeName) => {
-          const upperFirstColorAttributeName = (0, _lodash.upperFirst)(colorAttributeName);
+          const upperFirstColorAttributeName = upperFirst(colorAttributeName);
           const customColorAttributeName = `custom${upperFirstColorAttributeName}`;
           settersAccumulator[`set${upperFirstColorAttributeName}`] = this.createSetColor(colorAttributeName, customColorAttributeName);
           return settersAccumulator;
@@ -119,13 +132,13 @@ function createColorHOC(colorTypes, withColorPalette) {
         };
       }
-      static getDerivedStateFromProps(_ref, previousState) {
+      static getDerivedStateFromProps(_ref2, previousState) {
         let {
           attributes,
           colors
-        } = _ref;
+        } = _ref2;
         return (0, _lodash.reduce)(colorMap, (newState, colorContext, colorAttributeName) => {
-          const colorObject = (0, _utils.getColorObjectByAttributeValues)(colors, attributes[colorAttributeName], attributes[`custom${(0, _lodash.upperFirst)(colorAttributeName)}`]);
+          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;
           /**

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","colors","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { kebabCase, reduce, upperFirst } 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 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 = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( typeof colorType === 'string'\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:\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 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 =\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 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[ 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"]}
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","colorObject","colorType","Component","constructor","setters","createSetters","colorUtils","getMostReadableColor","bind","state","colorValue","colors","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { kebabCase, reduce } 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 = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( typeof colorType === 'string'\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:\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 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 =\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 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[ 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 CHANGED Viewed

@@ -33,7 +33,7 @@ var _useSetting = _interopRequireDefault(require("../use-setting"));
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 const TAB_COLOR = {
   name: 'color',
-  title: 'Solid color',
+  title: 'Solid',
   value: 'color'
 };
 const TAB_GRADIENT = {
@@ -95,6 +95,11 @@ function ColorGradientControlInner(_ref) {
       clearable: clearable
     })
   };
+  const renderPanelType = type => (0, _element.createElement)("div", {
+    className: "block-editor-color-gradient-control__panel"
+  }, tabPanels[type]);
   return (0, _element.createElement)(_components.BaseControl, {
     __nextHasNoMarginBottom: true,
     className: (0, _classnames.default)('block-editor-color-gradient-control', className)
@@ -108,9 +113,7 @@ function ColorGradientControlInner(_ref) {
     className: "block-editor-color-gradient-control__tabs",
     tabs: TABS_SETTINGS,
     initialTabName: gradientValue ? TAB_GRADIENT.value : !!canChooseAColor && TAB_COLOR.value
-  }, tab => (0, _element.createElement)("div", {
-    className: "block-editor-color-gradient-control__tab-panel"
-  }, tabPanels[tab.value])), !canChooseAGradient && tabPanels[TAB_COLOR.value], !canChooseAColor && tabPanels[TAB_GRADIENT.value])));
+  }, tab => renderPanelType(tab.value)), !canChooseAGradient && renderPanelType(TAB_COLOR.value), !canChooseAColor && renderPanelType(TAB_GRADIENT.value))));
 }
 function ColorGradientControlSelect(props) {

package/build/components/colors-gradients/control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","canChooseAColor","canChooseAGradient","tabPanels","newColor","newGradient","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","key","hasOwnProperty"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AAWA;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AASA;AACA;AACA;AAGA,MAAMA,qBAAqB,GAAG,CAC7B,QAD6B,EAE7B,qBAF6B,EAG7B,WAH6B,EAI7B,wBAJ6B,CAA9B;AAOA,MAAMC,SAAS,GAAG;AACjBC,EAAAA,IAAI,EAAE,OADW;AAEjBC,EAAAA,KAAK,EAAE,~~aAFU~~;AAGjBC,EAAAA,KAAK,EAAE;AAHU,CAAlB;AAKA,MAAMC,YAAY,GAAG;AACpBH,EAAAA,IAAI,EAAE,UADc;AAEpBC,EAAAA,KAAK,EAAE,UAFa;AAGpBC,EAAAA,KAAK,EAAE;AAHa,CAArB;AAMA,MAAME,aAAa,GAAG,CAAEL,SAAF,EAAaI,YAAb,CAAtB;;AAEA,SAASE,yBAAT,OAgBI;AAAA,MAhBgC;AACnCC,IAAAA,MADmC;AAEnCC,IAAAA,SAFmC;AAGnCC,IAAAA,mBAHmC;AAInCC,IAAAA,sBAJmC;AAKnCC,IAAAA,gCALmC;AAMnCC,IAAAA,iCANmC;AAOnCC,IAAAA,SAPmC;AAQnCC,IAAAA,KARmC;AASnCC,IAAAA,aATmC;AAUnCC,IAAAA,gBAVmC;AAWnCC,IAAAA,UAXmC;AAYnCC,IAAAA,aAZmC;AAanCC,IAAAA,SAbmC;AAcnCC,IAAAA,SAAS,GAAG,IAduB;AAenCC,IAAAA;AAfmC,GAgBhC;AACH,QAAMC,eAAe,GACpBP,aAAa,KAAM,CAAE,qBAASR,MAAT,CAAF,IAAuB,CAAEE,mBAA/B,CADd;AAEA,QAAMc,kBAAkB,GACvBP,gBAAgB,KACd,CAAE,qBAASR,SAAT,CAAF,IAA0B,CAAEE,sBADd,CADjB;;AAIA,MAAK,CAAEY,eAAF,IAAqB,CAAEC,kBAA5B,EAAiD;AAChD,WAAO,IAAP;AACA;;AAED,QAAMC,SAAS,GAAG;AACjB,KAAExB,SAAS,CAACG,KAAZ,GACC,4BAAC,wBAAD;AACC,MAAA,KAAK,EAAGc,UADT;AAEC,MAAA,QAAQ,EACPM,kBAAkB,GACbE,QAAF,IAAgB;AAChBV,QAAAA,aAAa,CAAEU,QAAF,CAAb;AACAT,QAAAA,gBAAgB;AACf,OAJc,GAKfD,aARL;AAUQR,MAAAA,MAVR;AAUgBE,MAAAA,mBAVhB;AAWC,MAAA,gCAAgC,EAC/BE,gCAZF;AAcC,MAAA,iCAAiC,EAChCC,iCAfF;AAiBC,MAAA,SAAS,EAAGO,SAjBb;AAkBC,MAAA,WAAW,EAAGE;AAlBf,MAFgB;AAuBjB,KAAEjB,YAAY,CAACD,KAAf,GACC,4BAAC,0BAAD;AACC,MAAA,KAAK,EAAGe,aADT;AAEC,MAAA,QAAQ,EACPI,eAAe,GACVI,WAAF,IAAmB;AACnBV,QAAAA,gBAAgB,CAAEU,WAAF,CAAhB;AACAX,QAAAA,aAAa;AACZ,OAJW,GAKZC,gBARL;AAUQR,MAAAA,SAVR;AAUmBE,MAAAA,sBAVnB;AAWC,MAAA,gCAAgC,EAC/BC,gCAZF;AAcC,MAAA,iCAAiC,EAChCC,iCAfF;AAiBC,MAAA,SAAS,EAAGO;AAjBb;AAxBgB,GAAlB;AA8CA,SACC,4BAAC,uBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,SAAS,EAAG,yBACX,qCADW,~~EAEXN~~,SAFW;AAFb,KAOC;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACGO,SAAS,IACV,4CACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,uBAAD,CAAa,WAAb,QACGN,KADH,CADD,CADD,CAFF,EAUGQ,eAAe,IAAIC,kBAAnB,IACD,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,IAAI,EAAGlB,aAFR;AAGC,IAAA,cAAc,EACba,aAAa,GACVd,YAAY,CAACD,KADH,GAEV,CAAC,CAAEmB,eAAH,IAAsBtB,SAAS,CAACG;AANrC,~~KASKwB~~,GAAF,~~IACD;AAAK~~,~~IAAA~~,~~SAAS~~,~~EAAC;AAAf,KACGH,SAAS,CAAEG,~~GAAG,~~CAACxB~~,KAAN,~~CADZ~~,~~CAVF,~~CAXF,~~EA2BG~~,CAAEoB,kBAAF,~~IAAwBC~~,~~SAAS~~,~~CAAExB~~,SAAS,CAACG,KAAZ,~~CA3BpC~~,~~EA4BG~~,CAAEmB,eAAF,~~IAAqBE~~,~~SAAS~~,~~CAAEpB~~,YAAY,CAACD,KAAf,~~CA5BjC~~,CADD,CAPD,CADD;~~AA0CA~~;;AAED,~~SAASyB~~,0BAAT,CAAqCC,KAArC,EAA6C;AAC5C,QAAMC,qBAAqB,GAAG,EAA9B;AACAA,EAAAA,qBAAqB,~~CAACvB~~,MAAtB,GAA+B,yBAAY,eAAZ,CAA/B;~~AACAuB~~,EAAAA,qBAAqB,~~CAACtB~~,SAAtB,GAAkC,yBAAY,iBAAZ,CAAlC;~~AACAsB~~,EAAAA,qBAAqB,~~CAACrB~~,mBAAtB,GAA4C,CAAE,yBAAY,cAAZ,CAA9C;~~AACAqB~~,EAAAA,qBAAqB,~~CAACpB~~,sBAAtB,GAA+C,CAAE,yBAChD,sBADgD,CAAjD;AAIA,SACC,4BAAC,yBAAD,~~6BACWoB~~,qBADX,EACqCD,KADrC,EADD;AAKA;;AAED,SAASE,oBAAT,CAA+BF,KAA/B,EAAuC;AACtC,MACC,~~mBAAO9B~~,qBAAP,~~EAAgCiC~~,GAAF,IAAWH,KAAK,CAACI,cAAN,CAAsBD,GAAtB,CAAzC,CADD,EAEE;AACD,WAAO,4BAAC,yBAAD,EAAgCH,KAAhC,CAAP;AACA;;AACD,SAAO,4BAAC,0BAAD,EAAiCA,KAAjC,CAAP;AACA;;eAEcE,oB","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\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\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid ~~color~~',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) \|\| ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) \|\| ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t/>\n\t\t),\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\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 className=\"block-editor-color-gradient-control__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<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => (~~\n\t\t\t\t\t\t\t\t<div~~ ~~className=\"block-editor-color-gradient-control__tab-panel\">\n\t\t\t\t\t\t\t\t\t{ tabPanels[~~ tab.value ] }\n\t\t\t\t\t\t~~\t\t~~</~~div~~>\n\t\t\t\t\t~~\t\t~~) }\n\t\t\t\t\t\t~~</TabPanel>\n~~\t\t\t\t\t) }\n\t\t\t\t\t{ ! ~~canChooseAGradient~~ ~~&& tabPanels[ TAB_COLOR.value ] }\~~n\t\t\t\t\t{ ~~! canChooseAColor && tabPanels[~~ TAB_GRADIENT.value ] }\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"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","canChooseAColor","canChooseAGradient","tabPanels","newColor","newGradient","renderPanelType","type","tab","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 {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\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\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) \|\| ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) \|\| ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t}\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\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 className=\"block-editor-color-gradient-control__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<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\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/components/colors-gradients/dropdown.js CHANGED Viewed

@@ -72,7 +72,10 @@ const LabeledColorIndicator = _ref2 => {
   }, (0, _element.createElement)(_components.ColorIndicator, {
     className: "block-editor-panel-color-gradient-settings__color-indicator",
     colorValue: colorValue
-  }), (0, _element.createElement)(_components.FlexItem, null, label));
+  }), (0, _element.createElement)(_components.FlexItem, {
+    className: "block-editor-panel-color-gradient-settings__color-name",
+    title: label
+  }, label));
 }; // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
 // or as a `Button` if it isn't e.g. the controls are being rendered in
 // a `ToolsPanel`.
@@ -163,7 +166,7 @@ function ColorGradientSettingsDropdown(_ref4) {
       className: "block-editor-tools-panel-color-gradient-settings__dropdown",
       renderToggle: renderToggle(toggleSettings),
       renderContent: () => (0, _element.createElement)(_components.__experimentalDropdownContentWrapper, {
-        paddingSize: "medium"
+        paddingSize: "none"
       }, (0, _element.createElement)("div", {
         className: "block-editor-panel-color-gradient-settings__dropdown-content"
       }, (0, _element.createElement)(_control.default, controlProps)))

package/build/components/colors-gradients/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","label","isShownByDefault","undefined","resetAllFilter","LabeledColorIndicator","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","className","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","__unstableShift","map","index","controlProps","clearable","showTitle","toggleSettings"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAaA;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAWA;AACA;AACA;AAGA;AACA;AACA,MAAMA,kBAAkB,GAAG,QAAgD;AAAA,MAA9C;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,QAAX;AAAqBC,IAAAA,OAArB;AAA8B,OAAGC;AAAjC,GAA8C;;AAC1E,QAAMC,UAAU,GAAG,MAAM;AACxB,QAAKJ,OAAO,CAACK,UAAb,EAA0B;AACzBL,MAAAA,OAAO,CAACM,aAAR;AACA,KAFD,MAEO,IAAKN,OAAO,CAACO,aAAb,EAA6B;AACnCP,MAAAA,OAAO,CAACQ,gBAAR;AACA;AACD,GAND;;AAOA,SACC,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAG,MAAM;AAChB,aAAO,CAAC,CAAER,OAAO,CAACK,UAAX,IAAyB,CAAC,CAAEL,OAAO,CAACO,aAA3C;AACA,KAHF;AAIC,IAAA,KAAK,EAAGP,OAAO,CAACS,KAJjB;AAKC,IAAA,UAAU,EAAGL,UALd;AAMC,IAAA,gBAAgB,EACfJ,OAAO,CAACU,gBAAR,KAA6BC,SAA7B,GACGX,OAAO,CAACU,gBADX,GAEG;AATL,KAWMP,KAXN;AAYC,IAAA,SAAS,EAAC,wDAZX;AAaC,IAAA,OAAO,EAAGD,OAbX,CAcC;AACA;AAfD;AAgBC,IAAA,cAAc,EAAGF,OAAO,CAACY;AAhB1B,MAkBGX,QAlBH,CADD;AAsBA,CA9BD;;AAgCA,MAAMY,qBAAqB,GAAG;AAAA,MAAE;AAAER,IAAAA,UAAF;AAAcI,IAAAA;AAAd,GAAF;AAAA,SAC7B,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,0BAAD;AACC,IAAA,SAAS,EAAC,6DADX;AAEC,IAAA,UAAU,EAAGJ;AAFd,IADD,EAKC,4BAAC,oBAAD,~~QAAYI~~,~~KAAZ~~,CALD,CAD6B;AAAA,CAA9B,C,~~CAUA~~;AACA;AACA;;;AACA,MAAMK,YAAY,GACfC,QAAF,IACA,SAA4B;AAAA,MAA1B;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAA0B;AAC3B,QAAM;AAAEZ,IAAAA,UAAF;AAAcI,IAAAA;AAAd,MAAwBM,QAA9B;AAEA,QAAMG,WAAW,GAAG;AACnBC,IAAAA,OAAO,EAAEH,QADU;AAEnBI,IAAAA,SAAS,EAAE,yBACV,sDADU,EAEV;AAAE,iBAAWH;AAAb,KAFU,CAFQ;AAMnB,qBAAiBA;AANE,GAApB;AASA,SACC,4BAAC,kBAAD,EAAaC,WAAb,EACC,4BAAC,qBAAD;AACC,IAAA,UAAU,EAAGb,UADd;AAEC,IAAA,KAAK,EAAGI;AAFT,IADD,CADD;AAQA,CAtBF,C,CAwBA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACe,SAASY,6BAAT,QAUX;AAAA,MAVmD;AACtDC,IAAAA,MADsD;AAEtDC,IAAAA,mBAFsD;AAGtDC,IAAAA,sBAHsD;AAItDC,IAAAA,WAJsD;AAKtDC,IAAAA,SALsD;AAMtDX,IAAAA,QANsD;AAOtDY,IAAAA,gCAPsD;AAQtDC,IAAAA,iCARsD;AAStD,OAAGzB;AATmD,GAUnD;AACH,MAAI0B,YAAJ;;AACA,MAAKD,iCAAL,EAAyC;AACxCC,IAAAA,YAAY,GAAG;AACdC,MAAAA,SAAS,EAAE,YADG;AAEdC,MAAAA,MAAM,EAAE,EAFM;AAGdC,MAAAA,eAAe,EAAE;AAHH,KAAf;AAKA;;AAED,SACC,qDACGjB,QAAQ,CAACkB,GAAT,CAAc,CAAEjC,OAAF,EAAWkC,KAAX,KAAsB;AAAA;;AACrC,UAAMC,YAAY,GAAG;AACpBC,MAAAA,SAAS,EAAE,KADS;AAEpB/B,MAAAA,UAAU,EAAEL,OAAO,CAACK,UAFA;AAGpBiB,MAAAA,MAHoB;AAIpBC,MAAAA,mBAJoB;AAKpBC,MAAAA,sBALoB;AAMpBC,MAAAA,WANoB;AAOpBlB,MAAAA,aAAa,EAAEP,OAAO,CAACO,aAPH;AAQpBmB,MAAAA,SARoB;AASpBjB,MAAAA,KAAK,EAAET,OAAO,CAACS,KATK;AAUpBH,MAAAA,aAAa,EAAEN,OAAO,CAACM,aAVH;AAWpBE,MAAAA,gBAAgB,EAAER,OAAO,CAACQ,gBAXN;AAYpB6B,MAAAA,SAAS,EAAE,KAZS;AAapBV,MAAAA,gCAboB;AAcpBC,MAAAA,iCAdoB;AAepB,SAAG5B;AAfiB,KAArB;AAiBA,UAAMsC,cAAc,GAAG;AACtBjC,MAAAA,UAAU,2BAAEL,OAAO,CAACO,aAAV,yEAA2BP,OAAO,CAACK,UADvB;AAEtBI,MAAAA,KAAK,EAAET,OAAO,CAACS;AAFO,KAAvB;AAKA,WACCT,OAAO,IACN;AACA;AACA,gCAAC,kBAAD;AACC,MAAA,GAAG,EAAGkC,KADP;AAEC,MAAA,OAAO,EAAGlC;AAFX,OAGMG,KAHN,GAKC,4BAAC,oBAAD;AACC,MAAA,YAAY,EAAG0B,YADhB;AAEC,MAAA,SAAS,EAAC,4DAFX;AAGC,MAAA,YAAY,EAAGf,YAAY,CAAEwB,cAAF,CAH5B;AAIC,MAAA,aAAa,EAAG,MACf,4BAAC,gDAAD;AAAwB,QAAA,WAAW,EAAC;AAApC,SACC;AAAK,QAAA,SAAS,EAAC;AAAf,SACC,4BAAC,gBAAD,EACMH,YADN,CADD,CADD;AALF,MALD,CAJF;AA0BA,GAjDC,CADH,CADD;AAsDA","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue \|\| !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem>{ label }</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t};\n\n// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\t__unstableShift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"~~medium~~\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","label","isShownByDefault","undefined","resetAllFilter","LabeledColorIndicator","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","className","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","__unstableShift","map","index","controlProps","clearable","showTitle","toggleSettings"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue \|\| !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-name\"\n\t\t\ttitle={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t};\n\n// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\t__unstableShift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}

package/build/components/copy-handler/index.js CHANGED Viewed

@@ -144,6 +144,12 @@ function useClipboardHandler() {
             blocks = [head, ...inBetweenBlocks, tail];
           }
+          const wrapperBlockName = event.clipboardData.getData('__unstableWrapperBlockName');
+          if (wrapperBlockName) {
+            blocks = (0, _blocks.createBlock)(wrapperBlockName, JSON.parse(event.clipboardData.getData('__unstableWrapperBlockAttributes')), blocks);
+          }
           const serialized = (0, _blocks.serialize)(blocks);
           event.clipboardData.setData('text/plain', toPlainText(serialized));
           event.clipboardData.setData('text/html', serialized);