Writing flow: select next block on Enter key

WordPress · Dec 4, 2024 · f2e325b · f2e325b
1 parent cc5a2b7
commit f2e325b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 15 deletions.
diff --git a/...ock-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/...ock-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
@@ -1,12 +1,11 @@
 /**
  * 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 { createRoot } from '@wordpress/element';
-import { store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -25,14 +24,23 @@ import BlockDraggableChip from '../../../components/block-draggable/draggable-ch
  */
 export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockType } = useSelect( blocksStore );
-	const { getBlockRootClientId, isZoomOut, hasMultiSelection, getBlockName } =
-		unlock( useSelect( blockEditorStore ) );
+	const {
+		getBlockRootClientId,
+		isZoomOut,
+		hasMultiSelection,
+		getBlockName,
+		canInsertBlockType,
+		getNextBlockClientId,
+		getBlockOrder,
+		getBlockEditingMode,
+	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		insertAfterBlock,
 		removeBlock,
 		resetZoomLevel,
 		startDraggingBlocks,
 		stopDraggingBlocks,
+		selectBlock,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
@@ -53,6 +61,10 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			function onKeyDown( event ) {
 				const { keyCode, target } = event;
 
+				if ( event.defaultPrevented ) {
+					return;
+				}
+
 				if (
 					keyCode !== ENTER &&
 					keyCode !== BACKSPACE &&
@@ -61,7 +73,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 					return;
 				}
 
-				if ( target !== node || isTextField( target ) ) {
+				if ( target !== node ) {
 					return;
 				}
 
@@ -70,7 +82,43 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				if ( keyCode === ENTER && isZoomOut() ) {
 					resetZoomLevel();
 				} else 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
@@ -18,14 +18,9 @@ import {
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
-export default function SiteTitleEdit( {
-	attributes,
-	setAttributes,
-	insertBlocksAfter,
-} ) {
+export default function SiteTitleEdit( { attributes, setAttributes } ) {
 	const { level, levelOptions, textAlign, isLink, linkTarget } = attributes;
 	const { canUserEdit, title } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
@@ -68,9 +63,6 @@ export default function SiteTitleEdit( {
 				onChange={ setTitle }
 				allowedFormats={ [] }
 				disableLineBreaks
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
 			/>
 		</TagName>
 	) : (