[Mobile] - List block - Fix merging nested list into paragraph (#50701)

* Mobile - List block - Bring web changes to avoid losing nested list items when merging its parent into a paragraph block * Mobile - Update changelog
WordPress · May 24, 2023 · 54fc4ec · 54fc4ec
1 parent c14da5e
commit 54fc4ec
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 28 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -481,43 +481,43 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				) {
 					removeBlock( _clientId );
 				} else {
-					if (
-						canInsertBlockType(
-							getBlockName( firstClientId ),
-							targetRootClientId
-						)
-					) {
-						moveBlocksToPosition(
-							[ firstClientId ],
-							_clientId,
-							targetRootClientId,
-							getBlockIndex( _clientId )
-						);
-					} else {
-						const replacement = switchToBlockType(
-							getBlock( firstClientId ),
-							getDefaultBlockName()
-						);
-
-						if ( replacement && replacement.length ) {
-							registry.batch( () => {
+					registry.batch( () => {
+						if (
+							canInsertBlockType(
+								getBlockName( firstClientId ),
+								targetRootClientId
+							)
+						) {
+							moveBlocksToPosition(
+								[ firstClientId ],
+								_clientId,
+								targetRootClientId,
+								getBlockIndex( _clientId )
+							);
+						} else {
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if ( replacement && replacement.length ) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
 									targetRootClientId,
 									changeSelection
 								);
 								removeBlock( firstClientId, false );
-							} );
+							}
 						}
-					}
 
-					if (
-						! getBlockOrder( _clientId ).length &&
-						isUnmodifiedBlock( getBlock( _clientId ) )
-					) {
-						removeBlock( _clientId, false );
-					}
+						if (
+							! getBlockOrder( _clientId ).length &&
+							isUnmodifiedBlock( getBlock( _clientId ) )
+						) {
+							removeBlock( _clientId, false );
+						}
+					} );
 				}
 			}
 

diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
@@ -433,4 +433,68 @@ describe( 'List block', () => {
 		<!-- /wp:list -->"
 	` );
 	} );
+
+	it( 'merges first item into its own paragraph block and keeps its nested items', async () => {
+		const initialHtml = `<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list --></li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
+
+		// Select List Item block
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
+		selectRangeInRichText( listItemField, 0 );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		
+		<!-- wp:paragraph -->
+		<p>One</p>
+		<!-- /wp:paragraph -->
+		
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+		
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
+	} );
 } );
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 -   [**] Tapping on all nested blocks gets focus directly instead of having to tap multiple times depending on the nesting levels. [#50672]
 -   [*] Add disabled style to `Cell` component [#50665]
+-   [*] [List block] Fix an issue when merging a list item into a Paragraph would remove its nested list items. [#50701]
 
 ## 1.95.0
 -   [*] Fix crash when trying to convert to regular blocks an undefined/deleted reusable block [#50475]