[Mobile] Improve List block onSplit to avoid hiding the keyboard on e…

…nter (#62446) * Native RichText - Add __unstableUseSplitSelection prop * Native List block - Use __unstableUseSplitSelection prop and remove custom onSplit and onReplace functionality * Update changelog * Fix changelog after fixing conflict Co-authored-by: geriux <[email protected]> Co-authored-by: twstokes <[email protected]> Co-authored-by: fluiddot <[email protected]>
WordPress · Jun 12, 2024 · 851e2a0 · 851e2a0
1 parent 3bb138e
commit 851e2a0
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
@@ -80,6 +80,7 @@ export function RichTextWrapper(
 		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
 		// Native props.
+		__unstableUseSplitSelection,
 		__unstableMobileNoFocusOnMount,
 		deleteEnter,
 		placeholderTextColor,
@@ -178,6 +179,7 @@ export function RichTextWrapper(
 		exitFormattedText,
 		selectionChange,
 		__unstableMarkAutomaticChange,
+		__unstableSplitSelection,
 		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const adjustedAllowedFormats = getAllowedFormats( {
@@ -345,6 +347,8 @@ export function RichTextWrapper(
 				}
 			} else if ( canSplit ) {
 				splitValue( value );
+			} else if ( __unstableUseSplitSelection ) {
+				__unstableSplitSelection();
 			} else if ( canSplitAtEnd ) {
 				onSplitAtEnd();
 			} else if (

diff --git a/packages/block-library/src/list-item/edit.native.js b/packages/block-library/src/list-item/edit.native.js
@@ -21,8 +21,7 @@ import { useState, useCallback, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useSplit, useMerge, useEnter } from './hooks';
-import { convertToListItems } from './utils';
+import { useMerge, useEnter } from './hooks';
 import { IndentUI } from './edit.js';
 import styles from './style.scss';
 import ListStyleType from './list-style-type';
@@ -32,7 +31,6 @@ const OPACITY = '9e';
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	onReplace,
 	clientId,
 	style,
 	mergeBlocks,
@@ -118,24 +116,7 @@ export default function ListItemEdit( {
 
 	const preventDefault = useRef( false );
 	const { onEnter } = useEnter( { content, clientId }, preventDefault );
-	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
-	const onSplitList = useCallback(
-		( value ) => {
-			if ( ! preventDefault.current ) {
-				return onSplit( value );
-			}
-		},
-		[ clientId, onSplit ]
-	);
-	const onReplaceList = useCallback(
-		( blocks, ...args ) => {
-			if ( ! preventDefault.current ) {
-				onReplace( convertToListItems( blocks ), ...args );
-			}
-		},
-		[ clientId, onReplace, convertToListItems ]
-	);
 	const onLayout = useCallback( ( { nativeEvent } ) => {
 		setContentWidth( ( prevState ) => {
 			const { width } = nativeEvent.layout;
@@ -166,6 +147,7 @@ export default function ListItemEdit( {
 					onLayout={ onLayout }
 				>
 					<RichText
+						__unstableUseSplitSelection
 						identifier="content"
 						tagName="p"
 						onChange={ ( nextContent ) =>
@@ -176,9 +158,7 @@ export default function ListItemEdit( {
 						placeholderTextColor={
 							defaultPlaceholderTextColorWithOpacity
 						}
-						onSplit={ onSplitList }
 						onMerge={ onMerge }
-						onReplace={ onReplaceList }
 						onEnter={ onEnter }
 						style={ styleWithPlaceholderOpacity }
 						deleteEnter

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 -   [internal] Fix Inserter items list filtering [#62334]
+-   [*] Prevent hiding the keyboard when creating new list items [#62446]
 
 ## 1.120.0
 -   [*] Prevent deleting content when backspacing in the first Paragraph block [#62069]