@wordpress/block-editor 15.20.0 → 15.21.1

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/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 );
 };

package/src/components/rich-text/index.js

@@ -51,36 +51,6 @@ inputEventContext.displayName = 'inputEventContext';
 
 const instanceIdKey = Symbol( 'instanceId' );
 
-/**
- * Removes props used for the native version of RichText so that they are not
- * passed to the DOM element and log warnings.
- *
- * @param {Object} props Props to filter.
- *
- * @return {Object} Filtered props.
- */
-function removeNativeProps( props ) {
-	const {
-		__unstableMobileNoFocusOnMount,
-		deleteEnter,
-		placeholderTextColor,
-		textAlign,
-		selectionColor,
-		tagsToEliminate,
-		disableEditingMenu,
-		fontSize,
-		fontFamily,
-		fontWeight,
-		fontStyle,
-		minWidth,
-		maxWidth,
-		disableSuggestions,
-		disableAutocorrection,
-		...restProps
-	} = props;
-	return restProps;
-}
-
 export function RichTextWrapper(
 	{
 		children,
@@ -113,8 +83,6 @@ export function RichTextWrapper(
 	},
 	forwardedRef
 ) {
-	props = removeNativeProps( props );
-
 	if ( onSplit ) {
 		deprecated( 'wp.blockEditor.RichText onSplit prop', {
 			since: '6.4',
@@ -532,7 +500,7 @@ const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
 			__unstableAllowPrefixTransformations,
 			readOnly,
 			...contentProps
-		} = removeNativeProps( props );
+		} = props;
 		return (
 			<Tag
 				ref={ ref }

package/src/components/unit-control/README.md

@@ -1,6 +1,6 @@
 # UnitControl
 
-UnitControl component allows the user to set a value as well as a unit (e.g. `px`). The allowed units are derived from the (experimental) `theme.json` settings file .
+UnitControl component allows the user to set a value as well as a unit (e.g. `px`). The allowed units are derived from the (experimental) `theme.json` settings file.
 
 ```js
 // theme.json

package/src/components/url-popover/README.md

@@ -123,7 +123,7 @@ drawer.
 ## Useful UI pieces
 
 The URLPopover exposes two components that may be used as child components to make the UI creation process easier.
-Although in the editor these components are used inside URLPopover and they were built with URLPopover use cases in mind, it maybe is possible and perfectly fine to use them standalone if they fit a use-case.
+Although in the editor these components are used inside URLPopover and they were built with URLPopover use cases in mind, it may be possible and perfectly fine to use them standalone if they fit a use-case.
 
 ### LinkViewer
 

package/src/components/use-block-commands/index.js

@@ -93,8 +93,8 @@ const getTransformCommands = () =>
 		}
 
 		// Simple block transformation based on the `Block Transforms` API.
-		function onBlockTransform( name ) {
-			const newBlocks = switchToBlockType( blocks, name );
+		function onBlockTransform( name, variationName ) {
+			const newBlocks = switchToBlockType( blocks, name, variationName );
 			replaceBlocks( clientIds, newBlocks );
 			selectForMultipleBlocks( newBlocks );
 		}
@@ -117,7 +117,7 @@ const getTransformCommands = () =>
 
 		const commands = possibleBlockTransformations.map(
 			( transformation ) => {
-				const { name, title, icon } = transformation;
+				const { id, name, title, icon, variationName } = transformation;
 				/*
 				 * Command menu uses Icon from @wordpress/icons, which expects a ReactElement
 				 * (cloneElement). Normalize to blockDefaultIcon to avoid crash. See #55668 / PR #55676.
@@ -132,13 +132,13 @@ const getTransformCommands = () =>
 				return {
 					name:
 						'core/block-editor/transform-to-' +
-						name.replace( '/', '-' ),
+						( id || name ).replace( /\//g, '-' ),
 					/* translators: %s: Block or block variation name. */
 					label: sprintf( __( 'Transform to %s' ), title ),
 					icon: blockIcon?.src,
 					category: 'command',
 					callback: ( { close } ) => {
-						onBlockTransform( name );
+						onBlockTransform( name, variationName );
 						close();
 					},
 				};