@wordpress/block-editor 15.9.1-next.8b30e05b0.0 → 15.10.0

package/src/components/block-toolbar/index.js

@@ -32,7 +32,6 @@ import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
-import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import ChangeDesign from './change-design';
@@ -265,11 +264,7 @@ export function PrivateBlockToolbar( {
 							group="other"
 							className="block-editor-block-toolbar__slot"
 						/>
-						<__unstableBlockNameContext.Provider
-							value={ blockType?.name }
-						>
-							<__unstableBlockToolbarLastItem.Slot />
-						</__unstableBlockNameContext.Provider>
+						<__unstableBlockToolbarLastItem.Slot />
 					</>
 				) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />

package/src/components/block-toolbar/style.scss

@@ -193,6 +193,12 @@
 				font-size: $helptext-font-size;
 			}
 		}
+
+		.block-editor-block-icon {
+			width: 0 !important;
+			height: 0 !important;
+			min-width: 0 !important;
+		}
 	}
 
 	// Padding overrides.
@@ -201,12 +207,6 @@
 		padding-right: 6px;
 	}
 
-	.block-editor-block-icon {
-		width: 0 !important;
-		height: 0 !important;
-		min-width: 0 !important;
-	}
-
 	// Parent selector overrides
 	.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
 		border-top-right-radius: 0;

package/src/components/content-only-controls/index.js

@@ -295,19 +295,13 @@ function BlockFields( { clientId } ) {
 				field.Edit = createConfiguredControl( {
 					control: fieldDef.type,
 					clientId,
-					updateBlockAttributes,
 					fieldDef,
 				} );
 			}
 
 			return field;
 		} );
