List v2: merge with nested items (#42551)

Author: ellatrix

packages/block-library/src/list-item/edit.js

@@ -27,6 +27,7 @@ import {
 	useIndentListItem,
 	useOutdentListItem,
 	useSplit,
+	useMerge,
 } from './hooks';
 import { convertToListItems } from './utils';
 
@@ -57,7 +58,6 @@ function IndentUI( { clientId } ) {
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	mergeBlocks,
 	onReplace,
 	clientId,
 } ) {
@@ -70,6 +70,7 @@ export default function ListItemEdit( {
 	const useBackspaceRef = useBackspace( { clientId } );
 	const useSpaceRef = useSpace( clientId );
 	const onSplit = useSplit( clientId );
+	const onMerge = useMerge( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
@@ -88,7 +89,7 @@ export default function ListItemEdit( {
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
 					onSplit={ onSplit }
-					onMerge={ mergeBlocks }
+					onMerge={ onMerge }
 					onReplace={ ( blocks, ...args ) => {
 						onReplace( convertToListItems( blocks ), ...args );
 					} }

packages/block-library/src/list-item/hooks/index.js

@@ -4,3 +4,4 @@ export { default as useEnter } from './use-enter';
 export { default as useBackspace } from './use-backspace';
 export { default as useSpace } from './use-space';
 export { default as useSplit } from './use-split';
+export { default as useMerge } from './use-merge';

packages/block-library/src/list-item/hooks/use-merge.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+export default function useMerge( clientId ) {
+	const registry = useRegistry();
+	const {
+		getPreviousBlockClientId,
+		getNextBlockClientId,
+		getBlockOrder,
+		getBlockRootClientId,
+	} = useSelect( blockEditorStore );
+	const { mergeBlocks, moveBlocksToPosition } =
+		useDispatch( blockEditorStore );
+
+	function getTrailing( id ) {
+		const order = getBlockOrder( id );
+
+		if ( ! order.length ) {
+			return id;
+		}
+
+		return getTrailing( order[ order.length - 1 ] );
+	}
+
+	function getNext( id ) {
+		return (
+			getNextBlockClientId( id ) || getNext( getBlockRootClientId( id ) )
+		);
+	}
+
+	return ( forward ) => {
+		if ( forward ) {
+			// Forward "merging" (forward delete) should be equal pressing
+			// Backspace from the next item. If the next item is not at the top
+			// level, the item should be outdented instead of merged.
+			if ( getBlockOrder( clientId ).length ) {
+				// Should be implemented in `./use-backspace`.
+				return;
+			}
+
+			const nextBlockClientId = getNext( clientId );
+			if ( nextBlockClientId ) {
+				registry.batch( () => {
+					moveBlocksToPosition(
+						getBlockOrder( nextBlockClientId ),
+						nextBlockClientId,
+						getPreviousBlockClientId( nextBlockClientId )
+					);
+					mergeBlocks( clientId, nextBlockClientId );
+				} );
+			}
+		} else {
+			// Merging is only done from the top level. For lowel levels, the
+			// list item is outdented instead.
+			const previousBlockClientId = getPreviousBlockClientId( clientId );
+			if ( previousBlockClientId ) {
+				const trailingClientId = getTrailing( previousBlockClientId );
+				registry.batch( () => {
+					moveBlocksToPosition(
+						getBlockOrder( clientId ),
+						clientId,
+						previousBlockClientId
+					);
+					mergeBlocks( trailingClientId, clientId );
+				} );
+			}
+		}
+	};
+}