@wordpress/block-editor 12.1.0 → 12.3.0

package/build-module/components/spacing-sizes-control/{axial-input-controls.js → input-controls/axial.js}

@@ -4,20 +4,18 @@ import { createElement, Fragment } from "@wordpress/element";
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS } from './utils';
+import { LABELS, ICONS, hasAxisSupport } from '../utils';
 const groupedSides = ['vertical', 'horizontal'];
-export default function AxialInputControls(_ref) {
-  let {
-    onChange,
-    values,
-    sides,
-    spacingSizes,
-    type,
-    minimumCustomValue,
-    onMouseOver,
-    onMouseOut
-  } = _ref;
-
+export default function AxialInputControls({
+  minimumCustomValue,
+  onChange,
+  onMouseOut,
+  onMouseOver,
+  sides,
+  spacingSizes,
+  type,
+  values
+}) {
   const createHandleOnChange = side => next => {
     if (!onChange) {
       return;
@@ -40,22 +38,23 @@ export default function AxialInputControls(_ref) {
   }; // Filter sides if custom configuration provided, maintaining default order.
 
 
-  const filteredSides = sides !== null && sides !== void 0 && sides.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
+  const filteredSides = sides?.length ? groupedSides.filter(side => hasAxisSupport(sides, side)) : groupedSides;
   return createElement(Fragment, null, filteredSides.map(side => {
     const axisValue = side === 'vertical' ? values.top : values.left;
     return createElement(SpacingInputControl, {
-      value: axisValue,
-      onChange: createHandleOnChange(side),
-      label: LABELS[side],
       key: `spacing-sizes-control-${side}`,
-      withInputField: false,
+      icon: ICONS[side],
+      label: LABELS[side],
+      minimumCustomValue: minimumCustomValue,
+      onChange: createHandleOnChange(side),
+      onMouseOut: onMouseOut,
+      onMouseOver: onMouseOver,
       side: side,
       spacingSizes: spacingSizes,
       type: type,
-      minimumCustomValue: minimumCustomValue,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
+      value: axisValue,
+      withInputField: false
     });
   }));
 }
-//# sourceMappingURL=axial-input-controls.js.map
+//# sourceMappingURL=axial.js.map

package/build-module/components/spacing-sizes-control/input-controls/axial.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/axial.js"],"names":["SpacingInputControl","LABELS","ICONS","hasAxisSupport","groupedSides","AxialInputControls","minimumCustomValue","onChange","onMouseOut","onMouseOver","sides","spacingSizes","type","values","createHandleOnChange","side","next","nextValues","top","bottom","left","right","filteredSides","length","filter","map","axisValue"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,mBAAP,MAAgC,yBAAhC;AACA,SAASC,MAAT,EAAiBC,KAAjB,EAAwBC,cAAxB,QAA8C,UAA9C;AAEA,MAAMC,YAAY,GAAG,CAAE,UAAF,EAAc,YAAd,CAArB;AAEA,eAAe,SAASC,kBAAT,CAA6B;AAC3CC,EAAAA,kBAD2C;AAE3CC,EAAAA,QAF2C;AAG3CC,EAAAA,UAH2C;AAI3CC,EAAAA,WAJ2C;AAK3CC,EAAAA,KAL2C;AAM3CC,EAAAA,YAN2C;AAO3CC,EAAAA,IAP2C;AAQ3CC,EAAAA;AAR2C,CAA7B,EASX;AACH,QAAMC,oBAAoB,GAAKC,IAAF,IAAcC,IAAF,IAAY;AACpD,QAAK,CAAET,QAAP,EAAkB;AACjB;AACA;;AACD,UAAMU,UAAU,GAAG,EAAE,GAAGJ;AAAL,KAAnB;;AAEA,QAAKE,IAAI,KAAK,UAAd,EAA2B;AAC1BE,MAAAA,UAAU,CAACC,GAAX,GAAiBF,IAAjB;AACAC,MAAAA,UAAU,CAACE,MAAX,GAAoBH,IAApB;AACA;;AAED,QAAKD,IAAI,KAAK,YAAd,EAA6B;AAC5BE,MAAAA,UAAU,CAACG,IAAX,GAAkBJ,IAAlB;AACAC,MAAAA,UAAU,CAACI,KAAX,GAAmBL,IAAnB;AACA;;AAEDT,IAAAA,QAAQ,CAAEU,UAAF,CAAR;AACA,GAjBD,CADG,CAoBH;;;AACA,QAAMK,aAAa,GAAGZ,KAAK,EAAEa,MAAP,GACnBnB,YAAY,CAACoB,MAAb,CAAuBT,IAAF,IAAYZ,cAAc,CAAEO,KAAF,EAASK,IAAT,CAA/C,CADmB,GAEnBX,YAFH;AAIA,SACC,8BACGkB,aAAa,CAACG,GAAd,CAAqBV,IAAF,IAAY;AAChC,UAAMW,SAAS,GACdX,IAAI,KAAK,UAAT,GAAsBF,MAAM,CAACK,GAA7B,GAAmCL,MAAM,CAACO,IAD3C;AAEA,WACC,cAAC,mBAAD;AACC,MAAA,GAAG,EAAI,yBAAyBL,IAAM,EADvC;AAEC,MAAA,IAAI,EAAGb,KAAK,CAAEa,IAAF,CAFb;AAGC,MAAA,KAAK,EAAGd,MAAM,CAAEc,IAAF,CAHf;AAIC,MAAA,kBAAkB,EAAGT,kBAJtB;AAKC,MAAA,QAAQ,EAAGQ,oBAAoB,CAAEC,IAAF,CALhC;AAMC,MAAA,UAAU,EAAGP,UANd;AAOC,MAAA,WAAW,EAAGC,WAPf;AAQC,MAAA,IAAI,EAAGM,IARR;AASC,MAAA,YAAY,EAAGJ,YAThB;AAUC,MAAA,IAAI,EAAGC,IAVR;AAWC,MAAA,KAAK,EAAGc,SAXT;AAYC,MAAA,cAAc,EAAG;AAZlB,MADD;AAgBA,GAnBC,CADH,CADD;AAwBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { LABELS, ICONS, hasAxisSupport } from '../utils';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tvalues,\n} ) {\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = next;\n\t\t\tnextValues.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = next;\n\t\t\tnextValues.right = next;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => hasAxisSupport( sides, side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst axisValue =\n\t\t\t\t\tside === 'vertical' ? values.top : values.left;\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\ticon={ ICONS[ side ] }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tvalue={ axisValue }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/spacing-sizes-control/{input-controls.js → input-controls/separated.js}

@@ -4,20 +4,19 @@ import { createElement, Fragment } from "@wordpress/element";
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS } from './utils';
-export default function BoxInputControls(_ref) {
-  let {
-    values,
-    sides,
-    onChange,
-    spacingSizes,
-    type,
-    minimumCustomValue,
-    onMouseOver,
-    onMouseOut
-  } = _ref;
+import { ALL_SIDES, LABELS, ICONS } from '../utils';
+export default function SeparatedInputControls({
+  minimumCustomValue,
+  onChange,
+  onMouseOut,
+  onMouseOver,
+  sides,
+  spacingSizes,
+  type,
+  values
+}) {
   // Filter sides if custom configuration provided, maintaining default order.
-  const filteredSides = sides !== null && sides !== void 0 && sides.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
+  const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
 
   const createHandleOnChange = side => next => {
     const nextValues = { ...values
@@ -28,18 +27,19 @@ export default function BoxInputControls(_ref) {
 
   return createElement(Fragment, null, filteredSides.map(side => {
     return createElement(SpacingInputControl, {
-      value: values[side],
-      label: LABELS[side],
       key: `spacing-sizes-control-${side}`,
-      withInputField: false,
-      side: side,
+      icon: ICONS[side],
+      label: LABELS[side],
+      minimumCustomValue: minimumCustomValue,
       onChange: createHandleOnChange(side),
+      onMouseOut: onMouseOut,
+      onMouseOver: onMouseOver,
+      side: side,
       spacingSizes: spacingSizes,
       type: type,
-      minimumCustomValue: minimumCustomValue,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
+      value: values[side],
+      withInputField: false
     });
   }));
 }
-//# sourceMappingURL=input-controls.js.map
+//# sourceMappingURL=separated.js.map

package/build-module/components/spacing-sizes-control/input-controls/separated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/separated.js"],"names":["SpacingInputControl","ALL_SIDES","LABELS","ICONS","SeparatedInputControls","minimumCustomValue","onChange","onMouseOut","onMouseOver","sides","spacingSizes","type","values","filteredSides","length","filter","side","includes","createHandleOnChange","next","nextValues","map"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,mBAAP,MAAgC,yBAAhC;AACA,SAASC,SAAT,EAAoBC,MAApB,EAA4BC,KAA5B,QAAyC,UAAzC;AAEA,eAAe,SAASC,sBAAT,CAAiC;AAC/CC,EAAAA,kBAD+C;AAE/CC,EAAAA,QAF+C;AAG/CC,EAAAA,UAH+C;AAI/CC,EAAAA,WAJ+C;AAK/CC,EAAAA,KAL+C;AAM/CC,EAAAA,YAN+C;AAO/CC,EAAAA,IAP+C;AAQ/CC,EAAAA;AAR+C,CAAjC,EASX;AACH;AACA,QAAMC,aAAa,GAAGJ,KAAK,EAAEK,MAAP,GACnBb,SAAS,CAACc,MAAV,CAAoBC,IAAF,IAAYP,KAAK,CAACQ,QAAN,CAAgBD,IAAhB,CAA9B,CADmB,GAEnBf,SAFH;;AAIA,QAAMiB,oBAAoB,GAAKF,IAAF,IAAcG,IAAF,IAAY;AACpD,UAAMC,UAAU,GAAG,EAAE,GAAGR;AAAL,KAAnB;AACAQ,IAAAA,UAAU,CAAEJ,IAAF,CAAV,GAAqBG,IAArB;AAEAb,IAAAA,QAAQ,CAAEc,UAAF,CAAR;AACA,GALD;;AAOA,SACC,8BACGP,aAAa,CAACQ,GAAd,CAAqBL,IAAF,IAAY;AAChC,WACC,cAAC,mBAAD;AACC,MAAA,GAAG,EAAI,yBAAyBA,IAAM,EADvC;AAEC,MAAA,IAAI,EAAGb,KAAK,CAAEa,IAAF,CAFb;AAGC,MAAA,KAAK,EAAGd,MAAM,CAAEc,IAAF,CAHf;AAIC,MAAA,kBAAkB,EAAGX,kBAJtB;AAKC,MAAA,QAAQ,EAAGa,oBAAoB,CAAEF,IAAF,CALhC;AAMC,MAAA,UAAU,EAAGT,UANd;AAOC,MAAA,WAAW,EAAGC,WAPf;AAQC,MAAA,IAAI,EAAGQ,IARR;AASC,MAAA,YAAY,EAAGN,YAThB;AAUC,MAAA,IAAI,EAAGC,IAVR;AAWC,MAAA,KAAK,EAAGC,MAAM,CAAEI,IAAF,CAXf;AAYC,MAAA,cAAc,EAAG;AAZlB,MADD;AAgBA,GAjBC,CADH,CADD;AAsBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { ALL_SIDES, LABELS, ICONS } from '../utils';\n\nexport default function SeparatedInputControls( {\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tvalues,\n} ) {\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tconst nextValues = { ...values };\n\t\tnextValues[ side ] = next;\n\n\t\tonChange( nextValues );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\ticon={ ICONS[ side ] }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tvalue={ values[ side ] }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/spacing-sizes-control/input-controls/single.js

@@ -0,0 +1,40 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { LABELS } from '../utils';
+export default function SingleInputControl({
+  minimumCustomValue,
+  onChange,
+  onMouseOut,
+  onMouseOver,
+  showSideInLabel,
+  side,
+  spacingSizes,
+  type,
+  values
+}) {
+  const createHandleOnChange = currentSide => next => {
+    const nextValues = { ...values
+    };
+    nextValues[currentSide] = next;
+    onChange(nextValues);
+  };
+
+  return createElement(SpacingInputControl, {
+    label: LABELS[side],
+    minimumCustomValue: minimumCustomValue,
+    onChange: createHandleOnChange(side),
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    showSideInLabel: showSideInLabel,
+    side: side,
+    spacingSizes: spacingSizes,
+    type: type,
+    value: values[side],
+    withInputField: false
+  });
+}
+//# sourceMappingURL=single.js.map

package/build-module/components/spacing-sizes-control/input-controls/single.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/single.js"],"names":["SpacingInputControl","LABELS","SingleInputControl","minimumCustomValue","onChange","onMouseOut","onMouseOver","showSideInLabel","side","spacingSizes","type","values","createHandleOnChange","currentSide","next","nextValues"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,mBAAP,MAAgC,yBAAhC;AACA,SAASC,MAAT,QAAuB,UAAvB;AAEA,eAAe,SAASC,kBAAT,CAA6B;AAC3CC,EAAAA,kBAD2C;AAE3CC,EAAAA,QAF2C;AAG3CC,EAAAA,UAH2C;AAI3CC,EAAAA,WAJ2C;AAK3CC,EAAAA,eAL2C;AAM3CC,EAAAA,IAN2C;AAO3CC,EAAAA,YAP2C;AAQ3CC,EAAAA,IAR2C;AAS3CC,EAAAA;AAT2C,CAA7B,EAUX;AACH,QAAMC,oBAAoB,GAAKC,WAAF,IAAqBC,IAAF,IAAY;AAC3D,UAAMC,UAAU,GAAG,EAAE,GAAGJ;AAAL,KAAnB;AACAI,IAAAA,UAAU,CAAEF,WAAF,CAAV,GAA4BC,IAA5B;AAEAV,IAAAA,QAAQ,CAAEW,UAAF,CAAR;AACA,GALD;;AAOA,SACC,cAAC,mBAAD;AACC,IAAA,KAAK,EAAGd,MAAM,CAAEO,IAAF,CADf;AAEC,IAAA,kBAAkB,EAAGL,kBAFtB;AAGC,IAAA,QAAQ,EAAGS,oBAAoB,CAAEJ,IAAF,CAHhC;AAIC,IAAA,UAAU,EAAGH,UAJd;AAKC,IAAA,WAAW,EAAGC,WALf;AAMC,IAAA,eAAe,EAAGC,eANnB;AAOC,IAAA,IAAI,EAAGC,IAPR;AAQC,IAAA,YAAY,EAAGC,YARhB;AASC,IAAA,IAAI,EAAGC,IATR;AAUC,IAAA,KAAK,EAAGC,MAAM,CAAEH,IAAF,CAVf;AAWC,IAAA,cAAc,EAAG;AAXlB,IADD;AAeA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { LABELS } from '../utils';\n\nexport default function SingleInputControl( {\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tshowSideInLabel,\n\tside,\n\tspacingSizes,\n\ttype,\n\tvalues,\n} ) {\n\tconst createHandleOnChange = ( currentSide ) => ( next ) => {\n\t\tconst nextValues = { ...values };\n\t\tnextValues[ currentSide ] = next;\n\n\t\tonChange( nextValues );\n\t};\n\n\treturn (\n\t\t<SpacingInputControl\n\t\t\tlabel={ LABELS[ side ] }\n\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\tonMouseOut={ onMouseOut }\n\t\t\tonMouseOver={ onMouseOver }\n\t\t\tshowSideInLabel={ showSideInLabel }\n\t\t\tside={ side }\n\t\t\tspacingSizes={ spacingSizes }\n\t\t\ttype={ type }\n\t\t\tvalue={ values[ side ] }\n\t\t\twithInputField={ false }\n\t\t/>\n\t);\n}\n"]}

package/build-module/components/spacing-sizes-control/{spacing-input-control.js → input-controls/spacing-input-control.js}

@@ -1,26 +1,21 @@
 import { createElement, Fragment } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-
-import { useState, useMemo } from '@wordpress/element';
+import { Button, CustomSelectControl, Icon, RangeControl, __experimentalHStack as HStack, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { BaseControl, Button, RangeControl, CustomSelectControl, __experimentalUnitControl as UnitControl, __experimentalHStack as HStack, __experimentalUseCustomUnits as useCustomUnits, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
-import { usePrevious } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 
-import useSetting from '../use-setting';
-import { store as blockEditorStore } from '../../store';
-import { LABELS, getSliderValueFromPreset, getCustomValueFromPreset, getPresetValueFromCustomValue, isValueSpacingPreset } from './utils';
+import useSetting from '../../use-setting';
+import { store as blockEditorStore } from '../../../store';
+import { ALL_SIDES, LABELS, getSliderValueFromPreset, getCustomValueFromPreset, getPresetValueFromCustomValue, isValueSpacingPreset } from '../utils';
 const CUSTOM_VALUE_SETTINGS = {
   px: {
     max: 300,
@@ -47,27 +42,28 @@ const CUSTOM_VALUE_SETTINGS = {
     steps: 0.1
   }
 };
-export default function SpacingInputControl(_ref) {
-  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2, _CUSTOM_VALUE_SETTING3, _CUSTOM_VALUE_SETTING4, _spacingSizes$current;
-
-  let {
-    spacingSizes,
-    value,
-    side,
-    onChange,
-    isMixed = false,
-    type,
-    minimumCustomValue,
-    onMouseOver,
-    onMouseOut
-  } = _ref;
+export default function SpacingInputControl({
+  icon,
+  isMixed = false,
+  minimumCustomValue,
+  onChange,
+  onMouseOut,
+  onMouseOver,
+  showSideInLabel = true,
+  side,
+  spacingSizes,
+  type,
+  value
+}) {
+  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
+
   // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
   value = getPresetValueFromCustomValue(value, spacingSizes);
   let selectListSizes = spacingSizes;
   const showRangeControl = spacingSizes.length <= 8;
   const disableCustomSpacingSizes = useSelect(select => {
     const editorSettings = select(blockEditorStore).getSettings();
-    return editorSettings === null || editorSettings === void 0 ? void 0 : editorSettings.disableCustomSpacingSizes;
+    return editorSettings?.disableCustomSpacingSizes;
   });
   const [showCustomValueControl, setShowCustomValueControl] = useState(!disableCustomSpacingSizes && value !== undefined && !isValueSpacingPreset(value));
   const previousValue = usePrevious(value);
@@ -102,11 +98,7 @@ export default function SpacingInputControl(_ref) {
     }
   };
 
-  const customTooltipContent = newValue => {
-    var _spacingSizes$newValu;
-
-    return value === undefined ? undefined : (_spacingSizes$newValu = spacingSizes[newValue]) === null || _spacingSizes$newValu === void 0 ? void 0 : _spacingSizes$newValu.name;
-  };
+  const customTooltipContent = newValue => value === undefined ? undefined : spacingSizes[newValue]?.name;
 
   const customRangeValue = parseFloat(currentValue, 10);
 
@@ -117,8 +109,6 @@ export default function SpacingInputControl(_ref) {
   };
 
   const getNewPresetValue = (newSize, controlType) => {
-    var _spacingSizes$newSize;
-
     const size = parseInt(newSize, 10);
 
     if (controlType === 'selectList') {
@@ -133,7 +123,7 @@ export default function SpacingInputControl(_ref) {
       return '0';
     }
 
-    return `var:preset|spacing|${(_spacingSizes$newSize = spacingSizes[newSize]) === null || _spacingSizes$newSize === void 0 ? void 0 : _spacingSizes$newSize.slug}`;
+    return `var:preset|spacing|${spacingSizes[newSize]?.slug}`;
   };
 
   const handleCustomValueSliderChange = next => {
@@ -141,39 +131,24 @@ export default function SpacingInputControl(_ref) {
   };
 
   const allPlaceholder = isMixed ? __('Mixed') : null;
-  const currentValueHint = !isMixed ? customTooltipContent(currentValue) : __('Mixed');
   const options = selectListSizes.map((size, index) => ({
     key: index,
     name: size.name
   }));
-  const marks = spacingSizes.map((newValue, index) => ({
+  const marks = spacingSizes.map((_newValue, index) => ({
     value: index,
     label: undefined
   }));
-  const ariaLabel = sprintf( // translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)
-  __('%1$s %2$s'), LABELS[side], type === null || type === void 0 ? void 0 : type.toLowerCase());
-  const showHint = showRangeControl && !showCustomValueControl && currentValueHint !== undefined;
-  return createElement(Fragment, null, side !== 'all' && createElement(HStack, {
-    className: "components-spacing-sizes-control__side-labels"
-  }, createElement(BaseControl.VisualLabel, {
-    className: "components-spacing-sizes-control__side-label"
-  }, LABELS[side]), showHint && createElement(BaseControl.VisualLabel, {
-    className: "components-spacing-sizes-control__hint-single"
-  }, currentValueHint)), side === 'all' && showHint && createElement(BaseControl.VisualLabel, {
-    className: "components-spacing-sizes-control__hint-all"
-  }, currentValueHint), !disableCustomSpacingSizes && createElement(Button, {
-    label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
-    icon: settings,
-    onClick: () => {
-      setShowCustomValueControl(!showCustomValueControl);
-    },
-    isPressed: showCustomValueControl,
-    isSmall: true,
-    className: classnames({
-      'components-spacing-sizes-control__custom-toggle-all': side === 'all',
-      'components-spacing-sizes-control__custom-toggle-single': side !== 'all'
-    }),
-    iconSize: 24
+  const sideLabel = ALL_SIDES.includes(side) && showSideInLabel ? LABELS[side] : '';
+  const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
+  const ariaLabel = sprintf( // translators: 1: The side of the block being modified (top, bottom, left, All sides etc.). 2. Type of spacing being modified (Padding, margin, etc)
+  __('%1$s %2$s'), sideLabel, typeLabel).trim();
+  return createElement(HStack, {
+    className: "spacing-sizes-control__wrapper"
+  }, icon && createElement(Icon, {
+    className: "spacing-sizes-control__icon",
+    icon: icon,
+    size: 24
   }), showCustomValueControl && createElement(Fragment, null, createElement(UnitControl, {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
@@ -187,7 +162,7 @@ export default function SpacingInputControl(_ref) {
     disableUnits: isMixed,
     label: ariaLabel,
     hideLabelFromVision: true,
-    className: "components-spacing-sizes-control__custom-value-input",
+    className: "spacing-sizes-control__custom-value-input",
     size: '__unstable-large'
   }), createElement(RangeControl, {
     onMouseOver: onMouseOver,
@@ -196,30 +171,28 @@ export default function SpacingInputControl(_ref) {
     onBlur: onMouseOut,
     value: customRangeValue,
     min: 0,
-    max: (_CUSTOM_VALUE_SETTING = (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit]) === null || _CUSTOM_VALUE_SETTING2 === void 0 ? void 0 : _CUSTOM_VALUE_SETTING2.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
-    step: (_CUSTOM_VALUE_SETTING3 = (_CUSTOM_VALUE_SETTING4 = CUSTOM_VALUE_SETTINGS[selectedUnit]) === null || _CUSTOM_VALUE_SETTING4 === void 0 ? void 0 : _CUSTOM_VALUE_SETTING4.steps) !== null && _CUSTOM_VALUE_SETTING3 !== void 0 ? _CUSTOM_VALUE_SETTING3 : 0.1,
+    max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit]?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+    step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit]?.steps) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
     withInputField: false,
     onChange: handleCustomValueSliderChange,
-    className: "components-spacing-sizes-control__custom-value-range",
+    className: "spacing-sizes-control__custom-value-range",
     __nextHasNoMarginBottom: true
   })), showRangeControl && !showCustomValueControl && createElement(RangeControl, {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    className: "components-spacing-sizes-control__range-control",
+    className: "spacing-sizes-control__range-control",
     value: currentValue,
     onChange: newSize => onChange(getNewPresetValue(newSize)),
     onMouseDown: event => {
-      var _event$nativeEvent;
-
       // If mouse down is near start of range set initial value to 0, which
       // prevents the user have to drag right then left to get 0 setting.
-      if ((event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.offsetX) < 35) {
+      if (event?.nativeEvent?.offsetX < 35) {
         setInitialValue();
       }
     },
     withInputField: false,
     "aria-valuenow": currentValue,
-    "aria-valuetext": (_spacingSizes$current = spacingSizes[currentValue]) === null || _spacingSizes$current === void 0 ? void 0 : _spacingSizes$current.name,
+    "aria-valuetext": spacingSizes[currentValue]?.name,
     renderTooltipContent: customTooltipContent,
     min: 0,
     max: spacingSizes.length - 1,
@@ -230,7 +203,7 @@ export default function SpacingInputControl(_ref) {
     onFocus: onMouseOver,
     onBlur: onMouseOut
   }), !showRangeControl && !showCustomValueControl && createElement(CustomSelectControl, {
-    className: "components-spacing-sizes-control__custom-select-control",
+    className: "spacing-sizes-control__custom-select-control",
     value: options.find(option => option.key === currentValue) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
     ,
     onChange: selection => {
@@ -245,6 +218,16 @@ export default function SpacingInputControl(_ref) {
     onMouseOut: onMouseOut,
     onFocus: onMouseOver,
     onBlur: onMouseOut
+  }), !disableCustomSpacingSizes && createElement(Button, {
+    label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
+    icon: settings,
+    onClick: () => {
+      setShowCustomValueControl(!showCustomValueControl);
+    },
+    isPressed: showCustomValueControl,
+    isSmall: true,
+    className: "spacing-sizes-control__custom-toggle",
+    iconSize: 24
   }));
 }
 //# sourceMappingURL=spacing-input-control.js.map

package/build-module/components/spacing-sizes-control/input-controls/spacing-input-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js"],"names":["Button","CustomSelectControl","Icon","RangeControl","__experimentalHStack","HStack","__experimentalUnitControl","UnitControl","__experimentalUseCustomUnits","useCustomUnits","__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","useSelect","useState","useMemo","usePrevious","__","sprintf","settings","useSetting","store","blockEditorStore","ALL_SIDES","LABELS","getSliderValueFromPreset","getCustomValueFromPreset","getPresetValueFromCustomValue","isValueSpacingPreset","CUSTOM_VALUE_SETTINGS","px","max","steps","vw","vh","em","rm","SpacingInputControl","icon","isMixed","minimumCustomValue","onChange","onMouseOut","onMouseOver","showSideInLabel","side","spacingSizes","type","value","selectListSizes","showRangeControl","length","disableCustomSpacingSizes","select","editorSettings","getSettings","showCustomValueControl","setShowCustomValueControl","undefined","previousValue","units","availableUnits","currentValue","showCustomValueInSelectList","name","slug","size","selectedUnit","setInitialValue","customTooltipContent","newValue","customRangeValue","parseFloat","getNewCustomValue","newSize","isNumeric","isNaN","nextValue","getNewPresetValue","controlType","parseInt","handleCustomValueSliderChange","next","join","allPlaceholder","options","map","index","key","marks","_newValue","label","sideLabel","includes","typeLabel","toLowerCase","ariaLabel","trim","event","nativeEvent","offsetX","find","option","selection","selectedItem"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCustomSelectControl,\n\tIcon,\n\tRangeControl,\n\t__experimentalHStack as HStack,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../../use-setting';\nimport { store as blockEditorStore } from '../../../store';\nimport {\n\tALL_SIDES,\n\tLABELS,\n\tgetSliderValueFromPreset,\n\tgetCustomValueFromPreset,\n\tgetPresetValueFromCustomValue,\n\tisValueSpacingPreset,\n} from '../utils';\n\nconst CUSTOM_VALUE_SETTINGS = {\n\tpx: { max: 300, steps: 1 },\n\t'%': { max: 100, steps: 1 },\n\tvw: { max: 100, steps: 1 },\n\tvh: { max: 100, steps: 1 },\n\tem: { max: 10, steps: 0.1 },\n\trm: { max: 10, steps: 0.1 },\n};\n\nexport default function SpacingInputControl( {\n\ticon,\n\tisMixed = false,\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tshowSideInLabel = true,\n\tside,\n\tspacingSizes,\n\ttype,\n\tvalue,\n} ) {\n\t// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.\n\tvalue = getPresetValueFromCustomValue( value, spacingSizes );\n\n\tlet selectListSizes = spacingSizes;\n\tconst showRangeControl = spacingSizes.length <= 8;\n\n\tconst disableCustomSpacingSizes = useSelect( ( select ) => {\n\t\tconst editorSettings = select( blockEditorStore ).getSettings();\n\t\treturn editorSettings?.disableCustomSpacingSizes;\n\t} );\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomSpacingSizes &&\n\t\t\tvalue !== undefined &&\n\t\t\t! isValueSpacingPreset( value )\n\t);\n\n\tconst previousValue = usePrevious( value );\n\tif (\n\t\t!! value &&\n\t\tpreviousValue !== value &&\n\t\t! isValueSpacingPreset( value ) &&\n\t\tshowCustomValueControl !== true\n\t) {\n\t\tsetShowCustomValueControl( true );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tlet currentValue = null;\n\n\tconst showCustomValueInSelectList =\n\t\t! showRangeControl &&\n\t\t! showCustomValueControl &&\n\t\tvalue !== undefined &&\n\t\t( ! isValueSpacingPreset( value ) ||\n\t\t\t( isValueSpacingPreset( value ) && isMixed ) );\n\n\tif ( showCustomValueInSelectList ) {\n\t\tselectListSizes = [\n\t\t\t...spacingSizes,\n\t\t\t{\n\t\t\t\tname: ! isMixed\n\t\t\t\t\t? // translators: A custom measurement, eg. a number followed by a unit like 12px.\n\t\t\t\t\t  sprintf( __( 'Custom (%s)' ), value )\n\t\t\t\t\t: __( 'Mixed' ),\n\t\t\t\tslug: 'custom',\n\t\t\t\tsize: value,\n\t\t\t},\n\t\t];\n\t\tcurrentValue = selectListSizes.length - 1;\n\t} else if ( ! isMixed ) {\n\t\tcurrentValue = ! showCustomValueControl\n\t\t\t? getSliderValueFromPreset( value, spacingSizes )\n\t\t\t: getCustomValueFromPreset( value, spacingSizes );\n\t}\n\n\tconst selectedUnit =\n\t\tuseMemo(\n\t\t\t() => parseQuantityAndUnitFromRawValue( currentValue ),\n\t\t\t[ currentValue ]\n\t\t)[ 1 ] || units[ 0 ].value;\n\n\tconst setInitialValue = () => {\n\t\tif ( value === undefined ) {\n\t\t\tonChange( '0' );\n\t\t}\n\t};\n\n\tconst customTooltipContent = ( newValue ) =>\n\t\tvalue === undefined ? undefined : spacingSizes[ newValue ]?.name;\n\n\tconst customRangeValue = parseFloat( currentValue, 10 );\n\n\tconst getNewCustomValue = ( newSize ) => {\n\t\tconst isNumeric = ! isNaN( parseFloat( newSize ) );\n\t\tconst nextValue = isNumeric ? newSize : undefined;\n\t\treturn nextValue;\n\t};\n\n\tconst getNewPresetValue = ( newSize, controlType ) => {\n\t\tconst size = parseInt( newSize, 10 );\n\n\t\tif ( controlType === 'selectList' ) {\n\t\t\tif ( size === 0 ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif ( size === 1 ) {\n\t\t\t\treturn '0';\n\t\t\t}\n\t\t} else if ( size === 0 ) {\n\t\t\treturn '0';\n\t\t}\n\t\treturn `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;\n\t};\n\n\tconst handleCustomValueSliderChange = ( next ) => {\n\t\tonChange( [ next, selectedUnit ].join( '' ) );\n\t};\n\n\tconst allPlaceholder = isMixed ? __( 'Mixed' ) : null;\n\n\tconst options = selectListSizes.map( ( size, index ) => ( {\n\t\tkey: index,\n\t\tname: size.name,\n\t} ) );\n\n\tconst marks = spacingSizes.map( ( _newValue, index ) => ( {\n\t\tvalue: index,\n\t\tlabel: undefined,\n\t} ) );\n\n\tconst sideLabel =\n\t\tALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';\n\tconst typeLabel = showSideInLabel ? type?.toLowerCase() : type;\n\n\tconst ariaLabel = sprintf(\n\t\t// translators: 1: The side of the block being modified (top, bottom, left, All sides etc.). 2. Type of spacing being modified (Padding, margin, etc)\n\t\t__( '%1$s %2$s' ),\n\t\tsideLabel,\n\t\ttypeLabel\n\t).trim();\n\n\treturn (\n\t\t<HStack className=\"spacing-sizes-control__wrapper\">\n\t\t\t{ icon && (\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"spacing-sizes-control__icon\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showCustomValueControl && (\n\t\t\t\t<>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonFocus={ onMouseOver }\n\t\t\t\t\t\tonBlur={ onMouseOut }\n\t\t\t\t\t\tonChange={ ( newSize ) =>\n\t\t\t\t\t\t\tonChange( getNewCustomValue( newSize ) )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ currentValue }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tmin={ minimumCustomValue }\n\t\t\t\t\t\tplaceholder={ allPlaceholder }\n\t\t\t\t\t\tdisableUnits={ isMixed }\n\t\t\t\t\t\tlabel={ ariaLabel }\n\t\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\t\tclassName=\"spacing-sizes-control__custom-value-input\"\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t/>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonFocus={ onMouseOver }\n\t\t\t\t\t\tonBlur={ onMouseOut }\n\t\t\t\t\t\tvalue={ customRangeValue }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }\n\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ]?.steps ?? 0.1\n\t\t\t\t\t\t}\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tonChange={ handleCustomValueSliderChange }\n\t\t\t\t\t\tclassName=\"spacing-sizes-control__custom-value-range\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tclassName=\"spacing-sizes-control__range-control\"\n\t\t\t\t\tvalue={ currentValue }\n\t\t\t\t\tonChange={ ( newSize ) =>\n\t\t\t\t\t\tonChange( getNewPresetValue( newSize ) )\n\t\t\t\t\t}\n\t\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\t\t// If mouse down is near start of range set initial value to 0, which\n\t\t\t\t\t\t// prevents the user have to drag right then left to get 0 setting.\n\t\t\t\t\t\tif ( event?.nativeEvent?.offsetX < 35 ) {\n\t\t\t\t\t\t\tsetInitialValue();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={ currentValue }\n\t\t\t\t\taria-valuetext={ spacingSizes[ currentValue ]?.name }\n\t\t\t\t\trenderTooltipContent={ customTooltipContent }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ spacingSizes.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ ariaLabel }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tonFocus={ onMouseOver }\n\t\t\t\t\tonBlur={ onMouseOut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<CustomSelectControl\n\t\t\t\t\tclassName=\"spacing-sizes-control__custom-select-control\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\toptions.find(\n\t\t\t\t\t\t\t( option ) => option.key === currentValue\n\t\t\t\t\t\t) || '' // passing undefined here causes a downshift controlled/uncontrolled warning\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( selection ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tgetNewPresetValue(\n\t\t\t\t\t\t\t\tselection.selectedItem.key,\n\t\t\t\t\t\t\t\t'selectList'\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\toptions={ options }\n\t\t\t\t\tlabel={ ariaLabel }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\t__nextUnconstrainedWidth={ true }\n\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tonFocus={ onMouseOver }\n\t\t\t\t\tonBlur={ onMouseOut }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! disableCustomSpacingSizes && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tisSmall\n\t\t\t\t\tclassName=\"spacing-sizes-control__custom-toggle\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n"]}

package/build-module/components/spacing-sizes-control/sides-dropdown/index.js

@@ -0,0 +1,73 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import { getSupportedMenuItems, VIEWS } from '../utils';
+const checkIcon = createElement(Icon, {
+  icon: check,
+  size: 24
+});
+export default function SidesDropdown({
+  label: labelProp,
+  onChange,
+  sides,
+  value
+}) {
+  if (!sides || !sides.length) {
+    return;
+  }
+
+  const supportedItems = getSupportedMenuItems(sides);
+  const sideIcon = supportedItems[value].icon;
+  const {
+    custom: customItem,
+    ...menuItems
+  } = supportedItems;
+  return createElement(DropdownMenu, {
+    icon: sideIcon,
+    label: labelProp,
+    className: "spacing-sizes-control__dropdown",
+    toggleProps: {
+      isSmall: true
+    }
+  }, ({
+    onClose
+  }) => {
+    return createElement(Fragment, null, createElement(MenuGroup, null, Object.entries(menuItems).map(([slug, {
+      label,
+      icon
+    }]) => {
+      const isSelected = value === slug;
+      return createElement(MenuItem, {
+        key: slug,
+        icon: icon,
+        iconPosition: "left",
+        isSelected: isSelected,
+        role: "menuitemradio",
+        onClick: () => {
+          onChange(slug);
+          onClose();
+        },
+        suffix: isSelected ? checkIcon : undefined
+      }, label);
+    })), !!customItem && createElement(MenuGroup, null, createElement(MenuItem, {
+      icon: customItem.icon,
+      iconPosition: "left",
+      isSelected: value === VIEWS.custom,
+      role: "menuitemradio",
+      onClick: () => {
+        onChange(VIEWS.custom);
+        onClose();
+      },
+      suffix: value === VIEWS.custom ? checkIcon : undefined
+    }, customItem.label)));
+  });
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/spacing-sizes-control/sides-dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js"],"names":["DropdownMenu","Icon","MenuGroup","MenuItem","check","getSupportedMenuItems","VIEWS","checkIcon","SidesDropdown","label","labelProp","onChange","sides","value","length","supportedItems","sideIcon","icon","custom","customItem","menuItems","isSmall","onClose","Object","entries","map","slug","isSelected","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,EAAuBC,IAAvB,EAA6BC,SAA7B,EAAwCC,QAAxC,QAAwD,uBAAxD;AACA,SAASC,KAAT,QAAsB,kBAAtB;AAEA;AACA;AACA;;AACA,SAASC,qBAAT,EAAgCC,KAAhC,QAA6C,UAA7C;AAEA,MAAMC,SAAS,GAAG,cAAC,IAAD;AAAM,EAAA,IAAI,EAAGH,KAAb;AAAqB,EAAA,IAAI,EAAG;AAA5B,EAAlB;AAEA,eAAe,SAASI,aAAT,CAAwB;AACtCC,EAAAA,KAAK,EAAEC,SAD+B;AAEtCC,EAAAA,QAFsC;AAGtCC,EAAAA,KAHsC;AAItCC,EAAAA;AAJsC,CAAxB,EAKX;AACH,MAAK,CAAED,KAAF,IAAW,CAAEA,KAAK,CAACE,MAAxB,EAAiC;AAChC;AACA;;AAED,QAAMC,cAAc,GAAGV,qBAAqB,CAAEO,KAAF,CAA5C;AACA,QAAMI,QAAQ,GAAGD,cAAc,CAAEF,KAAF,CAAd,CAAwBI,IAAzC;AACA,QAAM;AAAEC,IAAAA,MAAM,EAAEC,UAAV;AAAsB,OAAGC;AAAzB,MAAuCL,cAA7C;AAEA,SACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGC,QADR;AAEC,IAAA,KAAK,EAAGN,SAFT;AAGC,IAAA,SAAS,EAAC,iCAHX;AAIC,IAAA,WAAW,EAAG;AAAEW,MAAAA,OAAO,EAAE;AAAX;AAJf,KAMG,CAAE;AAAEC,IAAAA;AAAF,GAAF,KAAmB;AACpB,WACC,8BACC,cAAC,SAAD,QACGC,MAAM,CAACC,OAAP,CAAgBJ,SAAhB,EAA4BK,GAA5B,CACD,CAAE,CAAEC,IAAF,EAAQ;AAAEjB,MAAAA,KAAF;AAASQ,MAAAA;AAAT,KAAR,CAAF,KAAiC;AAChC,YAAMU,UAAU,GAAGd,KAAK,KAAKa,IAA7B;AACA,aACC,cAAC,QAAD;AACC,QAAA,GAAG,EAAGA,IADP;AAEC,QAAA,IAAI,EAAGT,IAFR;AAGC,QAAA,YAAY,EAAC,MAHd;AAIC,QAAA,UAAU,EAAGU,UAJd;AAKC,QAAA,IAAI,EAAC,eALN;AAMC,QAAA,OAAO,EAAG,MAAM;AACfhB,UAAAA,QAAQ,CAAEe,IAAF,CAAR;AACAJ,UAAAA,OAAO;AACP,SATF;AAUC,QAAA,MAAM,EACLK,UAAU,GACPpB,SADO,GAEPqB;AAbL,SAgBGnB,KAhBH,CADD;AAoBA,KAvBA,CADH,CADD,EA4BG,CAAC,CAAEU,UAAH,IACD,cAAC,SAAD,QACC,cAAC,QAAD;AACC,MAAA,IAAI,EAAGA,UAAU,CAACF,IADnB;AAEC,MAAA,YAAY,EAAC,MAFd;AAGC,MAAA,UAAU,EAAGJ,KAAK,KAAKP,KAAK,CAACY,MAH9B;AAIC,MAAA,IAAI,EAAC,eAJN;AAKC,MAAA,OAAO,EAAG,MAAM;AACfP,QAAAA,QAAQ,CAAEL,KAAK,CAACY,MAAR,CAAR;AACAI,QAAAA,OAAO;AACP,OARF;AASC,MAAA,MAAM,EACLT,KAAK,KAAKP,KAAK,CAACY,MAAhB,GACGX,SADH,GAEGqB;AAZL,OAeGT,UAAU,CAACV,KAfd,CADD,CA7BF,CADD;AAoDA,GA3DF,CADD;AA+DA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';\nimport { check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedMenuItems, VIEWS } from '../utils';\n\nconst checkIcon = <Icon icon={ check } size={ 24 } />;\n\nexport default function SidesDropdown( {\n\tlabel: labelProp,\n\tonChange,\n\tsides,\n\tvalue,\n} ) {\n\tif ( ! sides || ! sides.length ) {\n\t\treturn;\n\t}\n\n\tconst supportedItems = getSupportedMenuItems( sides );\n\tconst sideIcon = supportedItems[ value ].icon;\n\tconst { custom: customItem, ...menuItems } = supportedItems;\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\ticon={ sideIcon }\n\t\t\tlabel={ labelProp }\n\t\t\tclassName=\"spacing-sizes-control__dropdown\"\n\t\t\ttoggleProps={ { isSmall: true } }\n\t\t>\n\t\t\t{ ( { onClose } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ Object.entries( menuItems ).map(\n\t\t\t\t\t\t\t\t( [ slug, { label, icon } ] ) => {\n\t\t\t\t\t\t\t\t\tconst isSelected = value === slug;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange( slug );\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t? checkIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t\t</MenuItem>\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</MenuGroup>\n\t\t\t\t\t\t{ !! customItem && (\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\ticon={ customItem.icon }\n\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\tisSelected={ value === VIEWS.custom }\n\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange( VIEWS.custom );\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\tvalue === VIEWS.custom\n\t\t\t\t\t\t\t\t\t\t\t? checkIcon\n\t\t\t\t\t\t\t\t\t\t\t: undefined\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\t\t{ customItem.label }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t</MenuGroup>\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</DropdownMenu>\n\t);\n}\n"]}