@wordpress/block-editor 8.0.12-next.33ec3857e2.0 → 8.0.12

package/src/components/iframe/index.js

@@ -164,15 +164,12 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, ...props },
-	ref
-) {
+function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( assets?.styles );
-	const scripts = useParsedAssets( assets?.scripts );
+	const styles = useParsedAssets( window.__editorAssets?.styles );
+	const scripts = useParsedAssets( window.__editorAssets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const setRef = useRefEffect( ( node ) => {

package/src/components/index.js

@@ -24,7 +24,6 @@ export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
-export { default as BlockStyles } from './block-styles';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -141,6 +140,7 @@ export {
 } from './typewriter';
 export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
+export { useCanvasClickRedirect as __unstableUseCanvasClickRedirect } from './use-canvas-click-redirect';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';

package/src/components/inner-blocks/README.md

@@ -41,8 +41,6 @@ _Note:_ A block can render at most a single `InnerBlocks` and `InnerBlocks.Conte
 
 _Note:_ Because the save step will automatically apply props to the element returned by `save`, it is important to include the wrapping `div` in the above simple example even though we are applying no props of our own. In a real-world example, you may have your own attributes to apply to the saved markup, or sibling content adjacent to the rendered nested blocks.
 
-_Note:_ Inner blocks, by default, are not visible inside a WordPress excerpt. If you wish your block to appear then it needs to be returned from the `excerpt_allowed_wrapper_blocks` filter. More details can be found on the [filter reference page](https://developer.wordpress.org/reference/hooks/excerpt_allowed_wrapper_blocks/) page, as well as the [excerpt_remove_blocks](https://developer.wordpress.org/reference/functions/excerpt_remove_blocks/) page.
-
 ## Props
 
 ### `allowedBlocks`

package/src/components/inner-blocks/default-block-appender.js

@@ -16,8 +16,13 @@ import BaseDefaultBlockAppender from '../default-block-appender';
 import withClientId from './with-client-id';
 import { store as blockEditorStore } from '../../store';
 
-export const DefaultBlockAppender = ( { clientId } ) => {
-	return <BaseDefaultBlockAppender rootClientId={ clientId } />;
+export const DefaultBlockAppender = ( { clientId, lastBlockClientId } ) => {
+	return (
+		<BaseDefaultBlockAppender
+			rootClientId={ clientId }
+			lastBlockClientId={ lastBlockClientId }
+		/>
+	);
 };
 
 export default compose( [

package/src/components/inserter/hooks/use-insertion-point.js

@@ -64,19 +64,12 @@ function useInsertionPoint( {
 				_destinationIndex = insertionIndex;
 			} else if ( clientId ) {
 				// Insert after a specific client ID.
-				_destinationIndex = getBlockIndex(
-					clientId,
-					_destinationRootClientId
-				);
+				_destinationIndex = getBlockIndex( clientId );
 			} else if ( ! isAppender && selectedBlockClientId ) {
 				_destinationRootClientId = getBlockRootClientId(
 					selectedBlockClientId
 				);
-				_destinationIndex =
-					getBlockIndex(
-						selectedBlockClientId,
-						_destinationRootClientId
-					) + 1;
+				_destinationIndex = getBlockIndex( selectedBlockClientId ) + 1;
 			} else {
 				// Insert at the end of the list.
 				_destinationIndex = getBlockOrder( _destinationRootClientId )

package/src/components/inserter/index.js

@@ -265,7 +265,7 @@ export default compose( [
 
 					// If the clientId is defined, we insert at the position of the block.
 					if ( clientId ) {
-						return getBlockIndex( clientId, rootClientId );
+						return getBlockIndex( clientId );
 					}
 
 					// If there a selected block, we insert after the selected block.
@@ -275,7 +275,7 @@ export default compose( [
 						end &&
 						getBlockRootClientId( end ) === rootClientId
 					) {
-						return getBlockIndex( end, rootClientId ) + 1;
+						return getBlockIndex( end ) + 1;
 					}
 
 					// Otherwise, we insert at the end of the current rootClientId

package/src/components/inserter/index.native.js

@@ -7,7 +7,7 @@ import { delay } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Dropdown, ToolbarButton, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -34,7 +34,7 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
 const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
-		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
+		title={ __( 'Add block' ) }
 		icon={
 			<Icon
 				icon={ plusCircleFilled }
@@ -343,10 +343,7 @@ export default compose( [
 		const destinationRootClientId = isAnyBlockSelected
 			? getBlockRootClientId( end )
 			: rootClientId;
-		const selectedBlockIndex = getBlockIndex(
-			end,
-			destinationRootClientId
-		);
+		const selectedBlockIndex = getBlockIndex( end );
 		const endOfRootIndex = getBlockOrder( rootClientId ).length;
 		const isSelectedUnmodifiedDefaultBlock = isAnyBlockSelected
 			? isUnmodifiedDefaultBlock( getBlock( end ) )
@@ -364,7 +361,7 @@ export default compose( [
 
 			// If the clientId is defined, we insert at the position of the block.
 			if ( clientId ) {
-				return getBlockIndex( clientId, rootClientId );
+				return getBlockIndex( clientId );
 			}
 
 			// If there is a selected block,

package/src/components/inserter/quick-inserter.js

@@ -56,7 +56,7 @@ export default function QuickInserter( {
 			const { getSettings, getBlockIndex, getBlockCount } = select(
 				blockEditorStore
 			);
-			const index = getBlockIndex( clientId, rootClientId );
+			const index = getBlockIndex( clientId );
 			return {
 				setInserterIsOpened: getSettings()
 					.__experimentalSetIsInserterOpened,

package/src/components/inserter/tabs.native.js

@@ -63,7 +63,7 @@ function InserterTabs( {
 	}, [ tabIndex ] );
 
 	const { tabs, tabKeys } = useMemo( () => {
-		const filteredTabs = InserterTabs.getTabs().filter(
+		const filteredTabs = InserterTabs.TABS.filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return {
@@ -114,9 +114,8 @@ function InserterTabs( {
 }
 
 function TabsControl( { onChangeTab, showReusableBlocks } ) {
-	const tabs = InserterTabs.getTabs();
 	const segments = useMemo( () => {
-		const filteredTabs = tabs.filter(
+		const filteredTabs = InserterTabs.TABS.filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return filteredTabs.map( ( { title } ) => title );
@@ -124,7 +123,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 	const segmentHandler = useCallback(
 		( selectedTab ) => {
-			const tabTitles = tabs.map( ( { title } ) => title );
+			const tabTitles = InserterTabs.TABS.map( ( { title } ) => title );
 			onChangeTab( tabTitles.indexOf( selectedTab ) );
 		},
 		[ onChangeTab ]
@@ -140,7 +139,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 InserterTabs.Control = TabsControl;
 
-InserterTabs.getTabs = () => [
+InserterTabs.TABS = [
 	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
 	{ name: 'reusable', title: __( 'Reusable' ), component: ReusableBlocksTab },
 ];

package/src/components/inspector-controls/block-support-slot-container.js

@@ -6,7 +6,5 @@ import { useContext } from '@wordpress/element';
 
 export default function BlockSupportSlotContainer( { Slot, ...props } ) {
 	const toolsPanelContext = useContext( ToolsPanelContext );
-	return (
-		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
-	);
+	return <Slot { ...props } fillProps={ toolsPanelContext } />;
 }

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -11,37 +11,73 @@ import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
-	const { clientId, attributes } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } = select(
-			blockEditorStore
-		);
+	const { attributes, clientIds, panelId } = useSelect( ( select ) => {
+		const {
+			getBlockAttributes,
+			getMultiSelectedBlockClientIds,
+			getSelectedBlockClientId,
+			hasMultiSelection,
+		} = select( blockEditorStore );
+
+		// When we currently have a multi-selection, the value returned from
+		// `getSelectedBlockClientId()` is `null`. When a `null` value is used
+		// for the `panelId`, a `ToolsPanel` will still allow panel items to
+		// register themselves despite their panelIds not matching.
 		const selectedBlockClientId = getSelectedBlockClientId();
 
+		if ( hasMultiSelection() ) {
+			const selectedBlockClientIds = getMultiSelectedBlockClientIds();
+			const selectedBlockAttributes = selectedBlockClientIds.reduce(
+				( blockAttributes, blockId ) => {
+					blockAttributes[ blockId ] = getBlockAttributes( blockId );
+					return blockAttributes;
+				},
+				{}
+			);
+
+			return {
+				panelId: selectedBlockClientId,
+				clientIds: selectedBlockClientIds,
+				attributes: selectedBlockAttributes,
+			};
+		}
+
 		return {
-			clientId: selectedBlockClientId,
-			attributes: getBlockAttributes( selectedBlockClientId ),
+			panelId: selectedBlockClientId,
+			clientIds: [ selectedBlockClientId ],
+			attributes: {
+				[ selectedBlockClientId ]: getBlockAttributes(
+					selectedBlockClientId
+				),
+			},
 		};
 	}, [] );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const resetAll = ( resetFilters = [] ) => {
-		const { style } = attributes;
-		let newAttributes = { style };
+		const newAttributes = {};
+
+		clientIds.forEach( ( clientId ) => {
+			const { style } = attributes[ clientId ];
+			let newBlockAttributes = { style };
 
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
+			resetFilters.forEach( ( resetFilter ) => {
+				newBlockAttributes = {
+					...newBlockAttributes,
+					...resetFilter( newBlockAttributes ),
+				};
+			} );
+
+			// Enforce a cleaned style object.
+			newBlockAttributes = {
+				...newBlockAttributes,
+				style: cleanEmptyObject( newBlockAttributes.style ),
 			};
-		} );
 
-		// Enforce a cleaned style object.
-		newAttributes = {
-			...newAttributes,
-			style: cleanEmptyObject( newAttributes.style ),
-		};
+			newAttributes[ clientId ] = newBlockAttributes;
+		} );
 
-		updateBlockAttributes( clientId, newAttributes );
+		updateBlockAttributes( clientIds, newAttributes, true );
 	};
 
 	return (
@@ -49,8 +85,8 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			className={ `${ group }-block-support-panel` }
 			label={ label }
 			resetAll={ resetAll }
-			key={ clientId }
-			panelId={ clientId }
+			key={ panelId }
+			panelId={ panelId }
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 		>

package/src/components/inspector-controls/fill.native.js

@@ -14,7 +14,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import groups from './groups';
-import useDisplayBlockControls from '../use-display-block-controls';
+import { useBlockEditContext } from '../block-edit/context';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
@@ -22,14 +22,13 @@ export default function InspectorControlsFill( {
 	__experimentalGroup: group = 'default',
 	...props
 } ) {
-	const isDisplayed = useDisplayBlockControls();
-
+	const { isSelected } = useBlockEditContext();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! isSelected ) {
 		return null;
 	}
 

package/src/components/inspector-controls/groups.js

@@ -5,7 +5,6 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
-const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -16,7 +15,6 @@ const InspectorControlsTypography = createSlotFill(
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
-	border: InspectorControlsBorder,
 	dimensions: InspectorControlsDimensions,
 	typography: InspectorControlsTypography,
 };

package/src/components/inspector-controls/slot.js

@@ -13,6 +13,7 @@ import groups from './groups';
 
 export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
+	bubblesVirtually = true,
 	label,
 	...props
 } ) {
@@ -31,10 +32,14 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
+				<BlockSupportSlotContainer
+					{ ...props }
+					bubblesVirtually={ bubblesVirtually }
+					Slot={ Slot }
+				/>
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually />;
+	return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
 }

package/src/components/letter-spacing-control/index.js

@@ -15,12 +15,12 @@ import useSetting from '../../components/use-setting';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}                  props                      Component props.
- * @param {string}                  props.value                Currently selected letter-spacing.
- * @param {Function}                props.onChange             Handles change in letter-spacing selection.
- * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {Object}   props                      Component props.
+ * @param {string}   props.value                Currently selected letter-spacing.
+ * @param {Function} props.onChange             Handles change in letter-spacing selection.
+ * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
  *
- * @return {WPElement} Letter-spacing control.
+ * @return {WPElement}                          Letter-spacing control.
  */
 export default function LetterSpacingControl( {
 	value,
@@ -33,7 +33,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
-			label={ __( 'Letter spacing' ) }
+			label={ __( 'Letter-spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }
 			units={ units }

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

@@ -114,7 +114,7 @@ Controls the query parameters used to search for suggestions. For example, to li
 
 ```jsx
 <LinkControl
-	suggestionsQuery={ {
+	suggestionQuery={ {
 		type: 'post',
 		subtype: 'page',
 	} }

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

@@ -1634,7 +1634,6 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should have highlighted the first item using the keyboard
-					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						secondSearchSuggestion
 					);
@@ -1649,7 +1648,6 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should be back to highlighting the first search result again
-					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						firstSearchSuggestion
 					);

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

@@ -19,7 +19,6 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
-import { SPACE, ENTER } from '@wordpress/keycodes';
 
 function ListViewBlockSelectButton(
 	{
@@ -48,22 +47,6 @@ function ListViewBlockSelectButton(
 		level
 	);
 
-	// 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
-	// inside the `useOnBlockDrop` hook.
-	const onDragStartHandler = ( event ) => {
-		event.dataTransfer.clearData();
-		onDragStart( event );
-	};
-
-	function onKeyDownHandler( event ) {
-		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
-			event.preventDefault();
-			onClick( event );
-		}
-	}
-
 	return (
 		<>
 			<Button
@@ -72,15 +55,13 @@ function ListViewBlockSelectButton(
 					className
 				) }
 				onClick={ onClick }
-				onKeyDown={ onKeyDownHandler }
 				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
-				onDragStart={ onDragStartHandler }
+				onDragStart={ onDragStart }
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
-				href={ `#block-${ clientId }` }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

package/src/components/list-view/use-list-view-drop-zone.js

@@ -226,7 +226,7 @@ export default function useListViewDropZone() {
 					return {
 						clientId,
 						rootClientId,
-						blockIndex: getBlockIndex( clientId, rootClientId ),
+						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
 						isDraggedBlock: isBlockDrag
 							? draggedBlockClientIds.includes( clientId )

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

@@ -75,7 +75,6 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
-	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -329,7 +328,6 @@ export function MediaPlaceholder( {
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
 				onSelect={ onSelect }
-				onClose={ onClose }
 				allowedTypes={ allowedTypes }
 				value={
 					Array.isArray( value )

package/src/components/media-replace-flow/index.js

@@ -39,7 +39,6 @@ const MediaReplaceFlow = ( {
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
-	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -137,7 +136,6 @@ const MediaReplaceFlow = ( {
 							value={ mediaId }
 							onSelect={ ( media ) => selectMedia( media ) }
 							allowedTypes={ allowedTypes }
-							onClose={ onCloseModal }
 							render={ ( { open } ) => (
 								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }

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

@@ -7,7 +7,7 @@ import { last, noop } from 'lodash';
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
@@ -83,6 +83,15 @@ export default function useBlockSync( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
 	const { getBlockName, getBlocks } = registry.select( blockEditorStore );
+	const isControlled = useSelect(
+		( select ) => {
+			return (
+				! clientId ||
+				select( blockEditorStore ).areInnerBlocksControlled( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 	const subscribed = useRef( false );
@@ -97,15 +106,21 @@ export default function useBlockSync( {
 		// and so it would already be persisted.
 		__unstableMarkNextChangeAsNotPersistent();
 		if ( clientId ) {
-			setHasControlledInnerBlocks( clientId, true );
-			__unstableMarkNextChangeAsNotPersistent();
-			const storeBlocks = controlledBlocks.map( ( block ) =>
-				cloneBlock( block )
-			);
-			if ( subscribed.current ) {
-				pendingChanges.current.incoming = storeBlocks;
-			}
-			replaceInnerBlocks( clientId, storeBlocks );
+			// It is important to batch here because otherwise,
+			// as soon as `setHasControlledInnerBlocks` is called
+			// the effect to restore might be triggered
+			// before the actual blocks get set properly in state.
+			registry.batch( () => {
+				setHasControlledInnerBlocks( clientId, true );
+				const storeBlocks = controlledBlocks.map( ( block ) =>
+					cloneBlock( block )
+				);
+				if ( subscribed.current ) {
+					pendingChanges.current.incoming = storeBlocks;
+				}
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceInnerBlocks( clientId, storeBlocks );
+			} );
 		} else {
 			if ( subscribed.current ) {
 				pendingChanges.current.incoming = controlledBlocks;
@@ -157,6 +172,15 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	useEffect( () => {
+		// When the block becomes uncontrolled, it means its inner state has been reset
+		// we need to take the blocks again from the external value property.
+		if ( ! isControlled ) {
+			pendingChanges.current.outgoing = [];
+			setControlledBlocks();
+		}
+	}, [ isControlled ] );
+
 	useEffect( () => {
 		const {
 			getSelectionStart,
@@ -164,6 +188,7 @@ export default function useBlockSync( {
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
 			__unstableIsLastBlockChangeIgnored,
+			areInnerBlocksControlled,
 		} = registry.select( blockEditorStore );
 
 		let blocks = getBlocks( clientId );
@@ -182,8 +207,17 @@ export default function useBlockSync( {
 			if ( clientId !== null && getBlockName( clientId ) === null )
 				return;
 
-			const newIsPersistent = isLastBlockChangePersistent();
+			// When RESET_BLOCKS on parent blocks get called, the controlled blocks
+			// can reset to uncontrolled, in these situations, it means we need to populate
+			// the blocks again from the external blocks (the value property here)
+			// and we should stop triggering onChange
+			const isStillControlled =
+				! clientId || areInnerBlocksControlled( clientId );
+			if ( ! isStillControlled ) {
+				return;
+			}
 
+			const newIsPersistent = isLastBlockChangePersistent();
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;

package/src/components/rich-text/file-paste-handler.js

@@ -5,9 +5,7 @@ import { createBlobURL } from '@wordpress/blob';
 
 export function filePasteHandler( files ) {
 	return files
-		.filter( ( { type } ) =>
-			/^image\/(?:jpe?g|png|gif|webp)$/.test( type )
-		)
+		.filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) )
 		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
 		.join( '' );
 }

package/src/components/rich-text/use-input-rules.js

@@ -11,7 +11,6 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { preventEventDiscovery } from './prevent-event-discovery';
 
 export function useInputRules( props ) {
 	const {
@@ -86,7 +85,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				preventEventDiscovery( value )
+				value
 			);
 
 			if ( transformed !== value ) {

package/src/components/selection-scroll-into-view/index.js

@@ -12,7 +12,6 @@ import deprecated from '@wordpress/deprecated';
 export function MultiSelectScrollIntoView() {
 	deprecated( 'wp.blockEditor.MultiSelectScrollIntoView', {
 		hint: 'This behaviour is now built-in.',
-		since: '5.8',
 	} );
 	return null;
 }