@wordpress/block-editor 15.12.1-next.v.0 → 15.12.2-next.v.0

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

@@ -566,4 +566,109 @@ describe( 'useBlockSync hook', () => {
 			} )
 		);
 	} );
+
+	it( 'preserves external client IDs in onChange callback for inner block controllers', async () => {
+		const originalClientId = 'original-external-id';
+		const innerBlockClientId = 'inner-external-id';
+		const onChange = jest.fn();
+		const onInput = jest.fn();
+		const replaceInnerBlocks = jest.spyOn(
+			blockEditorActions,
+			'replaceInnerBlocks'
+		);
+
+		// Blocks with specific external client IDs
+		const controlledBlocks = [
+			{
+				name: 'test/test-block',
+				clientId: originalClientId,
+				innerBlocks: [
+					{
+						name: 'test/test-block',
+						clientId: innerBlockClientId,
+						innerBlocks: [],
+						attributes: { foo: 10 },
+					},
+				],
+				attributes: { foo: 1 },
+			},
+		];
+
+		let registry;
+		const setRegistry = ( reg ) => {
+			registry = reg;
+		};
+
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ controlledBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
+
+		// For the root case (no clientId), blocks are not cloned
+		// So the external IDs should be preserved as-is
+		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
+
+		onChange.mockClear();
+		onInput.mockClear();
+
+		registry
+			.dispatch( blockEditorStore )
+			.updateBlockAttributes( originalClientId, { foo: 2 } );
+
+		// The onChange callback should receive blocks with the same external IDs
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.arrayContaining( [
+				expect.objectContaining( {
+					clientId: originalClientId,
+					attributes: { foo: 2 },
+					innerBlocks: expect.arrayContaining( [
+						expect.objectContaining( {
+							clientId: innerBlockClientId,
+						} ),
+					] ),
+				} ),
+			] ),
+			expect.objectContaining( {
+				selection: expect.any( Object ),
+			} )
+		);
+	} );
+
+	it( 'clones blocks with new internal IDs for inner block controllers', async () => {
+		const originalClientId = 'original-external-id';
+		const replaceInnerBlocks = jest.spyOn(
+			blockEditorActions,
+			'replaceInnerBlocks'
+		);
+
+		// Blocks with specific external client IDs
+		const controlledBlocks = [
+			{
+				name: 'test/test-block',
+				clientId: originalClientId,
+				innerBlocks: [],
+				attributes: { foo: 1 },
+			},
+		];
+
+		render(
+			<TestWrapper
+				clientId="test-controller"
+				value={ controlledBlocks }
+				onChange={ jest.fn() }
+				onInput={ jest.fn() }
+			/>
+		);
+
+		// replaceInnerBlocks should have been called with cloned blocks
+		expect( replaceInnerBlocks ).toHaveBeenCalled();
+		const replacedBlocks = replaceInnerBlocks.mock.calls[ 0 ][ 1 ];
+
+		// The internal IDs should be different from the external IDs (due to cloning)
+		expect( replacedBlocks[ 0 ].clientId ).not.toBe( originalClientId );
+	} );
 } );

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

