Blocks: Share window listeners across instances (block props, rich text, ...)

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

@@ -2,13 +2,19 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * Selects the block if it receives focus.
@@ -57,11 +63,7 @@ export function useFocusHandler( clientId ) {
 				selectBlock( clientId );
 			}
 
-			node.addEventListener( 'focusin', onFocus );
-
-			return () => {
-				node.removeEventListener( 'focusin', onFocus );
-			};
+			return subscribeDelegatedListener( node, 'focusin', onFocus );
 		},
 		[ isBlockSelected, selectBlock ]
 	);

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

@@ -1,19 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 
-function listener( event ) {
-	if ( event.defaultPrevented ) {
-		return;
-	}
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
 
-	event.preventDefault();
-	event.currentTarget.classList.toggle(
-		'is-hovered',
-		event.type === 'mouseover'
-	);
-}
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * Adds `is-hovered` class when the block is hovered and in navigation or
@@ -31,12 +29,31 @@ export function useIsHovered( { isEnabled = true } = {} ) {
 				return;
 			}
 
-			node.addEventListener( 'mouseout', listener );
-			node.addEventListener( 'mouseover', listener );
+			function listener( event ) {
+				if ( event.defaultPrevented ) {
+					return;
+				}
+				event.preventDefault();
+				node.classList.toggle(
+					'is-hovered',
+					event.type === 'mouseover'
+				);
+			}
+
+			const unsubscribeOut = subscribeDelegatedListener(
+				node,
+				'mouseout',
+				listener
+			);
+			const unsubscribeOver = subscribeDelegatedListener(
+				node,
+				'mouseover',
+				listener
+			);
 
 			return () => {
-				node.removeEventListener( 'mouseout', listener );
-				node.removeEventListener( 'mouseover', listener );
+				unsubscribeOut();
+				unsubscribeOver();
 
 				// Remove class in case it lingers.
 				node.classList.remove( 'is-hovered' );

packages/block-editor/src/components/rich-text/event-listeners/enter.js

@@ -3,6 +3,14 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 import { insert, remove } from '@wordpress/rich-text';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDownDeprecated( event ) {
@@ -75,10 +83,14 @@ export default ( props ) => ( element ) => {
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	defaultView.addEventListener( 'keydown', onKeyDown );
+	const unsubscribeKeyDown = subscribeDelegatedListener(
+		defaultView,
+		'keydown',
+		onKeyDown
+	);
 	element.addEventListener( 'keydown', onKeyDownDeprecated );
 	return () => {
-		defaultView.removeEventListener( 'keydown', onKeyDown );
+		unsubscribeKeyDown();
 		element.removeEventListener( 'keydown', onKeyDownDeprecated );
 	};
 };

packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js

@@ -4,13 +4,17 @@
 import { pasteHandler } from '@wordpress/blocks';
 import { isEmpty, insert, create } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 import { addActiveFormats } from '../utils';
 import { getPasteEventData } from '../../../utils/pasting';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
@@ -141,8 +145,5 @@ export default ( props ) => ( element ) => {
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	defaultView.addEventListener( 'paste', _onPaste );
-	return () => {
-		defaultView.removeEventListener( 'paste', _onPaste );
-	};
+	return subscribeDelegatedListener( defaultView, 'paste', _onPaste );
 };

packages/block-library/src/button/edit.js

@@ -39,7 +39,11 @@ import {
 	getDefaultBlockName,
 	getBlockBindingsSource,
 } from '@wordpress/blocks';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
@@ -49,6 +53,7 @@ import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 import { getWidthClasses, isPercentageWidth } from './utils';
 
 const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
@@ -107,10 +112,14 @@ function useEnter( props ) {
 			selectionChange( middle.clientId );
 		}
 
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
+		// Capture phase so we run before writing-flow's ancestor-bubble
+		// keydown handlers that gate on `event.defaultPrevented`.
+		return subscribeDelegatedListener(
+			element,
+			'keydown',
+			onKeyDown,
+			true
+		);
 	}, [] );
 }
 

packages/block-library/src/list-item/hooks/use-enter.js

@@ -7,7 +7,10 @@ import {
 	cloneBlock,
 } from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -16,6 +19,9 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import useOutdentListItem from './use-outdent-list-item';
