Mobile - Fix issue when backspacing in an empty Paragraph block

packages/block-editor/src/components/block-list/block.native.js

@@ -605,6 +605,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
+				} else {
+					removeBlock( clientId );
 				}
 			}
 		},

packages/block-editor/src/components/rich-text/index.native.js

@@ -223,7 +223,7 @@ function RichTextWrapper(
 			// an intentional user interaction distinguishing between Backspace and
 			// Delete to remove the empty field, but also to avoid merge & remove
 			// causing destruction of two fields (merge, then removed merged).
-			if ( onRemove && isEmpty( value ) && isReverse ) {
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
 				onRemove( ! isReverse );
 			}
 		},

packages/block-editor/src/components/rich-text/native/index.native.js

@@ -650,6 +650,40 @@ export class RichText extends Component {
 		return shouldDrop;
 	}
 
+	/**
+	 * Determines whether the text input should receive focus after an update.
+	 * For cases where a RichText with a value is merged with an empty one.
+	 *
+	 * @param {Object} prevProps - The previous props of the component.
+	 * @return {boolean} True if the text input should receive focus, false otherwise.
+	 */
+	shouldFocusTextInputAfterMerge( prevProps ) {
+		const {
+			__unstableIsSelected: isSelected,
+			blockIsSelected,
+			selectionStart,
+			selectionEnd,
+			__unstableMobileNoFocusOnMount,
+		} = this.props;
+
+		const {
+			__unstableIsSelected: prevIsSelected,
+			blockIsSelected: prevBlockIsSelected,
+		} = prevProps;
+
+		const noSelectionValues =
+			selectionStart === undefined && selectionEnd === undefined;
+		const textInputWasNotFocused = ! prevIsSelected && ! isSelected;
+
+		return (
+			! __unstableMobileNoFocusOnMount &&
+			noSelectionValues &&
+			textInputWasNotFocused &&
+			! prevBlockIsSelected &&
+			blockIsSelected
+		);
+	}
+
 	onSelectionChangeFromAztec( start, end, text, event ) {
 		if ( this.shouldDropEventFromAztec( event, 'onSelectionChange' ) ) {
 			return;
@@ -843,9 +877,8 @@ export class RichText extends Component {
 		if ( this.props.value !== this.value ) {
 			this.value = this.props.value;
 		}
-		const { __unstableIsSelected: isSelected } = this.props;
-
 		const { __unstableIsSelected: prevIsSelected } = prevProps;
+		const { __unstableIsSelected: isSelected } = this.props;
 
 		if ( isSelected && ! prevIsSelected ) {
 			this._editor.focus();
@@ -855,6 +888,16 @@ export class RichText extends Component {
 				this.props.selectionStart || 0,
 				this.props.selectionEnd || 0
 			);
+		} else if ( this.shouldFocusTextInputAfterMerge( prevProps ) ) {
+			// Since this is happening when merging blocks, the selection should be at the last character position.
+			// As a fallback the internal selectionEnd value is used.
+			const lastCharacterPosition =
+				this.value?.length ?? this.selectionEnd;
+			this._editor.focus();
+			this.props.onSelectionChange(
+				lastCharacterPosition,
+				lastCharacterPosition
+			);
 		} else if ( ! isSelected && prevIsSelected ) {
 			this._editor.blur();
 		}

packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap

@@ -71,9 +71,3 @@ exports[`Buttons block when a button is shown removing button along with buttons
 <p></p>
 <!-- /wp:paragraph -->"
 `;
-
-exports[`Buttons block when a button is shown removing button along with buttons block removes the button and buttons block when deleting the block using the delete (backspace) key 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;

packages/block-library/src/buttons/test/edit.native.js

@@ -18,7 +18,6 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import { BACKSPACE } from '@wordpress/keycodes';
 
 const BUTTONS_HTML = `<!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button /--></div>
@@ -238,32 +237,6 @@ describe( 'Buttons block', () => {
 
 				expect( getEditorHtml() ).toMatchSnapshot();
 			} );
-
-			it( 'removes the button and buttons block when deleting the block using the delete (backspace) key', async () => {
-				const screen = await initializeEditor( {
-					initialHtml: BUTTONS_HTML,
-				} );
-
-				// Get block
-				const buttonsBlock = await getBlock( screen, 'Buttons' );
-				triggerBlockListLayout( buttonsBlock );
-
-				// Get inner button block
-				const buttonBlock = await getBlock( screen, 'Button' );
-				fireEvent.press( buttonBlock );
-
-				const buttonInput =
-					within( buttonBlock ).getByLabelText( 'Text input. Empty' );
-
-				// Delete block
-				fireEvent( buttonInput, 'onKeyDown', {
-					nativeEvent: {},
-					preventDefault() {},
-					keyCode: BACKSPACE,
-				} );
-
-				expect( getEditorHtml() ).toMatchSnapshot();
-			} );
 		} );
 	} );
 

packages/block-library/src/heading/test/__snapshots__/index.native.js.snap

@@ -6,6 +6,12 @@ exports[`Heading block inserts block 1`] = `
 <!-- /wp:heading -->"
 `;
 
+exports[`Heading block should merge with an empty Paragraph block and keep being the Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`Heading block should set a background color 1`] = `
 "<!-- wp:heading {"backgroundColor":"luminous-vivid-orange"} -->
 <h2 class="wp-block-heading has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</h2>

packages/block-library/src/heading/test/index.native.js

@@ -17,6 +17,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 beforeAll( () => {
 	// Register all core blocks
@@ -134,4 +135,43 @@ describe( 'Heading block', () => {
 			)
 		).toBeVisible();
 	} );
+
+	it( 'should merge with an empty Paragraph block and keep being the Heading block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

packages/block-library/src/paragraph/test/edit.native.js

@@ -17,11 +17,12 @@ import {
 	waitForElementToBeRemoved,
 } from 'test/helpers';
 import Clipboard from '@react-native-clipboard/clipboard';
+import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
 
 /**
  * WordPress dependencies
  */
-import { ENTER } from '@wordpress/keycodes';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -685,4 +686,39 @@ describe( 'Paragraph block', () => {
 		<!-- /wp:paragraph -->"
 	` );
 	} );
+
+	it( 'should focus on the previous Paragraph block when backspacing in an empty Paragraph block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, 'A quick brown fox jumps' );
+
+		await addBlock( screen, 'Paragraph' );
+		const secondParagraphBlock = getBlock( screen, 'Paragraph', {
+			rowIndex: 2,
+		} );
+		fireEvent.press( secondParagraphBlock );
+
+		// Clear mock history
+		TextInputState.focusTextInput.mockClear();
+
+		const secondParagraphTextInput =
+			within( secondParagraphBlock ).getByPlaceholderText(
+				'Start writing…'
+			);
+		fireEvent( secondParagraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( TextInputState.focusTextInput ).toHaveBeenCalled();
+	} );
 } );

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [***] Fix issue when backspacing in an empty Paragraph block [#56496]
 
 ## 1.109.0
 -   [*] Audio block: Improve legibility of audio file details on various background colors [#55627]

test/native/integration-test-helpers/add-block.js

@@ -6,7 +6,7 @@ import { Platform } from '@wordpress/element';
 /**
  * External dependencies
  */
-import { act, fireEvent } from '@testing-library/react-native';
+import { act, fireEvent, within } from '@testing-library/react-native';
 import { AccessibilityInfo } from 'react-native';
 
 /**
@@ -31,17 +31,17 @@ export const addBlock = async (
 		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 	}
 
-	const blockList = screen.getByTestId( 'InserterUI-Blocks' );
+	const inserterModal = screen.getByTestId( 'InserterUI-Blocks' );
 	// onScroll event used to force the FlatList to render all items
-	fireEvent.scroll( blockList, {
+	fireEvent.scroll( inserterModal, {
 		nativeEvent: {
 			contentOffset: { y: 0, x: 0 },
 			contentSize: { width: 100, height: 100 },
 			layoutMeasurement: { width: 100, height: 100 },
 		},
 	} );
 
-	const blockButton = await screen.findByText( blockName );
+	const blockButton = await within( inserterModal ).findByText( blockName );
 	// Blocks can perform belated state updates after they are inserted.
 	// To avoid potential `act` warnings, we ensure that all timers and queued
 	// microtasks are executed.