WIP: Attempt to fix partial select + scroll jumping in iOS

packages/block-editor/src/components/block-list/style.scss

@@ -86,7 +86,7 @@
 	}
 
 	// Block focus.
-	.block-editor-block-list__block:not([contenteditable]):focus {
+	.block-editor-block-list__block:focus {
 		outline: none;
 
 		// We're using a pseudo element to overflow placeholder borders

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

@@ -149,6 +149,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	return {
 		tabIndex: 0,
+		contentEditable: false,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,

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

@@ -78,9 +78,36 @@ export function useFocusFirstElement( clientId ) {
 		}
 
 		const { ownerDocument } = ref.current;
+		const { defaultView } = ownerDocument;
+		const selection = defaultView.getSelection();
+		const { anchorNode } = selection;
+		const anchorElement =
+			anchorNode?.nodeType === anchorNode?.ELEMENT_NODE
+				? anchorNode
+				: anchorNode.parentElement;
 
 		// Do not focus the block if it already contains the active element.
-		if ( isInsideRootBlock( ref.current, ownerDocument.activeElement ) ) {
+		if (
+			anchorElement &&
+			isInsideRootBlock( ref.current, anchorElement )
+		) {
+			let editor = ref.current;
+
+			// Ensure editor has focus.
+			while ( editor.parentElement?.closest( '[contenteditable]' ) ) {
+				editor = /** @type {HTMLElement} */ (
+					editor.parentElement.closest( '[contenteditable]' )
+				);
+			}
+
+			editor.focus();
+			return;
+		}
+
+		if (
+			ownerDocument.activeElement &&
+			isInsideRootBlock( ref.current, ownerDocument.activeElement )
+		) {
 			return;
 		}
 
@@ -96,12 +123,22 @@ export function useFocusFirstElement( clientId ) {
 			textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
-			ref.current.focus();
+			selection.removeAllRanges();
+			let editor = ref.current;
+
+			// Ensure editor has focus.
+			while ( editor.parentElement?.closest( '[contenteditable]' ) ) {
+				editor = /** @type {HTMLElement} */ (
+					editor.parentElement.closest( '[contenteditable]' )
+				);
+			}
+
+			editor.focus();
 			return;
 		}
 
 		// Check to see if element is focussable before a generic caret insert.
-		if ( ! ref.current.getAttribute( 'contenteditable' ) ) {
+		if ( ref.current.getAttribute( 'contenteditable' ) !== 'true' ) {
 			const focusElement = focus.tabbable.findNext( ref.current );
 			// Make sure focusElement is valid, contained in the same block, and a form field.
 			if (

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

@@ -30,11 +30,7 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
-				// When the whole editor is editable, let writing flow handle
-				// selection.
-				if (
-					node.parentElement.closest( '[contenteditable="true"]' )
-				) {
+				if ( event.shiftKey ) {
 					return;
 				}
 
@@ -57,10 +53,10 @@ export function useFocusHandler( clientId ) {
 				selectBlock( clientId );
 			}
 
-			node.addEventListener( 'focusin', onFocus );
+			node.addEventListener( 'click', onFocus );
 
 			return () => {
-				node.removeEventListener( 'focusin', onFocus );
+				node.removeEventListener( 'click', onFocus );
 			};
 		},
 		[ isBlockSelected, selectBlock ]

packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -1,7 +1,6 @@
 /**
  * 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';
@@ -54,7 +53,10 @@ export function useEventHandlers( clientId ) {
 					return;
 				}
 
-				if ( target !== node || isTextField( target ) ) {
+				if (
+					target !== node ||
+					target.ownerDocument.activeElement !== node
+				) {
 					return;
 				}
 

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

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
+import {
+	useViewportMatch,
+	useMergeRefs,
+	useRefEffect,
+} from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
@@ -193,6 +197,85 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	} );
 
 	const ref = useMergeRefs( [
+		useRefEffect( ( node ) => {
+			function onInput( event ) {
+				if ( event.__unstableRedirect === true ) {
+					return;
+				}
+
+				if ( event.target !== node ) {
+					return;
+				}
+
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				const prototype = Object.getPrototypeOf( event );
+				const constructorName = prototype.constructor.name;
+				const Constructor = window[ constructorName ];
+				const { anchorNode } = defaultView.getSelection();
+
+				if ( ! anchorNode ) {
+					return;
+				}
+
+				const anchorElement = (
+					anchorNode.nodeType === anchorNode.ELEMENT_NODE
+						? anchorNode
+						: anchorNode.parentElement
+				 ).closest( '[contenteditable]' );
+
+				if ( ! anchorElement ) {
+					return;
+				}
+
+				const init = {};
+
+				for ( const key in event ) {
+					init[ key ] = event[ key ];
+				}
+
+				const newEvent = new Constructor( event.type, init );
+				newEvent.__unstableRedirect = true;
+				const cancelled = ! anchorElement.dispatchEvent( newEvent );
+				event.stopImmediatePropagation();
+
+				if ( cancelled ) {
+					event.preventDefault();
+				}
+			}
+
+			const events = [
+				'beforeinput',
+				'input',
+				'compositionstart',
+				'compositionend',
+				'compositionupdate',
+				'keydown',
+			];
+
+			events.forEach( ( eventType ) => {
+				node.addEventListener( eventType, onInput );
+			} );
+
+			return () => {
+				events.forEach( ( eventType ) => {
+					node.removeEventListener( eventType, onInput );
+				} );
+			};
+		}, [] ),
+		// useRefEffect( ( node ) => {
+		// 	function onKeyDown( event ) {
+		// 		if (
+		// 			event.target === event.target.ownerDocument.activeElement
+		// 		) {
+		// 			event.preventDefault();
+		// 		}
+		// 	}
+		// 	node.addEventListener( 'keydown', onKeyDown );
+		// 	return () => {
+		// 		node.removeEventListener( 'keydown', onKeyDown );
+		// 	};
+		// }, [] ),
 		props.ref,
 		__unstableDisableDropZone ? null : blockDropZoneRef,
 	] );
@@ -209,6 +292,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	return {
 		...props,
 		ref,
+		contentEditable: true,
+		suppressContentEditableWarning: true,
 		className: classnames(
 			props.className,
 			'block-editor-block-list__layout',

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

@@ -358,6 +358,17 @@ function RichTextWrapper(
 
 	function onFocus() {
 		anchorRef.current?.focus();
+
+		// if ( anchorRef.current ) {
+		// 	const parentEditable =
+		// 		anchorRef.current.parentElement?.closest( '[contenteditable]' );
+
+		// 	if ( parentEditable ) {
+		// 		parentEditable.focus();
+		// 	} else {
+		// 		anchorRef.current.focus();
+		// 	}
+		// }
 	}
 
 	const TagName = tagName;

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

@@ -30,12 +30,16 @@ export function useWritingFlow() {
 		( select ) => select( blockEditorStore ).hasMultiSelection(),
 		[]
 	);
+	const selectedClientId = useSelect(
+		( select ) => select( blockEditorStore ).getSelectedBlockClientId(),
+		[]
+	);
 
 	return [
 		before,
 		useMergeRefs( [
-			ref,
 			useInput(),
+			ref,
 			useDragSelection(),
 			useSelectionObserver(),
 			useClickSelection(),
@@ -45,25 +49,75 @@ export function useWritingFlow() {
 			useRefEffect(
 				( node ) => {
 					node.tabIndex = -1;
-					node.contentEditable = hasMultiSelection;
+					node.contentEditable = true;
 
 					if ( ! hasMultiSelection ) {
 						return;
 					}
 
-					node.classList.add( 'has-multi-selection' );
 					node.setAttribute(
 						'aria-label',
 						__( 'Multiple selected blocks' )
 					);
+					node.classList.add( 'has-multi-selection' );
 
 					return () => {
 						node.classList.remove( 'has-multi-selection' );
-						node.removeAttribute( 'aria-label' );
 					};
 				},
 				[ hasMultiSelection ]
 			),
+			useRefEffect(
+				( node ) => {
+					if ( ! selectedClientId ) return;
+
+					const { ownerDocument } = node;
+					const { defaultView } = ownerDocument;
+					const selection = defaultView.getSelection();
+
+					const blockElement = ownerDocument.getElementById(
+						'block-' + selectedClientId
+					);
+					const blockLabel =
+						blockElement?.getAttribute( 'aria-label' );
+
+					node.setAttribute( 'aria-label', blockLabel );
+
+					function onSelectionChange() {
+						const { anchorNode } = selection;
+						let innerLabel = blockLabel;
+
+						if ( anchorNode ) {
+							const anchorElement =
+								anchorNode.nodeType === anchorNode.ELEMENT_NODE
+									? anchorNode
+									: anchorNode.parentElement;
+							const anchorLabel =
+								anchorElement?.closest( '[aria-label]' );
+
+							if ( anchorLabel ) {
+								innerLabel =
+									anchorLabel.getAttribute( 'aria-label' );
+							}
+						}
+
+						node.setAttribute( 'aria-label', innerLabel );
+					}
+
+					ownerDocument.addEventListener(
+						'selectionchange',
+						onSelectionChange
+					);
+
+					return () => {
+						ownerDocument.removeEventListener(
+							'selectionchange',
+							onSelectionChange
+						);
+					};
+				},
+				[ selectedClientId ]
+			),
 		] ),
 		after,
 	];