Fixes

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

@@ -189,8 +189,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			 * selected. This specifically handles the case where block does not
 			 * set focus on its own (via `setFocus`), typically if there is no
 			 * focusable input in the block.
+			 *
+			 * @param {FocusEvent} event Focus event.
 			 */
-			function onFocus() {
+			function onFocus( event ) {
+				// If an inner block is focussed, that block is resposible for
+				// setting the selected block.
+				if ( ! isInsideRootBlock( ref.current, event.target ) ) {
+					return;
+				}
+
 				selectBlock( clientId );
 			}
 
@@ -242,12 +250,24 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			}
 		}
 
+		/**
+		 * Prevents default dragging behavior within a block. To do: we must
+		 * handle this in the future and clean up the drag target.
+		 *
+		 * @param {DragEvent} event Drag event.
+		 */
+		function onDragStart( event ) {
+			event.preventDefault();
+		}
+
 		ref.current.addEventListener( 'keydown', onKeyDown );
 		ref.current.addEventListener( 'mouseleave', onMouseLeave );
+		ref.current.addEventListener( 'dragstart', onDragStart );
 
 		return () => {
 			ref.current.removeEventListener( 'mouseleave', onMouseLeave );
 			ref.current.removeEventListener( 'keydown', onKeyDown );
+			ref.current.removeEventListener( 'dragstart', onDragStart );
 		};
 	}, [ isSelected, onSelectionStart, insertDefaultBlock, removeBlock ] );
 

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

@@ -12,31 +12,13 @@ import { createContext, forwardRef, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import useMultiSelection from './use-multi-selection';
-import { getBlockClientId } from '../../utils/dom';
 import useInsertionPoint from './insertion-point';
 import BlockPopover from './block-popover';
 
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
-
 export const Context = createContext();
 export const BlockNodes = createContext();
 export const SetBlockNodes = createContext();
 
-/**
- * Prevents default dragging behavior within a block.
- * To do: we must handle this in the future and clean up the drag target.
- * Previously dragging was prevented for multi-selected, but this is no longer
- * needed.
- *
- * @param {WPSyntheticEvent} event Synthetic drag event.
- */
-function onDragStart( event ) {
-	// Ensure we target block content, not block controls.
-	if ( getBlockClientId( event.target ) ) {
-		event.preventDefault();
-	}
-}
-
 function RootContainer( { children, className }, ref ) {
 	const onSelectionStart = useMultiSelection( ref );
 	const [ blockNodes, setBlockNodes ] = useState( {} );
@@ -49,7 +31,6 @@ function RootContainer( { children, className }, ref ) {
 			<div
 				ref={ ref }
 				className={ classnames( className, 'is-root-container' ) }
-				onDragStart={ onDragStart }
 			>
 				<SetBlockNodes.Provider value={ setBlockNodes }>
 					<Context.Provider value={ onSelectionStart }>