Avoid focusing blocks when inserting them into the canvas

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -657,6 +657,7 @@ _Returns_
 
 Returns the initial caret position for the selected block.
 This position is to used to position the caret properly when the selected block changes.
+If the current block is not a RichText, having initial position set to 0 means "focus block"
 
 _Parameters_
 

packages/block-editor/src/components/block-list/block.js

@@ -375,7 +375,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 			const { clientId, rootClientId } = ownProps;
 			const { getBlockIndex } = select( 'core/block-editor' );
 			const index = getBlockIndex( clientId, rootClientId );
-			insertBlocks( blocks, index + 1, rootClientId );
+			insertBlocks( blocks, index + 1, rootClientId, 0 );
 		},
 		onMerge( forward ) {
 			const { clientId } = ownProps;
@@ -408,7 +408,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 				[ ownProps.clientId ],
 				blocks,
 				indexToSelect,
-				initialPosition
+				initialPosition || 0
 			);
 		},
 		toggleSelection( selectionEnabled ) {

packages/block-editor/src/components/block-list/index.js

@@ -17,6 +17,7 @@ import BlockListAppender from '../block-list-appender';
 import useBlockDropZone from '../use-block-drop-zone';
 import useInsertionPoint from './insertion-point';
 import BlockPopover from './block-popover';
+import { useScrollSelectionIntoView } from '../selection-scroll-into-view';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
@@ -31,6 +32,7 @@ export default function BlockList( { className } ) {
 	const ref = useRef();
 	const [ blockNodes, setBlockNodes ] = useState( {} );
 	const insertionPoint = useInsertionPoint( ref );
+	useScrollSelectionIntoView( ref );
 
 	return (
 		<BlockNodes.Provider value={ blockNodes }>

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -44,15 +44,15 @@ function useInitialPosition( clientId ) {
 			}
 
 			// If there's no initial position, return 0 to focus the start.
-			return getSelectedBlocksInitialCaretPosition() || 0;
+			return getSelectedBlocksInitialCaretPosition();
 		},
 		[ clientId ]
 	);
 }
 
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
- * selected.
+ * selected and an initial position is set.
  *
  * @param {RefObject} ref      React ref with the block element.
  * @param {string}    clientId Block client ID.

packages/block-editor/src/components/block-navigation/appender.js

