@wordpress/block-editor 14.2.0 → 14.2.1-next.1f6eadc42.0

package/src/components/spacing-sizes-control/utils.js

@@ -364,6 +364,11 @@ export function getInitialView( values = {}, sides ) {
 	const hasNoValuesAndBalancedSides =
 		! sideValues.length && hasBalancedSidesSupport( sides );
 
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 ) {
+		return sides[ 0 ];
+	}
+
 	if (
 		hasAxisSupport( sides ) &&
 		( hasMatchingAxialValues || hasNoValuesAndBalancedSides )
@@ -371,24 +376,6 @@ export function getInitialView( values = {}, sides ) {
 		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;
 }

package/src/components/use-block-drop-zone/index.js

@@ -274,6 +274,23 @@ export function isDropTargetValid(
 	return areBlocksAllowed && targetMatchesDraggedBlockParents;
 }
 
+/**
+ * Checks if the given element is an insertion point.
+ *
+ * @param {EventTarget|null} targetToCheck - The element to check.
+ * @param {Document}         ownerDocument - The owner document of the element.
+ * @return {boolean} True if the element is a insertion point, false otherwise.
+ */
+function isInsertionPoint( targetToCheck, ownerDocument ) {
+	const { defaultView } = ownerDocument;
+
+	return !! (
+		defaultView &&
+		targetToCheck instanceof defaultView.HTMLElement &&
+		targetToCheck.dataset.isInsertionPoint
+	);
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
@@ -422,6 +439,10 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation, nearestSide ] =
 					dropTargetPosition;
 
+				if ( isZoomOutMode() && operation !== 'insert' ) {
+					return;
+				}
+
 				if ( operation === 'group' ) {
 					const targetBlock = blocks[ targetIndex ];
 					const areAllImages = [
@@ -521,7 +542,18 @@ export default function useBlockDropZone( {
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
 			throttled( event, event.currentTarget.ownerDocument );
 		},
-		onDragLeave() {
+		onDragLeave( event ) {
+			const { ownerDocument } = event.currentTarget;
+
+			// If the drag event is leaving the drop zone and entering an insertion point,
+			// do not hide the insertion point as it is conceptually within the dropzone.
+			if (
+				isInsertionPoint( event.relatedTarget, ownerDocument ) ||
+				isInsertionPoint( event.target, ownerDocument )
+			) {
+				return;
+			}
+
 			throttled.cancel();
 			hideInsertionPoint();
 		},

package/src/hooks/block-bindings.js

@@ -98,7 +98,7 @@ function BlockBindingsAttribute( { attribute, binding } ) {
 		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
 	const isSourceInvalid = ! sourceProps;
 	return (
-		<VStack className="block-editor-bindings__item">
+		<VStack className="block-editor-bindings__item" spacing={ 0 }>
 			<Text truncate>{ attribute }</Text>
 			{ !! binding && (
 				<Text

package/src/hooks/layout.js

@@ -233,7 +233,6 @@ function LayoutPanelPure( {
 						<>
 							<ToggleControl
 								__nextHasNoMarginBottom
-								className="block-editor-hooks__toggle-control"
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||

package/src/hooks/layout.scss

@@ -1,23 +1,13 @@
-.block-editor-hooks__layout-controls-units {
-	display: flex;
-	flex-direction: column;
-	gap: $grid-unit-20;
-}
-
-.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
-	margin-bottom: 0;
-}
-
-.block-editor-hooks__layout-controls-reset {
-	display: flex;
-	justify-content: flex-end;
-	margin-bottom: $grid-unit-30;
+.block-editor-hooks__layout-constrained {
+	.components-base-control {
+		margin-bottom: 0; // Cancel out margins added by block inspector
+	}
 }
 
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
 	color: $gray-700;
 	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: 0; // Cancel out margins added by common.css
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -27,7 +17,3 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
-
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-	margin-bottom: $grid-unit-20;
-}

package/src/layouts/constrained.js

@@ -7,6 +7,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -70,12 +71,14 @@ export default {
 			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
 		return (
-			<>
+			<VStack
+				spacing={ 4 }
+				className="block-editor-hooks__layout-constrained"
+			>
 				{ allowCustomContentAndWideSize && (
-					<div className="block-editor-hooks__layout-controls-units">
+					<>
 						<UnitControl
 							__next40pxDefaultSize
-							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Content width' ) }
 							labelPosition="top"
 							value={ contentSize || wideSize || '' }
@@ -98,7 +101,6 @@ export default {
 						/>
 						<UnitControl
 							__next40pxDefaultSize
-							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Wide width' ) }
 							labelPosition="top"
 							value={ wideSize || contentSize || '' }
@@ -119,12 +121,12 @@ export default {
 								</InputControlPrefixWrapper>
 							}
 						/>
-						<p className="block-editor-hooks__layout-controls-helptext">
+						<p className="block-editor-hooks__layout-constrained-helptext">
 							{ __(
 								'Customize the width for all elements that are assigned to the center or wide columns.'
 							) }
 						</p>
-					</div>
+					</>
 				) }
 				{ allowJustification && (
 					<ToggleGroupControl
@@ -148,7 +150,7 @@ export default {
 						) }
 					</ToggleGroupControl>
 				) }
-			</>
+			</VStack>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls( {

package/src/layouts/grid.js

@@ -13,6 +13,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -74,7 +75,8 @@ export default {
 		// In the experiment we want to also show column control in Auto mode, and
 		// the minimum width control in Manual mode.
 		const showColumnsControl =
-			window.__experimentalEnableGridInteractivity || layout?.columnCount;
+			window.__experimentalEnableGridInteractivity ||
+			!! layout?.columnCount;
 		const showMinWidthControl =
 			window.__experimentalEnableGridInteractivity ||
 			! layout?.columnCount;
@@ -84,19 +86,21 @@ export default {
 					layout={ layout }
 					onChange={ onChange }
 				/>
-				{ showColumnsControl && (
-					<GridLayoutColumnsAndRowsControl
-						layout={ layout }
-						onChange={ onChange }
-						allowSizingOnChildren={ allowSizingOnChildren }
-					/>
-				) }
-				{ showMinWidthControl && (
-					<GridLayoutMinimumWidthControl
-						layout={ layout }
-						onChange={ onChange }
-					/>
-				) }
+				<VStack spacing={ 4 }>
+					{ showColumnsControl && (
+						<GridLayoutColumnsAndRowsControl
+							layout={ layout }
+							onChange={ onChange }
+							allowSizingOnChildren={ allowSizingOnChildren }
+						/>
+					) }
+					{ showMinWidthControl && (
+						<GridLayoutMinimumWidthControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					) }
+				</VStack>
 			</>
 		);
 	},
@@ -317,7 +321,7 @@ function GridLayoutColumnsAndRowsControl( {
 									const defaultNewColumnCount =
 										isManualPlacement ? 1 : undefined;
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? defaultNewColumnCount
 											: parseInt( value, 10 );
 									onChange( {
@@ -327,7 +331,7 @@ function GridLayoutColumnsAndRowsControl( {
 								} else {
 									// Don't allow unsetting the column count.
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -337,7 +341,7 @@ function GridLayoutColumnsAndRowsControl( {
 								}
 							} }
 							value={ columnCount }
-							min={ 0 }
+							min={ 1 }
 							label={ __( 'Columns' ) }
 							hideLabelFromVision={
 								! window.__experimentalEnableGridInteractivity ||
@@ -355,7 +359,7 @@ function GridLayoutColumnsAndRowsControl( {
 								onChange={ ( value ) => {
 									// Don't allow unsetting the row count.
 									const newRowCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -364,21 +368,24 @@ function GridLayoutColumnsAndRowsControl( {
 									} );
 								} }
 								value={ rowCount }
-								min={ 0 }
+								min={ 1 }
 								label={ __( 'Rows' ) }
 							/>
 						) : (
 							<RangeControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
-								value={ columnCount ?? 0 }
+								value={ columnCount ?? 1 }
 								onChange={ ( value ) =>
 									onChange( {
 										...layout,
-										columnCount: value,
+										columnCount:
+											value === '' || value === '0'
+												? 1
+												: value,
 									} )
 								}
-								min={ 0 }
+								min={ 1 }
 								max={ 16 }
 								withInputField={ false }
 								label={ __( 'Columns' ) }

package/src/private-apis.js

@@ -6,7 +6,6 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
-import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
 import {
 	extractWords,
@@ -60,7 +59,6 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getDuotoneFilter,
 	getRichTextValues,
-	PrivateInserter,
 	PrivateQuickInserter,
 	extractWords,
 	getNormalizedSearchTerms,

package/src/store/private-selectors.js

@@ -114,6 +114,7 @@ export const getEnabledClientIdsTree = createSelector(
 		state.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
+		state.editorMode,
 	]
 );
 
@@ -422,9 +423,11 @@ const EMPTY_ARRAY = [];
 export const getReusableBlocks = createRegistrySelector(
 	( select ) => ( state ) => {
 		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
-		return reusableBlocksSelect
-			? reusableBlocksSelect( select )
-			: state.settings.__experimentalReusableBlocks ?? EMPTY_ARRAY;
+		return (
+			( reusableBlocksSelect
+				? reusableBlocksSelect( select )
+				: state.settings.__experimentalReusableBlocks ) ?? EMPTY_ARRAY
+		);
 	}
 );
 

package/src/store/reducer.js

@@ -1624,8 +1624,6 @@ export function insertionPoint( state = null, action ) {
 		}
 
 		case 'HIDE_INSERTION_POINT':
-		case 'CLEAR_SELECTED_BLOCK':
-		case 'SELECT_BLOCK':
 			return null;
 	}
 

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

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SidesDropdown;
-var _components = require("@wordpress/components");
-var _icons = require("@wordpress/icons");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const checkIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-    icon: sideIcon,
-    label: labelProp,
-    className: "spacing-sizes-control__dropdown",
-    toggleProps: {
-      size: 'small'
-    },
-    children: ({
-      onClose
-    }) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
-          children: Object.entries(menuItems).map(([slug, {
-            label,
-            icon
-          }]) => {
-            const isSelected = value === slug;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-              icon: icon,
-              iconPosition: "left",
-              isSelected: isSelected,
-              role: "menuitemradio",
-              onClick: () => {
-                onChange(slug);
-                onClose();
-              },
-              suffix: isSelected ? checkIcon : undefined,
-              children: label
-            }, slug);
-          })
-        }), !!customItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_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,
-            children: customItem.label
-          })
-        })]
-      });
-    }
-  });
-}
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_icons","_utils","_jsxRuntime","checkIcon","jsx","Icon","icon","check","size","SidesDropdown","label","labelProp","onChange","sides","value","length","supportedItems","getSupportedMenuItems","sideIcon","custom","customItem","menuItems","DropdownMenu","className","toggleProps","children","onClose","jsxs","Fragment","MenuGroup","Object","entries","map","slug","isSelected","MenuItem","iconPosition","role","onClick","suffix","undefined","VIEWS"],"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js"],"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={ { size: 'small' } }\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"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AAAwD,IAAAG,WAAA,GAAAH,OAAA;AATxD;AACA;AACA;;AAIA;AACA;AACA;;AAGA,MAAMI,SAAS,gBAAG,IAAAD,WAAA,CAAAE,GAAA,EAACN,WAAA,CAAAO,IAAI;EAACC,IAAI,EAAGC,YAAO;EAACC,IAAI,EAAG;AAAI,CAAE,CAAC;AAEtC,SAASC,aAAaA,CAAE;EACtCC,KAAK,EAAEC,SAAS;EAChBC,QAAQ;EACRC,KAAK;EACLC;AACD,CAAC,EAAG;EACH,IAAK,CAAED,KAAK,IAAI,CAAEA,KAAK,CAACE,MAAM,EAAG;IAChC;EACD;EAEA,MAAMC,cAAc,GAAG,IAAAC,4BAAqB,EAAEJ,KAAM,CAAC;EACrD,MAAMK,QAAQ,GAAGF,cAAc,CAAEF,KAAK,CAAE,CAACR,IAAI;EAC7C,MAAM;IAAEa,MAAM,EAAEC,UAAU;IAAE,GAAGC;EAAU,CAAC,GAAGL,cAAc;EAE3D,oBACC,IAAAd,WAAA,CAAAE,GAAA,EAACN,WAAA,CAAAwB,YAAY;IACZhB,IAAI,EAAGY,QAAU;IACjBR,KAAK,EAAGC,SAAW;IACnBY,SAAS,EAAC,iCAAiC;IAC3CC,WAAW,EAAG;MAAEhB,IAAI,EAAE;IAAQ,CAAG;IAAAiB,QAAA,EAE/BA,CAAE;MAAEC;IAAQ,CAAC,KAAM;MACpB,oBACC,IAAAxB,WAAA,CAAAyB,IAAA,EAAAzB,WAAA,CAAA0B,QAAA;QAAAH,QAAA,gBACC,IAAAvB,WAAA,CAAAE,GAAA,EAACN,WAAA,CAAA+B,SAAS;UAAAJ,QAAA,EACPK,MAAM,CAACC,OAAO,CAAEV,SAAU,CAAC,CAACW,GAAG,CAChC,CAAE,CAAEC,IAAI,EAAE;YAAEvB,KAAK;YAAEJ;UAAK,CAAC,CAAE,KAAM;YAChC,MAAM4B,UAAU,GAAGpB,KAAK,KAAKmB,IAAI;YACjC,oBACC,IAAA/B,WAAA,CAAAE,GAAA,EAACN,WAAA,CAAAqC,QAAQ;cAER7B,IAAI,EAAGA,IAAM;cACb8B,YAAY,EAAC,MAAM;cACnBF,UAAU,EAAGA,UAAY;cACzBG,IAAI,EAAC,eAAe;cACpBC,OAAO,EAAGA,CAAA,KAAM;gBACf1B,QAAQ,CAAEqB,IAAK,CAAC;gBAChBP,OAAO,CAAC,CAAC;cACV,CAAG;cACHa,MAAM,EACLL,UAAU,GACP/B,SAAS,GACTqC,SACH;cAAAf,QAAA,EAECf;YAAK,GAfDuB,IAgBG,CAAC;UAEb,CACD;QAAC,CACS,CAAC,EACV,CAAC,CAAEb,UAAU,iBACd,IAAAlB,WAAA,CAAAE,GAAA,EAACN,WAAA,CAAA+B,SAAS;UAAAJ,QAAA,eACT,IAAAvB,WAAA,CAAAE,GAAA,EAACN,WAAA,CAAAqC,QAAQ;YACR7B,IAAI,EAAGc,UAAU,CAACd,IAAM;YACxB8B,YAAY,EAAC,MAAM;YACnBF,UAAU,EAAGpB,KAAK,KAAK2B,YAAK,CAACtB,MAAQ;YACrCkB,IAAI,EAAC,eAAe;YACpBC,OAAO,EAAGA,CAAA,KAAM;cACf1B,QAAQ,CAAE6B,YAAK,CAACtB,MAAO,CAAC;cACxBO,OAAO,CAAC,CAAC;YACV,CAAG;YACHa,MAAM,EACLzB,KAAK,KAAK2B,YAAK,CAACtB,MAAM,GACnBhB,SAAS,GACTqC,SACH;YAAAf,QAAA,EAECL,UAAU,CAACV;UAAK,CACT;QAAC,CACD,CACX;MAAA,CACA,CAAC;IAEL;EAAC,CACY,CAAC;AAEjB","ignoreList":[]}

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

@@ -1,81 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';
-import { check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { getSupportedMenuItems, VIEWS } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const checkIcon = /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(DropdownMenu, {
-    icon: sideIcon,
-    label: labelProp,
-    className: "spacing-sizes-control__dropdown",
-    toggleProps: {
-      size: 'small'
-    },
-    children: ({
-      onClose
-    }) => {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(MenuGroup, {
-          children: Object.entries(menuItems).map(([slug, {
-            label,
-            icon
-          }]) => {
-            const isSelected = value === slug;
-            return /*#__PURE__*/_jsx(MenuItem, {
-              icon: icon,
-              iconPosition: "left",
-              isSelected: isSelected,
-              role: "menuitemradio",
-              onClick: () => {
-                onChange(slug);
-                onClose();
-              },
-              suffix: isSelected ? checkIcon : undefined,
-              children: label
-            }, slug);
-          })
-        }), !!customItem && /*#__PURE__*/_jsx(MenuGroup, {
-          children: /*#__PURE__*/_jsx(MenuItem, {
-            icon: customItem.icon,
-            iconPosition: "left",
-            isSelected: value === VIEWS.custom,
-            role: "menuitemradio",
-            onClick: () => {
-              onChange(VIEWS.custom);
-              onClose();
-            },
-            suffix: value === VIEWS.custom ? checkIcon : undefined,
-            children: customItem.label
-          })
-        })]
-      });
-    }
-  });
-}
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["DropdownMenu","Icon","MenuGroup","MenuItem","check","getSupportedMenuItems","VIEWS","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","checkIcon","icon","size","SidesDropdown","label","labelProp","onChange","sides","value","length","supportedItems","sideIcon","custom","customItem","menuItems","className","toggleProps","children","onClose","Object","entries","map","slug","isSelected","iconPosition","role","onClick","suffix","undefined"],"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js"],"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={ { size: 'small' } }\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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,uBAAuB;AAC/E,SAASC,KAAK,QAAQ,kBAAkB;;AAExC;AACA;AACA;AACA,SAASC,qBAAqB,EAAEC,KAAK,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,MAAMC,SAAS,gBAAGL,IAAA,CAACP,IAAI;EAACa,IAAI,EAAGV,KAAO;EAACW,IAAI,EAAG;AAAI,CAAE,CAAC;AAErD,eAAe,SAASC,aAAaA,CAAE;EACtCC,KAAK,EAAEC,SAAS;EAChBC,QAAQ;EACRC,KAAK;EACLC;AACD,CAAC,EAAG;EACH,IAAK,CAAED,KAAK,IAAI,CAAEA,KAAK,CAACE,MAAM,EAAG;IAChC;EACD;EAEA,MAAMC,cAAc,GAAGlB,qBAAqB,CAAEe,KAAM,CAAC;EACrD,MAAMI,QAAQ,GAAGD,cAAc,CAAEF,KAAK,CAAE,CAACP,IAAI;EAC7C,MAAM;IAAEW,MAAM,EAAEC,UAAU;IAAE,GAAGC;EAAU,CAAC,GAAGJ,cAAc;EAE3D,oBACCf,IAAA,CAACR,YAAY;IACZc,IAAI,EAAGU,QAAU;IACjBP,KAAK,EAAGC,SAAW;IACnBU,SAAS,EAAC,iCAAiC;IAC3CC,WAAW,EAAG;MAAEd,IAAI,EAAE;IAAQ,CAAG;IAAAe,QAAA,EAE/BA,CAAE;MAAEC;IAAQ,CAAC,KAAM;MACpB,oBACCnB,KAAA,CAAAF,SAAA;QAAAoB,QAAA,gBACCtB,IAAA,CAACN,SAAS;UAAA4B,QAAA,EACPE,MAAM,CAACC,OAAO,CAAEN,SAAU,CAAC,CAACO,GAAG,CAChC,CAAE,CAAEC,IAAI,EAAE;YAAElB,KAAK;YAAEH;UAAK,CAAC,CAAE,KAAM;YAChC,MAAMsB,UAAU,GAAGf,KAAK,KAAKc,IAAI;YACjC,oBACC3B,IAAA,CAACL,QAAQ;cAERW,IAAI,EAAGA,IAAM;cACbuB,YAAY,EAAC,MAAM;cACnBD,UAAU,EAAGA,UAAY;cACzBE,IAAI,EAAC,eAAe;cACpBC,OAAO,EAAGA,CAAA,KAAM;gBACfpB,QAAQ,CAAEgB,IAAK,CAAC;gBAChBJ,OAAO,CAAC,CAAC;cACV,CAAG;cACHS,MAAM,EACLJ,UAAU,GACPvB,SAAS,GACT4B,SACH;cAAAX,QAAA,EAECb;YAAK,GAfDkB,IAgBG,CAAC;UAEb,CACD;QAAC,CACS,CAAC,EACV,CAAC,CAAET,UAAU,iBACdlB,IAAA,CAACN,SAAS;UAAA4B,QAAA,eACTtB,IAAA,CAACL,QAAQ;YACRW,IAAI,EAAGY,UAAU,CAACZ,IAAM;YACxBuB,YAAY,EAAC,MAAM;YACnBD,UAAU,EAAGf,KAAK,KAAKf,KAAK,CAACmB,MAAQ;YACrCa,IAAI,EAAC,eAAe;YACpBC,OAAO,EAAGA,CAAA,KAAM;cACfpB,QAAQ,CAAEb,KAAK,CAACmB,MAAO,CAAC;cACxBM,OAAO,CAAC,CAAC;YACV,CAAG;YACHS,MAAM,EACLnB,KAAK,KAAKf,KAAK,CAACmB,MAAM,GACnBZ,SAAS,GACT4B,SACH;YAAAX,QAAA,EAECJ,UAAU,CAACT;UAAK,CACT;QAAC,CACD,CACX;MAAA,CACA,CAAC;IAEL;EAAC,CACY,CAAC;AAEjB","ignoreList":[]}

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

@@ -1,91 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';
-import { check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { getSupportedMenuItems, VIEWS } from '../utils';
-
-const checkIcon = <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 (
-		<DropdownMenu
-			icon={ sideIcon }
-			label={ labelProp }
-			className="spacing-sizes-control__dropdown"
-			toggleProps={ { size: 'small' } }
-		>
-			{ ( { onClose } ) => {
-				return (
-					<>
-						<MenuGroup>
-							{ Object.entries( menuItems ).map(
-								( [ slug, { label, icon } ] ) => {
-									const isSelected = value === slug;
-									return (
-										<MenuItem
-											key={ slug }
-											icon={ icon }
-											iconPosition="left"
-											isSelected={ isSelected }
-											role="menuitemradio"
-											onClick={ () => {
-												onChange( slug );
-												onClose();
-											} }
-											suffix={
-												isSelected
-													? checkIcon
-													: undefined
-											}
-										>
-											{ label }
-										</MenuItem>
-									);
-								}
-							) }
-						</MenuGroup>
-						{ !! customItem && (
-							<MenuGroup>
-								<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 }
-								</MenuItem>
-							</MenuGroup>
-						) }
-					</>
-				);
-			} }
-		</DropdownMenu>
-	);
-}