+import { unlock } from '../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default function useEnter( props ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
@@ -82,9 +88,13 @@ export default function useEnter( props ) {
 			selectionChange( middle.clientId );
 		}
 
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
+		// Capture phase so we run before writing-flow's ancestor-bubble
+		// keydown handlers that gate on `event.defaultPrevented`.
+		return subscribeDelegatedListener(
+			element,
+			'keydown',
+			onKeyDown,
+			true
+		);
 	}, [] );
 }

packages/block-library/src/list-item/hooks/use-space.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -11,6 +14,9 @@ import { useSelect } from '@wordpress/data';
  */
 import useIndentListItem from './use-indent-list-item';
 import useOutdentListItem from './use-outdent-list-item';
+import { unlock } from '../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default function useSpace( clientId ) {
 	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
@@ -55,10 +61,14 @@ export default function useSpace( clientId ) {
 				}
 			}
 
-			element.addEventListener( 'keydown', onKeyDown );
-			return () => {
-				element.removeEventListener( 'keydown', onKeyDown );
-			};
+			// Capture phase so we run before writing-flow's ancestor-bubble
+			// keydown handlers that gate on `event.defaultPrevented`.
+			return subscribeDelegatedListener(
+				element,
+				'keydown',
+				onKeyDown,
+				true
+			);
 		},
 		[ clientId, indentListItem ]
 	);

packages/block-library/src/paragraph/use-enter.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -13,6 +16,13 @@ import {
 	getDefaultBlockName,
 } from '@wordpress/blocks';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
+
 export function useOnEnter( props ) {
 	const { batch } = useRegistry();
 	const { moveBlocksToPosition, replaceBlocks, selectionChange } =
@@ -119,9 +129,13 @@ export function useOnEnter( props ) {
 			} );
 		}
 
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
+		// Capture phase so we run before writing-flow's ancestor-bubble
+		// keydown handlers that gate on `event.defaultPrevented`.
+		return subscribeDelegatedListener(
+			element,
+			'keydown',
+			onKeyDown,
+			true
+		);
 	}, [] );
 }

packages/components/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 -   `Popover`: Don't close when focus moves into the `@wordpress/ui` compat overlay slot, or is restored to the popover from any portaled descendant. This unblocks nested overlays such as `@wordpress/ui` `Select`, which previously dismissed the host `Popover` on hover and on overlay dismissal ([#78407](https://github.com/WordPress/gutenberg/pull/78407)).
 
+### Internal
+
+-   `Autocomplete`: Share the per-instance `keydown` listener across instances via `subscribeDelegatedListener` so a typical post-editor mount adds 1 native keydown listener on the document instead of one per `RichText` ([#78310](https://github.com/WordPress/gutenberg/pull/78310)).
+
 ## 33.1.0 (2026-05-14)
 
 ### Enhancements

packages/components/src/autocomplete/index.tsx

@@ -8,7 +8,12 @@ import {
 	useReducer,
 	useRef,
 } from '@wordpress/element';
-import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+	useInstanceId,
+	useMergeRefs,
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import {
 	create,
 	slice,
@@ -36,6 +41,9 @@ import type {
 	UseAutocompleteProps,
 } from './types';
 import getNodeText from '../utils/get-node-text';
+import { unlock } from '../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
@@ -390,13 +398,23 @@ export function useAutocompleteProps( options: UseAutocompleteProps ) {
 	const mergedRefs = useMergeRefs( [
 		ref,
 		useRefEffect( ( element: HTMLElement ) => {
-			function _onKeyDown( event: KeyboardEvent ) {
-				onKeyDownRef.current?.( event );
+			function _onKeyDown( event: Event ) {
+				onKeyDownRef.current?.( event as KeyboardEvent );
 			}
-			element.addEventListener( 'keydown', _onKeyDown );
-			return () => {
-				element.removeEventListener( 'keydown', _onKeyDown );
-			};
+			// Capture phase. When the autocomplete popover is open,
+			// Up/Down/Enter/Escape must navigate the completion list —
+			// they shouldn't be consumed by ancestor handlers (e.g.
+			// block-editor's writing-flow) for block navigation, block
+			// splitting, or "move out of parent" actions. Those handlers
+			// fire at bubble phase and gate on `event.defaultPrevented`,
+			// so firing in capture lets us preventDefault first when the
+			// popover is active.
+			return subscribeDelegatedListener(
+				element,
+				'keydown',
+				_onKeyDown,
+				true
+			);
 		}, [] ),
 	] );