@wordpress/block-editor 15.9.0 → 15.9.1-next.6deb34194.0

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/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';
@@ -172,3 +176,7 @@ export { useBlockEditingMode } from './block-editing-mode';
 export { default as BlockEditorProvider } from './provider';
 export { useSettings, useSetting } from './use-settings';
 export { useBlockCommands } from './use-block-commands';
+
+// This component is no longer used in Gutenberg,
+// but kept for backwards compatibility.
+export { default as ToolSelector } from './tool-selector';

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={ () => {

package/src/components/inspector-controls-tabs/content-tab.js

@@ -15,14 +15,18 @@ const ContentTab = ( { rootClientId, contentClientIds } ) => {
 		return null;
 	}
 
+	const shouldShowContentOnlyControls =
+		window?.__experimentalContentOnlyPatternInsertion &&
+		window?.__experimentalContentOnlyInspectorFields;
+
 	return (
 		<>
-			{ ! window?.__experimentalContentOnlyPatternInsertion && (
+			{ ! shouldShowContentOnlyControls && (
 				<PanelBody title={ __( 'Content' ) }>
 					<BlockQuickNavigation clientIds={ contentClientIds } />
 				</PanelBody>
 			) }
-			{ window?.__experimentalContentOnlyPatternInsertion && (
+			{ shouldShowContentOnlyControls && (
 				<ContentOnlyControls rootClientId={ rootClientId } />
 			) }
 		</>

package/src/components/tool-selector/index.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
+
+function ToolSelector() {
+	deprecated( 'wp.blockEditor.ToolSelector', {
+		since: '6.9',
+		hint: 'The ToolSelector component no longer renders anything.',
+	} );
+
+	return null;
+}
+
+/**
+ * This component has been deprecated and no longer renders anything.
+ */
+export default forwardRef( ToolSelector );