@@ -12,6 +12,87 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
+/**
+ * Clones a block and its inner blocks, building a bidirectional mapping
+ * between external (original) and internal (cloned) client IDs.
+ *
+ * This allows the block editor to use unique internal IDs while preserving
+ * stable external IDs for features like real-time collaboration.
+ *
+ * @param {Object} block   The block to clone.
+ * @param {Object} mapping The mapping object with externalToInternal and internalToExternal Maps.
+ * @return {Object} The cloned block with a new clientId.
+ */
+function cloneBlockWithMapping( block, mapping ) {
+	const clonedBlock = cloneBlock( block );
+
+	// Build bidirectional mapping
+	mapping.externalToInternal.set( block.clientId, clonedBlock.clientId );
+	mapping.internalToExternal.set( clonedBlock.clientId, block.clientId );
+
+	// Recursively map inner blocks
+	if ( block.innerBlocks?.length ) {
+		clonedBlock.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+			const clonedInner = cloneBlockWithMapping( innerBlock, mapping );
+			// The clonedBlock already has cloned inner blocks from cloneBlock(),
+			// but we need to use our mapped versions to maintain the mapping.
+			return clonedInner;
+		} );
+	}
+
+	return clonedBlock;
+}
+
+/**
+ * Restores external (original) client IDs on blocks before passing them
+ * to onChange/onInput callbacks.
+ *
+ * @param {Object[]} blocks  The blocks with internal client IDs.
+ * @param {Object}   mapping The mapping object with internalToExternal Map.
+ * @return {Object[]} Blocks with external client IDs restored.
+ */
+function restoreExternalIds( blocks, mapping ) {
+	return blocks.map( ( block ) => {
+		const externalId = mapping.internalToExternal.get( block.clientId );
+		return {
+			...block,
+			// Use external ID if available, otherwise keep internal ID (for new blocks)
+			clientId: externalId ?? block.clientId,
+			innerBlocks: restoreExternalIds( block.innerBlocks, mapping ),
+		};
+	} );
+}
+
+/**
+ * Restores external client IDs in selection state.
+ *
+ * @param {Object} selection The selection state with internal client IDs.
+ * @param {Object} mapping   The mapping object with internalToExternal Map.
+ * @return {Object} Selection state with external client IDs.
+ */
+function restoreSelectionIds( selection, mapping ) {
+	const { selectionStart, selectionEnd, initialPosition } = selection;
+
+	const restoreClientId = ( selectionState ) => {
+		if ( ! selectionState?.clientId ) {
+			return selectionState;
+		}
+		const externalId = mapping.internalToExternal.get(
+			selectionState.clientId
+		);
+		return {
+			...selectionState,
+			clientId: externalId ?? selectionState.clientId,
+		};
+	};
+
+	return {
+		selectionStart: restoreClientId( selectionStart ),
+		selectionEnd: restoreClientId( selectionEnd ),
+		initialPosition,
+	};
+}
+
 /**
  * A function to call when the block value has been updated in the block-editor
  * store.
@@ -94,6 +175,13 @@ export default function useBlockSync( {
 	const pendingChangesRef = useRef( { incoming: null, outgoing: [] } );
 	const subscribedRef = useRef( false );
 
+	// Mapping between external (original) and internal (cloned) client IDs.
+	// This allows stable external IDs while using unique internal IDs.
+	const idMappingRef = useRef( {
+		externalToInternal: new Map(),
+		internalToExternal: new Map(),
+	} );
+
 	const setControlledBlocks = () => {
 		if ( ! controlledBlocks ) {
 			return;
@@ -110,8 +198,14 @@ export default function useBlockSync( {
 			// before the actual blocks get set properly in state.
 			registry.batch( () => {
 				setHasControlledInnerBlocks( clientId, true );
+
+				// Clear previous mappings and build new ones during cloning.
+				// This ensures the mapping stays in sync with the current blocks.
+				idMappingRef.current.externalToInternal.clear();
+				idMappingRef.current.internalToExternal.clear();
+
 				const storeBlocks = controlledBlocks.map( ( block ) =>
-					cloneBlock( block )
+					cloneBlockWithMapping( block, idMappingRef.current )
 				);
 				if ( subscribedRef.current ) {
 					pendingChangesRef.current.incoming = storeBlocks;
@@ -262,24 +356,39 @@ export default function useBlockSync( {
 
 			if ( areBlocksDifferent || didPersistenceChange ) {
 				isPersistent = newIsPersistent;
+
+				// For inner block controllers (clientId is set), restore external IDs
+				// before passing blocks to the parent. This maintains stable external
+				// IDs for features like real-time collaboration while using unique
+				// internal IDs in the block-editor store.
+				const blocksForParent = clientId
+					? restoreExternalIds( blocks, idMappingRef.current )
+					: blocks;
+
+				const selection = {
+					selectionStart: getSelectionStart(),
+					selectionEnd: getSelectionEnd(),
+					initialPosition: getSelectedBlocksInitialCaretPosition(),
+				};
+
+				// Also restore external IDs in selection state for inner block controllers.
+				const selectionForParent = clientId
+					? restoreSelectionIds( selection, idMappingRef.current )
+					: selection;
+
 				// We know that onChange/onInput will update controlledBlocks.
 				// We need to be aware that it was caused by an outgoing change
 				// so that we do not treat it as an incoming change later on,
 				// which would cause a block reset.
-				pendingChangesRef.current.outgoing.push( blocks );
+				pendingChangesRef.current.outgoing.push( blocksForParent );
 
 				// Inform the controlling entity that changes have been made to
 				// the block-editor store they should be aware about.
 				const updateParent = isPersistent
 					? onChangeRef.current
 					: onInputRef.current;
-				updateParent( blocks, {
-					selection: {
-						selectionStart: getSelectionStart(),
-						selectionEnd: getSelectionEnd(),
-						initialPosition:
-							getSelectedBlocksInitialCaretPosition(),
-					},
+				updateParent( blocksForParent, {
+					selection: selectionForParent,
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;

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

@@ -0,0 +1,138 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalView as View,
+	RangeControl,
+	__experimentalSpacer as Spacer,
+	Flex,
+	FlexItem,
+	BaseControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../../components/use-settings';
+
+/**
+ * Control for line text indent.
+ *
+ * @param {Object}                  props                       Component props.
+ * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
+ * @param {string}                  props.value                 Currently selected text indent.
+ * @param {Function}                props.onChange              Handles change in text indent selection.
+ * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @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.
+ *
+ * @return {Element} Text indent control.
+ */
+export default function TextIndentControl( {
+	__next40pxDefaultSize = false,
+	value,
+	onChange,
+	__unstableInputWidth = '60px',
+	withSlider = false,
+	hasBottomMargin = false,
+	help,
+	...otherProps
+} ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [
+			'px',
+			'em',
+			'rem',
+			'ch',
+			'%',
+			'vw',
+			'vh',
+		],
+		defaultValues: { px: 16, em: 2, rem: 2, ch: 2 },
+	} );
+
+	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
+		value,
+		units
+	);
+	const isValueUnitRelative =
+		!! valueUnit &&
+		[ 'em', 'rem', '%', 'ch', 'vw', 'vh' ].includes( valueUnit );
+
+	if ( ! withSlider ) {
+		return (
+			<UnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
+				{ ...otherProps }
+				label={ __( 'Line indent' ) }
+				value={ value }
+				__unstableInputWidth={ __unstableInputWidth }
+				units={ units }
+				onChange={ onChange }
+				help={ help }
+			/>
+		);
+	}
+
+	return (
+		<View style={ hasBottomMargin ? { marginBottom: 12 } : undefined }>
+			<BaseControl.VisualLabel>
+				{ __( 'Line indent' ) }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__shouldNotWarnDeprecated36pxSize
+						label={ __( 'Line indent' ) }
+						labelPosition="top"
+						hideLabelFromVision
+						value={ value }
+						onChange={ onChange }
+						size={ otherProps.size }
+						units={ units }
+						__unstableInputWidth={ __unstableInputWidth }
+						min={ 0 }
+					/>
+				</FlexItem>
+				{ withSlider && (
+					<FlexItem isBlock>
+						<Spacer marginX={ 2 } marginBottom={ 0 }>
+							<RangeControl
+								__next40pxDefaultSize={ __next40pxDefaultSize }
+								__shouldNotWarnDeprecated36pxSize
+								label={ __( 'Line indent' ) }
+								hideLabelFromVision
+								value={ valueQuantity }
+								withInputField={ false }
+								onChange={ ( newValue ) => {
+									if ( newValue === undefined ) {
+										onChange?.( undefined );
+									} else {
+										onChange?.(
+											newValue + ( valueUnit ?? 'px' )
+										);
+									}
+								} }
+								min={ 0 }
+								max={ isValueUnitRelative ? 10 : 100 }
+								step={ isValueUnitRelative ? 0.1 : 1 }
+								initialPosition={ 0 }
+							/>
+						</Spacer>
+					</FlexItem>
+				) }
+			</Flex>
+			{ help && (
+				<p className="components-base-control__help">{ help }</p>
+			) }
+		</View>
+	);
+}

