@wordpress/block-editor 12.2.0 → 12.3.0

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

@@ -9,27 +9,21 @@ exports.default = SpacingInputControl;
 
 var _element = require("@wordpress/element");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("@wordpress/components");
 
 var _data = require("@wordpress/data");
 
-var _components = require("@wordpress/components");
+var _compose = require("@wordpress/compose");
 
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
-var _compose = require("@wordpress/compose");
+var _useSetting = _interopRequireDefault(require("../../use-setting"));
 
-var _useSetting = _interopRequireDefault(require("../use-setting"));
+var _store = require("../../../store");
 
-var _store = require("../../store");
-
-var _utils = require("./utils");
-
-/**
- * External dependencies
- */
+var _utils = require("../utils");
 
 /**
  * WordPress dependencies
@@ -65,27 +59,28 @@ const CUSTOM_VALUE_SETTINGS = {
   }
 };
 
-function SpacingInputControl(_ref) {
-  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2, _CUSTOM_VALUE_SETTING3, _CUSTOM_VALUE_SETTING4, _spacingSizes$current;
+function SpacingInputControl({
+  icon,
+  isMixed = false,
+  minimumCustomValue,
+  onChange,
+  onMouseOut,
+  onMouseOver,
+  showSideInLabel = true,
+  side,
+  spacingSizes,
+  type,
+  value
+}) {
+  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
 
-  let {
-    spacingSizes,
-    value,
-    side,
-    onChange,
-    isMixed = false,
-    type,
-    minimumCustomValue,
-    onMouseOver,
-    onMouseOut
-  } = _ref;
   // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
   value = (0, _utils.getPresetValueFromCustomValue)(value, spacingSizes);
   let selectListSizes = spacingSizes;
   const showRangeControl = spacingSizes.length <= 8;
   const disableCustomSpacingSizes = (0, _data.useSelect)(select => {
     const editorSettings = select(_store.store).getSettings();
-    return editorSettings === null || editorSettings === void 0 ? void 0 : editorSettings.disableCustomSpacingSizes;
+    return editorSettings?.disableCustomSpacingSizes;
   });
   const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomSpacingSizes && value !== undefined && !(0, _utils.isValueSpacingPreset)(value));
   const previousValue = (0, _compose.usePrevious)(value);
@@ -120,11 +115,7 @@ 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);
 
@@ -135,8 +126,6 @@ function SpacingInputControl(_ref) {
   };
 
   const getNewPresetValue = (newSize, controlType) => {
-    var _spacingSizes$newSize;
-
     const size = parseInt(newSize, 10);
 
     if (controlType === 'selectList') {
@@ -151,7 +140,7 @@ 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 => {
@@ -159,39 +148,24 @@ function SpacingInputControl(_ref) {
   };
 
   const allPlaceholder = isMixed ? (0, _i18n.__)('Mixed') : null;
-  const currentValueHint = !isMixed ? customTooltipContent(currentValue) : (0, _i18n.__)('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 = (0, _i18n.sprintf)( // translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)
-  (0, _i18n.__)('%1$s %2$s'), _utils.LABELS[side], type === null || type === void 0 ? void 0 : type.toLowerCase());
-  const showHint = showRangeControl && !showCustomValueControl && currentValueHint !== undefined;
-  return (0, _element.createElement)(_element.Fragment, null, side !== 'all' && (0, _element.createElement)(_components.__experimentalHStack, {
-    className: "components-spacing-sizes-control__side-labels"
-  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, {
-    className: "components-spacing-sizes-control__side-label"
-  }, _utils.LABELS[side]), showHint && (0, _element.createElement)(_components.BaseControl.VisualLabel, {
-    className: "components-spacing-sizes-control__hint-single"
-  }, currentValueHint)), side === 'all' && showHint && (0, _element.createElement)(_components.BaseControl.VisualLabel, {
-    className: "components-spacing-sizes-control__hint-all"
-  }, currentValueHint), !disableCustomSpacingSizes && (0, _element.createElement)(_components.Button, {
-    label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
-    icon: _icons.settings,
-    onClick: () => {
-      setShowCustomValueControl(!showCustomValueControl);
-    },
-    isPressed: showCustomValueControl,
-    isSmall: true,
-    className: (0, _classnames.default)({
-      'components-spacing-sizes-control__custom-toggle-all': side === 'all',
-      'components-spacing-sizes-control__custom-toggle-single': side !== 'all'
-    }),
-    iconSize: 24
+  const sideLabel = _utils.ALL_SIDES.includes(side) && showSideInLabel ? _utils.LABELS[side] : '';
+  const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
+  const ariaLabel = (0, _i18n.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)
+  (0, _i18n.__)('%1$s %2$s'), sideLabel, typeLabel).trim();
+  return (0, _element.createElement)(_components.__experimentalHStack, {
+    className: "spacing-sizes-control__wrapper"
+  }, icon && (0, _element.createElement)(_components.Icon, {
+    className: "spacing-sizes-control__icon",
+    icon: icon,
+    size: 24
   }), showCustomValueControl && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalUnitControl, {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
@@ -205,7 +179,7 @@ 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'
   }), (0, _element.createElement)(_components.RangeControl, {
     onMouseOver: onMouseOver,
@@ -214,30 +188,28 @@ 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 && (0, _element.createElement)(_components.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,
@@ -248,7 +220,7 @@ function SpacingInputControl(_ref) {
     onFocus: onMouseOver,
     onBlur: onMouseOut
   }), !showRangeControl && !showCustomValueControl && (0, _element.createElement)(_components.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 => {
@@ -263,6 +235,16 @@ function SpacingInputControl(_ref) {
     onMouseOut: onMouseOut,
     onFocus: onMouseOver,
     onBlur: onMouseOut
+  }), !disableCustomSpacingSizes && (0, _element.createElement)(_components.Button, {
+    label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
+    icon: _icons.settings,
+    onClick: () => {
+      setShowCustomValueControl(!showCustomValueControl);
+    },
+    isPressed: showCustomValueControl,
+    isSmall: true,
+    className: "spacing-sizes-control__custom-toggle",
+    iconSize: 24
   }));
 }
 //# sourceMappingURL=spacing-input-control.js.map

package/build/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":["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","blockEditorStore","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","ALL_SIDES","includes","LABELS","typeLabel","toLowerCase","ariaLabel","trim","event","nativeEvent","offsetX","find","option","selection","selectedItem","settings"],"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/components/spacing-sizes-control/sides-dropdown/index.js

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

package/build/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":["checkIcon","check","SidesDropdown","label","labelProp","onChange","sides","value","length","supportedItems","sideIcon","icon","custom","customItem","menuItems","isSmall","onClose","Object","entries","map","slug","isSelected","undefined","VIEWS"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,SAAS,GAAG,4BAAC,gBAAD;AAAM,EAAA,IAAI,EAAGC,YAAb;AAAqB,EAAA,IAAI,EAAG;AAA5B,EAAlB;;AAEe,SAASC,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,GAAG,kCAAuBH,KAAvB,CAAvB;AACA,QAAMI,QAAQ,GAAGD,cAAc,CAAEF,KAAF,CAAd,CAAwBI,IAAzC;AACA,QAAM;AAAEC,IAAAA,MAAM,EAAEC,UAAV;AAAsB,OAAGC;AAAzB,MAAuCL,cAA7C;AAEA,SACC,4BAAC,wBAAD;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,qDACC,4BAAC,qBAAD,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,4BAAC,oBAAD;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,GACPrB,SADO,GAEPsB;AAbL,SAgBGnB,KAhBH,CADD;AAoBA,KAvBA,CADH,CADD,EA4BG,CAAC,CAAEU,UAAH,IACD,4BAAC,qBAAD,QACC,4BAAC,oBAAD;AACC,MAAA,IAAI,EAAGA,UAAU,CAACF,IADnB;AAEC,MAAA,YAAY,EAAC,MAFd;AAGC,MAAA,UAAU,EAAGJ,KAAK,KAAKgB,aAAMX,MAH9B;AAIC,MAAA,IAAI,EAAC,eAJN;AAKC,MAAA,OAAO,EAAG,MAAM;AACfP,QAAAA,QAAQ,CAAEkB,aAAMX,MAAR,CAAR;AACAI,QAAAA,OAAO;AACP,OARF;AASC,MAAA,MAAM,EACLT,KAAK,KAAKgB,aAAMX,MAAhB,GACGZ,SADH,GAEGsB;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"]}