Mobile Release v1.109.3

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/get-format-colors.native.js

@@ -5,50 +5,43 @@ import { getColorObjectByAttributeValues } from '../../../components/colors';
 
 const FORMAT_TYPE = 'core/text-color';
 const REGEX_TO_MATCH = /^has-(.*)-color$/;
-const TAGS_TO_SEARCH = /\<mark/;
 
-export function getFormatColors( value, formats, colors ) {
-	if ( value?.search( TAGS_TO_SEARCH ) !== -1 ) {
-		const newFormats = formats.slice();
+export function getFormatColors( formats, colors ) {
+	const newFormats = formats.slice();
 
-		newFormats.forEach( ( format ) => {
-			format.forEach( ( currentFormat ) => {
-				if ( currentFormat?.type === FORMAT_TYPE ) {
-					const className = currentFormat?.attributes?.class;
-					currentFormat.attributes.style =
-						currentFormat.attributes.style.replace( / /g, '' );
+	// We are looping through a sparse array where empty indices will be
+	// skipped.
+	newFormats.forEach( ( format ) => {
+		format.forEach( ( currentFormat ) => {
+			if ( currentFormat?.type === FORMAT_TYPE ) {
+				const className = currentFormat?.attributes?.class;
 
-					className?.split( ' ' ).forEach( ( currentClass ) => {
-						const match = currentClass.match( REGEX_TO_MATCH );
-						if ( match ) {
-							const [ , colorSlug ] =
-								currentClass.match( REGEX_TO_MATCH );
-							const colorObject = getColorObjectByAttributeValues(
-								colors,
-								colorSlug
-							);
-							const currentStyles =
-								currentFormat?.attributes?.style;
-							if (
-								colorObject &&
-								( ! currentStyles ||
-									currentStyles?.indexOf(
-										colorObject.color
-									) === -1 )
-							) {
-								currentFormat.attributes.style = [
-									`color: ${ colorObject.color }`,
-									currentStyles,
-								].join( ';' );
-							}
+				className?.split( ' ' ).forEach( ( currentClass ) => {
+					const match = currentClass.match( REGEX_TO_MATCH );
+					if ( match ) {
+						const [ , colorSlug ] =
+							currentClass.match( REGEX_TO_MATCH );
+						const colorObject = getColorObjectByAttributeValues(
+							colors,
+							colorSlug
+						);
+						const currentStyles = currentFormat?.attributes?.style;
+						if (
+							colorObject &&
+							( ! currentStyles ||
+								currentStyles?.indexOf( colorObject.color ) ===
+									-1 )
+						) {
+							currentFormat.attributes.style = [
+								`color: ${ colorObject.color }`,
+								currentStyles,
+							].join( ';' );
 						}
-					} );
-				}
-			} );
+					}
+				} );
+			}
 		} );
+	} );
 
-		return newFormats;
-	}
-
-	return formats;
+	return newFormats;
 }

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

@@ -196,7 +196,7 @@ export class RichText extends Component {
 
 		const { formats, replacements, text } = currentValue;
 		const { activeFormats } = this.state;
-		const newFormats = getFormatColors( value, formats, colorPalette );
+		const newFormats = getFormatColors( formats, colorPalette );
 
 		return {
 			formats: newFormats,
@@ -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();
+	} );
 } );