[Mobile] List V2 - Fixes split issues (#43949)

* Mobile - List V2 - Add useEnter to fix splitting issue

* Merging blocks: allow x to be merged into wrapper blocks (quote, list, group...) (#42780)

* Add test for the group block (#42801)

Co-authored-by: Ella van Durpe <4710635+ellatrix@users.noreply.github.com>
Co-authored-by: Justin Ahinon <justiny.ahinon@gmail.com>

Author: 3 people

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

@@ -114,6 +114,7 @@ function RichTextWrapper(
 		disableSuggestions,
 		disableAutocorrection,
 		containerWidth,
+		onEnter: onCustomEnter,
 		...props
 	},
 	forwardedRef
@@ -345,6 +346,10 @@ function RichTextWrapper(
 				}
 			}
 
+			if ( onCustomEnter ) {
+				onCustomEnter();
+			}
+
 			if ( multiline ) {
 				if ( shiftKey ) {
 					if ( ! disableLineBreaks ) {

packages/block-editor/src/store/actions.js

@@ -1002,21 +1002,49 @@ export const __unstableExpandSelection =
  */
 export const mergeBlocks =
 	( firstBlockClientId, secondBlockClientId ) =>
-	( { select, dispatch } ) => {
+	( { registry, select, dispatch } ) => {
 		const blocks = [ firstBlockClientId, secondBlockClientId ];
 		dispatch( { type: 'MERGE_BLOCKS', blocks } );
 
 		const [ clientIdA, clientIdB ] = blocks;
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 
-		// Only focus the previous block if it's not mergeable.
+		if ( ! blockAType ) return;
+
+		const blockB = select.getBlock( clientIdB );
+
 		if ( blockAType && ! blockAType.merge ) {
-			dispatch.selectBlock( blockA.clientId );
+			// If there's no merge function defined, attempt merging inner
+			// blocks.
+			const blocksWithTheSameType = switchToBlockType(
+				blockB,
+				blockAType.name
+			);
+			// Only focus the previous block if it's not mergeable.
+			if ( blocksWithTheSameType?.length !== 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			const [ blockWithSameType ] = blocksWithTheSameType;
+			if ( blockWithSameType.innerBlocks.length < 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			registry.batch( () => {
+				dispatch.insertBlocks(
+					blockWithSameType.innerBlocks,
+					undefined,
+					clientIdA
+				);
+				dispatch.removeBlock( clientIdB );
+				dispatch.selectBlock(
+					blockWithSameType.innerBlocks[ 0 ].clientId
+				);
+			} );
 			return;
 		}
 
-		const blockB = select.getBlock( clientIdB );
 		const blockBType = getBlockType( blockB.name );
 		const { clientId, attributeKey, offset } = select.getSelectionStart();
 		const selectedBlockType =

packages/block-library/src/list-item/edit.native.js

@@ -16,12 +16,12 @@ import {
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useSplit, useMerge } from './hooks';
+import { useSplit, useMerge, useEnter } from './hooks';
 import { convertToListItems } from './utils';
 import { IndentUI } from './edit.js';
 import styles from './style.scss';
@@ -116,8 +116,26 @@ export default function ListItemEdit( {
 		} ),
 	};
 
+	const preventDefault = useRef( false );
+	const { onEnter } = useEnter( { content, clientId }, preventDefault );
 	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId );
+	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;
@@ -158,11 +176,10 @@ export default function ListItemEdit( {
 						placeholderTextColor={
 							defaultPlaceholderTextColorWithOpacity
 						}
-						onSplit={ onSplit }
+						onSplit={ onSplitList }
 						onMerge={ onMerge }
-						onReplace={ ( blocks, ...args ) => {
-							onReplace( convertToListItems( blocks ), ...args );
-						} }
+						onReplace={ onReplaceList }
+						onEnter={ onEnter }
 						style={ styleWithPlaceholderOpacity }
 						deleteEnter={ true }
 						containerWidth={ contentWidth }

packages/block-library/src/list-item/hooks/use-enter.native.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getDefaultBlockName,
+	cloneBlock,
+} from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useOutdentListItem from './use-outdent-list-item';
+
+export default function useEnter( props, preventDefault ) {
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { getBlock, getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const [ canOutdent, outdentListItem ] = useOutdentListItem(
+		propsRef.current.clientId
+	);
+
+	return {
+		onEnter() {
+			const { content, clientId } = propsRef.current;
+			if ( content.length ) {
+				return;
+			}
+			preventDefault.current = true;
+			if ( canOutdent ) {
+				outdentListItem();
+				return;
+			}
+			// Here we are in top level list so we need to split.
+			const topParentListBlock = getBlock(
+				getBlockRootClientId( clientId )
+			);
+			const blockIndex = getBlockIndex( clientId );
+			const head = cloneBlock( {
+				...topParentListBlock,
+				innerBlocks: topParentListBlock.innerBlocks.slice(
+					0,
+					blockIndex
+				),
+			} );
+			const middle = createBlock( getDefaultBlockName() );
+			// Last list item might contain a `list` block innerBlock
+			// In that case append remaining innerBlocks blocks.
+			const after = [
+				...( topParentListBlock.innerBlocks[ blockIndex ]
+					.innerBlocks[ 0 ]?.innerBlocks || [] ),
+				...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+			];
+			const tail = after.length
+				? [
+						cloneBlock( {
+							...topParentListBlock,
+							innerBlocks: after,
+						} ),
+				  ]
+				: [];
+			replaceBlocks(
+				topParentListBlock.clientId,
+				[ head, middle, ...tail ],
+				1
+			);
+			// We manually change the selection here because we are replacing
+			// a different block than the selected one.
+			selectionChange( middle.clientId );
+		},
+	};
+}

packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap

@@ -114,6 +114,10 @@ exports[`Quote can be split at the end 2`] = `
 "<!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
 <p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
 <!-- /wp:paragraph --></blockquote>
 <!-- /wp:quote -->"
 `;

packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap

@@ -143,8 +143,9 @@ describe( 'Quote', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
 		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( '2' );
 
-		// Expect the paragraph to be deleted.
+		// Expect the paragraph to be merged into the quote block.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 

packages/e2e-tests/specs/editor/blocks/group.test.js

@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->

packages/e2e-tests/specs/editor/blocks/quote.test.js

@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->