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

package/src/components/font-family/index.js

@@ -18,8 +18,6 @@ import { useSettings } from '../use-settings';
 export default function FontFamilyControl( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next40pxDefaultSize = false,
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -47,17 +45,6 @@ export default function FontFamilyControl( {
 		} ) ),
 	];
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.blockEditor.FontFamilyControl',
-			{
-				since: '6.7',
-				version: '7.0',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
 	if (
 		! __next40pxDefaultSize &&
 		( props.size === undefined || props.size === 'default' )
@@ -82,9 +69,7 @@ export default function FontFamilyControl( {
 			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
 			options={ options }
-			className={ clsx( 'block-editor-font-family-control', className, {
-				'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
-			} ) }
+			className={ clsx( 'block-editor-font-family-control', className ) }
 			{ ...props }
 		/>
 	);

package/src/components/font-family/stories/{index.story.js → index.story.jsx}

@@ -49,7 +49,6 @@ export const Default = {
 				slug: 'system-font',
 			},
 		],
-		__nextHasNoMarginBottom: true,
 		__next40pxDefaultSize: true,
 	},
 };

package/src/components/global-styles/dimensions-panel.js

@@ -39,6 +39,7 @@ export function useHasDimensionsPanel( settings ) {
 	const hasMargin = useHasMargin( settings );
 	const hasGap = useHasGap( settings );
 	const hasMinHeight = useHasMinHeight( settings );
+	const hasWidth = useHasWidth( settings );
 	const hasAspectRatio = useHasAspectRatio( settings );
 	const hasChildLayout = useHasChildLayout( settings );
 
@@ -50,6 +51,7 @@ export function useHasDimensionsPanel( settings ) {
 			hasMargin ||
 			hasGap ||
 			hasMinHeight ||
+			hasWidth ||
 			hasAspectRatio ||
 			hasChildLayout )
 	);
@@ -79,6 +81,10 @@ function useHasMinHeight( settings ) {
 	return settings?.dimensions?.minHeight;
 }
 
+function useHasWidth( settings ) {
+	return settings?.dimensions?.width;
+}
+
 function useHasAspectRatio( settings ) {
 	return settings?.dimensions?.aspectRatio;
 }
@@ -206,6 +212,7 @@ const DEFAULT_CONTROLS = {
 	margin: true,
 	blockGap: true,
 	minHeight: true,
+	width: true,
 	aspectRatio: true,
 	childLayout: true,
 };
@@ -384,6 +391,17 @@ export default function DimensionsPanel( {
 	};
 	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
 
+	// Width
+	const showWidthControl = useHasWidth( settings );
+	const widthValue = decodeValue( inheritedValue?.dimensions?.width );
+	const setWidthValue = ( newValue ) => {
+		onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) );
+	};
+	const resetWidthValue = () => {
+		setWidthValue( undefined );
+	};
+	const hasWidthValue = () => !! value?.dimensions?.width;
+
 	// Aspect Ratio
 	const showAspectRatioControl = useHasAspectRatio( settings );
 	const aspectRatioValue = decodeValue(
@@ -439,6 +457,7 @@ export default function DimensionsPanel( {
 				...previousValue?.dimensions,
 				minHeight: undefined,
 				aspectRatio: undefined,
+				width: undefined,
 			},
 		};
 	}, [] );
@@ -688,6 +707,23 @@ export default function DimensionsPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showWidthControl && (
+				<ToolsPanelItem
+					hasValue={ hasWidthValue }
+					label={ __( 'Width' ) }
+					onDeselect={ resetWidthValue }
+					isShownByDefault={
+						defaultControls.width ?? DEFAULT_CONTROLS.width
+					}
+					panelId={ panelId }
+				>
+					<HeightControl
+						label={ __( 'Width' ) }
+						value={ widthValue }
+						onChange={ setWidthValue }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ showAspectRatioControl && (
 				<AspectRatioTool
 					hasValue={ hasAspectRatioValue }

package/src/components/global-styles/hooks.js

@@ -152,7 +152,7 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
-		[ 'aspectRatio', 'minHeight' ].forEach( ( key ) => {
+		[ 'aspectRatio', 'minHeight', 'width' ].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.dimensions = {
 					...updatedSettings.dimensions,

package/src/components/global-styles/typography-panel.js

@@ -446,7 +446,6 @@ export default function TypographyPanel( {
 						value={ fontFamily }
 						onChange={ setFontFamily }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</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/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -99,11 +99,7 @@ export default function useInspectorControlsTabs(
 		tabs.push( TAB_SETTINGS );
 	}
 
-	if (
-		hasBlockStyles ||
-		hasStyleFills ||
-		window?.__experimentalContentOnlyPatternInsertion
-	) {
+	if ( hasBlockStyles || hasStyleFills ) {
 		tabs.push( TAB_STYLES );
 	}