List v2: add forward delete (#42564)

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

@@ -22,7 +22,6 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import {
 	useEnter,
-	useBackspace,
 	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
@@ -42,14 +41,14 @@ function IndentUI( { clientId } ) {
 				title={ __( 'Outdent' ) }
 				describedBy={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
-				onClick={ outdentListItem }
+				onClick={ () => outdentListItem() }
 			/>
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
 				describedBy={ __( 'Indent list item' ) }
 				isDisabled={ ! canIndent }
-				onClick={ indentListItem }
+				onClick={ () => indentListItem() }
 			/>
 		</>
 	);
@@ -67,19 +66,14 @@ export default function ListItemEdit( {
 		allowedBlocks: [ 'core/list' ],
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
-	const useBackspaceRef = useBackspace( { clientId } );
 	const useSpaceRef = useSpace( clientId );
 	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [
-						useEnterRef,
-						useBackspaceRef,
-						useSpaceRef,
-					] ) }
+					ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>

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

@@ -1,7 +1,6 @@
 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 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

@@ -4,45 +4,86 @@
 import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import useOutdentListItem from './use-outdent-list-item';
+
+import { name as listItemName } from '../block.json';
+
 export default function useMerge( clientId ) {
 	const registry = useRegistry();
 	const {
 		getPreviousBlockClientId,
 		getNextBlockClientId,
 		getBlockOrder,
 		getBlockRootClientId,
+		getBlockName,
 	} = useSelect( blockEditorStore );
 	const { mergeBlocks, moveBlocksToPosition } =
 		useDispatch( blockEditorStore );
+	const [ , outdentListItem ] = useOutdentListItem( clientId );
 
-	function getTrailing( id ) {
+	function getTrailingId( id ) {
 		const order = getBlockOrder( id );
 
 		if ( ! order.length ) {
 			return id;
 		}
 
-		return getTrailing( order[ order.length - 1 ] );
+		return getTrailingId( order[ order.length - 1 ] );
 	}
 
-	function getNext( id ) {
-		return (
-			getNextBlockClientId( id ) || getNext( getBlockRootClientId( id ) )
-		);
+	function getParentListItemId( id ) {
+		const listId = getBlockRootClientId( id );
+		const parentListItemId = getBlockRootClientId( listId );
+		if ( ! parentListItemId ) return;
+		if ( getBlockName( parentListItemId ) !== listItemName ) return;
+		return parentListItemId;
+	}
+
+	/**
+	 * Return the next list item with respect to the given list item. If none,
+	 * return the next list item of the parent list item if it exists.
+	 *
+	 * @param {string} id A list item client ID.
+	 * @return {string?} The client ID of the next list item.
+	 */
+	function _getNextId( id ) {
+		const next = getNextBlockClientId( id );
+		if ( next ) return next;
+		const parentListItemId = getParentListItemId( id );
+		if ( ! parentListItemId ) return;
+		return _getNextId( parentListItemId );
+	}
+
+	/**
+	 * Given a client ID, return the client ID of the list item on the next
+	 * line, regardless of indentation level.
+	 *
+	 * @param {string} id The client ID of the current list item.
+	 * @return {string?} The client ID of the next list item.
+	 */
+	function getNextId( id ) {
+		const order = getBlockOrder( id );
+
+		// If the list item does not have a nested list, return the next list
+		// item.
+		if ( ! order.length ) {
+			return _getNextId( id );
+		}
+
+		// Get the first list item in the nested list.
+		return getBlockOrder( order[ 0 ] )[ 0 ];
 	}
 
 	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 ) {
+			const nextBlockClientId = getNextId( clientId );
+			if ( ! nextBlockClientId ) return;
+			if ( getParentListItemId( nextBlockClientId ) ) {
+				outdentListItem( nextBlockClientId );
+			} else {
 				registry.batch( () => {
 					moveBlocksToPosition(
 						getBlockOrder( nextBlockClientId ),
@@ -56,15 +97,17 @@ export default function useMerge( clientId ) {
 			// 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 );
+			if ( getParentListItemId( clientId ) ) {
+				outdentListItem( clientId );
+			} else if ( previousBlockClientId ) {
+				const trailingId = getTrailingId( previousBlockClientId );
 				registry.batch( () => {
 					moveBlocksToPosition(
 						getBlockOrder( clientId ),
 						clientId,
 						previousBlockClientId
 					);
-					mergeBlocks( trailingClientId, clientId );
+					mergeBlocks( trailingId, clientId );
 				} );
 			}
 		}