@wordpress/block-editor 14.11.0 → 14.12.0

package/build-style/style-rtl.css

@@ -1788,6 +1788,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-grid-visualizer__grid {
   display: grid;
+  position: absolute;
 }
 
 .block-editor-grid-visualizer__cell {

package/build-style/style.css

@@ -1789,6 +1789,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-grid-visualizer__grid {
   display: grid;
+  position: absolute;
 }
 
 .block-editor-grid-visualizer__cell {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.11.0",
+	"version": "14.12.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.16.0",
-		"@wordpress/api-fetch": "^7.16.0",
-		"@wordpress/blob": "^4.16.0",
-		"@wordpress/block-serialization-default-parser": "^5.16.0",
-		"@wordpress/blocks": "^14.5.0",
-		"@wordpress/commands": "^1.16.0",
-		"@wordpress/components": "^29.2.0",
-		"@wordpress/compose": "^7.16.0",
-		"@wordpress/data": "^10.16.0",
-		"@wordpress/date": "^5.16.0",
-		"@wordpress/deprecated": "^4.16.0",
-		"@wordpress/dom": "^4.16.0",
-		"@wordpress/element": "^6.16.0",
-		"@wordpress/escape-html": "^3.16.0",
-		"@wordpress/hooks": "^4.16.0",
-		"@wordpress/html-entities": "^4.16.0",
-		"@wordpress/i18n": "^5.16.0",
-		"@wordpress/icons": "^10.16.0",
-		"@wordpress/is-shallow-equal": "^5.16.0",
-		"@wordpress/keyboard-shortcuts": "^5.16.0",
-		"@wordpress/keycodes": "^4.16.0",
-		"@wordpress/notices": "^5.16.0",
-		"@wordpress/preferences": "^4.16.0",
-		"@wordpress/priority-queue": "^3.16.0",
-		"@wordpress/private-apis": "^1.16.0",
-		"@wordpress/rich-text": "^7.16.0",
-		"@wordpress/style-engine": "^2.16.0",
-		"@wordpress/token-list": "^3.16.0",
-		"@wordpress/upload-media": "^0.1.0",
-		"@wordpress/url": "^4.16.0",
-		"@wordpress/warning": "^3.16.0",
-		"@wordpress/wordcount": "^4.16.0",
+		"@wordpress/a11y": "^4.17.0",
+		"@wordpress/api-fetch": "^7.17.0",
+		"@wordpress/blob": "^4.17.0",
+		"@wordpress/block-serialization-default-parser": "^5.17.0",
+		"@wordpress/blocks": "^14.6.0",
+		"@wordpress/commands": "^1.17.0",
+		"@wordpress/components": "^29.3.0",
+		"@wordpress/compose": "^7.17.0",
+		"@wordpress/data": "^10.17.0",
+		"@wordpress/date": "^5.17.0",
+		"@wordpress/deprecated": "^4.17.0",
+		"@wordpress/dom": "^4.17.0",
+		"@wordpress/element": "^6.17.0",
+		"@wordpress/escape-html": "^3.17.0",
+		"@wordpress/hooks": "^4.17.0",
+		"@wordpress/html-entities": "^4.17.0",
+		"@wordpress/i18n": "^5.17.0",
+		"@wordpress/icons": "^10.17.0",
+		"@wordpress/is-shallow-equal": "^5.17.0",
+		"@wordpress/keyboard-shortcuts": "^5.17.0",
+		"@wordpress/keycodes": "^4.17.0",
+		"@wordpress/notices": "^5.17.0",
+		"@wordpress/preferences": "^4.17.0",
+		"@wordpress/priority-queue": "^3.17.0",
+		"@wordpress/private-apis": "^1.17.0",
+		"@wordpress/rich-text": "^7.17.0",
+		"@wordpress/style-engine": "^2.17.0",
+		"@wordpress/token-list": "^3.17.0",
+		"@wordpress/upload-media": "^0.2.0",
+		"@wordpress/url": "^4.17.0",
+		"@wordpress/warning": "^3.17.0",
+		"@wordpress/wordcount": "^4.17.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f48b9f56629e400891abb5ae491504de475237ff"
+	"gitHead": "68a831c3178197fe87db284d4b94e5743bfb6b6c"
 }

package/src/components/grid/grid-visualizer.js

@@ -54,29 +54,18 @@ const GridVisualizerGrid = forwardRef(
 		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
 
 		useEffect( () => {
-			const observers = [];
-			for ( const element of [ gridElement, ...gridElement.children ] ) {
-				const observer = new window.ResizeObserver( () => {
-					setGridInfo( getGridInfo( gridElement ) );
-				} );
-				observer.observe( element );
-				observers.push( observer );
-			}
-
-			const mutationObserver = new window.MutationObserver( () => {
+			const resizeCallback = () =>
 				setGridInfo( getGridInfo( gridElement ) );
-			} );
-			mutationObserver.observe( gridElement, {
-				attributeFilter: [ 'style', 'class' ],
-				childList: true,
-				subtree: true,
-			} );
-			observers.push( mutationObserver );
-
+			// Both border-box and content-box are observed as they may change
+			// independently. This requires two observers because a single one
+			// can’t be made to monitor both on the same element.
+			const borderBoxSpy = new window.ResizeObserver( resizeCallback );
+			borderBoxSpy.observe( gridElement, { box: 'border-box' } );
+			const contentBoxSpy = new window.ResizeObserver( resizeCallback );
+			contentBoxSpy.observe( gridElement );
 			return () => {
-				for ( const observer of observers ) {
-					observer.disconnect();
-				}
+				borderBoxSpy.disconnect();
+				contentBoxSpy.disconnect();
 			};
 		}, [ gridElement ] );
 

package/src/components/grid/style.scss

@@ -20,6 +20,7 @@
 
 .block-editor-grid-visualizer__grid {
 	display: grid;
+	position: absolute;
 }
 
 .block-editor-grid-visualizer__cell {

package/src/components/grid/utils.js

@@ -187,10 +187,12 @@ export function getGridInfo( gridElement ) {
 			gridTemplateColumns,
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
-			paddingTop: `calc(${ paddingTop } + ${ borderTopWidth })`,
-			paddingRight: `calc(${ paddingRight } + ${ borderRightWidth })`,
-			paddingBottom: `calc(${ paddingBottom } + ${ borderBottomWidth })`,
-			paddingLeft: `calc(${ paddingLeft } + ${ borderLeftWidth })`,
+			inset: `
+				calc(${ paddingTop } + ${ borderTopWidth })
+				calc(${ paddingRight } + ${ borderRightWidth })
+				calc(${ paddingBottom } + ${ borderBottomWidth })
+				calc(${ paddingLeft } + ${ borderLeftWidth })
+			`,
 		},
 	};
 }

package/src/components/inserter/menu.js

@@ -54,15 +54,17 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const isZoomOutMode = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
-	const hasSectionRootClientId = useSelect(
-		( select ) =>
-			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
-		[]
-	);
+	const { isZoomOutMode, hasSectionRootClientId } = useSelect( ( select ) => {
+		const { isZoomOut, getSectionRootClientId } = unlock(
+			select( blockEditorStore )
+		);
+
+		return {
+			isZoomOutMode: isZoomOut(),
+			hasSectionRootClientId: !! getSectionRootClientId(),
+		};
+	}, [] );
+
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );

