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

package/src/components/link-control/test/is-url-like.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import isURLLike from '../is-url-like';
+import isURLLike, { isHashLink, isRelativePath } from '../is-url-like';
 
 describe( 'isURLLike', () => {
 	it.each( [ 'https://wordpress.org', 'http://wordpress.org' ] )(
@@ -41,6 +41,13 @@ describe( 'isURLLike', () => {
 		expect( isURLLike( '#someinternallink' ) ).toBe( true );
 	} );
 
+	it.each( [ '/handbook', '/path/to/page', './relative', '../parent' ] )(
+		'returns true for relative paths (e.g. "%s")',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( true );
+		}
+	);
+
 	// use .each to test multiple cases
 	it.each( [
 		[ true, 'http://example.com' ],
@@ -64,3 +71,44 @@ describe( 'isURLLike', () => {
 		}
 	);
 } );
+
+describe( 'isHashLink', () => {
+	it( 'returns true for valid hash links', () => {
+		expect( isHashLink( '#section' ) ).toBe( true );
+		expect( isHashLink( '#top' ) ).toBe( true );
+	} );
+
+	it( 'returns false for invalid links that start with #', () => {
+		expect( isHashLink( '# test with space' ) ).toBe( false );
+		expect( isHashLink( '#test#multiple' ) ).toBe( false );
+	} );
+
+	it( 'returns false for non-hash links', () => {
+		expect( isHashLink( '/page' ) ).toBe( false );
+		expect( isHashLink( 'https://example.com' ) ).toBe( false );
+		expect( isHashLink( 'not a link' ) ).toBe( false );
+	} );
+} );
+
+describe( 'isRelativePath', () => {
+	it( 'returns true for absolute paths starting with /', () => {
+		expect( isRelativePath( '/handbook' ) ).toBe( true );
+		expect( isRelativePath( '/path/to/page' ) ).toBe( true );
+	} );
+
+	it( 'returns true for relative paths starting with ./', () => {
+		expect( isRelativePath( './page' ) ).toBe( true );
+		expect( isRelativePath( './nested/page' ) ).toBe( true );
+	} );
+
+	it( 'returns true for parent relative paths starting with ../', () => {
+		expect( isRelativePath( '../page' ) ).toBe( true );
+		expect( isRelativePath( '../parent/page' ) ).toBe( true );
+	} );
+
+	it( 'returns false for non-relative paths', () => {
+		expect( isRelativePath( 'https://example.com' ) ).toBe( false );
+		expect( isRelativePath( '#section' ) ).toBe( false );
+		expect( isRelativePath( 'www.example.com' ) ).toBe( false );
+	} );
+} );

package/src/components/link-control/use-search-handler.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { getProtocol, prependHTTP } from '@wordpress/url';
+import { getProtocol, prependHTTPS } from '@wordpress/url';
 import { useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
@@ -41,7 +41,7 @@ export const handleDirectEntry = ( val ) => {
 		{
 			id: val,
 			title: val,
-			url: type === 'URL' ? prependHTTP( val ) : val,
+			url: type === 'URL' ? prependHTTPS( val ) : val,
 			type,
 		},
 	] );

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/anchor.js

@@ -64,7 +64,7 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 				help={
 					<>
 						{ __(
-							'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
+							'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
 						) }
 						{ isWeb && (
 							<>

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;
 	}