-	}, [
-		blockTypeFields,
-		blockType?.attributes,
-		clientId,
-		updateBlockAttributes,
-	] );
+	}, [ blockTypeFields, blockType?.attributes, clientId ] );
 
 	const handleToggleField = ( fieldId ) => {
 		setForm( ( prev ) => {
@@ -351,26 +345,7 @@ function BlockFields( { clientId } ) {
 				fields={ dataFormFields }
 				form={ form }
 				onChange={ ( changes ) => {
-					// Map field values to block attributes using field.setValue
-					const mappedChanges = {};
-					Object.entries( changes ).forEach(
-						( [ fieldId, fieldValue ] ) => {
-							const field = dataFormFields.find(
-								( f ) => f.id === fieldId
-							);
-							if ( field && field.setValue ) {
-								const updates = field.setValue( {
-									item: attributes,
-									value: fieldValue,
-								} );
-								Object.assign( mappedChanges, updates );
-							} else {
-								// For fields without setValue, use the value directly
-								mappedChanges[ fieldId ] = fieldValue;
-							}
-						}
-					);
-					updateBlockAttributes( clientId, mappedChanges );
+					updateBlockAttributes( clientId, changes );
 				} }
 			/>
 		</div>

package/src/components/content-only-controls/link/index.js

@@ -67,15 +67,15 @@ export function getUpdatedLinkAttributes( {
 	};
 }
 
-export default function Link( { data, field, config = {} } ) {
+export default function Link( { data, field, onChange, config = {} } ) {
 	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
 	const { popoverProps } = useInspectorPopoverPlacement( {
 		isControl: true,
 	} );
-	const { clientId, updateBlockAttributes, fieldDef } = config;
+	const { fieldDef } = config;
 	const updateAttributes = ( newValue ) => {
 		const mappedChanges = field.setValue( { item: data, value: newValue } );
-		updateBlockAttributes( clientId, mappedChanges );
+		onChange( mappedChanges );
 	};
 
 	const value = field.getValue( { item: data } );

package/src/components/content-only-controls/media/index.js

@@ -83,19 +83,19 @@ function MediaThumbnail( { data, field, attachment } ) {
 	return <Icon icon={ mediaIcon } size={ 24 } />;
 }
 
-export default function Media( { data, field, config = {} } ) {
+export default function Media( { data, field, onChange, config = {} } ) {
 	const { popoverProps } = useInspectorPopoverPlacement( {
 		isControl: true,
 	} );
 	const value = field.getValue( { item: data } );
 	const { allowedTypes = [], multiple = false } = field.config || {};
-	const { clientId, updateBlockAttributes, fieldDef } = config;
+	const { fieldDef } = config;
 	const updateAttributes = ( newFieldValue ) => {
 		const mappedChanges = field.setValue( {
 			item: data,
 			value: newFieldValue,
 		} );
-		updateBlockAttributes( clientId, mappedChanges );
+		onChange( mappedChanges );
 	};
 
 	// Check if featured image is supported by checking if it's in the mapping

package/src/components/content-only-controls/rich-text/index.js

@@ -23,15 +23,16 @@ export default function RichTextControl( {
 	data,
 	field,
 	hideLabelFromVision,
+	onChange,
 	config = {},
 } ) {
 	const registry = useRegistry();
 	const attrValue = field.getValue( { item: data } );
 	const fieldConfig = field.config || {};
-	const { clientId, updateBlockAttributes } = config;
+	const { clientId } = config;
 	const updateAttributes = ( html ) => {
 		const mappedChanges = field.setValue( { item: data, value: html } );
-		updateBlockAttributes( clientId, mappedChanges );
+		onChange( mappedChanges );
 	};
 	const [ selection, setSelection ] = useState( {
 		start: undefined,

package/src/components/dimensions-tool/width-height-tool.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
 /**
  * WordPress dependencies
  */
@@ -12,10 +7,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
-	grid-column: span 1;
-`;
-
 /**
  * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
  */
@@ -72,7 +63,8 @@ export default function WidthHeightTool( {
 
 	return (
 		<>
-			<SingleColumnToolsPanelItem
+			<ToolsPanelItem
+				style={ { gridColumn: 'span 1' } }
 				label={ __( 'Width' ) }
 				isShownByDefault={ isShownByDefault }
 				hasValue={ () => width !== '' }
@@ -89,8 +81,9 @@ export default function WidthHeightTool( {
 					onChange={ onDimensionChange( 'width' ) }
 					size="__unstable-large"
 				/>
-			</SingleColumnToolsPanelItem>
-			<SingleColumnToolsPanelItem
+			</ToolsPanelItem>
+			<ToolsPanelItem
+				style={ { gridColumn: 'span 1' } }
 				label={ __( 'Height' ) }
 				isShownByDefault={ isShownByDefault }
 				hasValue={ () => height !== '' }
@@ -107,7 +100,7 @@ export default function WidthHeightTool( {
 					onChange={ onDimensionChange( 'height' ) }
 					size="__unstable-large"
 				/>
-			</SingleColumnToolsPanelItem>
+			</ToolsPanelItem>
 		</>
 	);
 }

package/src/components/grid/grid-item-resizer.js

@@ -61,16 +61,29 @@ function GridItemResizerInner( {
 			const blockClientRect = blockElement.getBoundingClientRect();
 			const rootBlockClientRect =
 				rootBlockElement.getBoundingClientRect();
+
+			const topAvailable = blockClientRect.top > rootBlockClientRect.top;
+			const bottomAvailable =
+				blockClientRect.bottom < rootBlockClientRect.bottom;
+			const leftAvailable =
+				blockClientRect.left > rootBlockClientRect.left;
+			const rightAvailable =
+				blockClientRect.right < rootBlockClientRect.right;
+
 			setEnableSide( {
-				top: blockClientRect.top > rootBlockClientRect.top,
-				bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
-				left: blockClientRect.left > rootBlockClientRect.left,
-				right: blockClientRect.right < rootBlockClientRect.right,
+				top: !! isManualGrid
+					? topAvailable
+					: ! bottomAvailable && topAvailable,
+				bottom: bottomAvailable,
+				left: !! isManualGrid
+					? leftAvailable
+					: ! rightAvailable && leftAvailable,
+				right: rightAvailable,
 			} );
 		} );
 		observer.observe( blockElement );
 		return () => observer.disconnect();
-	}, [ blockElement, rootBlockElement ] );
+	}, [ blockElement, rootBlockElement, isManualGrid ] );
 
 	const justification = {
 		right: 'left',

package/src/components/image-editor/cropper.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import Cropper from 'react-easy-crop';
 import clsx from 'clsx';
 
 /**
@@ -9,12 +8,11 @@ import clsx from 'clsx';
  */
 import { Spinner } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
+import { ImageCropper as ImageCropperComponent } from '@wordpress/image-cropper';
 
 /**
  * Internal dependencies
  */
-import { MIN_ZOOM, MAX_ZOOM } from './constants';
-
 import { useImageEditingContext } from './context';
 
 export default function ImageCropper( {
@@ -25,17 +23,7 @@ export default function ImageCropper( {
 	naturalWidth,
 	borderProps,
 } ) {
-	const {
-		isInProgress,
-		editedUrl,
-		position,
-		zoom,
-		aspect,
-		setPosition,
-		setCrop,
-		setZoom,
-		rotation,
-	} = useImageEditingContext();
+	const { isInProgress, editedUrl, rotation } = useImageEditingContext();
 	const [ contentResizeListener, { width: clientWidth } ] =
 		useResizeObserver();
 
@@ -60,24 +48,7 @@ export default function ImageCropper( {
 				height: editedHeight,
 			} }
 		>
-			<Cropper
-				image={ editedUrl || url }
-				disabled={ isInProgress }
-				minZoom={ MIN_ZOOM / 100 }
-				maxZoom={ MAX_ZOOM / 100 }
-				crop={ position }
-				zoom={ zoom / 100 }
-				aspect={ aspect }
-				onCropChange={ ( pos ) => {
-					setPosition( pos );
-				} }
-				onCropComplete={ ( newCropPercent ) => {
-					setCrop( newCropPercent );
-				} }
-				onZoomChange={ ( newZoom ) => {
-					setZoom( newZoom * 100 );
-				} }
-			/>
+			<ImageCropperComponent src={ editedUrl || url } />
 			{ isInProgress && <Spinner /> }
 		</div>
 	);

package/src/components/image-editor/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+import { ImageCropperProvider } from '@wordpress/image-cropper';
 
 /**
  * Internal dependencies
@@ -26,36 +27,40 @@ export default function ImageEditor( {
 	borderProps,
 } ) {
 	return (
-		<ImageEditingProvider
-			id={ id }
-			url={ url }
-			naturalWidth={ naturalWidth }
-			naturalHeight={ naturalHeight }
-			onSaveImage={ onSaveImage }
-			onFinishEditing={ onFinishEditing }
-		>
-			<Cropper
-				borderProps={ borderProps }
+		<ImageCropperProvider>
+			<ImageEditingProvider
+				id={ id }
 				url={ url }
-				width={ width }
-				height={ height }
-				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
-			/>
-			<BlockControls>
-				<ToolbarGroup>
-					<ZoomDropdown />
-					<ToolbarItem>
-						{ ( toggleProps ) => (
-							<AspectRatioDropdown toggleProps={ toggleProps } />
-						) }
-					</ToolbarItem>
-					<RotationButton />
-				</ToolbarGroup>
-				<ToolbarGroup>
-					<FormControls />
-				</ToolbarGroup>
-			</BlockControls>
-		</ImageEditingProvider>
+				naturalHeight={ naturalHeight }
+				onSaveImage={ onSaveImage }
+				onFinishEditing={ onFinishEditing }
+			>
+				<Cropper
+					borderProps={ borderProps }
+					url={ url }
+					width={ width }
+					height={ height }
+					naturalHeight={ naturalHeight }
+					naturalWidth={ naturalWidth }
+				/>
+				<BlockControls>
+					<ToolbarGroup>
+						<ZoomDropdown />
+						<ToolbarItem>
+							{ ( toggleProps ) => (
+								<AspectRatioDropdown
+									toggleProps={ toggleProps }
+								/>
+							) }
+						</ToolbarItem>
+						<RotationButton />
+					</ToolbarGroup>
+					<ToolbarGroup>
+						<FormControls />
+					</ToolbarGroup>
+				</BlockControls>
+			</ImageEditingProvider>
+		</ImageCropperProvider>
 	);
 }

package/src/components/image-editor/use-transform-image.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
+import { useImageCropper } from '@wordpress/image-cropper';
 
 export default function useTransformImage( {
 	url,
@@ -10,30 +11,63 @@ export default function useTransformImage( {
 	naturalHeight,
 } ) {
 	const [ editedUrl, setEditedUrl ] = useState();
-	const [ crop, setCrop ] = useState();
-	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ zoom, setZoom ] = useState( 100 );
-	const [ rotation, setRotation ] = useState( 0 );
-	const defaultAspect = naturalWidth / naturalHeight;
-	const [ aspect, setAspect ] = useState( defaultAspect );
+	const { cropperState, setCropperState } = useImageCropper();
+	const { zoom, aspectRatio, crop, croppedArea } = cropperState;
+
+	const setZoom = useCallback(
+		( newZoom ) => {
+			setCropperState( { zoom: newZoom } );
+		},
+		[ setCropperState ]
+	);
+
+	const setAspectRatio = useCallback(
+		( newAspect ) => {
+			setCropperState( { aspectRatio: newAspect } );
+		},
+		[ setCropperState ]
+	);
 
+	const defaultAspect = naturalWidth / naturalHeight;
+	const rotatedAspect = naturalHeight / naturalWidth;
+
+	// Initialize aspect ratio on mount or when defaultAspect changes
+	useEffect( () => {
+		setAspectRatio( defaultAspect );
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+	/**
+	 * rotateClockwise rotates the image by 90° clockwise by drawing the original image onto a canvas with rotation applied,
+	 * then saves it as a new blob URL (editedUrl).
+	 * This creates a new rotated image file, bypassing the image-cropper’s CSS transform rotation.
+	 * It's a bespoke solution to ensure that the rotated image fills the content width.
+	 */
+	const [ internalRotation, setInternalRotation ] = useState( 0 );
 	const rotateClockwise = useCallback( () => {
-		const angle = ( rotation + 90 ) % 360;
+		const angle = ( internalRotation + 90 ) % 360;
 
 		let naturalAspectRatio = defaultAspect;
+		const isDefaultAspect =
+			defaultAspect === aspectRatio || rotatedAspect === aspectRatio;
+		const shouldResetAspect = zoom !== 1 || ! isDefaultAspect;
 
-		if ( rotation % 180 === 90 ) {
+		if ( internalRotation % 180 === 90 ) {
 			naturalAspectRatio = 1 / defaultAspect;
 		}
 
 		if ( angle === 0 ) {
 			setEditedUrl();
-			setRotation( angle );
-			setAspect( defaultAspect );
-			setPosition( ( prevPosition ) => ( {
-				x: -( prevPosition.y * naturalAspectRatio ),
-				y: prevPosition.x * naturalAspectRatio,
-			} ) );
+			setInternalRotation( angle );
+			const newAspectRatio = shouldResetAspect
+				? aspectRatio
+				: defaultAspect;
+			setCropperState( {
+				aspectRatio: newAspectRatio,
+				crop: {
+					x: -( crop.y * naturalAspectRatio ),
+					y: crop.x * naturalAspectRatio,
+				},
+			} );
 			return;
 		}
 
@@ -67,12 +101,17 @@ export default function useTransformImage( {
 
 			canvas.toBlob( ( blob ) => {
 				setEditedUrl( URL.createObjectURL( blob ) );
-				setRotation( angle );
-				setAspect( canvas.width / canvas.height );
-				setPosition( ( prevPosition ) => ( {
-					x: -( prevPosition.y * naturalAspectRatio ),
-					y: prevPosition.x * naturalAspectRatio,
-				} ) );
+				setInternalRotation( angle );
+				const newAspectRatio = shouldResetAspect
+					? aspectRatio
+					: canvas.width / canvas.height;
+				setCropperState( {
+					aspectRatio: newAspectRatio,
+					crop: {
+						x: -( crop.y * naturalAspectRatio ),
+						y: crop.x * naturalAspectRatio,
+					},
+				} );
 			} );
 		}
 
@@ -88,33 +127,40 @@ export default function useTransformImage( {
 		if ( typeof imgCrossOrigin === 'string' ) {
 			el.crossOrigin = imgCrossOrigin;
 		}
-	}, [ rotation, defaultAspect, url ] );
+	}, [
+		internalRotation,
+		defaultAspect,
+		url,
+		setCropperState,
+		crop,
+		zoom,
+		aspectRatio,
+		rotatedAspect,
+		setInternalRotation,
+	] );
 
 	return useMemo(
 		() => ( {
 			editedUrl,
 			setEditedUrl,
-			crop,
-			setCrop,
-			position,
-			setPosition,
+			crop: croppedArea,
 			zoom,
 			setZoom,
-			rotation,
-			setRotation,
+			rotation: internalRotation,
 			rotateClockwise,
-			aspect,
-			setAspect,
+			aspect: aspectRatio,
+			setAspect: setAspectRatio,
 			defaultAspect,
 		} ),
 		[
 			editedUrl,
-			crop,
-			position,
+			croppedArea,
 			zoom,
-			rotation,
+			setZoom,
+			internalRotation,
 			rotateClockwise,
-			aspect,
+			aspectRatio,
+			setAspectRatio,
 			defaultAspect,
 		]
 	);

package/src/components/image-editor/zoom-dropdown.js

@@ -39,8 +39,8 @@ export default function ZoomDropdown() {
 						label={ __( 'Zoom' ) }
 						min={ MIN_ZOOM }
 						max={ MAX_ZOOM }
-						value={ Math.round( zoom ) }
-						onChange={ setZoom }
+						value={ Math.round( zoom * 100 ) }
+						onChange={ ( newZoom ) => setZoom( newZoom / 100 ) }
 					/>
 				</DropdownContentWrapper>
 			) }

package/src/components/index.js

@@ -11,6 +11,11 @@ export {
 	BlockAlignmentControl,
 	BlockAlignmentToolbar,
 } from './block-alignment-control';
+export {
+	BlockBindingsAttributeControl,
+	BlockBindingsSourceFieldsList,
+	useBlockBindingsUtils,
+} from './block-bindings';
 export { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control';
 export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
@@ -107,7 +112,6 @@ export {
 
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
 export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
-export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';
 export { default as __unstableInserterMenuExtension } from './inserter-menu-extension';
 export { default as __experimentalPreviewOptions } from './preview-options';
 export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';

package/src/components/inserter/hooks/use-insertion-point.js

@@ -201,6 +201,8 @@ function useInsertionPoint( {
 			onSelect,
 			shouldFocusBlock,
 			selectBlockOnInsert,
+			setLastFocus,
+			registry,
 		]
 	);
 
@@ -234,6 +236,7 @@ function useInsertionPoint( {
 			hideInsertionPoint,
 			destinationRootClientId,
 			destinationIndex,
+			registry,
 		]
 	);
 

package/src/components/inserter/style.scss

@@ -383,7 +383,7 @@ $block-inserter-tabs-height: 44px;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;
-		padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+		padding: $grid-unit-30 $grid-unit-30 $grid-unit-30;
 		overflow-x: visible;
 		overflow-y: auto;
 

package/src/components/inserter-draggable-blocks/index.js

@@ -21,14 +21,15 @@ const InserterDraggableBlocks = ( {
 	children,
 	pattern,
 } ) => {
+	const blockName = blocks.length === 1 ? blocks[ 0 ].name : undefined;
 	const blockTypeIcon = useSelect(
 		( select ) => {
-			const { getBlockType } = select( blocksStore );
 			return (
-				blocks.length === 1 && getBlockType( blocks[ 0 ].name )?.icon
+				blockName &&
+				select( blocksStore ).getBlockType( blockName )?.icon
 			);
 		},
-		[ blocks ]
+		[ blockName ]
 	);
 
 	const { startDragging, stopDragging } = unlock(
@@ -57,13 +58,23 @@ const InserterDraggableBlocks = ( {
 			transferData={ { type: 'inserter', blocks: draggableBlocks } }
 			onDragStart={ ( event ) => {
 				startDragging();
+				const addedTypes = new Set();
 				for ( const block of draggableBlocks ) {
 					const type = `wp-block:${ block.name }`;
-					// This will fill in the dataTransfer.types array so that
-					// the drop zone can check if the draggable is eligible.
-					// Unfortuantely, on drag start, we don't have access to the
-					// actual data, only the data keys/types.
-					event.dataTransfer.items.add( '', type );
+					/*
+					 * Only add each block type once to avoid DataTransferItemList::add `NotSupportedError`
+					 * when patterns contain multiple blocks of the same type.
+					 */
+					if ( ! addedTypes.has( type ) ) {
+						/*
+						 * This will fill in the dataTransfer.types array so that
+						 * the drop zone can check if the draggable is eligible.
+						 * Unfortuantely, on drag start, we don't have access to the
+						 * actual data, only the data keys/types.
+						 */
+						event.dataTransfer.items.add( '', type );
+						addedTypes.add( type );
+					}
 				}
 			} }
 			onDragEnd={ () => {