@wordpress/block-editor 14.2.1-next.5368f64a9.0 → 14.3.1

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

@@ -373,47 +373,39 @@ describe( 'getInitialView', () => {
 				getInitialView( { top: '1em', right: '10px' }, ALL_SIDES )
 			).toBe( VIEWS.custom );
 		} );
-		it( 'should not return custom view if there is only a single side value', () => {
-			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).not.toBe(
-				VIEWS.custom
-			);
-		} );
-	} );
-
-	describe( 'Single side view', () => {
-		it( 'should return single side when only single side supported', () => {
-			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
-			);
-		} );
-
-		it( 'should return the single side view if there is only a single side value set and supported sides > 1', () => {
+		it( 'should return custom view if there is only a single side value', () => {
 			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.top
-			);
-			expect( getInitialView( { right: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.right
-			);
-			expect( getInitialView( { bottom: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.bottom
-			);
-			expect( getInitialView( { left: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.left
+				VIEWS.custom
 			);
 		} );
-		it( 'should return single side view when only one side is supported', () => {
+		it( 'should return custom view even if only single side supported', () => {
 			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
+				VIEWS.custom
 			);
 			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
-				VIEWS.right
+				VIEWS.custom
 			);
 			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
-				VIEWS.bottom
+				VIEWS.custom
 			);
 			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
-				VIEWS.left
+				VIEWS.custom
 			);
 		} );
 	} );
+
+	describe( 'Single side view', () => {
+		it( 'should return single side when only single side supported and no value defined', () => {
+			expect( getInitialView( {}, [ 'top' ] ) ).toBe( VIEWS.top );
+		} );
+
+		it( 'should return single side when only single side supported and has only axial sides', () => {
+			expect(
+				getInitialView( { top: '1em' }, [ 'horizontal', 'vertical' ] )
+			).toBe( VIEWS.top );
+			expect(
+				getInitialView( { left: '4em' }, [ 'horizontal', 'vertical' ] )
+			).toBe( VIEWS.left );
+		} );
+	} );
 } );

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

@@ -363,6 +363,10 @@ export function getInitialView( values = {}, sides ) {
 		top === bottom && left === right && ( !! top || !! left );
 	const hasNoValuesAndBalancedSides =
 		! sideValues.length && hasBalancedSidesSupport( sides );
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
 
 	if (
 		hasAxisSupport( sides ) &&
@@ -371,9 +375,9 @@ export function getInitialView( values = {}, sides ) {
 		return VIEWS.axial;
 	}
 
-	// Single side.
+	// Only axial sides are supported and single value defined.
 	// - Ensure the side returned is the first side that has a value.
-	if ( sideValues.length === 1 ) {
+	if ( hasOnlyAxialSides && sideValues.length === 1 ) {
 		let side;
 
 		Object.entries( values ).some( ( [ key, value ] ) => {

package/src/components/url-input/index.js

@@ -12,6 +12,7 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import {
 	BaseControl,
 	Button,
+	__experimentalInputControl as InputControl,
 	Spinner,
 	withSpokenMessages,
 	Popover,
@@ -234,8 +235,8 @@ class URLInput extends Component {
 		this.suggestionsRequest = request;
 	}
 
-	onChange( event ) {
-		this.props.onChange( event.target.value );
+	onChange( newValue ) {
+		this.props.onChange( newValue );
 	}
 
 	onFocus() {
@@ -448,7 +449,6 @@ class URLInput extends Component {
 			id: inputId,
 			value,
 			required: true,
-			className: 'block-editor-url-input__input',
 			type: 'text',
 			onChange: this.onChange,
 			onFocus: this.onFocus,
@@ -464,6 +464,7 @@ class URLInput extends Component {
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
 					: undefined,
 			ref: this.inputRef,
+			suffix: this.props.suffix,
 		};
 
 		if ( renderControl ) {
@@ -472,7 +473,7 @@ class URLInput extends Component {
 
 		return (
 			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
-				<input { ...inputProps } />
+				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>
 		);

package/src/components/url-input/style.scss

@@ -9,33 +9,14 @@ $input-size: 300px;
 	position: relative;
 	padding: 1px;
 
-	input[type="text"] {
-		width: 100%;
-		@include break-small() {
-			width: $input-size;
-		}
-		padding: $input-padding;
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&::-ms-clear {
-			display: none;
-		}
+	@include break-small() {
+		min-width: $input-size;
+		width: auto;
 	}
 
 	&.is-full-width {
 		width: 100%;
 
-		.block-editor-url-input__input[type="text"] {
-			width: 100%;
-		}
-
 		&__suggestions {
 			width: 100%;
 		}
@@ -49,10 +30,6 @@ $input-size: 300px;
 	}
 }
 
-.block-editor-url-input__input[type="text"] {
-	@include input-control;
-}
-
 // Suggestions
 .block-editor-url-input__suggestions {
 	max-height: 200px;

package/src/hooks/block-bindings.js

@@ -31,6 +31,8 @@ import { store as blockEditorStore } from '../store';
 
 const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
+const EMPTY_OBJECT = {};
+
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return ! isMobile
@@ -59,7 +61,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 								{ registeredSources[ name ].label }
 							</DropdownMenuV2.GroupLabel>
 						) }
-						{ Object.entries( fields ).map( ( [ key, value ] ) => (
+						{ Object.entries( fields ).map( ( [ key, args ] ) => (
 							<DropdownMenuV2.RadioItem
 								key={ key }
 								onChange={ () =>
@@ -75,10 +77,10 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 								checked={ key === currentKey }
 							>
 								<DropdownMenuV2.ItemLabel>
-									{ key }
+									{ args?.label }
 								</DropdownMenuV2.ItemLabel>
 								<DropdownMenuV2.ItemHelpText>
-									{ value }
+									{ args?.value }
 								</DropdownMenuV2.ItemHelpText>
 							</DropdownMenuV2.RadioItem>
 						) ) }
@@ -92,13 +94,13 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 	);
 }
 
-function BlockBindingsAttribute( { attribute, binding } ) {
+function BlockBindingsAttribute( { attribute, binding, fieldsList } ) {
 	const { source: sourceName, args } = binding || {};
 	const sourceProps =
 		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
@@ -108,14 +110,16 @@ function BlockBindingsAttribute( { attribute, binding } ) {
 				>
 					{ isSourceInvalid
 						? __( 'Invalid source' )
-						: args?.key || sourceProps?.label || sourceName }
+						: fieldsList?.[ sourceName ]?.[ args?.key ]?.label ||
+						  sourceProps?.label ||
+						  sourceName }
 				</Text>
 			) }
 		</VStack>
 	);
 }
 
-function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
+function ReadOnlyBlockBindingsPanelItems( { bindings, fieldsList } ) {
 	return (
 		<>
 			{ Object.entries( bindings ).map( ( [ attribute, binding ] ) => (
@@ -123,6 +127,7 @@ function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
 					<BlockBindingsAttribute
 						attribute={ attribute }
 						binding={ binding }
+						fieldsList={ fieldsList }
 					/>
 				</Item>
 			) ) }
@@ -162,6 +167,7 @@ function EditableBlockBindingsPanelItems( {
 									<BlockBindingsAttribute
 										attribute={ attribute }
 										binding={ binding }
+										fieldsList={ fieldsList }
 									/>
 								</Item>
 							}
@@ -182,11 +188,60 @@ function EditableBlockBindingsPanelItems( {
 export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const registry = useRegistry();
 	const blockContext = useContext( BlockContext );
-	const { bindings } = metadata || {};
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	// `useSelect` is used purposely here to ensure `getFieldsList`
+	// is updated whenever there are updates in block context.
+	// `source.getFieldsList` may also call a selector via `registry.select`.
+	const _fieldsList = {};
+	const { fieldsList, canUpdateBlockBindings } = useSelect(
+		( select ) => {
+			if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+				return EMPTY_OBJECT;
+			}
+			const { getBlockBindingsSources } = unlock( blocksPrivateApis );
+			const registeredSources = getBlockBindingsSources();
+			Object.entries( registeredSources ).forEach(
+				( [ sourceName, { getFieldsList, usesContext } ] ) => {
+					if ( getFieldsList ) {
+						// Populate context.
+						const context = {};
+						if ( usesContext?.length ) {
+							for ( const key of usesContext ) {
+								context[ key ] = blockContext[ key ];
+							}
+						}
+						const sourceList = getFieldsList( {
+							registry,
+							context,
+						} );
+						// Only add source if the list is not empty.
+						if ( Object.keys( sourceList || {} ).length ) {
+							_fieldsList[ sourceName ] = { ...sourceList };
+						}
+					}
+				}
+			);
+			return {
+				fieldsList:
+					Object.values( _fieldsList ).length > 0
+						? _fieldsList
+						: EMPTY_OBJECT,
+				canUpdateBlockBindings:
+					select( blockEditorStore ).getSettings()
+						.canUpdateBlockBindings,
+			};
+		},
+		[ blockContext, bindableAttributes, registry ]
+	);
+	// Return early if there are no bindable attributes.
+	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+		return null;
+	}
+	// Filter bindings to only show bindable attributes and remove pattern overrides.
+	const { bindings } = metadata || {};
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
@@ -197,48 +252,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 		}
 	} );
 
-	const { canUpdateBlockBindings } = useSelect( ( select ) => {
-		return {
-			canUpdateBlockBindings:
-				select( blockEditorStore ).getSettings().canUpdateBlockBindings,
-		};
-	}, [] );
-
-	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
-		return null;
-	}
-
-	const fieldsList = {};
-	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
-	const registeredSources = getBlockBindingsSources();
-	Object.entries( registeredSources ).forEach(
-		( [ sourceName, { getFieldsList, usesContext } ] ) => {
-			if ( getFieldsList ) {
-				// Populate context.
-				const context = {};
-				if ( usesContext?.length ) {
-					for ( const key of usesContext ) {
-						context[ key ] = blockContext[ key ];
-					}
-				}
-				const sourceList = getFieldsList( {
-					registry,
-					context,
-				} );
-				// Only add source if the list is not empty.
-				if ( sourceList ) {
-					fieldsList[ sourceName ] = { ...sourceList };
-				}
-			}
-		}
-	);
-	// Remove empty sources.
-	Object.entries( fieldsList ).forEach( ( [ key, value ] ) => {
-		if ( ! Object.keys( value ).length ) {
-			delete fieldsList[ key ];
-		}
-	} );
-
 	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly =
 		! canUpdateBlockBindings || ! Object.keys( fieldsList ).length;
@@ -261,6 +274,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 					{ readOnly ? (
 						<ReadOnlyBlockBindingsPanelItems
 							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
 						/>
 					) : (
 						<EditableBlockBindingsPanelItems

package/src/hooks/block-hooks.js

@@ -3,18 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment, useMemo } from '@wordpress/element';
-import {
-	__experimentalHStack as HStack,
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { BlockIcon, InspectorControls } from '../components';
+import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
@@ -204,14 +200,7 @@ function BlockHooksControlPure( {
 										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
-										label={
-											<HStack justify="flex-start">
-												<BlockIcon
-													icon={ block.icon }
-												/>
-												<span>{ block.title }</span>
-											</HStack>
-										}
+										label={ block.title }
 										onChange={ () => {
 											if ( ! checked ) {
 												// Create and insert block.

package/src/hooks/block-hooks.scss

@@ -1,13 +1,4 @@
 .block-editor-hooks__block-hooks {
-	/**
-	 * Since we're displaying the block icon alongside the block name,
-	 * we need to right-align the toggle.
-	 */
-	.components-toggle-control .components-h-stack {
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
-		flex-direction: row-reverse;
-	}
-
 	/**
 	 * Un-reverse the flex direction for the toggle's label.
 	 */

package/src/store/private-selectors.js

@@ -548,6 +548,15 @@ export function isZoomOutMode( state ) {
 	return state.editorMode === 'zoom-out';
 }
 
+/**
+ * Retrieves the client ID of the block which contains the blocks
+ * acting as "sections" in the editor. This is typically the "main content"
+ * of the template/post.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {string|undefined} The section root client ID or undefined if not set.
+ */
 export function getSectionRootClientId( state ) {
 	return state.settings?.[ sectionRootClientIdKey ];
 }

package/src/style.scss

@@ -1,4 +1,5 @@
 @import "./autocompleters/style.scss";
+@import "./components/background-image-control/style.scss";
 @import "./components/block-alignment-control/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";

package/src/utils/test/transform-styles.js

@@ -293,7 +293,7 @@ describe( 'transformStyles', () => {
 
 		it( 'should ignore keyframes', () => {
 			const input = `
-			@keyframes edit-post__fade-in-animation {
+			@keyframes __wp-base-styles-fade-in {
 				from {
 					opacity: 0;
 				}

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