Mobile - Fix iOS Focus loop for RichText components

WordPress · Aug 2, 2023 · 88993a1 · 88993a1
1 parent 6abc32d
commit 88993a1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { View, Platform, TouchableWithoutFeedback } from 'react-native';
+import { View, Platform, Pressable } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useRef, useState } from '@wordpress/element';
+import { useRef, useState, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import {
@@ -372,20 +372,20 @@ function Footer( {
 	renderFooterAppender,
 	withFooter,
 } ) {
+	const onAddParagraphBlock = useCallback( () => {
+		const paragraphBlock = createBlock( 'core/paragraph' );
+		addBlockToEndOfPost( paragraphBlock );
+	}, [ addBlockToEndOfPost ] );
+
 	if ( ! isReadOnly && withFooter ) {
 		return (
-			<>
-				<TouchableWithoutFeedback
-					accessibilityLabel={ __( 'Add paragraph block' ) }
-					testID={ __( 'Add paragraph block' ) }
-					onPress={ () => {
-						const paragraphBlock = createBlock( 'core/paragraph' );
-						addBlockToEndOfPost( paragraphBlock );
-					} }
-				>
-					<View style={ styles.blockListFooter } />
-				</TouchableWithoutFeedback>
-			</>
+			<Pressable
+				accessibilityLabel={ __( 'Add paragraph block' ) }
+				testID={ __( 'Add paragraph block' ) }
+				onPress={ onAddParagraphBlock }
+			>
+				<View style={ styles.blockListFooter } />
+			</Pressable>
 		);
 	} else if ( renderFooterAppender ) {
 		return <View>{ renderFooterAppender() }</View>;

diff --git a/packages/block-editor/src/components/default-block-appender/index.native.js b/packages/block-editor/src/components/default-block-appender/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TouchableWithoutFeedback, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,9 @@ import BlockInsertionPoint from '../block-list/insertion-point';
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+const noop = () => {};
+
 export function DefaultBlockAppender( {
 	isLocked,
 	isVisible,
@@ -37,22 +40,21 @@ export function DefaultBlockAppender( {
 			? decodeEntities( placeholder )
 			: __( 'Start writing…' );
 
+	const appenderStyles = [
+		styles.blockHolder,
+		showSeparator && containerStyle,
+	];
+
 	return (
-		<TouchableWithoutFeedback onPress={ onAppend }>
-			<View
-				style={ [
-					styles.blockHolder,
-					showSeparator && containerStyle,
-				] }
-				pointerEvents="box-only"
-			>
+		<Pressable onPress={ onAppend } hitSlop={ hitSlop }>
+			<View style={ appenderStyles } pointerEvents="box-only">
 				{ showSeparator ? (
 					<BlockInsertionPoint />
 				) : (
-					<RichText placeholder={ value } onChange={ () => {} } />
+					<RichText placeholder={ value } onChange={ noop } />
 				) }
 			</View>
-		</TouchableWithoutFeedback>
+		</Pressable>
 	);
 }
 

diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js
@@ -237,14 +237,12 @@ class AztecView extends Component {
 	}
 
 	_onAztecFocus( event ) {
-		// IMPORTANT: the onFocus events from Aztec are thrown away on Android as these are handled by onPress() in the upper level.
+		// IMPORTANT: the onFocus events from Aztec are thrown away as these are handled by onPress() in the upper level.
 		// It's necessary to do this otherwise onFocus may be set by `{...otherProps}` and thus the onPress + onFocus
 		// combination generate an infinite loop as described in https://github.com/wordpress-mobile/gutenberg-mobile/issues/302
-		// For iOS, this is necessary to let the system know when Aztec was focused programatically.
+		// For iOS, this is necessary to let the system know the current caret data.
 		if ( Platform.OS === 'ios' ) {
 			this.updateCaretData( event );
-
-			this._onPress( event );
 		}
 	}