@wordpress/block-editor 15.16.1-next.v.202604091042.0 → 15.18.0

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

@@ -7,11 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import {
-	VisuallyHidden,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import {
 	chevronLeft,
 	chevronUp,

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -14,7 +14,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	FlexBlock,
 } from '@wordpress/components';
 
@@ -162,23 +162,23 @@ export function PatternCategoryPreviews( {
 					/>
 				</HStack>
 				{ ! currentCategoryPatterns.length && (
-					<Text
+					<WCText
 						variant="muted"
 						className="block-editor-inserter__patterns-category-no-results"
 					>
 						{ __( 'No results found' ) }
-					</Text>
+					</WCText>
 				) }
 			</VStack>
 			{ currentCategoryPatterns.length > 0 && (
 				<>
-					<Text
+					<WCText
 						size="12"
 						as="p"
 						className="block-editor-inserter__help-text"
 					>
 						{ __( 'Drag and drop patterns into the canvas.' ) }
-					</Text>
+					</WCText>
 					<BlockPatternsList
 						ref={ scrollContainerRef }
 						blockPatterns={ pagingProps.categoryPatterns }

package/src/components/inserter/menu.js

@@ -14,7 +14,8 @@ import {
 	useRef,
 	useLayoutEffect,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
+import { SearchControl, Popover } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -235,7 +236,7 @@ function InserterMenu(
 				</div>
 				{ showInserterHelpPanel && (
 					<div className="block-editor-inserter__tips">
-						<VisuallyHidden as="h2">
+						<VisuallyHidden render={ <h2 /> }>
 							{ __( 'A tip for using the block editor' ) }
 						</VisuallyHidden>
 						<Tips />

package/src/components/inserter/search-results.js

@@ -3,7 +3,7 @@
  */
 import { useMemo, useEffect } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';

package/src/components/inserter/style.scss

@@ -85,7 +85,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__toggle.components-button {
 	display: inline-flex;
 	align-items: center;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	border: none;
 	outline: none;
 	padding: 0;
@@ -482,7 +482,7 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__media-list__list-item {
 	position: relative;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	margin-bottom: $grid-unit-30;
 
 	&.is-placeholder {

package/src/components/inserter-list-item/style.scss

@@ -42,7 +42,7 @@
 	padding: $grid-unit-10;
 	align-items: stretch;
 	justify-content: center;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	background: transparent;
 	word-break: break-word;
 	@media not ( prefers-reduced-motion ) {

package/src/components/inspector-popover-header/index.js

@@ -7,7 +7,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalSpacer as Spacer,
 	Button,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { closeSmall } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -52,7 +52,7 @@ export default function InspectorPopoverHeader( {
 					/>
 				) }
 			</HStack>
-			{ help && <Text>{ help }</Text> }
+			{ help && <WCText>{ help }</WCText> }
 		</VStack>
 	);
 }

package/src/components/link-control/link-preview.js

@@ -36,7 +36,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { unlock } from '../../lock-unlock';
 import { ViewerSlot } from './viewer-slot';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 import useRichUrlData from './use-rich-url-data';
 
@@ -70,7 +70,9 @@ export default function LinkPreview( {
 
 	const displayTitle =
 		! isEmptyURL &&
-		stripHTML( richData?.title || value?.title || displayURL );
+		stripHTML(
+			value?.entityTitle || richData?.title || value?.title || displayURL
+		);
 
 	let icon;
 
@@ -162,12 +164,12 @@ export default function LinkPreview( {
 									>
 										{ value.badges.map(
 											( badge, index ) => (
-												<Badge
+												<WCBadge
 													key={ `${ badge.label }|${ badge.intent }|${ index }` }
 													intent={ badge.intent }
 												>
 													{ badge.label }
-												</Badge>
+												</WCBadge>
 											)
 										) }
 									</HStack>

package/src/components/link-control/settings.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 const noop = () => {};
 
@@ -58,7 +59,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 
 	return (
 		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
+			<VisuallyHidden render={ <legend /> }>
 				{ __( 'Currently selected link settings' ) }
 			</VisuallyHidden>
 			{ theSettings }

package/src/components/link-picker/link-picker.js

@@ -5,9 +5,9 @@ import {
 	BaseControl,
 	Button,
 	Popover,
-	VisuallyHidden,
 	useBaseControlProps,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useState, useId, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

package/src/components/link-picker/link-preview.js

@@ -16,7 +16,7 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
  */
 import { unlock } from '../../lock-unlock';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 /**
  * Link preview component that displays the current link information.
@@ -67,12 +67,12 @@ export function LinkPreview( { title, url, image, badges } ) {
 								alignment="left"
 							>
 								{ badges.map( ( badge ) => (
-									<Badge
+									<WCBadge
 										key={ `${ badge.label }|${ badge.intent }` }
 										intent={ badge.intent }
 									>
 										{ badge.label }
-									</Badge>
+									</WCBadge>
 								) ) }
 							</HStack>
 						) }

package/src/components/list-view/block-select-button.js

@@ -36,7 +36,7 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { getBlockVisibilityLabel } from '../block-visibility';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 function ListViewBlockSelectButton(
 	{
@@ -136,9 +136,9 @@ function ListViewBlockSelectButton(
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-						<Badge className="block-editor-list-view-block-select-button__anchor">
+						<WCBadge className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
-						</Badge>
+						</WCBadge>
 					</span>
 				) }
 				{ isSticky && (

package/src/components/list-view/index.js

@@ -11,10 +11,8 @@ import {
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import {
-	__experimentalTreeGrid as TreeGrid,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {

package/src/components/list-view/style.scss

@@ -469,7 +469,7 @@ $block-navigation-max-indent: 8;
 .block-editor-list-view__expander {
 	height: $icon-size;
 	width: $icon-size;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {

package/src/components/media-placeholder/content.scss

@@ -7,7 +7,7 @@
 	min-height: 0;
 
 	&:hover {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
 }

package/src/components/preset-input-control/index.js

@@ -168,12 +168,18 @@ export default function PresetInputControl( {
 		unitConfig?.max ?? customValueSettings[ computedUnit ]?.max ?? 10;
 
 	const handleCustomValueChange = ( newValue ) => {
-		const isNumeric = ! isNaN( parseFloat( newValue ) );
-		const newCustomValue = isNumeric ? newValue : undefined;
+		// Treat empty or undefined as an explicit clear and propagate undefined.
+		if ( newValue === undefined || newValue === '' ) {
+			onChange( undefined );
+			return;
+		}
 
-		if ( newCustomValue !== undefined ) {
-			onChange( newCustomValue );
+		// Ignore non-numeric intermediate input (e.g. just a unit).
+		if ( isNaN( parseFloat( newValue ) ) ) {
+			return;
 		}
+
+		onChange( newValue );
 	};
 	const handleCustomValueSliderChange = ( next ) => {
 		onChange( [ next, computedUnit ].join( '' ) );

package/src/components/preset-input-control/test/index.js

@@ -92,6 +92,76 @@ describe( 'PresetInputControl', () => {
 		expect( mockOnChange ).toHaveBeenCalledWith( '25px' );
 	} );
 
+	it( 'clears value with undefined when input is fully erased via backspace', () => {
+		render(
+			<PresetInputControl
+				{ ...defaultProps }
+				presets={ presets }
+				value="60px"
+				disableCustomValues={ false }
+			/>
+		);
+
+		const input = screen.getByRole( 'spinbutton' );
+
+		// Simulate the bug scenario: backspace through "60" one character
+		// at a time. fireEvent.change is used here (rather than userEvent
+		// keyboard interactions) because the controlled UnitControl input
+		// does not respond to synthesised key events in jsdom. The
+		// intermediate "6" forwarding is expected and correct; the bug
+		// was that the final clear silently failed to propagate, leaving
+		// the parent stuck on the partial value.
+		fireEvent.change( input, { target: { value: '6' } } );
+		fireEvent.change( input, { target: { value: '' } } );
+
+		// The final clear must propagate as undefined, not be swallowed,
+		// and never be persisted as an empty string.
+		expect( mockOnChange ).toHaveBeenLastCalledWith( undefined );
+		expect( mockOnChange ).not.toHaveBeenCalledWith( '' );
+	} );
+
+	it( 'clears value with undefined when input is cleared in one shot', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<PresetInputControl
+				{ ...defaultProps }
+				presets={ presets }
+				value="25px"
+				disableCustomValues={ false }
+			/>
+		);
+
+		const input = screen.getByRole( 'spinbutton' );
+		await user.clear( input );
+
+		expect( mockOnChange ).toHaveBeenCalledWith( undefined );
+		expect( mockOnChange ).not.toHaveBeenCalledWith( '' );
+	} );
+
+	it( 'does not call onChange for non-numeric intermediate input', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<PresetInputControl
+				{ ...defaultProps }
+				presets={ presets }
+				value="15px"
+				disableCustomValues={ false }
+			/>
+		);
+
+		const input = screen.getByRole( 'spinbutton' );
+		await user.clear( input );
+		mockOnChange.mockClear();
+
+		// Typing a stray non-numeric character should not propagate a change.
+		await user.type( input, 'a' );
+
+		expect( mockOnChange ).not.toHaveBeenCalledWith( 'a' );
+		expect( mockOnChange ).not.toHaveBeenCalledWith( 'apx' );
+	} );
+
 	it( 'uses select dropdown for many presets', async () => {
 		const manyPresets = Array.from( { length: 12 }, ( _, i ) => ( {
 			name: `Preset ${ i + 1 }`,

package/src/components/provider/index.js

@@ -8,6 +8,7 @@ import {
 	MediaUploadProvider,
 	store as uploadStore,
 	detectClientSideMediaSupport,
+	isHeicCanvasSupported,
 } from '@wordpress/upload-media';
 
 /**
@@ -38,6 +39,17 @@ let hasLoggedFallback = false;
  */
 let isClientSideMediaEnabledCache = null;
 
+/**
+ * Cached result of whether HEIC-only canvas processing should be enabled.
+ */
+let isHeicCanvasEnabledCache = null;
+
+/**
+ * HEIC MIME types that should be routed through the upload-media pipeline
+ * when in HEIC-only mode.
+ */
+const HEIC_MIME_TYPES = [ 'image/heic', 'image/heif' ];
+
 /**
  * Checks if client-side media processing should be enabled.
  *
@@ -85,6 +97,44 @@ function shouldEnableClientSideMediaProcessing() {
 	return true;
 }
 
+/**
+ * Checks if HEIC-only canvas processing should be enabled.
+ *
+ * Returns true when:
+ * 1. Full client-side processing is NOT available (otherwise it handles HEIC already)
+ * 2. The server has set the __heicUploadSupport flag
+ * 3. The browser supports createImageBitmap + OffscreenCanvas (e.g. Safari)
+ *
+ * @return {boolean} Whether HEIC-only canvas processing should be enabled.
+ */
+function shouldEnableHeicCanvasProcessing() {
+	if ( isHeicCanvasEnabledCache !== null ) {
+		return isHeicCanvasEnabledCache;
+	}
+
+	// If full client-side processing is enabled, it already handles HEIC.
+	if ( shouldEnableClientSideMediaProcessing() ) {
+		isHeicCanvasEnabledCache = false;
+		return false;
+	}
+
+	if ( ! window.__heicUploadSupport ) {
+		isHeicCanvasEnabledCache = false;
+		return false;
+	}
+
+	if (
+		typeof isHeicCanvasSupported !== 'function' ||
+		! isHeicCanvasSupported()
+	) {
+		isHeicCanvasEnabledCache = false;
+		return false;
+	}
+
+	isHeicCanvasEnabledCache = true;
+	return true;
+}
+
 /**
  * Upload a media file when the file upload button is activated
  * or when adding a file to the editor via drag & drop.
@@ -128,6 +178,92 @@ function mediaUpload(
 	} );
 }
 
+/**
+ * Upload interceptor for HEIC-only mode.
+ *
+ * Routes HEIC files through the upload-media pipeline for canvas-based
+ * conversion, while passing non-HEIC files to the original mediaUpload
+ * function for standard server-side processing.
+ *
+ * @param {WPDataRegistry} registry
+ * @param {Object}         settings          Block editor settings.
+ * @param {Object}         $3                Parameters object passed to the function.
+ * @param {Array}          $3.allowedTypes   Array with the types of media that can be uploaded, if unset all types are allowed.
+ * @param {Object}         $3.additionalData Additional data to include in the request.
+ * @param {Array<File>}    $3.filesList      List of files.
+ * @param {Function}       $3.onError        Function called when an error happens.
+ * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
+ * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
+ * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ */
+function heicMediaUpload(
+	registry,
+	settings,
+	{
+		allowedTypes,
+		additionalData = {},
+		filesList,
+		onError = noop,
+		onFileChange,
+		onSuccess,
+		onBatchSuccess,
+	}
+) {
+	const files = Array.from( filesList );
+	const heicFiles = files.filter( ( file ) =>
+		HEIC_MIME_TYPES.includes( file.type )
+	);
+	const otherFiles = files.filter(
+		( file ) => ! HEIC_MIME_TYPES.includes( file.type )
+	);
+
+	// When the batch contains both HEIC and non-HEIC files, coordinate
+	// onBatchSuccess so it fires only after *both* paths have completed.
+	const hasBothPaths =
+		heicFiles.length > 0 && otherFiles.length > 0 && settings?.mediaUpload;
+	let pathsRemaining = hasBothPaths ? 2 : 1;
+	const coordinatedBatchSuccess = hasBothPaths
+		? () => {
+				pathsRemaining--;
+				if ( pathsRemaining <= 0 ) {
+					onBatchSuccess?.();
+				}
+		  }
+		: onBatchSuccess;
+
+	// Route HEIC files through the upload-media pipeline.
+	if ( heicFiles.length > 0 ) {
+		void registry.dispatch( uploadStore ).addItems( {
+			files: heicFiles,
+			onChange: onFileChange,
+			onSuccess: ( attachments ) => {
+				settings?.[ mediaUploadOnSuccessKey ]?.( attachments );
+				onSuccess?.( attachments );
+			},
+			onBatchSuccess: coordinatedBatchSuccess,
+			onError: ( error ) =>
+				onError(
+					typeof error === 'string' ? error : error?.message ?? ''
+				),
+			additionalData,
+			allowedTypes,
+		} );
+	}
+
+	// Pass non-HEIC files to the original server-side upload function.
+	if ( otherFiles.length > 0 && settings?.mediaUpload ) {
+		settings.mediaUpload( {
+			allowedTypes,
+			additionalData,
+			filesList: otherFiles,
+			onError,
+			onFileChange,
+			onSuccess,
+			onBatchSuccess: coordinatedBatchSuccess,
+		} );
+	}
+}
+
 /**
  * Calls useBlockSync as a child of SelectionContext.Provider so that the
  * hook can read selection state from the context provided by this tree
@@ -152,6 +288,9 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		const isClientSideMediaEnabled =
 			shouldEnableClientSideMediaProcessing();
+		const isHeicCanvasEnabled = shouldEnableHeicCanvasProcessing();
+		const useUploadMediaPipeline =
+			isClientSideMediaEnabled || isHeicCanvasEnabled;
 
 		// Nested providers (e.g. from useBlockPreview) inherit settings
 		// where mediaUpload has already been replaced with the
@@ -162,16 +301,17 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		const settings = useMemo( () => {
 			if (
-				isClientSideMediaEnabled &&
+				useUploadMediaPipeline &&
 				_settings?.mediaUpload &&
 				! isMediaUploadIntercepted
 			) {
-				// Create a new object so that the original props.settings.mediaUpload is not modified.
-				const interceptor = mediaUpload.bind(
-					null,
-					registry,
-					_settings
-				);
+				// Choose the right interceptor:
+				// - Full mode: all uploads go through upload-media pipeline.
+				// - HEIC-only mode: only HEIC files go through, rest use legacy path.
+				const uploadFn = isClientSideMediaEnabled
+					? mediaUpload
+					: heicMediaUpload;
+				const interceptor = uploadFn.bind( null, registry, _settings );
 				interceptor.__isMediaUploadInterceptor = true;
 				return {
 					..._settings,
@@ -182,6 +322,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		}, [
 			_settings,
 			registry,
+			useUploadMediaPipeline,
 			isClientSideMediaEnabled,
 			isMediaUploadIntercepted,
 		] );
@@ -258,7 +399,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		// overwrite the store's server-side function with the
 		// interceptor, causing uploads to loop instead of reaching
 		// the server.
-		if ( isClientSideMediaEnabled && ! isMediaUploadIntercepted ) {
+		if ( useUploadMediaPipeline && ! isMediaUploadIntercepted ) {
 			return (
 				<MediaUploadProvider
 					settings={ mediaUploadSettings }

package/src/components/responsive-block-control/label.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { _x, sprintf } from '@wordpress/i18n';
 
 export default function ResponsiveBlockControlLabel( {
@@ -27,7 +27,10 @@ export default function ResponsiveBlockControlLabel( {
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
-			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
+			<VisuallyHidden
+				id={ `rbc-desc-${ instanceId }` }
+				render={ <span /> }
+			>
 				{ accessibleLabel }
 			</VisuallyHidden>
 		</>

package/src/components/rich-text/event-listeners/index.js

@@ -36,6 +36,7 @@ const allEventListeners = [
 export function useEventListeners( props ) {
 	const propsRef = useRef( props );
 	useInsertionEffect( () => {
+		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		propsRef.current = props;
 	} );
 	const refEffects = useMemo(

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -8,6 +8,7 @@ import { isURL } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import { store as blockEditorStore } from '../../../store';
 import { addActiveFormats } from '../utils';
 import { getPasteEventData } from '../../../utils/pasting';
 
@@ -25,6 +26,7 @@ export default ( props ) => ( element ) => {
 			__unstableEmbedURLOnPaste,
 			preserveWhiteSpace,
 			pastePlainText,
+			registry,
 		} = props.current;
 
 		// The event listener is attached to the window, so we need to check if
@@ -116,11 +118,23 @@ export default ( props ) => ( element ) => {
 
 		if ( typeof content === 'string' ) {
 			pasteInline( content );
-		} else if ( content.length > 0 ) {
-			if ( onReplace && isEmpty( value ) ) {
-				onReplace( content, content.length - 1, -1 );
-			}
+			return;
+		}
+
+		if ( ! content.length || ! onReplace || ! isEmpty( value ) ) {
+			return;
 		}
+
+		// Record an intermediate paragraph-with-URL state so a single undo
+		// after the URL → block transformation restores the pasted link.
+		if ( mode === 'BLOCKS' ) {
+			pasteInline( html );
+			registry
+				.dispatch( blockEditorStore )
+				.__unstableMarkLastChangeAsPersistent();
+		}
+
+		onReplace( content, content.length - 1, -1 );
 	}
 
 	const { defaultView } = element.ownerDocument;

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

@@ -14,7 +14,7 @@ import {
 
 export const RANGE_CONTROL_MAX_SIZE = 8;
 
-export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+export const ALL_SIDES = [ 'top', 'bottom', 'left', 'right' ];
 
 export const DEFAULT_VALUES = {
 	top: undefined,