List block v2: Fixes an issue where pressing enter deletes innerblock…

…s. (#41109)

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

@@ -8,7 +8,6 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { isRTL, __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import { ToolbarButton } from '@wordpress/components';
 import {
 	formatOutdent,
@@ -27,6 +26,7 @@ import {
 	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
+	useSplit,
 } from './hooks';
 
 function IndentUI( { clientId } ) {
@@ -54,7 +54,6 @@ function IndentUI( { clientId } ) {
 }
 
 export default function ListItemEdit( {
-	name,
 	attributes,
 	setAttributes,
 	mergeBlocks,
@@ -69,6 +68,7 @@ export default function ListItemEdit( {
 	const useEnterRef = useEnter( { content, clientId } );
 	const useBackspaceRef = useBackspace( { clientId } );
 	const useSpaceRef = useSpace( clientId );
+	const onSplit = useSplit( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
@@ -86,12 +86,7 @@ export default function ListItemEdit( {
 					value={ content }
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
-					onSplit={ ( value ) => {
-						return createBlock( name, {
-							...attributes,
-							content: value,
-						} );
-					} }
+					onSplit={ onSplit }
 					onMerge={ mergeBlocks }
 					onReplace={ onReplace }
 				/>

packages/block-library/src/list-item/hooks/index.js

@@ -3,3 +3,4 @@ export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
 export { default as useBackspace } from './use-backspace';
 export { default as useSpace } from './use-space';
+export { default as useSplit } from './use-split';

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { cloneBlock } from '@wordpress/blocks';
+
+export default function useSplit( clientId ) {
+	const { getBlock } = useSelect( blockEditorStore );
+	return useCallback(
+		( value, isAfterOriginal ) => {
+			const block = getBlock( clientId );
+			return cloneBlock(
+				block,
+				{
+					content: value,
+				},
+				isAfterOriginal ? [] : block.innerBlocks
+			);
+		},
+		[ clientId, getBlock ]
+	);
+}