@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

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

@@ -22,7 +22,6 @@ import {
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**
@@ -36,7 +35,6 @@ import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { getBlockVisibilityLabel } from '../block-visibility';
 
 const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
@@ -55,6 +53,7 @@ function ListViewBlockSelectButton(
 		draggable,
 		isExpanded,
 		ariaDescribedBy,
+		visibilityLabel,
 	},
 	ref
 ) {
@@ -64,14 +63,10 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { hasPatternName, blockVisibility } = useSelect(
+	const hasPatternName = useSelect(
 		( select ) => {
 			const { getBlockAttributes } = unlock( select( blockEditorStore ) );
-			const attributes = getBlockAttributes( clientId );
-			return {
-				hasPatternName: !! attributes?.metadata?.patternName,
-				blockVisibility: attributes?.metadata?.blockVisibility,
-			};
+			return !! getBlockAttributes( clientId )?.metadata?.patternName;
 		},
 		[ clientId ]
 	);
@@ -80,9 +75,6 @@ function ListViewBlockSelectButton(
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
-	// Determine visibility label from blockVisibility metadata
-	const visibilityLabel = getBlockVisibilityLabel( blockVisibility );
-
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
 	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
@@ -166,9 +158,12 @@ function ListViewBlockSelectButton(
 					</span>
 				) : null }
 				{ !! visibilityLabel && (
-					// TODO: `visibilityLabel` is not exposed to
-					// assistive technology — the trigger is
-					// `aria-hidden`, so the label is sighted-hover-only.
+					// The tooltip below is a sighted-hover affordance for
+					// the (decorative) visibility icon. The same
+					// `visibilityLabel` is exposed to assistive technology
+					// via the row's `aria-describedby`, which references the
+					// hidden `AriaReferencedText` rendered by the parent
+					// `ListViewBlock`.
 					<Tooltip.Root>
 						<Tooltip.Trigger
 							render={

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

@@ -630,6 +630,7 @@ function ListViewBlock( {
 							isExpanded={ canEditBlock ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
+							visibilityLabel={ blockVisibilityDescription }
 						/>
 						<AriaReferencedText id={ descriptionId }>
 							{ [

package/src/components/media-placeholder/README.md

@@ -38,7 +38,6 @@ This property is similar to the `allowedTypes` property. The difference is the f
 
 -   Type: `String`
 -   Required: No
--   Platform: Web
 
 ### addToGallery
 
@@ -48,7 +47,6 @@ If false the gallery media modal opens in the edit mode where the user can edit
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web
 
 ### allowedTypes
 
@@ -60,16 +58,6 @@ This property is similar to the `accept` property. The difference is the format
 
 -   Type: `Array`
 -   Required: No
--   Platform: Web | Mobile
-
-### autoOpenMediaUpload
-
-If true, the MediaUpload component auto-opens the picker of the respective platform.
-
-- Type: `Boolean`
-- Required: No
-- Default: `false`
-- Platform: Mobile
 
 ### className
 
@@ -77,7 +65,6 @@ Class name added to the placeholder.
 
 -   Type: `String`
 -   Required: No
--   Platform: Web
 
 ### disableDropZone
 
@@ -102,7 +89,6 @@ Icon to display left of the title. When passed as a `String`, the icon will be r
 
 -   Type: `String|Component`
 -   Required: No
--   Platform: Web | Mobile
 
 ### isAppender
 
@@ -112,7 +98,6 @@ If false the default placeholder style is used.
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web | Mobile
 
 ### disableMediaButtons
 
@@ -121,7 +106,6 @@ If true, only the Drop Zone will be rendered. No UI controls to upload the media
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web | Mobile
 
 ### labels
 
@@ -129,7 +113,6 @@ An object that can contain a `title` and `instructions` properties. These proper
 
 -   Type: `Object`
 -   Required: No
--   Platform: Web | Mobile
 
 ### multiple
 
@@ -138,7 +121,6 @@ Whether to allow multiple selection of files or not. This property will also acc
 -   Type: `Boolean|String`
 -   Required: No
 -   Default: `false`
--   Platform: Web
 
 ### mediaPreview
 
@@ -146,7 +128,6 @@ The component is rendered as a preview in the placeholder.
 
 -   Type: `Component`
 -   Required: No
--   Platform: Web
 
 ### onError
 
@@ -154,7 +135,6 @@ Callback called when an upload error happens.
 
 -   Type: `Function`
 -   Required: No
--   Platform: Web
 
 ### onFilesPreUpload
 
@@ -164,7 +144,6 @@ It receives an array with the files to upload before to the final process. It me
 -   Type: `Function`
 -   Required: No
 -   Default: `Function` noop
--   Platform: Web
 
 ### onSelect
 
@@ -173,12 +152,8 @@ The call back receives an array with the new files. Each element of the collecti
 
 -   Type: `Function`
 -   Required: Yes
--   Platform: Web | Mobile
-
-The argument of the callback is an object containing the following properties:
 
--   Web: `{ url, alt, id, link, caption, sizes, media_details }`
--   Mobile: `{ id, url }`
+The argument of the callback is an object containing the following properties: `{ url, alt, id, link, caption, sizes, media_details }`.
 
 ### value
 
@@ -186,7 +161,6 @@ An object or an array of objects that contain media ID (`id` property) to be sel
 
 -   Type: `Object|Array`
 -   Required: No
--   Platform: Web
 
 ### onSelectURL
 
@@ -194,7 +168,6 @@ Callback called when urls can be configured. No media insertion from url will be
 
 -   Type: `Function`
 -   Required: No
--   Platform: Web
 
 ### handleUpload
 
@@ -203,7 +176,6 @@ When the value is set to `false` or returned as `false`, the handling of the upl
 -   Type: `Boolean|Function`
 -   Required: No
 -   Default: `true`
--   Platform: Web
 
 ## Extend
 

package/src/components/media-upload/README.md

@@ -62,7 +62,6 @@ If allowedTypes is unset all mime types should be allowed.
 
 -   Type: `Array`
 -   Required: No
--   Platform: Web | Mobile
 
 ### mode
 
@@ -71,7 +70,6 @@ Value of Frame content default mode like 'browse', 'upload' etc.
 -   Type: `String`
 -   Required: No
 -   Default: false
--   Platform: Web
 
 ### multiple
 
@@ -80,7 +78,6 @@ Whether to allow multiple selection of files or not. This property will also acc
 -   Type: `Boolean|String`
 -   Required: No
 -   Default: false
--   Platform: Web
 
 ### value
 
@@ -88,7 +85,6 @@ Media ID (or media IDs if multiple is true) to be selected by default when openi
 
 -   Type: `Number|Array`
 -   Required: No
--   Platform: Web
 
 ### onClose
 
@@ -109,7 +105,6 @@ The `image.sizes.full` resolution does always exist. Other defined sizes are onl
 
 -   Type: `Function`
 -   Required: Yes
--   Platform: Web | Mobile
 
 ### title
 
@@ -118,7 +113,6 @@ Title displayed in the media modal.
 -   Type: `String`
 -   Required: No
 -   Default: `Select or Upload Media`
--   Platform: Web
 
 ### modalClass
 
@@ -126,7 +120,6 @@ CSS class added to the media modal frame.
 
 -   Type: `String`
 -   Required: No
--   Platform: Web
 
 ### addToGallery
 
@@ -137,16 +130,6 @@ Only applies if `gallery === true`.
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web
-
-### autoOpen
-
-If true, the picker of the respective platform auto-opens.
-
-- Type: `Boolean`
-- Required: No
-- Default: `false`
-- Platform: Mobile
 
 ### gallery
 
@@ -155,7 +138,6 @@ If true, the component will initiate all the states required to represent a gall
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web
 
 ## render
 
@@ -163,7 +145,6 @@ A callback invoked to render the Button opening the media library.
 
 -   Type: `Function`
 -   Required: Yes
--   Platform: Web | Mobile
 
 The first argument of the callback is an object containing the following properties:
 

package/src/components/preset-input-control/custom-value-controls.js

@@ -6,7 +6,6 @@ import {
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

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

@@ -277,6 +277,46 @@ describe( 'useBlockSync hook', () => {
 		expect( onChange ).not.toHaveBeenCalled();
 	} );
 
+	it( 'passes undoIgnore when a non-persistent block change ignores history', async () => {
+		const onChange = jest.fn();
+		const onInput = jest.fn();
+		const value1 = [
+			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
+		];
+		let registry;
+		const setRegistry = ( reg ) => {
+			registry = reg;
+		};
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
+		onChange.mockClear();
+		onInput.mockClear();
+
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
+		registry
+			.dispatch( blockEditorStore )
+			.updateBlockAttributes( 'a', { foo: 2 } );
+
+		expect( onInput ).toHaveBeenCalledWith(
+			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
+			expect.objectContaining( {
+				selection: expect.any( Object ),
+				undoIgnore: true,
+			} )
+		);
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
 	it( 'calls onChange if a persistent change occurs', async () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();

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

@@ -342,6 +342,7 @@ export default function useBlockSync( {
 		const {
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
+			__unstableGetLastBlockChangeHistoryMode,
 			__unstableIsLastBlockChangeIgnored,
 			areInnerBlocksControlled,
 			getBlockParents,
@@ -349,6 +350,7 @@ export default function useBlockSync( {
 
 		let blocks = getBlocks( clientId );
 		let isPersistent = isLastBlockChangePersistent();
+		let blockHistoryMode = __unstableGetLastBlockChangeHistoryMode();
 		let previousAreBlocksDifferent = false;
 		let prevSelectionStart = getSelectionStart();
 		let prevSelectionEnd = getSelectionEnd();
@@ -367,6 +369,8 @@ export default function useBlockSync( {
 			}
 
 			const newIsPersistent = isLastBlockChangePersistent();
+			const newBlockHistoryMode =
+				__unstableGetLastBlockChangeHistoryMode();
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;
@@ -377,6 +381,7 @@ export default function useBlockSync( {
 			) {
 				pendingChangesRef.current.incoming = null;
 				isPersistent = newIsPersistent;
+				blockHistoryMode = newBlockHistoryMode;
 				return;
 			}
 
@@ -409,6 +414,7 @@ export default function useBlockSync( {
 				registry.batch( () => {
 					if ( blocksChanged ) {
 						isPersistent = newIsPersistent;
+						blockHistoryMode = newBlockHistoryMode;
 
 						// For inner block controllers (clientId is set), restore external IDs
 						// before passing blocks to the parent.
@@ -438,9 +444,13 @@ export default function useBlockSync( {
 						const updateParent = isPersistent
 							? onChangeRef.current
 							: onInputRef.current;
-						updateParent( blocksForParent, {
+						const updateOptions = {
 							selection: selectionForParent,
-						} );
+						};
+						if ( blockHistoryMode === 'ignore' ) {
+							updateOptions.undoIgnore = true;
+						}
+						updateParent( blocksForParent, updateOptions );
 					}
 
 					if (

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

@@ -3,11 +3,15 @@
  */
 import { insert, isCollapsed } from '@wordpress/rich-text';
 import { applyFilters } from '@wordpress/hooks';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * When typing over a selection, the selection will we wrapped by a matching
@@ -85,8 +89,5 @@ export default ( props ) => ( element ) => {
 		event.preventDefault();
 	}
 
-	element.addEventListener( 'beforeinput', onInput );
-	return () => {
-		element.removeEventListener( 'beforeinput', onInput );
-	};
+	return subscribeDelegatedListener( element, 'beforeinput', onInput, true );
 };

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

@@ -3,6 +3,14 @@
  */
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 import { isCollapsed, isEmpty } 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 onKeyDown( event ) {
@@ -46,8 +54,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
-	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
-	};
+	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
 };

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

@@ -88,9 +88,16 @@ export default ( props ) => ( element ) => {
 		'keydown',
 		onKeyDown
 	);
-	element.addEventListener( 'keydown', onKeyDownDeprecated );
+	// Capture phase so this runs before ancestor (writing flow) bubble
+	// handlers, matching the timing of the previous raw element listener.
+	const unsubscribeKeyDownDeprecated = subscribeDelegatedListener(
+		element,
+		'keydown',
+		onKeyDownDeprecated,
+		true
+	);
 	return () => {
 		unsubscribeKeyDown();
-		element.removeEventListener( 'keydown', onKeyDownDeprecated );
+		unsubscribeKeyDownDeprecated();
 	};
 };

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

@@ -1,3 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
+
 export default ( props ) => ( element ) => {
 	const { inputEvents } = props.current;
 	function onInput( event ) {
@@ -6,8 +18,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'input', onInput );
-	return () => {
-		element.removeEventListener( 'input', onInput );
-	};
+	return subscribeDelegatedListener( element, 'input', onInput );
 };

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

@@ -3,6 +3,7 @@
  */
 import { insert, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,
 } from '../../../utils/selection';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export function findSelection( blocks ) {
 	let i = blocks.length;
@@ -154,10 +158,22 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'input', onInput );
-	element.addEventListener( 'compositionend', onInput );
+	// Capture phase so these run before ancestor (writing flow) bubble
+	// handlers, matching the timing of the previous raw element listeners.
+	const unsubscribeInput = subscribeDelegatedListener(
+		element,
+		'input',
+		onInput,
+		true
+	);
+	const unsubscribeCompositionEnd = subscribeDelegatedListener(
+		element,
+		'compositionend',
+		onInput,
+		true
+	);
 	return () => {
-		element.removeEventListener( 'input', onInput );
-		element.removeEventListener( 'compositionend', onInput );
+		unsubscribeInput();
+		unsubscribeCompositionEnd();
 	};
 };

package/src/components/rich-text/event-listeners/insert-replacement-text.js

@@ -1,7 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * When the browser is about to auto correct, add an undo level so the user can
@@ -21,8 +29,5 @@ export default ( props ) => ( element ) => {
 			.__unstableMarkLastChangeAsPersistent();
 	}
 
-	element.addEventListener( 'beforeinput', onInput );
-	return () => {
-		element.removeEventListener( 'beforeinput', onInput );
-	};
+	return subscribeDelegatedListener( element, 'beforeinput', onInput );
 };

package/src/components/rich-text/event-listeners/remove-browser-shortcuts.js

@@ -2,6 +2,14 @@
  * WordPress dependencies
  */
 import { isKeyboardEvent } from '@wordpress/keycodes';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * Hook to prevent default behaviors for key combinations otherwise handled
@@ -17,8 +25,5 @@ export default () => ( node ) => {
 			event.preventDefault();
 		}
 	}
-	node.addEventListener( 'keydown', onKeydown );
-	return () => {
-		node.removeEventListener( 'keydown', onKeydown );
-	};
+	return subscribeDelegatedListener( node, 'keydown', onKeydown, true );
 };

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

@@ -1,3 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
+
 export default ( props ) => ( element ) => {
 	const { keyboardShortcuts } = props.current;
 	function onKeyDown( event ) {
@@ -6,8 +18,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
-	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
-	};
+	return subscribeDelegatedListener( element, 'keydown', onKeyDown, true );
 };

package/src/components/rich-text/event-listeners/undo-automatic-change.js

@@ -2,11 +2,15 @@
  * WordPress dependencies
  */
 import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -38,8 +42,5 @@ export default ( props ) => ( element ) => {
 		__experimentalUndo();
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
-	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
-	};
+	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
 };