From e99bfba38a3da9090a2eec574af2098cb3c3db48 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Fri, 12 Jul 2024 14:40:26 +0200
Subject: [PATCH] Writing flow: select next block on Enter key

---
 .../use-selected-block-event-handlers.js      | 59 +++++++++++++++++--
 packages/block-library/src/site-title/edit.js | 10 +---
 2 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
index 01cc462e507ec..2f829ae6bef16 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { isTextField } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
+import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,9 +20,16 @@ import { store as blockEditorStore } from '../../../store';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		canInsertBlockType,
+		getNextBlockClientId,
+		getBlockOrder,
+		getBlockEditingMode,
+	} = useSelect( blockEditorStore );
+	const { insertAfterBlock, removeBlock, selectBlock } =
+		useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
@@ -42,6 +49,10 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			function onKeyDown( event ) {
 				const { keyCode, target } = event;
 
+				if ( event.defaultPrevented ) {
+					return;
+				}
+
 				if (
 					keyCode !== ENTER &&
 					keyCode !== BACKSPACE &&
@@ -50,14 +61,50 @@ export function useEventHandlers( { clientId, isSelected } ) {
 					return;
 				}
 
-				if ( target !== node || isTextField( target ) ) {
+				if ( target !== node ) {
 					return;
 				}
 
 				event.preventDefault();
 
 				if ( keyCode === ENTER ) {
-					insertAfterBlock( clientId );
+					const rootClientId = getBlockRootClientId( clientId );
+					if (
+						canInsertBlockType(
+							getDefaultBlockName(),
+							rootClientId
+						)
+					) {
+						insertAfterBlock( clientId );
+					} else {
+						function getNextClientId( id ) {
+							let nextClientId = null;
+
+							while (
+								typeof id === 'string' &&
+								! ( nextClientId = getNextBlockClientId( id ) )
+							) {
+								id = getBlockRootClientId( id );
+							}
+
+							return nextClientId;
+						}
+
+						let nextClientId =
+							getBlockOrder( clientId )[ 0 ] ??
+							getNextClientId( clientId );
+
+						while (
+							nextClientId &&
+							getBlockEditingMode( nextClientId ) === 'disabled'
+						) {
+							nextClientId = getNextClientId( nextClientId );
+						}
+
+						if ( nextClientId ) {
+							selectBlock( nextClientId );
+						}
+					}
 				} else {
 					removeBlock( clientId );
 				}
diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js
index 850268bf4ace5..a1ce8851566f5 100644
--- a/packages/block-library/src/site-title/edit.js
+++ b/packages/block-library/src/site-title/edit.js
@@ -18,16 +18,11 @@ import {
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
 const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
 
-export default function SiteTitleEdit( {
-	attributes,
-	setAttributes,
-	insertBlocksAfter,
-} ) {
+export default function SiteTitleEdit( { attributes, setAttributes } ) {
 	const { level, textAlign, isLink, linkTarget } = attributes;
 	const { canUserEdit, title } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
@@ -67,9 +62,6 @@ export default function SiteTitleEdit( {
 				onChange={ setTitle }
 				allowedFormats={ [] }
 				disableLineBreaks
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
 			/>
 		</TagName>
 	) : (