package/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	__experimentalUseSlotFills as useSlotFills,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useLayoutEffect, useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,40 +15,75 @@ import { __ } from '@wordpress/i18n';
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
 import { store as blockEditorStore } from '../../store';
+import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
+import { cleanEmptyObject } from '../../hooks/utils';
 
 const PositionControlsPanel = () => {
-	const [ initialOpen, setInitialOpen ] = useState();
+	const { selectedClientIds, selectedBlocks, hasPositionAttribute } =
+		useSelect( ( select ) => {
+			const { getBlocksByClientId, getSelectedBlockClientIds } =
+				select( blockEditorStore );
 
-	// Determine whether the panel should be expanded.
-	const { multiSelectedBlocks } = useSelect( ( select ) => {
-		const { getBlocksByClientId, getSelectedBlockClientIds } =
-			select( blockEditorStore );
-		const clientIds = getSelectedBlockClientIds();
-		return {
-			multiSelectedBlocks: getBlocksByClientId( clientIds ),
-		};
-	}, [] );
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const _selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
 
-	useLayoutEffect( () => {
-		// If any selected block has a position set, open the panel by default.
-		// The first block's value will still be used within the control though.
-		if ( initialOpen === undefined ) {
-			setInitialOpen(
-				multiSelectedBlocks.some(
+			return {
+				selectedClientIds: selectedBlockClientIds,
+				selectedBlocks: _selectedBlocks,
+				hasPositionAttribute: _selectedBlocks?.some(
 					( { attributes } ) => !! attributes?.style?.position?.type
-				)
-			);
+				),
+			};
+		}, [] );
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	function resetPosition() {
+		if ( ! selectedClientIds?.length || ! selectedBlocks?.length ) {
+			return;
 		}
-	}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
+
+		const attributesByClientId = Object.fromEntries(
+			selectedBlocks?.map( ( { clientId, attributes } ) => [
+				clientId,
+				{
+					style: cleanEmptyObject( {
+						...attributes?.style,
+						position: {
+							...attributes?.style?.position,
+							type: undefined,
+							top: undefined,
+							right: undefined,
+							bottom: undefined,
+							left: undefined,
+						},
+					} ),
+				},
+			] )
+		);
+
+		updateBlockAttributes( selectedClientIds, attributesByClientId, true );
+	}
 
 	return (
-		<PanelBody
+		<ToolsPanel
 			className="block-editor-block-inspector__position"
-			title={ __( 'Position' ) }
-			initialOpen={ initialOpen ?? false }
+			label={ __( 'Position' ) }
+			resetAll={ resetPosition }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
-			<InspectorControls.Slot group="position" />
-		</PanelBody>
+			<ToolsPanelItem
+				isShownByDefault={ hasPositionAttribute }
+				label={ __( 'Position' ) }
+				hasValue={ () => hasPositionAttribute }
+				onDeselect={ resetPosition }
+			>
+				<InspectorControls.Slot group="position" />
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 };
 

package/src/components/spacing-sizes-control/README.md

@@ -0,0 +1,93 @@
+# Spacing Sizes Control
+
+The SpacingSizesControl component provides a flexible user interface for controlling spacing values in blocks, allowing users to modify values for different sides. It supports three viewing modes:
+
+1. Single: Control one side at a time.
+2. Axial: Control horizontal and vertical sides together.
+3. Custom: Control each side separately.
+
+## Usage
+
+```jsx
+import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+function Example() {
+	const [ sides, setSides ] = useState( {
+		top: '0px',
+		right: '0px',
+		bottom: '0px',
+		left: '0px',
+	} );
+
+	return (
+		<SpacingSizesControl
+			values={ sides }
+			onChange={ setSides }
+			label="Sides"
+		/>
+	);
+}
+```
+
+## Props
+
+### `inputProps`
+
+-   Type: `Object`
+-   Required: No
+-   Description: Additional props to pass to the input controls.
+
+### `label`
+
+-   Type: `String`
+-   Required: Yes
+-   Description: Label for the control.
+
+### `minimumCustomValue`
+
+-   Type: `Number`
+-   Default: 0
+-   Description: Minimum value allowed for custom input.
+
+### `onChange`
+
+-   Type: `Function`
+-   Required: Yes
+-   Description: Callback function called when spacing values change. Receives an object containing the updated values.
+
+### `onMouseOut`
+
+-   Type: `Function`
+-   Required: No
+-   Description: Callback function called when mouse leaves the control.
+
+### `onMouseOver`
+
+-   Type: `Function`
+-   Required: No
+-   Description: Callback function called when mouse enters the control.
+
+### `showSideInLabel`
+
+-   Type: `Boolean`
+-   Default: true
+-   Description: Whether to show the side (top, right, etc.) in the control label.
+
+### `sides`
+
+-   Type: `Array`
+-   Default: ALL_SIDES (top, right, bottom, left)
+-   Description: Array of sides that can be controlled.
+
+### `useSelect`
+
+-   Type: `Boolean`
+-   Required: No
+-   Description: Whether to use a select control for predefined values.
+
+### `values`
+
+-   Type: `Object`
+-   Required: No
+-   Description: Object containing the current spacing values for each side.

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

@@ -12,11 +12,11 @@ import { _x, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import useSpacingSizes from './hooks/use-spacing-sizes';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
 import SingleInputControl from './input-controls/single';
 import LinkedButton from './linked-button';
-import useSpacingSizes from './hooks/use-spacing-sizes';
 import {
 	ALL_SIDES,
 	DEFAULT_VALUES,
@@ -25,6 +25,49 @@ import {
 	getInitialView,
 } from './utils';
 
+/**
+ * A flexible control for managing spacing values in the block editor. Supports single, axial,
+ * and separated input controls for different spacing configurations with automatic view selection
+ * based on current values and available sides.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/spacing-sizes-control/README.md
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
+ * import { useState } from '@wordpress/element';
+ *
+ * function Example() {
+ *   const [ sides, setSides ] = useState( {
+ *     top: '0px',
+ *     right: '0px',
+ *     bottom: '0px',
+ *     left: '0px',
+ *   } );
+ *
+ *   return (
+ *     <SpacingSizesControl
+ *       values={ sides }
+ *       onChange={ setSides }
+ *       label="Sides"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props                    Component props.
+ * @param {Object}   props.inputProps         Additional props for input controls.
+ * @param {string}   props.label              Label for the control.
+ * @param {number}   props.minimumCustomValue Minimum value for custom input.
+ * @param {Function} props.onChange           Called when spacing values change.
+ * @param {Function} props.onMouseOut         Called when mouse leaves the control.
+ * @param {Function} props.onMouseOver        Called when mouse enters the control.
+ * @param {boolean}  props.showSideInLabel    Show side in control label.
+ * @param {Array}    props.sides              Available sides for control.
+ * @param {boolean}  props.useSelect          Use select control for predefined values.
+ * @param {Object}   props.values             Current spacing values.
+ * @return {Element}                         Spacing sizes control component.
+ */
 export default function SpacingSizesControl( {
 	inputProps,
 	label: labelProp,

package/src/components/spacing-sizes-control/linked-button.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -9,14 +9,12 @@ export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (
-		<Tooltip text={ label }>
-			<Button
-				{ ...props }
-				size="small"
-				icon={ isLinked ? link : linkOff }
-				iconSize={ 24 }
-				aria-label={ label }
-			/>
-		</Tooltip>
+		<Button
+			{ ...props }
+			size="small"
+			icon={ isLinked ? link : linkOff }
+			iconSize={ 24 }
+			label={ label }
+		/>
 	);
 }

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

@@ -3,20 +3,15 @@
  */
 import {
 	ALL_SIDES,
-	getAllRawValue,
 	getCustomValueFromPreset,
 	getInitialView,
 	getPresetValueFromCustomValue,
 	getSliderValueFromPreset,
 	getSpacingPresetCssVar,
 	getSpacingPresetSlug,
-	getSupportedMenuItems,
 	hasAxisSupport,
 	hasBalancedSidesSupport,
-	isValuesDefined,
-	isValuesMixed,
 	isValueSpacingPreset,
-	LABELS,
 	VIEWS,
 } from '../utils';
 
@@ -114,88 +109,6 @@ describe( 'getSliderValueFromPreset', () => {
 	} );
 } );
 
-describe( 'getAllRawValue', () => {
-	const customValues = {
-		top: '5px',
-		bottom: '5px',
-		left: '6px',
-		right: '2px',
-	};
-	it( 'should return the most common custom value from the values object', () => {
-		expect( getAllRawValue( customValues ) ).toBe( '5px' );
-	} );
-	const presetValues = {
-		top: 'var:preset|spacing|30',
-		bottom: 'var:preset|spacing|20',
-		left: 'var:preset|spacing|10',
-		right: 'var:preset|spacing|30',
-	};
-	it( 'should return the most common preset value from the values object', () => {
-		expect( getAllRawValue( presetValues ) ).toBe(
-			'var:preset|spacing|30'
-		);
-	} );
-} );
-
-describe( 'isValuesMixed', () => {
-	const unmixedValues = {
-		top: '5px',
-		bottom: '5px',
-		left: '5px',
-		right: '5px',
-	};
-	it( 'should return false if all values are the same', () => {
-		expect( isValuesMixed( unmixedValues ) ).toBe( false );
-	} );
-	const mixedValues = {
-		top: 'var:preset|spacing|30',
-		bottom: 'var:preset|spacing|20',
-		left: 'var:preset|spacing|10',
-		right: 'var:preset|spacing|30',
-	};
-	it( 'should return true if all the values are not the same', () => {
-		expect( isValuesMixed( mixedValues ) ).toBe( true );
-	} );
-	const singleValue = {
-		top: 'var:preset|spacing|30',
-	};
-	it( 'should return true if only one side set', () => {
-		expect( isValuesMixed( singleValue ) ).toBe( true );
-	} );
-	const incompleteValues = {
-		top: 'var:preset|spacing|30',
-		bottom: 'var:preset|spacing|30',
-		left: 'var:preset|spacing|30',
-	};
-	it( 'should return true if all sides not set', () => {
-		expect( isValuesMixed( incompleteValues ) ).toBe( true );
-	} );
-} );
-
-describe( 'isValuesDefined', () => {
-	const undefinedValues = {
-		top: undefined,
-		bottom: undefined,
-		left: undefined,
-		right: undefined,
-	};
-	it( 'should return false if values are not defined', () => {
-		expect( isValuesDefined( undefinedValues ) ).toBe( false );
-	} );
-	it( 'should return false if values is passed in as null', () => {
-		expect( isValuesDefined( null ) ).toBe( false );
-	} );
-	const definedValues = {
-		top: 'var:preset|spacing|30',
-		bottom: 'var:preset|spacing|20',
-		left: 'var:preset|spacing|10',
-		right: 'var:preset|spacing|30',
-	};
-	it( 'should return true if all the values are not the same', () => {
-		expect( isValuesDefined( definedValues ) ).toBe( true );
-	} );
-} );
-
 describe( 'hasAxisSupport', () => {
 	it( 'should return true for horizontal support if it is in sides', () => {
 		expect( hasAxisSupport( [ 'horizontal' ], 'horizontal' ) ).toBe( true );
@@ -228,70 +141,6 @@ describe( 'hasAxisSupport', () => {
 	} );
 } );
 
-describe( 'getSupportedMenuItems', () => {
-	it( 'returns no items when sides are not configured', () => {
-		expect( getSupportedMenuItems( [] ) ).toEqual( {} );
-		expect( getSupportedMenuItems() ).toEqual( {} );
-	} );
-
-	const sideConfigs = [
-		[ LABELS.axial, [ 'horizontal', 'vertical' ] ],
-		[ LABELS.axial, [ 'top', 'right', 'bottom', 'left' ] ],
-		[ LABELS.horizontal, [ 'horizontal' ] ],
-		[ LABELS.horizontal, [ 'left', 'right' ] ],
-		[ LABELS.vertical, [ 'vertical' ] ],
-		[ LABELS.vertical, [ 'top', 'bottom' ] ],
-		[ LABELS.horizontal, [ 'horizontal' ] ],
-	];
-
-	test.each( sideConfigs )(
-		'should include %s axial menu with %s sides',
-		( label, sides ) => {
-			expect( getSupportedMenuItems( sides ) ).toHaveProperty(
-				'axial.label',
-				label
-			);
-		}
-	);
-
-	it( 'returns no axial item when not not supported', () => {
-		expect( getSupportedMenuItems( [ 'left', 'top' ] ) ).not.toHaveProperty(
-			'axial'
-		);
-	} );
-
-	it( 'should include the correct individual side options', () => {
-		expect( getSupportedMenuItems( [ 'top' ] ) ).toHaveProperty(
-			'top.label',
-			LABELS.top
-		);
-		expect( getSupportedMenuItems( [ 'right' ] ) ).toHaveProperty(
-			'right.label',
-			LABELS.right
-		);
-		expect( getSupportedMenuItems( [ 'bottom' ] ) ).toHaveProperty(
-			'bottom.label',
-			LABELS.bottom
-		);
-		expect( getSupportedMenuItems( [ 'left' ] ) ).toHaveProperty(
-			'left.label',
-			LABELS.left
-		);
-	} );
-	it( 'should include the custom option only when applicable', () => {
-		expect( getSupportedMenuItems( [ 'top', 'left' ] ) ).toHaveProperty(
-			'custom.label',
-			LABELS.custom
-		);
-		expect( getSupportedMenuItems( [ 'top' ] ) ).not.toHaveProperty(
-			'custom'
-		);
-		expect(
-			getSupportedMenuItems( [ 'horizontal', 'vertical' ] )
-		).not.toHaveProperty( 'custom.label' );
-	} );
-} );
-
 describe( 'hasBalancedSidesSupport', () => {
 	it( 'should determine balanced sides', () => {
 		expect( hasBalancedSidesSupport( ALL_SIDES ) ).toBe( true );