@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -29,7 +29,11 @@ import { BackgroundToolsPanel } from '../global-styles/background-panel';
 // - Typography: text color only (font controls disabled).
 // - Background: color + gradient only (image controls disabled).
 // - Elements: link/heading/button/caption colors (unchanged).
-function SectionStyleControls( { blockName, clientId, contentClientIds } ) {
+export function SectionStyleControls( {
+	blockName,
+	clientId,
+	contentClientIds,
+} ) {
 	const settings = useBlockSettings( blockName );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 

package/src/components/keyboard-shortcuts/index.js

@@ -6,13 +6,21 @@ import { useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../use-settings';
+
 function KeyboardShortcuts() {
 	return null;
 }
 
 function KeyboardShortcutsRegister() {
 	// Registering the shortcuts.
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+	const [ blockVisibility ] = useSettings( 'blockVisibility.allowEditing' );
 	useEffect( () => {
 		registerShortcut( {
 			name: 'core/block-editor/copy',
@@ -208,15 +216,24 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/block-editor/toggle-block-visibility',
-			category: 'block',
-			description: __( 'Show or hide the selected block(s).' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'h',
-			},
-		} );
+		// Keep the block visibility shortcut in sync with the theme.json
+		// setting. The setting resolves asynchronously, so the shortcut may be
+		// registered before its value arrives; it must be removed once the
+		// value is known to be `false`, otherwise it lingers in the keyboard
+		// shortcut help list while doing nothing.
+		if ( blockVisibility === false ) {
+			unregisterShortcut( 'core/block-editor/toggle-block-visibility' );
+		} else {
+			registerShortcut( {
+				name: 'core/block-editor/toggle-block-visibility',
+				category: 'block',
+				description: __( 'Show or hide the selected block(s).' ),
+				keyCombination: {
+					modifier: 'primaryShift',
+					character: 'h',
+				},
+			} );
+		}
 
 		registerShortcut( {
 			name: 'core/block-editor/rename',
@@ -227,7 +244,7 @@ function KeyboardShortcutsRegister() {
 				character: 'r',
 			},
 		} );
-	}, [ registerShortcut ] );
+	}, [ registerShortcut, unregisterShortcut, blockVisibility ] );
 
 	return null;
 }

package/src/components/line-height-control/index.js

@@ -96,13 +96,12 @@ const LineHeightControl = ( {
 	return (
 		<div className="block-editor-line-height-control">
 			<NumberControl
+				placeholder={ BASE_DEFAULT_VALUE }
 				{ ...otherProps }
-				__next40pxDefaultSize
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ handleOnChange }
 				label={ __( 'Line height' ) }
-				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
 				spinFactor={ SPIN_FACTOR }
 				value={ value }

package/src/components/link-control/index.js

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useState, useEffect, useMemo } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
@@ -29,6 +29,7 @@ import { isURL, prependHTTPS } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import { useNativeUndo } from '../../utils/native-undo';
 import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
@@ -227,6 +228,7 @@ function LinkControl( {
 
 	const isMountingRef = useRef( true );
 	const wrapperNode = useRef();
+	const wrapperRef = useMergeRefs( [ wrapperNode, useNativeUndo() ] );
 	const textInputRef = useRef();
 	const searchInputRef = useRef();
 	// TODO: Remove entityUrlFallbackRef and previewValue in favor of value prop after taxonomy entity binding
@@ -651,7 +653,10 @@ function LinkControl( {
 	return (
 		<div
 			tabIndex={ -1 }
-			ref={ wrapperNode }
+			// The dialog holds local state that is only committed when the
+			// link is applied, so undo and redo within it must remain the
+			// browser's own.
+			ref={ wrapperRef }
 			className="block-editor-link-control"
 		>
 			{ isCreatingPage && (

package/src/components/link-control/style.scss

@@ -151,7 +151,7 @@ $block-editor-link-control-number-of-actions: 1;
 		width: 100%;
 
 		mark {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 			color: inherit;
 			background-color: transparent;
 		}
@@ -227,7 +227,7 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		mark {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 			color: inherit;
 			background-color: transparent;
 		}

package/src/components/link-control/test/index.js

@@ -3278,7 +3278,7 @@ describe( 'URL validation', () => {
 	] )(
 		'should prevent submission for $description',
 		async ( { inputUrl } ) => {
-			render(
+			const { container } = render(
 				<LinkControl
 					value={ { url: '' } }
 					forceIsEditingLink
@@ -3295,7 +3295,7 @@ describe( 'URL validation', () => {
 			// Wait for validation error to appear
 			await waitFor( () => {
 				expect(
-					screen.getByText( 'Please enter a valid URL.' )
+					within( container ).getByText( 'Please enter a valid URL.' )
 				).toBeInTheDocument();
 			} );
 
@@ -3407,7 +3407,7 @@ describe( 'URL validation', () => {
 	it( 'should show validation error when clicking Apply button with invalid URL', async () => {
 		// When editing an existing link, use Apply button
 		const existingLink = { url: 'https://example.com', title: 'Example' };
-		render(
+		const { container } = render(
 			<LinkControl
 				value={ existingLink }
 				forceIsEditingLink
@@ -3428,7 +3428,7 @@ describe( 'URL validation', () => {
 		await waitFor(
 			() => {
 				expect(
-					screen.getByText( 'Please enter a valid URL.' )
+					within( container ).getByText( 'Please enter a valid URL.' )
 				).toBeVisible();
 			},
 			{ timeout: 100 }
@@ -3441,7 +3441,7 @@ describe( 'URL validation', () => {
 	it( 'should show validation error when pressing Enter to submit with an invalid URL', async () => {
 		// When editing an existing link, use Apply button
 		const existingLink = { url: 'https://example.com', title: 'Example' };
-		render(
+		const { container } = render(
 			<LinkControl
 				value={ existingLink }
 				forceIsEditingLink
@@ -3460,7 +3460,7 @@ describe( 'URL validation', () => {
 		await waitFor(
 			() => {
 				expect(
-					screen.getByText( 'Please enter a valid URL.' )
+					within( container ).getByText( 'Please enter a valid URL.' )
 				).toBeVisible();
 			},
 			{ timeout: 100 }

package/src/components/link-picker/style.scss

@@ -10,7 +10,6 @@
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-15;
-	box-shadow: inset 0 0 0 1px $gray-600;
 	border-color: $gray-600;
 }
 
@@ -51,7 +50,7 @@
 
 .link-preview-button__title {
 	margin-top: $grid-unit-05;
-	font-weight: 500;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	color: $gray-900;
 	display: block;
 }

package/src/components/list-view/block.js

@@ -132,6 +132,8 @@ function ListViewBlock( {
 		blockEditingMode,
 		allowRightClickOverrides,
 		editedSection,
+		viewportSettings,
+		blockVisibilitySetting,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -141,21 +143,24 @@ function ListViewBlock( {
 				getSettings,
 				getEditedContentOnlySection,
 			} = unlock( select( blockEditorStore ) );
+			const settings = getSettings();
 
 			return {
 				block: getBlock( clientId ),
 				blockName: getBlockName( clientId ),
 				blockEditingMode: getBlockEditingModeForClientId( clientId ),
-				allowRightClickOverrides:
-					getSettings().allowRightClickOverrides,
+				allowRightClickOverrides: settings.allowRightClickOverrides,
 				editedSection: getEditedContentOnlySection(),
+				viewportSettings: settings.__experimentalFeatures?.viewport,
+				blockVisibilitySetting:
+					settings.__experimentalFeatures?.blockVisibility
+						?.allowEditing,
 			};
 		},
 		[ clientId ]
 	);
 
 	const isDisabled = blockEditingMode === 'disabled';
-
 	const { canRename } = useBlockRename( blockName );
 
 	const showBlockActions =
@@ -393,6 +398,9 @@ function ListViewBlock( {
 		} else if (
 			isMatch( 'core/block-editor/toggle-block-visibility', event )
 		) {
+			if ( blockVisibilitySetting === false ) {
+				return;
+			}
 			event.preventDefault();
 			const { blocksToUpdate } = getBlocksToUpdate();
 			const blocks = getBlocksByClientId( blocksToUpdate );
@@ -558,7 +566,8 @@ function ListViewBlock( {
 
 	// Determine label based on where block is hidden (not when/current viewport)
 	const blockVisibilityDescription = getBlockVisibilityLabel(
-		block?.attributes?.metadata?.blockVisibility
+		block?.attributes?.metadata?.blockVisibility,
+		viewportSettings
 	);
 
 	const hasSiblings = siblingBlockCount > 0;

package/src/components/list-view/style.scss

@@ -95,7 +95,7 @@
 			box-shadow:
 				inset 0 0 0 1px $white,
 				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-admin-theme-color);
+				var(--wpds-color-stroke-focus);
 		}
 	}
 	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
@@ -272,7 +272,7 @@
 			border-radius: inherit;
 			box-shadow:
 				inset 0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-admin-theme-color);
+				var(--wpds-color-stroke-focus);
 			z-index: 2;
 			pointer-events: none;
 		}
@@ -283,11 +283,10 @@
 		right: 0;
 	}
 
-	&.is-nesting .block-editor-list-view__menu,
-	.block-editor-list-view-block__menu:focus {
+	&.is-nesting .block-editor-list-view__menu {
 		box-shadow:
 			inset 0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-admin-theme-color);
+			var(--wpds-color-stroke-focus);
 		z-index: 1;
 	}
 

package/src/components/media-placeholder/index.js

@@ -46,7 +46,6 @@ const InsertFromURLPopover = ( {
 			onSubmit={ onSubmit }
 		>
 			<InputControl
-				__next40pxDefaultSize
 				label={ __( 'URL' ) }
 				type="text" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)
 				hideLabelFromVision

package/src/components/multi-selection-inspector/style.scss

@@ -5,7 +5,7 @@
 }
 
 .block-editor-multi-selection-inspector__card-title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {

package/src/components/preset-input-control/index.js

@@ -50,6 +50,8 @@ import CustomValueControls from './custom-value-controls';
  * @param {Function} props.onMouseOut          Callback for mouse out events.
  * @param {Function} props.onMouseOver         Callback for mouse over events.
  * @param {Function} props.onUnitChange        Callback when unit changes.
+ * @param {string}   props.placeholder         Placeholder text forwarded to the inner UnitControl when
+ *                                             rendered in custom-value mode.
  * @param {Array}    props.presets             Array of preset objects with name, slug, and size.
  * @param {string}   props.presetType          Type of preset (e.g., 'spacing', 'border-radius').
  * @param {string}   props.selectedUnit        Currently selected unit (e.g., 'px', 'em').
@@ -73,6 +75,7 @@ export default function PresetInputControl( {
 	onMouseOut,
 	onMouseOver,
 	onUnitChange,
+	placeholder,
 	presets = [],
 	presetType,
 	selectedUnit,
@@ -95,7 +98,7 @@ export default function PresetInputControl( {
 	const hasPresets = marks.length > 0;
 	const showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;
 
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : placeholder ?? null;
 
 	const [ minValue, setMinValue ] = useState( minimumCustomValue );
 	const [ showCustomValueControl, setShowCustomValueControl ] = useState(

package/src/components/provider/block-refs-provider.js

@@ -4,11 +4,21 @@
 import { createContext, useMemo } from '@wordpress/element';
 import { observableMap } from '@wordpress/compose';
 
-export const BlockRefs = createContext( { refsMap: observableMap() } );
+// `eventHandlers` maps a block's client ID to a ref holding its `wrapperProps`
+// event handlers, so the writing flow host can call them for a block that
+// supports `editableRoot` (see `useEditableRootEventHandlers`). It rides in this
+// context, next to `refsMap`, as another per-block registry keyed by client ID.
+export const BlockRefs = createContext( {
+	refsMap: observableMap(),
+	eventHandlers: new Map(),
+} );
 BlockRefs.displayName = 'BlockRefsContext';
 
 export function BlockRefsProvider( { children } ) {
-	const value = useMemo( () => ( { refsMap: observableMap() } ), [] );
+	const value = useMemo(
+		() => ( { refsMap: observableMap(), eventHandlers: new Map() } ),
+		[]
+	);
 	return (
 		<BlockRefs.Provider value={ value }>{ children }</BlockRefs.Provider>
 	);

package/src/components/provider/index.js

@@ -102,7 +102,7 @@ function shouldEnableClientSideMediaProcessing() {
  *
  * Returns true when:
  * 1. Full client-side processing is NOT available (otherwise it handles HEIC already)
- * 2. The server has set the __heicUploadSupport flag
+ * 2. The server has set the __clientSideMediaProcessing flag
  * 3. The browser supports createImageBitmap + OffscreenCanvas (e.g. Safari)
  *
  * @return {boolean} Whether HEIC-only canvas processing should be enabled.
@@ -118,7 +118,7 @@ function shouldEnableHeicCanvasProcessing() {
 		return false;
 	}
 
-	if ( ! window.__heicUploadSupport ) {
+	if ( ! window.__clientSideMediaProcessing ) {
 		isHeicCanvasEnabledCache = false;
 		return false;
 	}

package/src/components/provider/use-block-sync.js

@@ -252,13 +252,17 @@ export default function useBlockSync( {
 					cloneBlockWithMapping( block, idMappingRef.current )
 				);
 
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				setHasControlledInnerBlocks( clientId, true );
 
 				if ( subscribedRef.current ) {
 					pendingChangesRef.current.incoming = storeBlocks;
 				}
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				replaceInnerBlocks( clientId, storeBlocks );
 
 				// Invalidate the applied-selection ref so that
@@ -271,7 +275,9 @@ export default function useBlockSync( {
 			if ( subscribedRef.current ) {
 				pendingChangesRef.current.incoming = controlledBlocks;
 			}
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			resetBlocks( controlledBlocks );
 		}
 	};
@@ -280,12 +286,18 @@ export default function useBlockSync( {
 	// containing useBlockSync() unmounts.
 	const unsetControlledBlocks = () => {
 		if ( clientId ) {
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			setHasControlledInnerBlocks( clientId, false );
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			replaceInnerBlocks( clientId, [] );
 		} else {
-			__unstableMarkNextChangeAsNotPersistent();
+			__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
 			resetBlocks( [] );
 		}
 	};

package/src/components/provider/use-media-upload-settings.js

@@ -21,6 +21,8 @@ function useMediaUploadSettings( settings = {} ) {
 			allowedMimeTypes: settings.allowedMimeTypes,
 			allImageSizes: settings.allImageSizes,
 			bigImageSizeThreshold: settings.bigImageSizeThreshold,
+			imageStripMeta: settings.imageStripMeta,
+			imageMaxBitDepth: settings.imageMaxBitDepth,
 		} ),
 		[ settings ]
 	);

package/src/components/responsive-block-control/style.scss

@@ -32,7 +32,7 @@
 }
 
 .block-editor-responsive-block-control__label {
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	margin-bottom: 0.6em;
 	margin-left: -3px; // visual compensation
 }

package/src/components/rich-text/event-listeners/before-input-rules.js

@@ -1,9 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { insert, isCollapsed } from '@wordpress/rich-text';
+import {
+	insert,
+	isCollapsed,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { applyFilters } from '@wordpress/hooks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -11,7 +14,7 @@ import { privateApis as composePrivateApis } from '@wordpress/compose';
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * When typing over a selection, the selection will we wrapped by a matching
@@ -84,10 +87,10 @@ export default ( props ) => ( element ) => {
 		// call few lines above has fully updated the data store state and rerendered
 		// all affected components.
 		window.queueMicrotask( () => {
-			event.target.dispatchEvent( newEvent );
+			element.dispatchEvent( newEvent );
 		} );
 		event.preventDefault();
 	}
 
-	return subscribeDelegatedListener( element, 'beforeinput', onInput, true );
+	return subscribeOwnedListener( element, 'beforeinput', onInput, true );
 };

package/src/components/rich-text/event-listeners/delete.js

@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
-import { isCollapsed, isEmpty } from '@wordpress/rich-text';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+import {
+	isCollapsed,
+	isEmpty,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -54,5 +57,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown );
 };

package/src/components/rich-text/event-listeners/enter.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { ENTER } from '@wordpress/keycodes';
-import { insert, remove } from '@wordpress/rich-text';
+import {
+	insert,
+	remove,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
@@ -10,6 +14,7 @@ import { privateApis as composePrivateApis } from '@wordpress/compose';
  */
 import { unlock } from '../../../lock-unlock';
 
+const { subscribeOwnedListener, ownsSelection } = unlock( richTextPrivateApis );
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
@@ -31,8 +36,9 @@ export default ( props ) => ( element ) => {
 		}
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element.
-		if ( event.target !== element ) {
+		// the target is the element, or whether the element owns the
+		// selection through a focused editing host.
+		if ( event.target !== element && ! ownsSelection( element ) ) {
 			return;
 		}
 
@@ -90,7 +96,7 @@ export default ( props ) => ( element ) => {
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
-	const unsubscribeKeyDownDeprecated = subscribeDelegatedListener(
+	const unsubscribeKeyDownDeprecated = subscribeOwnedListener(
 		element,
 		'keydown',
 		onKeyDownDeprecated,

package/src/components/rich-text/event-listeners/input-events.js

@@ -1,14 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	const { inputEvents } = props.current;
@@ -18,5 +19,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'input', onInput );
+	return subscribeOwnedListener( element, 'input', onInput );
 };

package/src/components/rich-text/event-listeners/input-rules.js

@@ -1,9 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import {
+	insert,
+	toHTMLString,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,7 +19,7 @@ import {
 } from '../../../utils/selection';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export function findSelection( blocks ) {
 	let i = blocks.length;
@@ -160,13 +163,13 @@ export default ( props ) => ( element ) => {
 
 	// Capture phase so these run before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listeners.
-	const unsubscribeInput = subscribeDelegatedListener(
+	const unsubscribeInput = subscribeOwnedListener(
 		element,
 		'input',
 		onInput,
 		true
 	);
-	const unsubscribeCompositionEnd = subscribeDelegatedListener(
+	const unsubscribeCompositionEnd = subscribeOwnedListener(
 		element,
 		'compositionend',
 		onInput,