List: fix merging nested lists (#52949)

WordPress · Jul 26, 2023 · ab8ec23 · ab8ec23
1 parent 1503530
commit ab8ec23
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 5 deletions.
diff --git a/packages/block-library/src/list-item/hooks/use-merge.js b/packages/block-library/src/list-item/hooks/use-merge.js
@@ -107,11 +107,18 @@ export default function useMerge( clientId, onMerge ) {
 			} else if ( previousBlockClientId ) {
 				const trailingId = getTrailingId( previousBlockClientId );
 				registry.batch( () => {
-					moveBlocksToPosition(
-						getBlockOrder( clientId ),
-						clientId,
-						previousBlockClientId
-					);
+					// When merging a list item with a previous trailing list
+					// item, we also need to move any nested list items. First,
+					// check if there's a listed list. If there's a nested list,
+					// append its nested list items to the trailing list.
+					const [ nestedListClientId ] = getBlockOrder( clientId );
+					if ( nestedListClientId ) {
+						moveBlocksToPosition(
+							getBlockOrder( nestedListClientId ),
+							nestedListClientId,
+							getBlockRootClientId( trailingId )
+						);
+					}
 					mergeBlocks( trailingId, clientId );
 				} );
 			} else {

diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
@@ -1367,4 +1367,85 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
 	} );
+
+	test( 'should merge two list items with nested lists', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/list',
+			innerBlocks: [
+				{
+					name: 'core/list-item',
+					attributes: { content: '1' },
+					innerBlocks: [
+						{
+							name: 'core/list',
+							innerBlocks: [
+								{
+									name: 'core/list-item',
+									attributes: { content: 'a' },
+								},
+							],
+						},
+					],
+				},
+				{
+					name: 'core/list-item',
+					attributes: { content: '2' },
+					innerBlocks: [
+						{
+							name: 'core/list',
+							innerBlocks: [
+								{
+									name: 'core/list-item',
+									attributes: { content: 'b' },
+								},
+							],
+						},
+					],
+				},
+			],
+		} );
+
+		// Navigate to the third item.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Test caret position.
+		await page.keyboard.type( '‸' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: { content: '1' },
+						innerBlocks: [
+							{
+								name: 'core/list',
+								innerBlocks: [
+									{
+										name: 'core/list-item',
+										attributes: { content: 'a‸2' },
+									},
+									{
+										name: 'core/list-item',
+										attributes: { content: 'b' },
+									},
+								],
+							},
+						],
+					},
+				],
+			},
+		] );
+	} );
 } );