@wordpress/block-editor 12.2.0 → 12.3.1

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"]}

package/build-module/components/spacing-sizes-control/utils.js

@@ -2,6 +2,44 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { sidesAll, sidesAxial, sidesBottom, sidesHorizontal, sidesLeft, sidesRight, sidesTop, sidesVertical } from '@wordpress/icons';
+export const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
+export const DEFAULT_VALUES = {
+  top: undefined,
+  right: undefined,
+  bottom: undefined,
+  left: undefined
+};
+export const ICONS = {
+  custom: sidesAll,
+  axial: sidesAxial,
+  horizontal: sidesHorizontal,
+  vertical: sidesVertical,
+  top: sidesTop,
+  right: sidesRight,
+  bottom: sidesBottom,
+  left: sidesLeft
+};
+export const LABELS = {
+  default: __('Spacing control'),
+  top: __('Top'),
+  bottom: __('Bottom'),
+  left: __('Left'),
+  right: __('Right'),
+  mixed: __('Mixed'),
+  vertical: __('Vertical'),
+  horizontal: __('Horizontal'),
+  axial: __('Horizontal & vertical'),
+  custom: __('Custom')
+};
+export const VIEWS = {
+  axial: 'axial',
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  custom: 'custom'
+};
 /**
  * Checks is given value is a spacing preset.
  *
@@ -11,7 +49,7 @@ import { __ } from '@wordpress/i18n';
  */
 
 export function isValueSpacingPreset(value) {
-  if (!(value !== null && value !== void 0 && value.includes)) {
+  if (!value?.includes) {
     return false;
   }
 
@@ -33,7 +71,7 @@ export function getCustomValueFromPreset(value, spacingSizes) {
 
   const slug = getSpacingPresetSlug(value);
   const spacingSize = spacingSizes.find(size => String(size.slug) === slug);
-  return spacingSize === null || spacingSize === void 0 ? void 0 : spacingSize.size;
+  return spacingSize?.size;
 }
 /**
  * Converts a custom value to preset value if one can be found.
@@ -54,7 +92,7 @@ export function getPresetValueFromCustomValue(value, spacingSizes) {
 
   const spacingMatch = spacingSizes.find(size => String(size.size) === String(value));
 
-  if (spacingMatch !== null && spacingMatch !== void 0 && spacingMatch.slug) {
+  if (spacingMatch?.slug) {
     return `var:preset|spacing|${spacingMatch.slug}`;
   }
 
@@ -122,23 +160,6 @@ export function getSliderValueFromPreset(presetValue, spacingSizes) {
 
   return sliderValue !== -1 ? sliderValue : NaN;
 }
-export const LABELS = {
-  all: __('All sides'),
-  top: __('Top'),
-  bottom: __('Bottom'),
-  left: __('Left'),
-  right: __('Right'),
-  mixed: __('Mixed'),
-  vertical: __('Vertical'),
-  horizontal: __('Horizontal')
-};
-export const DEFAULT_VALUES = {
-  top: undefined,
-  right: undefined,
-  bottom: undefined,
-  left: undefined
-};
-export const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
 /**
  * Gets an items with the most occurrence within an array
  * https://stackoverflow.com/a/20762713
@@ -159,8 +180,7 @@ function mode(arr) {
  */
 
 
-export function getAllRawValue() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export function getAllRawValue(values = {}) {
   return mode(Object.values(values));
 }
 /**
@@ -172,9 +192,7 @@ export function getAllRawValue() {
  * @return {boolean} Whether values are mixed.
  */
 
-export function isValuesMixed() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let sides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ALL_SIDES;
+export function isValuesMixed(values = {}, sides = ALL_SIDES) {
   return Object.values(values).length >= 1 && Object.values(values).length < sides.length || new Set(Object.values(values)).size > 1;
 }
 /**
@@ -192,4 +210,157 @@ export function isValuesDefined(values) {
 
   return Object.values(values).filter(value => !!value).length > 0;
 }
+/**
+ * Determines whether a particular axis has support. If no axis is
+ * specified, this function checks if either axis is supported.
+ *
+ * @param {Array}  sides Supported sides.
+ * @param {string} axis  Which axis to check.
+ *
+ * @return {boolean} Whether there is support for the specified axis or both axes.
+ */
+
+export function hasAxisSupport(sides, axis) {
+  if (!sides || !sides.length) {
+    return false;
+  }
+
+  const hasHorizontalSupport = sides.includes('horizontal') || sides.includes('left') && sides.includes('right');
+  const hasVerticalSupport = sides.includes('vertical') || sides.includes('top') && sides.includes('bottom');
+
+  if (axis === 'horizontal') {
+    return hasHorizontalSupport;
+  }
+
+  if (axis === 'vertical') {
+    return hasVerticalSupport;
+  }
+
+  return hasHorizontalSupport || hasVerticalSupport;
+}
+/**
+ * Determines which menu options should be included in the SidePicker.
+ *
+ * @param {Array} sides Supported sides.
+ *
+ * @return {Object} Menu options with each option containing label & icon.
+ */
+
+export function getSupportedMenuItems(sides) {
+  if (!sides || !sides.length) {
+    return {};
+  }
+
+  const menuItems = {}; // Determine the primary "side" menu options.
+
+  const hasHorizontalSupport = hasAxisSupport(sides, 'horizontal');
+  const hasVerticalSupport = hasAxisSupport(sides, 'vertical');
+
+  if (hasHorizontalSupport && hasVerticalSupport) {
+    menuItems.axial = {
+      label: LABELS.axial,
+      icon: ICONS.axial
+    };
+  } else if (hasHorizontalSupport) {
+    menuItems.axial = {
+      label: LABELS.horizontal,
+      icon: ICONS.horizontal
+    };
+  } else if (hasVerticalSupport) {
+    menuItems.axial = {
+      label: LABELS.vertical,
+      icon: ICONS.vertical
+    };
+  } // Track whether we have any individual sides so we can omit the custom
+  // option if required.
+
+
+  let numberOfIndividualSides = 0;
+  ALL_SIDES.forEach(side => {
+    if (sides.includes(side)) {
+      numberOfIndividualSides += 1;
+      menuItems[side] = {
+        label: LABELS[side],
+        icon: ICONS[side]
+      };
+    }
+  }); // Add custom item if there are enough sides to warrant a separated view.
+
+  if (numberOfIndividualSides > 1) {
+    menuItems.custom = {
+      label: LABELS.custom,
+      icon: ICONS.custom
+    };
+  }
+
+  return menuItems;
+}
+/**
+ * Checks if the supported sides are balanced for each axis.
+ * - Horizontal - both left and right sides are supported.
+ * - Vertical - both top and bottom are supported.
+ *
+ * @param {Array} sides The supported sides which may be axes as well.
+ *
+ * @return {boolean} Whether or not the supported sides are balanced.
+ */
+
+export function hasBalancedSidesSupport(sides = []) {
+  const counts = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+  sides.forEach(side => counts[side] += 1);
+  return (counts.top + counts.bottom) % 2 === 0 && (counts.left + counts.right) % 2 === 0;
+}
+/**
+ * Determines which view the SpacingSizesControl should default to on its
+ * first render; Axial, Custom, or Single side.
+ *
+ * @param {Object} values Current side values.
+ * @param {Array}  sides  Supported sides.
+ *
+ * @return {string} View to display.
+ */
+
+export function getInitialView(values = {}, sides) {
+  const {
+    top,
+    right,
+    bottom,
+    left
+  } = values;
+  const sideValues = [top, right, bottom, left].filter(Boolean); // Axial ( Horizontal & vertical ).
+  // - Has axial side support
+  // - Has axial side values which match
+  // - Has no values and the supported sides are balanced
+
+  const hasMatchingAxialValues = top === bottom && left === right && (!!top || !!left);
+  const hasNoValuesAndBalancedSides = !sideValues.length && hasBalancedSidesSupport(sides);
+
+  if (hasAxisSupport(sides) && (hasMatchingAxialValues || hasNoValuesAndBalancedSides)) {
+    return VIEWS.axial;
+  } // Single side.
+  // - Ensure the side returned is the first side that has a value.
+
+
+  if (sideValues.length === 1) {
+    let side;
+    Object.entries(values).some(([key, value]) => {
+      side = key;
+      return value !== undefined;
+    });
+    return side;
+  } // Only single side supported and no value defined.
+
+
+  if (sides?.length === 1 && !sideValues.length) {
+    return sides[0];
+  } // Default to the Custom (separated sides) view.
+
+
+  return VIEWS.custom;
+}
 //# sourceMappingURL=utils.js.map