@@ -66,7 +66,6 @@ export default function BlockNavigationAppender( {
 						<Inserter
 							rootClientId={ parentBlockClientId }
 							__experimentalIsQuick
-							__experimentalSelectBlockOnInsert={ false }
 							aria-describedby={ descriptionId }
 							toggleProps={ { ref, tabIndex, onFocus } }
 						/>

packages/block-editor/src/components/button-block-appender/index.js

@@ -17,20 +17,13 @@ import { Icon, plus } from '@wordpress/icons';
 import Inserter from '../inserter';
 
 function ButtonBlockAppender(
-	{
-		rootClientId,
-		className,
-		__experimentalSelectBlockOnInsert: selectBlockOnInsert,
-		onFocus,
-		tabIndex,
-	},
+	{ rootClientId, className, onFocus, tabIndex },
 	ref
 ) {
 	return (
 		<Inserter
 			position="bottom center"
 			rootClientId={ rootClientId }
-			__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
 			__experimentalIsQuick
 			renderToggle={ ( {
 				onToggle,

packages/block-editor/src/components/index.js

@@ -100,10 +100,7 @@ export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
 export { default as __experimentalSearchForm } from './inserter/search-form';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
-export {
-	default as MultiSelectScrollIntoView,
-	useScrollMultiSelectionIntoView as __unstableUseScrollMultiSelectionIntoView,
-} from './multi-select-scroll-into-view';
+export { MultiSelectScrollIntoView } from './selection-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';
 export {
 	default as ObserveTyping,

packages/block-editor/src/components/inserter/hooks/use-insertion-point.js

@@ -18,8 +18,6 @@ import { useCallback } from '@wordpress/element';
  *                                           block with this ID.
  * @property {boolean=}  isAppender          Whether the inserter is an appender
  *                                           or not.
- * @property {boolean=}  selectBlockOnInsert Whether the block should be
- *                                           selected on insert.
  * @property {Function=} onSelect            Called after insertion.
  */
 
@@ -34,7 +32,6 @@ function useInsertionPoint( {
 	insertionIndex,
 	clientId,
 	isAppender,
-	selectBlockOnInsert,
 	onSelect,
 } ) {
 	const {
@@ -108,28 +105,26 @@ function useInsertionPoint( {
 					selectedBlock.clientId,
 					blocks,
 					null,
-					null,
+					undefined,
 					meta
 				);
 			} else {
 				insertBlocks(
 					blocks,
 					destinationIndex,
 					destinationRootClientId,
-					selectBlockOnInsert,
+					false,
 					meta
 				);
 			}
 
-			if ( ! selectBlockOnInsert ) {
-				// translators: %d: the name of the block that has been added
-				const message = _n(
-					'%d block added.',
-					'%d blocks added.',
-					blocks.length
-				);
-				speak( message );
-			}
+			// translators: %d: the name of the block that has been added
+			const message = _n(
+				'%d block added.',
+				'%d blocks added.',
+				blocks.length
+			);
+			speak( message );
 
 			if ( onSelect ) {
 				onSelect();
@@ -142,7 +137,6 @@ function useInsertionPoint( {
 			insertBlocks,
 			destinationRootClientId,
 			destinationIndex,
-			selectBlockOnInsert,
 			onSelect,
 		]
 	);

packages/block-editor/src/components/inserter/index.js

@@ -131,7 +131,6 @@ class Inserter extends Component {
 			clientId,
 			isAppender,
 			showInserterHelpPanel,
-			__experimentalSelectBlockOnInsert: selectBlockOnInsert,
 
 			// This prop is experimental to give some time for the quick inserter to mature
 			// Feel free to make them stable after a few releases.
@@ -147,7 +146,6 @@ class Inserter extends Component {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			);
 		}
@@ -161,7 +159,6 @@ class Inserter extends Component {
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
-				__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
 			/>
 		);
 	}
@@ -238,12 +235,9 @@ export default compose( [
 					rootClientId,
 					clientId,
 					isAppender,
-					onSelectOrClose,
-				} = ownProps;
-				const {
 					hasSingleBlockType,
 					allowedBlockType,
-					__experimentalSelectBlockOnInsert: selectBlockOnInsert,
+					onSelectOrClose,
 				} = ownProps;
 
 				if ( ! hasSingleBlockType ) {
@@ -280,21 +274,19 @@ export default compose( [
 					blockToInsert,
 					getInsertionIndex(),
 					rootClientId,
-					selectBlockOnInsert
+					false
 				);
 
 				if ( onSelectOrClose ) {
 					onSelectOrClose();
 				}
 
-				if ( ! selectBlockOnInsert ) {
-					const message = sprintf(
-						// translators: %s: the name of the block that has been added
-						__( '%s block added' ),
-						allowedBlockType.title
-					);
-					speak( message );
-				}
+				const message = sprintf(
+					// translators: %s: the name of the block that has been added
+					__( '%s block added' ),
+					allowedBlockType.title
+				);
+				speak( message );
 			},
 		};
 	} ),

packages/block-editor/src/components/inserter/library.js

@@ -19,7 +19,6 @@ function InserterLibrary( {
 	isAppender,
 	showInserterHelpPanel,
 	showMostUsedBlocks = false,
-	__experimentalSelectBlockOnInsert,
 	__experimentalInsertionIndex,
 	onSelect = noop,
 } ) {
@@ -42,9 +41,6 @@ function InserterLibrary( {
 			isAppender={ isAppender }
 			showInserterHelpPanel={ showInserterHelpPanel }
 			showMostUsedBlocks={ showMostUsedBlocks }
-			__experimentalSelectBlockOnInsert={
-				__experimentalSelectBlockOnInsert
-			}
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 		/>
 	);

packages/block-editor/src/components/inserter/menu.js

@@ -23,7 +23,6 @@ function InserterMenu( {
 	rootClientId,
 	clientId,
 	isAppender,
-	__experimentalSelectBlockOnInsert,
 	__experimentalInsertionIndex,
 	onSelect,
 	showInserterHelpPanel,
@@ -43,7 +42,6 @@ function InserterMenu( {
 		rootClientId,
 		clientId,
 		isAppender,
-		selectBlockOnInsert: __experimentalSelectBlockOnInsert,
 		insertionIndex: __experimentalInsertionIndex,
 	} );
 	const { hasPatterns, hasReusableBlocks } = useSelect( ( select ) => {
@@ -177,9 +175,6 @@ function InserterMenu( {
 							rootClientId={ rootClientId }
 							clientId={ clientId }
 							isAppender={ isAppender }
-							selectBlockOnInsert={
-								__experimentalSelectBlockOnInsert
-							}
 							showBlockDirectory
 						/>
 					) }

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -29,15 +29,13 @@ export default function QuickInserter( {
 	rootClientId,
 	clientId,
 	isAppender,
-	selectBlockOnInsert,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		onSelect,
 		rootClientId,
 		clientId,
 		isAppender,
-		selectBlockOnInsert,
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
@@ -104,7 +102,6 @@ export default function QuickInserter( {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					selectBlockOnInsert={ selectBlockOnInsert }
 					maxBlockPatterns={ showPatterns ? SHOWN_BLOCK_PATTERNS : 0 }
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }

packages/block-editor/src/components/inserter/search-results.js

@@ -32,7 +32,6 @@ function InserterSearchResults( {
 	rootClientId,
 	clientId,
 	isAppender,
-	selectBlockOnInsert,
 	maxBlockPatterns,
 	maxBlockTypes,
 	showBlockDirectory = false,
@@ -45,7 +44,6 @@ function InserterSearchResults( {
 		rootClientId,
 		clientId,
 		isAppender,
-		selectBlockOnInsert,
 	} );
 	const [
 		blockTypes,

packages/block-editor/src/components/multi-select-scroll-into-view/index.js → packages/block-editor/src/components/selection-scroll-into-view/index.js

@@ -15,26 +15,11 @@ import { getScrollContainer } from '@wordpress/dom';
  */
 import { getBlockDOMNode } from '../../utils/dom';
 
-export function useScrollMultiSelectionIntoView( ref ) {
-	const selectionEnd = useSelect( ( select ) => {
-		const {
-			getBlockSelectionEnd,
-			hasMultiSelection,
-			isMultiSelecting,
-		} = select( 'core/block-editor' );
-
-		const blockSelectionEnd = getBlockSelectionEnd();
-
-		if (
-			! blockSelectionEnd ||
-			isMultiSelecting() ||
-			! hasMultiSelection()
-		) {
-			return;
-		}
-
-		return blockSelectionEnd;
-	}, [] );
+export function useScrollSelectionIntoView( ref ) {
+	const selectionEnd = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlockSelectionEnd(),
+		[]
+	);
 
 	useEffect( () => {
 		if ( ! selectionEnd ) {
@@ -66,8 +51,8 @@ export function useScrollMultiSelectionIntoView( ref ) {
  * Scrolls the multi block selection end into view if not in view already. This
  * is important to do after selection by keyboard.
  */
-export default function MultiSelectScrollIntoView() {
+export function MultiSelectScrollIntoView() {
 	const ref = useRef();
-	useScrollMultiSelectionIntoView( ref );
+	useScrollSelectionIntoView( ref );
 	return <div ref={ ref } />;
 }

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

@@ -1192,7 +1192,7 @@ function selectionHelper( state = {}, action ) {
 		case 'REPLACE_INNER_BLOCKS': // REPLACE_INNER_BLOCKS and INSERT_BLOCKS should follow the same logic.
 		case 'INSERT_BLOCKS': {
 			// REPLACE_INNER_BLOCKS can be called with an empty array.
-			if ( ! action.updateSelection || ! action.blocks.length ) {
+			if ( ! action.blocks.length ) {
 				return state;
 			}
 
@@ -1225,11 +1225,7 @@ function selectionHelper( state = {}, action ) {
 				return state;
 			}
 
-			const newState = { clientId: blockToSelect.clientId };
-			if ( typeof action.initialPosition === 'number' ) {
-				newState.initialPosition = action.initialPosition;
-			}
-			return newState;
+			return { clientId: blockToSelect.clientId };
 		}
 	}
 
@@ -1372,6 +1368,11 @@ export function initialPosition( state, action ) {
 		return state;
 	} else if ( action.type === 'START_TYPING' ) {
 		return state;
+	} else if (
+		action.type === 'INSERT_BLOCKS' ||
+		action.type === 'REPLACE_INNER_BLOCKS'
+	) {
+		return action.updateSelection ? 0 : undefined;
 	}
 
 	// Reset the state by default (for any action not handled).