@wordpress/block-editor 16.0.0 → 16.1.0

package/src/components/image-editor/style.scss

@@ -0,0 +1,33 @@
+// `wp-block-image` class prefixes are used for back compat.
+// This component was previously in the block library package.
+.wp-block-image__crop-area {
+	position: relative;
+	max-width: 100%;
+	width: 100%;
+	overflow: hidden;
+
+	// stylelint-disable selector-class-pattern -- react-easy-crop library class names.
+	.reactEasyCrop_Container {
+		// The linked Image block has `pointer-events: none` applied. Override it
+		// here to enable the crop action.
+		pointer-events: auto;
+
+		// This removes the border from the img within the image cropper so it
+		// can be applied to the cropper itself. This then allows the image to be
+		// cropped within the visual border providing more accurate editing and
+		// smoother UX.
+		.reactEasyCrop_Image {
+			border: none;
+			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+		}
+	}
+
+	// stylelint-enable selector-class-pattern
+}
+
+.wp-block-image__zoom {
+	.components-popover__content {
+		min-width: 260px;
+		overflow: visible !important;
+	}
+}

package/src/components/inner-blocks/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`InnerBlocks should force serialize for invalid block with inner blocks 1`] = `
 "<!-- wp:test-block -->

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

@@ -29,7 +29,11 @@ import { BackgroundToolsPanel } from '../global-styles/background-panel';
 // - Typography: text color only (font controls disabled).
 // - Background: color + gradient only (image controls disabled).
 // - Elements: link/heading/button/caption colors (unchanged).
-function SectionStyleControls( { blockName, clientId, contentClientIds } ) {
+export function SectionStyleControls( {
+	blockName,
+	clientId,
+	contentClientIds,
+} ) {
 	const settings = useBlockSettings( blockName );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 

package/src/components/line-height-control/index.js

@@ -96,12 +96,12 @@ const LineHeightControl = ( {
 	return (
 		<div className="block-editor-line-height-control">
 			<NumberControl
+				placeholder={ BASE_DEFAULT_VALUE }
 				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ handleOnChange }
 				label={ __( 'Line height' ) }
-				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
 				spinFactor={ SPIN_FACTOR }
 				value={ value }

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

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useState, useEffect, useMemo } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
@@ -29,6 +29,7 @@ import { isURL, prependHTTPS } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import { useNativeUndo } from '../../utils/native-undo';
 import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
@@ -227,6 +228,7 @@ function LinkControl( {
 
 	const isMountingRef = useRef( true );
 	const wrapperNode = useRef();
+	const wrapperRef = useMergeRefs( [ wrapperNode, useNativeUndo() ] );
 	const textInputRef = useRef();
 	const searchInputRef = useRef();
 	// TODO: Remove entityUrlFallbackRef and previewValue in favor of value prop after taxonomy entity binding
@@ -651,7 +653,10 @@ function LinkControl( {
 	return (
 		<div
 			tabIndex={ -1 }
-			ref={ wrapperNode }
+			// The dialog holds local state that is only committed when the
+			// link is applied, so undo and redo within it must remain the
+			// browser's own.
+			ref={ wrapperRef }
 			className="block-editor-link-control"
 		>
 			{ isCreatingPage && (

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

@@ -50,6 +50,8 @@ import CustomValueControls from './custom-value-controls';
  * @param {Function} props.onMouseOut          Callback for mouse out events.
  * @param {Function} props.onMouseOver         Callback for mouse over events.
  * @param {Function} props.onUnitChange        Callback when unit changes.
+ * @param {string}   props.placeholder         Placeholder text forwarded to the inner UnitControl when
+ *                                             rendered in custom-value mode.
  * @param {Array}    props.presets             Array of preset objects with name, slug, and size.
  * @param {string}   props.presetType          Type of preset (e.g., 'spacing', 'border-radius').
  * @param {string}   props.selectedUnit        Currently selected unit (e.g., 'px', 'em').
@@ -73,6 +75,7 @@ export default function PresetInputControl( {
 	onMouseOut,
 	onMouseOver,
 	onUnitChange,
+	placeholder,
 	presets = [],
 	presetType,
 	selectedUnit,
@@ -95,7 +98,7 @@ export default function PresetInputControl( {
 	const hasPresets = marks.length > 0;
 	const showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;
 
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : placeholder ?? null;
 
 	const [ minValue, setMinValue ] = useState( minimumCustomValue );
 	const [ showCustomValueControl, setShowCustomValueControl ] = useState(

package/src/components/provider/block-refs-provider.js

@@ -4,11 +4,21 @@
 import { createContext, useMemo } from '@wordpress/element';
 import { observableMap } from '@wordpress/compose';
 
-export const BlockRefs = createContext( { refsMap: observableMap() } );
+// `eventHandlers` maps a block's client ID to a ref holding its `wrapperProps`
+// event handlers, so the writing flow host can call them for a block that
+// supports `editableRoot` (see `useEditableRootEventHandlers`). It rides in this
+// context, next to `refsMap`, as another per-block registry keyed by client ID.
+export const BlockRefs = createContext( {
+	refsMap: observableMap(),
+	eventHandlers: new Map(),
+} );
 BlockRefs.displayName = 'BlockRefsContext';
 
 export function BlockRefsProvider( { children } ) {
-	const value = useMemo( () => ( { refsMap: observableMap() } ), [] );
+	const value = useMemo(
+		() => ( { refsMap: observableMap(), eventHandlers: new Map() } ),
+		[]
+	);
 	return (
 		<BlockRefs.Provider value={ value }>{ children }</BlockRefs.Provider>
 	);

package/src/components/provider/index.js

@@ -102,7 +102,7 @@ function shouldEnableClientSideMediaProcessing() {
  *
  * Returns true when:
  * 1. Full client-side processing is NOT available (otherwise it handles HEIC already)
- * 2. The server has set the __heicUploadSupport flag
+ * 2. The server has set the __clientSideMediaProcessing flag
  * 3. The browser supports createImageBitmap + OffscreenCanvas (e.g. Safari)
  *
  * @return {boolean} Whether HEIC-only canvas processing should be enabled.
@@ -118,7 +118,7 @@ function shouldEnableHeicCanvasProcessing() {
 		return false;
 	}
 
-	if ( ! window.__heicUploadSupport ) {
+	if ( ! window.__clientSideMediaProcessing ) {
 		isHeicCanvasEnabledCache = false;
 		return false;
 	}

package/src/components/provider/use-block-sync.js

@@ -252,13 +252,17 @@ export default function useBlockSync( {
 					cloneBlockWithMapping( block, idMappingRef.current )
 				);
 
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				setHasControlledInnerBlocks( clientId, true );
 
 				if ( subscribedRef.current ) {
 					pendingChangesRef.current.incoming = storeBlocks;
 				}
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				replaceInnerBlocks( clientId, storeBlocks );
 
 				// Invalidate the applied-selection ref so that
@@ -271,7 +275,9 @@ export default function useBlockSync( {
 			if ( subscribedRef.current ) {
 				pendingChangesRef.current.incoming = controlledBlocks;
 			}
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			resetBlocks( controlledBlocks );
 		}
 	};
@@ -280,12 +286,18 @@ export default function useBlockSync( {
 	// containing useBlockSync() unmounts.
 	const unsetControlledBlocks = () => {
 		if ( clientId ) {
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			setHasControlledInnerBlocks( clientId, false );
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			replaceInnerBlocks( clientId, [] );
 		} else {
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			resetBlocks( [] );
 		}
 	};

package/src/components/provider/use-media-upload-settings.js

@@ -21,6 +21,8 @@ function useMediaUploadSettings( settings = {} ) {
 			allowedMimeTypes: settings.allowedMimeTypes,
 			allImageSizes: settings.allImageSizes,
 			bigImageSizeThreshold: settings.bigImageSizeThreshold,
+			imageStripMeta: settings.imageStripMeta,
+			imageMaxBitDepth: settings.imageMaxBitDepth,
 		} ),
 		[ settings ]
 	);

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

@@ -29,7 +29,11 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { useBlockEditorAutocompleteProps } from '../autocomplete';
 import { useBlockEditContext } from '../block-edit';
-import { blockBindingsKey, isPreviewModeKey } from '../block-edit/context';
+import {
+	blockBindingsKey,
+	blockEditingModeKey,
+	isPreviewModeKey,
+} from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useMarkPersistent } from './use-mark-persistent';
@@ -39,7 +43,6 @@ import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import BlockContext from '../block-context';
-import { useHasEditableRoot } from '../writing-flow/use-editable-root';
 import { unlock } from '../../lock-unlock';
 
 // `RichTextShortcut` and `RichTextInputEvent` now live in
@@ -101,6 +104,7 @@ export function RichTextWrapper(
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
+	const hasDefaultEditingMode = context[ blockEditingModeKey ] === 'default';
 	const blockContext = useContext( BlockContext );
 	const registry = useRegistry();
 	const selector = ( select ) => {
@@ -243,13 +247,27 @@ export function RichTextWrapper(
 	const shouldDisableEditing =
 		readOnly || disableBoundBlock || shouldDisableForPattern;
 
-	const hasEditableRoot = useHasEditableRoot();
-	const hasDefaultEditingMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockEditingMode( clientId ) ===
-			'default',
-		[ clientId ]
+	// Whether the wrapper is the editing host, which depends on the selected
+	// block, not necessarily this one. Only the selected, default-mode block
+	// can be it, so others skip the subscription entirely.
+	const isEditingHost = useSelect(
+		( select ) => {
+			if (
+				shouldDisableEditing ||
+				! hasDefaultEditingMode ||
+				! isBlockSelected
+			) {
+				return false;
+			}
+
+			const { getSelectedBlockClientId, canHostEditableRoot } = unlock(
+				select( blockEditorStore )
+			);
+			return canHostEditableRoot( getSelectedBlockClientId() );
+		},
+		[ shouldDisableEditing, hasDefaultEditingMode, isBlockSelected ]
 	);
+
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -359,11 +377,13 @@ export function RichTextWrapper(
 	// to the focused element.
 	const {
 		'aria-autocomplete': ariaAutocomplete,
+		'aria-haspopup': ariaHasPopup,
+		'aria-controls': ariaControls,
 		'aria-owns': ariaOwns,
 		'aria-activedescendant': ariaActiveDescendant,
 	} = autocompleteProps;
 	useEffect( () => {
-		if ( ! hasEditableRoot || ! isSelected ) {
+		if ( ! isSelected ) {
 			return;
 		}
 
@@ -377,6 +397,8 @@ export function RichTextWrapper(
 
 		const attributes = {
 			'aria-autocomplete': ariaAutocomplete,
+			'aria-haspopup': ariaHasPopup,
+			'aria-controls': ariaControls,
 			'aria-owns': ariaOwns,
 			'aria-activedescendant': ariaActiveDescendant,
 		};
@@ -395,9 +417,10 @@ export function RichTextWrapper(
 			}
 		};
 	}, [
-		hasEditableRoot,
 		isSelected,
 		ariaAutocomplete,
+		ariaHasPopup,
+		ariaControls,
 		ariaOwns,
 		ariaActiveDescendant,
 	] );
@@ -421,12 +444,10 @@ export function RichTextWrapper(
 	// focusable areas on their own, so an explicit tabIndex restores their
 	// focusability.
 	let tabIndex = props.tabIndex;
-	if ( ! shouldDisableEditing ) {
-		if ( hasEditableRoot && hasDefaultEditingMode && isBlockSelected ) {
-			tabIndex = props.tabIndex ?? 0;
-		} else if ( hasEditableRoot && props.tabIndex === 0 ) {
-			tabIndex = null;
-		}
+	if ( isEditingHost ) {
+		tabIndex = props.tabIndex ?? 0;
+	} else if ( ! shouldDisableEditing && props.tabIndex === 0 ) {
+		tabIndex = null;
 	}
 
 	const TagName = tagName;

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

@@ -8,12 +8,12 @@ import {
 	getPresetValueFromCustomValue,
 	getSliderValueFromPreset,
 	getSpacingPresetCssVar,
-	getSpacingPresetSlug,
 	hasAxisSupport,
 	hasBalancedSidesSupport,
 	isValueSpacingPreset,
 	VIEWS,
 } from '../utils';
+import { getPresetSlug } from '../../preset-input-control/utils';
 
 describe( 'isValueSpacingPreset', () => {
 	it( 'should return true if value is string in spacing presets var format', () => {
@@ -82,15 +82,26 @@ describe( 'getSpacingPresetCssVar', () => {
 			'var(--wp--preset--spacing--20)'
 		);
 	} );
+	it( 'should return undefined for a malformed non-string value such as an array', () => {
+		// Malformed blockGap data, e.g. `{ top: [ '1rem' ] }`, would otherwise
+		// throw when `.match()` is called on the array.
+		expect( getSpacingPresetCssVar( [ '1rem' ] ) ).toBe( undefined );
+	} );
+	it( 'should return undefined for other non-string values', () => {
+		expect( getSpacingPresetCssVar( { top: '1rem' } ) ).toBe( undefined );
+		expect( getSpacingPresetCssVar( 20 ) ).toBe( undefined );
+	} );
 } );
 
-describe( 'getSpacingPresetSlug', () => {
+describe( 'getPresetSlug', () => {
 	it( 'should return original value if 0 or default', () => {
-		expect( getSpacingPresetSlug( '0' ) ).toBe( '0' );
-		expect( getSpacingPresetSlug( 'default' ) ).toBe( 'default' );
+		expect( getPresetSlug( '0', 'spacing' ) ).toBe( '0' );
+		expect( getPresetSlug( 'default', 'spacing' ) ).toBe( 'default' );
 	} );
 	it( 'should return the int value of the slug portion of a valid preset var', () => {
-		expect( getSpacingPresetSlug( 'var:preset|spacing|20' ) ).toBe( '20' );
+		expect( getPresetSlug( 'var:preset|spacing|20', 'spacing' ) ).toBe(
+			'20'
+		);
 	} );
 } );
 

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

@@ -12,6 +12,13 @@ import {
 	sidesVertical,
 } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { getPresetSlug, isValuePreset } from '../preset-input-control/utils';
+
+const SPACING_PRESET_TYPE = 'spacing';
+
 export const RANGE_CONTROL_MAX_SIZE = 8;
 
 export const ALL_SIDES = [ 'top', 'bottom', 'left', 'right' ];
@@ -64,10 +71,7 @@ export const VIEWS = {
  * @return {boolean} Return true if value is string in format var:preset|spacing|.
  */
 export function isValueSpacingPreset( value ) {
-	if ( ! value?.includes ) {
-		return false;
-	}
-	return value === '0' || value.includes( 'var:preset|spacing|' );
+	return isValuePreset( value, SPACING_PRESET_TYPE );
 }
 
 /**
@@ -83,7 +87,7 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
 		return value;
 	}
 
-	const slug = getSpacingPresetSlug( value );
+	const slug = getPresetSlug( value, SPACING_PRESET_TYPE );
 	const spacingSize = spacingSizes.find(
 		( size ) => String( size.slug ) === slug
 	);
@@ -126,7 +130,7 @@ export function getPresetValueFromCustomValue( value, spacingSizes ) {
  * @return {string | undefined} CSS var string for given spacing preset value.
  */
 export function getSpacingPresetCssVar( value ) {
-	if ( ! value ) {
+	if ( ! value || typeof value !== 'string' ) {
 		return;
 	}
 
@@ -139,27 +143,6 @@ export function getSpacingPresetCssVar( value ) {
 	return `var(--wp--preset--spacing--${ slug[ 1 ] })`;
 }
 
-/**
- * Returns the slug section of the given spacing preset string.
- *
- * @param {string} value Value to extract slug from.
- *
- * @return {string|undefined} The int value of the slug from given spacing preset.
- */
-export function getSpacingPresetSlug( value ) {
-	if ( ! value ) {
-		return;
-	}
-
-	if ( value === '0' || value === 'default' ) {
-		return value;
-	}
-
-	const slug = value.match( /var:preset\|spacing\|(.+)/ );
-
-	return slug ? slug[ 1 ] : undefined;
-}
-
 /**
  * Converts spacing preset value into a Range component value .
  *
@@ -175,7 +158,7 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
 	const slug =
 		parseFloat( presetValue, 10 ) === 0
 			? '0'
-			: getSpacingPresetSlug( presetValue );
+			: getPresetSlug( presetValue, SPACING_PRESET_TYPE );
 	const sliderValue = spacingSizes.findIndex( ( spacingSize ) => {
 		return String( spacingSize.slug ) === slug;
 	} );

package/src/components/text-indent-control/index.js

@@ -29,6 +29,8 @@ import { useSettings } from '../../components/use-settings';
  * @param {boolean}                 props.withSlider           Whether to show the slider control.
  * @param {boolean}                 props.hasBottomMargin      Whether to add bottom margin below the control.
  * @param {string}                  props.help                 Help text to display below the control.
+ * @param {string}                  props.className            Class name to add to the inner UnitControl.
+ * @param {string}                  props.placeholder          Placeholder for the inner UnitControl.
  *
  * @return {Element} Text indent control.
  */
@@ -39,6 +41,8 @@ export default function TextIndentControl( {
 	withSlider = false,
 	hasBottomMargin = false,
 	help,
+	className,
+	placeholder,
 	...otherProps
 } ) {
 	const [ availableUnits ] = useSettings( 'spacing.units' );
@@ -73,6 +77,8 @@ export default function TextIndentControl( {
 				units={ units }
 				onChange={ onChange }
 				help={ help }
+				className={ className }
+				placeholder={ placeholder }
 			/>
 		);
 	}
@@ -93,6 +99,8 @@ export default function TextIndentControl( {
 						units={ units }
 						__unstableInputWidth={ __unstableInputWidth }
 						min={ 0 }
+						className={ className }
+						placeholder={ placeholder }
 					/>
 				</FlexItem>
 				{ withSlider && (