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,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
+import { useRefEffect, subscribeSharedListener } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,6 +30,12 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
+				// Document-scoped listener: bail when focus didn't land
+				// inside this block's wrapper.
+				if ( ! node.contains( event.target ) ) {
+					return;
+				}
+
 				// When the whole editor is editable, let writing flow handle
 				// selection.
 				if (
@@ -57,11 +63,11 @@ export function useFocusHandler( clientId ) {
 				selectBlock( clientId );
 			}
 
-			node.addEventListener( 'focusin', onFocus );
-
-			return () => {
-				node.removeEventListener( 'focusin', onFocus );
-			};
+			return subscribeSharedListener(
+				node.ownerDocument,
+				'focusin',
+				onFocus
+			);
 		},
 		[ isBlockSelected, selectBlock ]
 	);

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

@@ -1,19 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
-
-function listener( event ) {
-	if ( event.defaultPrevented ) {
-		return;
-	}
-
-	event.preventDefault();
-	event.currentTarget.classList.toggle(
-		'is-hovered',
-		event.type === 'mouseover'
-	);
-}
+import { useRefEffect, subscribeSharedListener } from '@wordpress/compose';
 
 /**
  * Adds `is-hovered` class when the block is hovered and in navigation or
@@ -31,12 +19,34 @@ export function useIsHovered( { isEnabled = true } = {} ) {
 				return;
 			}
 
-			node.addEventListener( 'mouseout', listener );
-			node.addEventListener( 'mouseover', listener );
+			function listener( event ) {
+				if ( event.defaultPrevented ) {
+					return;
+				}
+				if ( ! node.contains( event.target ) ) {
+					return;
+				}
+				event.preventDefault();
+				node.classList.toggle(
+					'is-hovered',
+					event.type === 'mouseover'
+				);
+			}
+
+			const unsubscribeOut = subscribeSharedListener(
+				node.ownerDocument,
+				'mouseout',
+				listener
+			);
+			const unsubscribeOver = subscribeSharedListener(
+				node.ownerDocument,
+				'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,7 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 import { insert, remove } from '@wordpress/rich-text';
+import { subscribeSharedListener } from '@wordpress/compose';
 
 export default ( props ) => ( element ) => {
 	function onKeyDownDeprecated( event ) {
@@ -75,10 +76,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 = subscribeSharedListener(
+		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,6 +4,7 @@
 import { pasteHandler } from '@wordpress/blocks';
 import { isEmpty, insert, create } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
+import { subscribeSharedListener } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -141,8 +142,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 subscribeSharedListener( 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,
+	subscribeSharedListener,
+} from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
@@ -69,6 +73,9 @@ function useEnter( props ) {
 			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
 				return;
 			}
+			if ( event.target !== element ) {
+				return;
+			}
 			const { content, clientId } = propsRef.current;
 			if ( content.length ) {
 				return;
@@ -107,10 +114,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 subscribeSharedListener(
+			element.ownerDocument,
+			'keydown',
+			onKeyDown,
+			true
+		);
 	}, [] );
 }
 

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

@@ -7,7 +7,7 @@ import {
 	cloneBlock,
 } from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
+import { useRefEffect, subscribeSharedListener } from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -29,6 +29,9 @@ export default function useEnter( props ) {
 			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
 				return;
 			}
+			if ( event.target !== element ) {
+				return;
+			}
 			const { content, clientId } = propsRef.current;
 			if ( content.length ) {
 				return;
@@ -82,9 +85,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 subscribeSharedListener(
+			element.ownerDocument,
+			'keydown',
+			onKeyDown,
+			true
+		);
 	}, [] );
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
+import { useRefEffect, subscribeSharedListener } from '@wordpress/compose';
 import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -34,6 +34,10 @@ export default function useSpace( clientId ) {
 					return;
 				}
 
+				if ( event.target !== element ) {
+					return;
+				}
+
 				const selectionStart = getSelectionStart();
 				const selectionEnd = getSelectionEnd();
 				if (
@@ -55,10 +59,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 subscribeSharedListener(
+				element.ownerDocument,
+				'keydown',
+				onKeyDown,
+				true
+			);
 		},
 		[ clientId, indentListItem ]
 	);

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
+import { useRefEffect, subscribeSharedListener } from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -37,6 +37,10 @@ export function useOnEnter( props ) {
 				return;
 			}
 
+			if ( event.target !== element ) {
+				return;
+			}
+
 			const { content, clientId } = propsRef.current;
 
 			// The paragraph should be empty.
@@ -119,9 +123,15 @@ export function useOnEnter( props ) {
 			} );
 		}
 
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
+		// Capture phase so we run before writing-flow's element-level
+		// keydown handlers on ancestor block-list nodes
+		// (`use-input.js`, `use-arrow-nav.js`) that gate on
+		// `event.defaultPrevented`.
+		return subscribeSharedListener(
+			element.ownerDocument,
+			'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 `subscribeSharedListener` 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,
+	subscribeSharedListener,
+} from '@wordpress/compose';
 import {
 	create,
 	slice,
@@ -390,13 +395,28 @@ export function useAutocompleteProps( options: UseAutocompleteProps ) {
 	const mergedRefs = useMergeRefs( [
 		ref,
 		useRefEffect( ( element: HTMLElement ) => {
-			function _onKeyDown( event: KeyboardEvent ) {
-				onKeyDownRef.current?.( event );
+			function _onKeyDown( event: Event ) {
+				// Document-scoped listener: bail when the keydown isn't
+				// for our element.
+				if ( event.target !== element ) {
+					return;
+				}
+				onKeyDownRef.current?.( event as KeyboardEvent );
 			}
-			element.addEventListener( 'keydown', _onKeyDown );
-			return () => {
-				element.removeEventListener( 'keydown', _onKeyDown );
-			};
+			return subscribeSharedListener(
+				element.ownerDocument,
+				'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.
+				true
+			);
 		}, [] ),
 	] );
 

packages/compose/README.md

@@ -153,6 +153,10 @@ _Related_
 
 Given a component returns the enhanced component augmented with a component only re-rendering when its props/state change
 
+### subscribeSharedListener
+
+Undocumented declaration.
+
 ### throttle
 
 A simplified and properly typed version of lodash's `throttle`, that always uses timers instead of sometimes using rAF.

packages/compose/src/index.js

@@ -6,6 +6,8 @@ export * from './utils/debounce';
 export * from './utils/throttle';
 // The `ObservableMap` data structure
 export * from './utils/observable-map';
+// The `subscribeSharedListener` helper for event delegation.
+export { default as subscribeSharedListener } from './utils/subscribe-shared-listener';
 
 // The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
 export { default as compose } from './higher-order/compose';