[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 <[email protected]>
Co-authored-by: Justin Ahinon <[email protected]>

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__/quote.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/quote.test.js

@@ -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();
  } );
 

test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt

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

test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt

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

test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt

@@ -0,0 +1,5 @@
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Group Block with a Paragraph</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->

test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-1-chromium.txt

@@ -0,0 +1,9 @@
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->

test/e2e/specs/editor/blocks/__snapshots__/Group-can-merge-into-group-with-Backspace-2-chromium.txt

@@ -0,0 +1,9 @@
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->