@wordpress/block-library 10.6.1-next.v.202609031004.0 → 11.0.0

package/src/image/index.js

@@ -1,15 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -62,80 +58,4 @@ export const settings = {
 	deprecated,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'image',
-			label: __( 'Image' ),
-			type: 'media',
-			Edit: {
-				control: 'media', // TODO: replace with custom component
-				allowedTypes: [ 'image' ],
-				multiple: false,
-			},
-			getValue: ( { item } ) => ( {
-				id: item.id,
-				url: item.url,
-				alt: item.alt,
-				caption: item.caption,
-			} ),
-			setValue: ( { value } ) => ( {
-				id: value.id,
-				url: value.url,
-				alt: value.alt,
-				caption: value.caption,
-			} ),
-		},
-		{
-			id: 'link',
-			label: __( 'Link' ),
-			type: 'url',
-			Edit: 'link', // TODO: replace with custom component
-			getValue: ( { item } ) => ( {
-				url: item.href,
-				rel: item.rel,
-				linkTarget: item.linkTarget,
-			} ),
-			setValue: ( { value } ) => ( {
-				href: value.url,
-				rel: value.rel,
-				linkTarget: value.linkTarget,
-			} ),
-			isVisible: ( item ) => ! item.isDecorative,
-		},
-		{
-			id: 'caption',
-			label: __( 'Caption' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-			isVisible: ( item ) => ! item.isDecorative,
-		},
-		{
-			id: 'alt',
-			label: __( 'Alt text' ),
-			type: 'text',
-			isVisible: ( item ) => ! item.isDecorative,
-		},
-		{
-			id: 'isDecorative',
-			label: __( 'Mark as decorative' ),
-			type: 'boolean',
-			setValue: ( { value } ) => ( {
-				isDecorative: value || undefined,
-				...( value && {
-					alt: '',
-					caption: undefined,
-					href: undefined,
-					linkDestination: undefined,
-					linkTarget: undefined,
-					rel: undefined,
-				} ),
-			} ),
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'image', 'link', 'caption', 'alt', 'isDecorative' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/image/test/transforms.jsdom.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { stripFirstImage } from '../transforms';
 
 describe( 'stripFirstImage', () => {

package/src/image/test/use-open-image-media-editor-modal.jsdom.test.js

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, renderHook } from '@testing-library/react';
 import { useRegistry, useSelect } from '@wordpress/data';
 import {
@@ -9,22 +10,22 @@ import {
 
 const mockOpenMediaEditorModalKey = 'openMediaEditorModal';
 
-jest.mock( '@wordpress/core-data', () => ( {
+vi.mock( import( '@wordpress/core-data' ), () => ( {
 	store: {},
 } ) );
 
-jest.mock( '@wordpress/data', () => ( {
-	useRegistry: jest.fn(),
-	useSelect: jest.fn(),
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useRegistry: vi.fn(),
+	useSelect: vi.fn(),
 } ) );
 
-jest.mock( '@wordpress/block-editor', () => ( {
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
 	privateApis: {},
 	store: {},
 } ) );
 
-jest.mock( '../../lock-unlock', () => ( {
-	unlock: jest.fn( () => ( {
+vi.mock( import( '../../lock-unlock' ), () => ( {
+	unlock: vi.fn( () => ( {
 		openMediaEditorModalKey: 'openMediaEditorModal',
 	} ) ),
 } ) );
@@ -34,14 +35,14 @@ function createRegistry( {
 	resolveGetEntityRecord = () => undefined,
 } = {} ) {
 	const actions = {
-		invalidateResolution: jest.fn(),
+		invalidateResolution: vi.fn(),
 	};
 	return {
-		select: jest.fn( () => ( {
+		select: vi.fn( () => ( {
 			getEditedEntityRecord,
 		} ) ),
-		dispatch: jest.fn( () => actions ),
-		resolveSelect: jest.fn( () => ( {
+		dispatch: vi.fn( () => actions ),
+		resolveSelect: vi.fn( () => ( {
 			getEntityRecord: resolveGetEntityRecord,
 		} ) ),
 		actions,
@@ -74,8 +75,8 @@ async function runModalUpdate( {
 } ) {
 	const registry = createRegistry( registryOptions );
 	useRegistry.mockReturnValue( registry );
-	const setAttributes = jest.fn();
-	const openMediaEditorModal = jest.fn();
+	const setAttributes = vi.fn();
+	const openMediaEditorModal = vi.fn();
 	mockMediaEditorModalSetting( openMediaEditorModal );
 	const { result } = renderHook( () =>
 		useOpenImageMediaEditorModal( {
@@ -151,11 +152,11 @@ function croppedAttachmentRecords( { hasOriginal = true } = {} ) {
 
 describe( 'useOpenImageMediaEditorModal', () => {
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'notifies onUrlChange when the update switches to a new attachment URL', async () => {
-		const onUrlChange = jest.fn();
+		const onUrlChange = vi.fn();
 		await runModalUpdate( {
 			attributes: { id: 1, url: 'original.jpg', alt: '', caption: '' },
 			updatePayload: { id: 2, url: 'updated.jpg' },
@@ -166,7 +167,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 	} );
 
 	it( 'does not notify onUrlChange for a same-attachment update', async () => {
-		const onUrlChange = jest.fn();
+		const onUrlChange = vi.fn();
 		await runModalUpdate( {
 			attributes: { id: 1, url: 'original.jpg', alt: '', caption: '' },
 			updatePayload: { id: 1, url: 'original.jpg' },
@@ -176,7 +177,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 	} );
 
 	it( 'does not notify onUrlChange when the update carries no URL', async () => {
-		const onUrlChange = jest.fn();
+		const onUrlChange = vi.fn();
 		await runModalUpdate( {
 			attributes: { id: 1, url: 'original.jpg', alt: '', caption: '' },
 			updatePayload: { id: 2 },
@@ -197,7 +198,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 					alt: '',
 					caption: '',
 				},
-				setAttributes: jest.fn(),
+				setAttributes: vi.fn(),
 			} )
 		);
 
@@ -210,8 +211,8 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		document.body.append( cropButton, otherButton );
 		const registry = createRegistry();
 		useRegistry.mockReturnValue( registry );
-		const setAttributes = jest.fn();
-		const openMediaEditorModal = jest.fn();
+		const setAttributes = vi.fn();
+		const openMediaEditorModal = vi.fn();
 		mockMediaEditorModalSetting( openMediaEditorModal );
 		const onClose = () => cropButton.focus();
 		const { result } = renderHook( () =>
@@ -294,7 +295,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			alt_text: 'Updated alt',
 			caption: { raw: 'Updated caption' },
 		};
-		const resolveGetEntityRecord = jest
+		const resolveGetEntityRecord = vi
 			.fn()
 			.mockResolvedValueOnce( originalAttachment )
 			.mockResolvedValueOnce( updatedAttachment );
@@ -336,7 +337,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			alt_text: '',
 			caption: { raw: 'Updated attachment caption' },
 		};
-		const resolveGetEntityRecord = jest
+		const resolveGetEntityRecord = vi
 			.fn()
 			.mockResolvedValueOnce( originalAttachment )
 			.mockResolvedValueOnce( updatedAttachment );
@@ -377,7 +378,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			alt_text: '',
 			caption: { raw: 'Updated attachment caption' },
 		};
-		const resolveGetEntityRecord = jest
+		const resolveGetEntityRecord = vi
 			.fn()
 			.mockResolvedValueOnce( originalAttachment )
 			.mockResolvedValueOnce( updatedAttachment );
@@ -448,7 +449,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 	} );
 
 	it( 'keeps the selected image size when the edit created a new attachment', async () => {
-		const onUrlChange = jest.fn();
+		const onUrlChange = vi.fn();
 		const { setAttributes } = await runModalUpdate( {
 			attributes: {
 				id: 1,
@@ -581,8 +582,8 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				attachmentId === 2 ? deferredAttachment.promise : undefined,
 		} );
 		useRegistry.mockReturnValue( registry );
-		const setAttributes = jest.fn();
-		const openMediaEditorModal = jest.fn();
+		const setAttributes = vi.fn();
+		const openMediaEditorModal = vi.fn();
 		mockMediaEditorModalSetting( openMediaEditorModal );
 		const { result } = renderHook(
 			( { attributes } ) =>
@@ -693,7 +694,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 	} );
 
 	it( 'syncs metadata from an empty block when the original attachment is not cached', async () => {
-		const resolveGetEntityRecord = jest
+		const resolveGetEntityRecord = vi
 			.fn()
 			.mockResolvedValueOnce( {
 				id: 1,
@@ -815,8 +816,8 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			resolveGetEntityRecord: () => deferredAttachment.promise,
 		} );
 		useRegistry.mockReturnValue( registry );
-		const setAttributes = jest.fn();
-		const openMediaEditorModal = jest.fn();
+		const setAttributes = vi.fn();
+		const openMediaEditorModal = vi.fn();
 		mockMediaEditorModalSetting( openMediaEditorModal );
 		const { result, rerender } = renderHook(
 			( { attributes } ) =>

package/src/index.jsx

@@ -49,10 +49,6 @@ import * as cover from './cover';
 import * as details from './details';
 import * as embed from './embed';
 import * as file from './file';
-import * as form from './form';
-import * as formInput from './form-input';
-import * as formSubmitButton from './form-submit-button';
-import * as formSubmissionNotification from './form-submission-notification';
 import * as gallery from './gallery';
 import * as group from './group';
 import * as heading from './heading';
@@ -267,13 +263,6 @@ const getAllBlocks = () => {
 		breadcrumbs,
 	];
 
-	if ( window?.__experimentalEnableFormBlocks ) {
-		blocks.push( form );
-		blocks.push( formInput );
-		blocks.push( formSubmitButton );
-		blocks.push( formSubmissionNotification );
-	}
-
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		// Blocks added here are only registered when the "Block experiments"
 		// option is enabled in the Gutenberg > Experiments settings page.

package/src/latest-posts/test/deprecated.jsdom.test.js

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 // Load block support registration filters.
 import '@wordpress/block-editor';
 import {

package/src/list/index.php

@@ -15,7 +15,7 @@
  * @see https://github.com/WordPress/gutenberg/issues/12420
  *
  * @param array  $attributes Attributes of the block being rendered.
- * @param string $content Content of the block being rendered.
+ * @param string $content    Content of the block being rendered.
  *
  * @return string The content of the block being rendered.
  */

package/src/list-item/edit.jsx

@@ -14,29 +14,24 @@ import {
 	formatIndent,
 } from '@wordpress/icons';
 import { useMergeRefs } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useRegistry } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { useEnter, useTab, useMultiSelectTab, useMerge } from './hooks';
 import {
-	useEnter,
-	useSpace,
-	useIndentListItem,
-	useOutdentListItem,
-	useMerge,
-} from './hooks';
+	indentListItems,
+	outdentListItems,
+	getIndentTarget,
+	getOutdentTarget,
+} from './utils';
 
 export function IndentUI( { clientId } ) {
-	const indentListItem = useIndentListItem( clientId );
-	const outdentListItem = useOutdentListItem();
+	const registry = useRegistry();
 	const { canIndent, canOutdent } = useSelect(
 		( select ) => {
-			const { getBlockIndex, getBlockRootClientId, getBlockName } =
-				select( blockEditorStore );
+			const storeSelect = select( blockEditorStore );
 			return {
-				canIndent: getBlockIndex( clientId ) > 0,
-				canOutdent:
-					getBlockName(
-						getBlockRootClientId( getBlockRootClientId( clientId ) )
-					) === 'core/list-item',
+				canIndent: !! getIndentTarget( storeSelect, clientId ),
+				canOutdent: !! getOutdentTarget( storeSelect, clientId ),
 			};
 		},
 		[ clientId ]
@@ -50,7 +45,7 @@ export function IndentUI( { clientId } ) {
 				shortcut={ displayShortcut.shift( 'Tab' ) }
 				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
-				onClick={ () => outdentListItem() }
+				onClick={ () => outdentListItems( registry ) }
 			/>
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
@@ -58,7 +53,7 @@ export function IndentUI( { clientId } ) {
 				shortcut="Tab"
 				description={ __( 'Indent list item' ) }
 				disabled={ ! canIndent }
-				onClick={ () => indentListItem() }
+				onClick={ () => indentListItems( registry, clientId ) }
 			/>
 		</>
 	);
@@ -77,13 +72,18 @@ export default function ListItemEdit( {
 		__unstableDisableDropZone: true,
 	} );
 	const useEnterRef = useEnter( clientId );
-	const useSpaceRef = useSpace( clientId );
+	const useTabRef = useTab();
+	const useMultiSelectTabRef = useMultiSelectTab( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
+					ref={ useMergeRefs( [
+						useEnterRef,
+						useTabRef,
+						useMultiSelectTabRef,
+					] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>

package/src/list-item/hooks/index.js

@@ -1,5 +1,4 @@
-export { default as useOutdentListItem } from './use-outdent-list-item';
-export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
-export { default as useSpace } from './use-space';
+export { default as useTab } from './use-tab';
+export { default as useMultiSelectTab } from './use-multi-select-tab';
 export { default as useMerge } from './use-merge';

package/src/list-item/hooks/use-enter.js

@@ -5,82 +5,94 @@ import {
 } from '@wordpress/blocks';
 import { useRefEffect } from '@wordpress/compose';
 import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
-import { ENTER } from '@wordpress/keycodes';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import useOutdentListItem from './use-outdent-list-item';
+import { outdentListItems, getOutdentTarget } from '../utils';
 import { unlock } from '../../lock-unlock';
 
 const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default function useEnter( clientId ) {
-	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const {
-		getBlock,
-		getBlockAttributes,
-		getBlockRootClientId,
-		getBlockIndex,
-		getBlockName,
-	} = useSelect( blockEditorStore );
-	const outdentListItem = useOutdentListItem();
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
-				return;
-			}
-			const { content } = getBlockAttributes( clientId ) ?? {};
-			if ( content?.length ) {
-				return;
-			}
-			event.preventDefault();
-			const canOutdent =
-				getBlockName(
-					getBlockRootClientId( getBlockRootClientId( clientId ) )
-				) === 'core/list-item';
-			if ( canOutdent ) {
-				outdentListItem();
-				return;
+	const registry = useRegistry();
+	return useRefEffect(
+		( element ) => {
+			function onBeforeInput( event ) {
+				if (
+					event.defaultPrevented ||
+					event.inputType !== 'insertParagraph'
+				) {
+					return;
+				}
+				const select = registry.select( blockEditorStore );
+				const {
+					getBlock,
+					getBlockAttributes,
+					getBlockRootClientId,
+					getBlockIndex,
+				} = select;
+				const { replaceBlocks, selectionChange } =
+					registry.dispatch( blockEditorStore );
+
+				const { content } = getBlockAttributes( clientId ) ?? {};
+				if ( content?.length ) {
+					return;
+				}
+				event.preventDefault();
+				const canOutdent = !! getOutdentTarget( select, clientId );
+				if ( canOutdent ) {
+					outdentListItems( registry );
+					return;
+				}
+				// Here we are in top level list so we need to split.
+				const topParentListBlock = getBlock(
+					getBlockRootClientId( clientId )
+				);
+				const blockIndex = getBlockIndex( clientId );
+				const head = cloneBlock( {
+					...topParentListBlock,
+					innerBlocks: topParentListBlock.innerBlocks.slice(
+						0,
+						blockIndex
+					),
+				} );
+				const middle = createBlock( getDefaultBlockName() );
+				// Last list item might contain a `list` block innerBlock
+				// In that case append remaining innerBlocks blocks.
+				const after = [
+					...( topParentListBlock.innerBlocks[ blockIndex ]
+						.innerBlocks[ 0 ]?.innerBlocks || [] ),
+					...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+				];
+				const tail = after.length
+					? [
+							cloneBlock( {
+								...topParentListBlock,
+								innerBlocks: after,
+							} ),
+					  ]
+					: [];
+				replaceBlocks(
+					topParentListBlock.clientId,
+					[ head, middle, ...tail ],
+					1
+				);
+				// We manually change the selection here because we are replacing
+				// a different block than the selected one.
+				selectionChange( middle.clientId );
 			}
-			// Here we are in top level list so we need to split.
-			const topParentListBlock = getBlock(
-				getBlockRootClientId( clientId )
-			);
-			const blockIndex = getBlockIndex( clientId );
-			const head = cloneBlock( {
-				...topParentListBlock,
-				innerBlocks: topParentListBlock.innerBlocks.slice(
-					0,
-					blockIndex
-				),
-			} );
-			const middle = createBlock( getDefaultBlockName() );
-			// Last list item might contain a `list` block innerBlock
-			// In that case append remaining innerBlocks blocks.
-			const after = [
-				...( topParentListBlock.innerBlocks[ blockIndex ]
-					.innerBlocks[ 0 ]?.innerBlocks || [] ),
-				...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
-			];
-			const tail = after.length
-				? [
-						cloneBlock( {
-							...topParentListBlock,
-							innerBlocks: after,
-						} ),
-				  ]
-				: [];
-			replaceBlocks(
-				topParentListBlock.clientId,
-				[ head, middle, ...tail ],
-				1
-			);
-			// We manually change the selection here because we are replacing
-			// a different block than the selected one.
-			selectionChange( middle.clientId );
-		}
 
-		// Capture phase so we run before writing-flow's ancestor-bubble
-		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
-	}, [] );
+			// Enter is handled on beforeinput: moving focus while the
+			// keydown is still being handled leaves the iOS keyboard's
+			// auto-capitalization stale. Capture phase so we run before
+			// writing-flow's ancestor-bubble handler that gates on
+			// `event.defaultPrevented`.
+			return subscribeOwnedListener(
+				element,
+				'beforeinput',
+				onBeforeInput,
+				true
+			);
+		},
+		[ clientId, registry ]
+	);
 }

package/src/list-item/hooks/use-merge.js

@@ -1,46 +1,35 @@
-import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { isUnmodifiedBlock, switchToBlockType } from '@wordpress/blocks';
-import useOutdentListItem from './use-outdent-list-item';
+import { outdentListItems, getOutdentTarget } from '../utils';
 
 export default function useMerge( clientId, onMerge ) {
 	const registry = useRegistry();
-	const {
-		getPreviousBlockClientId,
-		getNextBlockClientId,
-		getBlockOrder,
-		getBlockIndex,
-		getBlockRootClientId,
-		getBlockName,
-		getBlock,
-	} = useSelect( blockEditorStore );
-	const { mergeBlocks, moveBlocksToPosition, removeBlock, insertBlocks } =
-		useDispatch( blockEditorStore );
-	const outdentListItem = useOutdentListItem();
 
-	function getTrailingId( id ) {
-		const order = getBlockOrder( id );
+	return ( forward ) => {
+		const select = registry.select( blockEditorStore );
+		const {
+			getPreviousBlockClientId,
+			getNextBlockClientId,
+			getBlockOrder,
+			getBlockIndex,
+			getBlockRootClientId,
+			getBlockName,
+			getBlock,
+		} = select;
+		const { mergeBlocks, moveBlocksToPosition, removeBlock, insertBlocks } =
+			registry.dispatch( blockEditorStore );
 
-		if ( ! order.length ) {
-			return id;
-		}
+		function getTrailingId( id ) {
+			const order = getBlockOrder( id );
 
-		return getTrailingId( order[ order.length - 1 ] );
-	}
+			if ( ! order.length ) {
+				return id;
+			}
 
-	function getParentListItemId( id ) {
-		const listId = getBlockRootClientId( id );
-		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) {
-			return;
+			return getTrailingId( order[ order.length - 1 ] );
 		}
-		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
-			return;
-		}
-		return parentListItemId;
-	}
 
-	return ( forward ) => {
 		function mergeWithNested( clientIdA, clientIdB ) {
 			registry.batch( () => {
 				// When merging a sub list item with a higher next list item, we
@@ -62,7 +51,7 @@ export default function useMerge( clientId, onMerge ) {
 							clientIdA
 						);
 					} else if (
-						getParentListItemId( clientIdB ) === clientIdA
+						getOutdentTarget( select, clientIdB ) === clientIdA
 					) {
 						// Merging into the parent item's own line: the
 						// children take the item's place in its list, one
@@ -104,7 +93,7 @@ export default function useMerge( clientId, onMerge ) {
 				while (
 					! ( nextBlockClientId = getNextBlockClientId( listItemId ) )
 				) {
-					const parentLi = getParentListItemId( listItemId );
+					const parentLi = getOutdentTarget( select, listItemId );
 					if ( ! parentLi ) {
 						break;
 					}
@@ -158,7 +147,7 @@ export default function useMerge( clientId, onMerge ) {
 				mergeWithNested( trailingId, clientId );
 				return;
 			}
-			const parentListItemId = getParentListItemId( clientId );
+			const parentListItemId = getOutdentTarget( select, clientId );
 			if ( parentListItemId ) {
 				mergeWithNested( parentListItemId, clientId );
 				return;
@@ -170,7 +159,10 @@ export default function useMerge( clientId, onMerge ) {
 				blockOrder.length > 0
 			) {
 				registry.batch( () => {
-					outdentListItem( getBlockOrder( blockOrder[ 0 ] ) );
+					outdentListItems(
+						registry,
+						getBlockOrder( blockOrder[ 0 ] )
+					);
 					removeBlock( clientId, true );
 				} );
 			} else {