package/src/components/url-input/index.js

@@ -12,10 +12,10 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import {
 	BaseControl,
 	Button,
-	__experimentalInputControl as InputControl,
 	Spinner,
 	withSpokenMessages,
 	Popover,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import {
 	compose,
@@ -30,6 +30,9 @@ import { isURL } from '@wordpress/url';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { ValidatedInputControl } = unlock( componentsPrivateApis );
 
 /**
  * Whether the argument is a function.
@@ -426,6 +429,8 @@ class URLInput extends Component {
 			hideLabelFromVision = false,
 			help = null,
 			disabled = false,
+			customValidity,
+			markWhenOptional,
 		} = this.props;
 
 		const {
@@ -473,13 +478,27 @@ class URLInput extends Component {
 			help,
 		};
 
+		const validationProps = {
+			customValidity,
+			// Suppress the "(Required)" indicator in the label.
+			// The field is still required for validation, but the indicator
+			// can be hidden when markWhenOptional is set to true.
+			...( markWhenOptional !== undefined && {
+				markWhenOptional,
+			} ),
+		};
+
 		if ( renderControl ) {
 			return renderControl( controlProps, inputProps, loading );
 		}
 
 		return (
 			<BaseControl { ...controlProps }>
-				<InputControl { ...inputProps } __next40pxDefaultSize />
+				<ValidatedInputControl
+					{ ...inputProps }
+					{ ...validationProps }
+					__next40pxDefaultSize
+				/>
 				{ loading && <Spinner /> }
 			</BaseControl>
 		);

package/src/components/url-popover/image-url-input-ui.js

@@ -27,7 +27,7 @@ import {
 	fullscreen,
 	linkOff,
 } from '@wordpress/icons';
-import { prependHTTP } from '@wordpress/url';
+import { prependHTTPS } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -156,7 +156,7 @@ const ImageURLInputUI = ( {
 					)?.linkDestination || LINK_DESTINATION_CUSTOM;
 
 				onChangeUrl( {
-					href: prependHTTP( urlInput ),
+					href: prependHTTPS( urlInput ),
 					linkDestination: selectedDestination,
 					lightbox: { enabled: false },
 				} );

package/src/components/writing-flow/use-arrow-nav.js

@@ -114,10 +114,6 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
-		if ( node.closest( '[inert]' ) ) {
-			return;
-		}
-
 		// Skip if there's only one child that is content editable (and thus a
 		// better candidate).
 		if (

package/src/hooks/aria-label.js

@@ -4,6 +4,11 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 
+/**
+ * Internal dependencies
+ */
+import { shouldSkipSerialization } from './utils';
+
 /**
  * Filters registered block settings, extending attributes with ariaLabel using aria-label
  * of the first node.
@@ -42,7 +47,10 @@ export function addAttribute( settings ) {
  * @return {Object} Filtered props applied to save element.
  */
 export function addSaveProps( extraProps, blockType, attributes ) {
-	if ( hasBlockSupport( blockType, 'ariaLabel' ) ) {
+	if (
+		hasBlockSupport( blockType, 'ariaLabel' ) &&
+		! shouldSkipSerialization( blockType, 'ariaLabel', 'ariaLabel' )
+	) {
 		extraProps[ 'aria-label' ] =
 			attributes.ariaLabel === '' ? null : attributes.ariaLabel;
 	}

package/src/hooks/grid-visualizer.js

@@ -10,6 +10,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 import useBlockVisibility from '../components/block-visibility/use-block-visibility';
 import { deviceTypeKey } from '../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
@@ -19,40 +20,54 @@ function GridLayoutSync( props ) {
 }
 
 function GridTools( { clientId, layout } ) {
-	const { isVisible, blockVisibility, deviceType } = useSelect(
-		( select ) => {
-			const {
-				isBlockSelected,
-				isDraggingBlocks,
-				getTemplateLock,
-				getBlockEditingMode,
-				getBlockAttributes,
-				getSettings,
-			} = select( blockEditorStore );
+	const { isVisible, blockVisibility, deviceType, isAnyAncestorHidden } =
+		useSelect(
+			( select ) => {
+				const {
+					isBlockSelected,
+					hasSelectedInnerBlock,
+					isDraggingBlocks,
+					getTemplateLock,
+					getBlockEditingMode,
+					getBlockAttributes,
+					getSettings,
+				} = select( blockEditorStore );
 
-			// These calls are purposely ordered from least expensive to most expensive.
-			// Hides the visualizer in cases where the user is not or cannot interact with it.
-			if (
-				( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
-				getTemplateLock( clientId ) ||
-				getBlockEditingMode( clientId ) !== 'default'
-			) {
-				return { isVisible: false };
-			}
+				// These calls are purposely ordered from least expensive to most expensive.
+				// Hides the visualizer in cases where the user is not or cannot interact with it.
+				// Also hide if a child block is selected, because layout-child.js will render
+				// the visualizer in that case (with proper childGridClientId handling).
+				if (
+					( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
+					getTemplateLock( clientId ) ||
+					getBlockEditingMode( clientId ) !== 'default' ||
+					hasSelectedInnerBlock( clientId )
+				) {
+					return { isVisible: false };
+				}
 
-			const attributes = getBlockAttributes( clientId );
-			const settings = getSettings();
+				const { isBlockParentHiddenAtViewport } = unlock(
+					select( blockEditorStore )
+				);
 
-			return {
-				isVisible: true,
-				blockVisibility: attributes?.metadata?.blockVisibility,
-				deviceType:
+				const attributes = getBlockAttributes( clientId );
+				const settings = getSettings();
+				const currentDeviceType =
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
-			};
-		},
-		[ clientId ]
-	);
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.value;
+
+				return {
+					isVisible: true,
+					blockVisibility: attributes?.metadata?.blockVisibility,
+					deviceType: currentDeviceType,
+					isAnyAncestorHidden: isBlockParentHiddenAtViewport(
+						clientId,
+						currentDeviceType
+					),
+				};
+			},
+			[ clientId ]
+		);
 
 	const { isBlockCurrentlyHidden } = useBlockVisibility( {
 		blockVisibility,
@@ -62,9 +77,14 @@ function GridTools( { clientId, layout } ) {
 	return (
 		<>
 			<GridLayoutSync clientId={ clientId } />
-			{ isVisible && ! isBlockCurrentlyHidden && (
-				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
-			) }
+			{ isVisible &&
+				! isBlockCurrentlyHidden &&
+				! isAnyAncestorHidden && (
+					<GridVisualizer
+						clientId={ clientId }
+						parentLayout={ layout }
+					/>
+				) }
 		</>
 	);
 }

package/src/hooks/layout-child.js

@@ -208,6 +208,7 @@ function GridTools( {
 		parentBlockVisibility,
 		blockBlockVisibility,
 		deviceType,
+		isChildBlockAGrid,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -244,6 +245,8 @@ function GridTools( {
 				deviceType:
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
 					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+				// Check if the selected child block is itself a grid.
+				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};
 		},
 		[ clientId ]
@@ -264,6 +267,8 @@ function GridTools( {
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
 	const [ resizerBounds, setResizerBounds ] = useState();
 
+	const childGridClientId = isChildBlockAGrid ? clientId : undefined;
+
 	if ( ! isVisible || isParentBlockCurrentlyHidden ) {
 		return null;
 	}
@@ -288,6 +293,7 @@ function GridTools( {
 				clientId={ rootClientId }
 				contentRef={ setResizerBounds }
 				parentLayout={ parentLayout }
+				childGridClientId={ childGridClientId }
 			/>
 			{ showResizer && (
 				<GridItemResizer

package/src/hooks/typography.js

@@ -31,6 +31,7 @@ function omit( object, keys ) {
 const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const TEXT_INDENT_SUPPORT_KEY = 'typography.textIndent';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
@@ -45,6 +46,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	TEXT_ALIGN_SUPPORT_KEY,
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
+	TEXT_INDENT_SUPPORT_KEY,
 	WRITING_MODE_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,