@wordpress/block-editor 9.1.0 → 9.4.0

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
 import { createContext, useState, useMemo } from '@wordpress/element';
 
@@ -36,9 +36,8 @@ function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
 		( select ) => {
-			const { getSettings, isNavigationMode: _isNavigationMode } = select(
-				blockEditorStore
-			);
+			const { getSettings, isNavigationMode: _isNavigationMode } =
+				select( blockEditorStore );
 			const { outlineMode, focusMode } = getSettings();
 			return {
 				isOutlineMode: outlineMode,
@@ -48,6 +47,23 @@ function Root( { className, ...settings } ) {
 		},
 		[]
 	);
+	const { setBlockVisibility } = useDispatch( blockEditorStore );
+	const intersectionObserver = useMemo( () => {
+		const { IntersectionObserver: Observer } = window;
+
+		if ( ! Observer ) {
+			return;
+		}
+
+		return new Observer( ( entries ) => {
+			const updates = {};
+			for ( const entry of entries ) {
+				const clientId = entry.target.getAttribute( 'data-block' );
+				updates[ clientId ] = entry.isIntersecting;
+			}
+			setBlockVisibility( updates );
+		} );
+	}, [] );
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			ref: useMergeRefs( [
@@ -65,7 +81,9 @@ function Root( { className, ...settings } ) {
 	);
 	return (
 		<elementContext.Provider value={ element }>
-			<div { ...innerBlocksProps } />
+			<IntersectionObserver.Provider value={ intersectionObserver }>
+				<div { ...innerBlocksProps } />
+			</IntersectionObserver.Provider>
 		</elementContext.Provider>
 	);
 }
@@ -90,34 +108,17 @@ function Items( {
 	__experimentalAppenderTagName,
 	__experimentalLayout: layout = defaultLayout,
 } ) {
-	const [ intersectingBlocks, setIntersectingBlocks ] = useState( new Set() );
-	const intersectionObserver = useMemo( () => {
-		const { IntersectionObserver: Observer } = window;
-
-		if ( ! Observer ) {
-			return;
-		}
-
-		return new Observer( ( entries ) => {
-			setIntersectingBlocks( ( oldIntersectingBlocks ) => {
-				const newIntersectingBlocks = new Set( oldIntersectingBlocks );
-				for ( const entry of entries ) {
-					const clientId = entry.target.getAttribute( 'data-block' );
-					const action = entry.isIntersecting ? 'add' : 'delete';
-					newIntersectingBlocks[ action ]( clientId );
-				}
-				return newIntersectingBlocks;
-			} );
-		} );
-	}, [ setIntersectingBlocks ] );
-	const { order, selectedBlocks } = useSelect(
+	const { order, selectedBlocks, visibleBlocks } = useSelect(
 		( select ) => {
-			const { getBlockOrder, getSelectedBlockClientIds } = select(
-				blockEditorStore
-			);
+			const {
+				getBlockOrder,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+			} = select( blockEditorStore );
 			return {
 				order: getBlockOrder( rootClientId ),
 				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
 			};
 		},
 		[ rootClientId ]
@@ -125,24 +126,22 @@ function Items( {
 
 	return (
 		<LayoutProvider value={ layout }>
-			<IntersectionObserver.Provider value={ intersectionObserver }>
-				{ order.map( ( clientId ) => (
-					<AsyncModeProvider
-						key={ clientId }
-						value={
-							// Only provide data asynchronously if the block is
-							// not visible and not selected.
-							! intersectingBlocks.has( clientId ) &&
-							! selectedBlocks.includes( clientId )
-						}
-					>
-						<BlockListBlock
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-						/>
-					</AsyncModeProvider>
-				) ) }
-			</IntersectionObserver.Provider>
+			{ order.map( ( clientId ) => (
+				<AsyncModeProvider
+					key={ clientId }
+					value={
+						// Only provide data asynchronously if the block is
+						// not visible and not selected.
+						! visibleBlocks.has( clientId ) &&
+						! selectedBlocks.includes( clientId )
+					}
+				>
+					<BlockListBlock
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+					/>
+				</AsyncModeProvider>
+			) ) }
 			{ order.length < 1 && placeholder }
 			<BlockListAppender
 				tagName={ __experimentalAppenderTagName }

package/src/components/block-list/index.native.js

@@ -70,22 +70,18 @@ export class BlockList extends Component {
 		};
 		this.renderItem = this.renderItem.bind( this );
 		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
-		this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind(
-			this
-		);
+		this.onCaretVerticalPositionChange =
+			this.onCaretVerticalPositionChange.bind( this );
 		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
 		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
-		this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind(
-			this
-		);
-		this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind(
-			this
-		);
+		this.shouldFlatListPreventAutomaticScroll =
+			this.shouldFlatListPreventAutomaticScroll.bind( this );
+		this.shouldShowInnerBlockAppender =
+			this.shouldShowInnerBlockAppender.bind( this );
 		this.renderEmptyList = this.renderEmptyList.bind( this );
 		this.getExtraData = this.getExtraData.bind( this );
-		this.getCellRendererComponent = this.getCellRendererComponent.bind(
-			this
-		);
+		this.getCellRendererComponent =
+			this.getCellRendererComponent.bind( this );
 
 		this.onLayout = this.onLayout.bind( this );
 
@@ -241,12 +237,8 @@ export class BlockList extends Component {
 		} = this.props;
 		const { parentScrollRef, onScroll } = extraProps;
 
-		const {
-			blockToolbar,
-			blockBorder,
-			headerToolbar,
-			floatingToolbar,
-		} = styles;
+		const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
+			styles;
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
@@ -456,9 +448,8 @@ export default compose( [
 		}
 	),
 	withDispatch( ( dispatch ) => {
-		const { insertBlock, replaceBlock, clearSelectedBlock } = dispatch(
-			blockEditorStore
-		);
+		const { insertBlock, replaceBlock, clearSelectedBlock } =
+			dispatch( blockEditorStore );
 
 		return {
 			clearSelectedBlock,

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

@@ -293,7 +293,7 @@
 
 // Spotlight mode. Fade out blocks unless they contain a selected block.
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-	opacity: 0.5;
+	opacity: 0.2;
 	transition: opacity 0.1s linear;
 	@include reduce-motion("transition");
 

package/src/components/block-list/test/block-list-context.native.js

@@ -139,10 +139,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "adds a new block's layout data at root level with inner blocks", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};
@@ -180,10 +178,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "adds a new block's layout data at deep level", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};
@@ -208,10 +204,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "deletes a block's layout data at root level", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};
@@ -230,10 +224,8 @@ describe( 'updateBlocksLayouts', () => {
 	} );
 
 	it( "deletes a block's layout data at a deep level", () => {
-		const {
-			findBlockLayoutByClientId,
-			updateBlocksLayouts,
-		} = DEFAULT_BLOCK_LIST_CONTEXT;
+		const { findBlockLayoutByClientId, updateBlocksLayouts } =
+			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
 			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
 		};

package/src/components/block-list/use-block-props/index.js

@@ -62,9 +62,12 @@ export function useBlockProps(
 	props = {},
 	{ __unstableIsHtml, __unstableIsDisabled = false } = {}
 ) {
-	const { clientId, className, wrapperProps = {}, isAligned } = useContext(
-		BlockListBlockContext
-	);
+	const {
+		clientId,
+		className,
+		wrapperProps = {},
+		isAligned,
+	} = useContext( BlockListBlockContext );
 	const {
 		index,
 		mode,

package/src/components/block-list/use-block-props/use-block-custom-class-name.js

@@ -22,9 +22,8 @@ export function useBlockCustomClassName( clientId ) {
 	// as much.
 	return useSelect(
 		( select ) => {
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const attributes = getBlockAttributes( clientId );
 
 			if ( ! attributes?.className ) {

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -24,9 +24,8 @@ export function useEventHandlers( clientId ) {
 		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
 		[ clientId ]
 	);
-	const { getBlockRootClientId, getBlockIndex } = useSelect(
-		blockEditorStore
-	);
+	const { getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
 	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(

package/src/components/block-list/use-in-between-inserter.js

@@ -27,9 +27,8 @@ export function useInBetweenInserter() {
 		getSelectedBlockClientIds,
 		getTemplateLock,
 	} = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const { showInsertionPoint, hideInsertionPoint } =
+		useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {

package/src/components/block-list-appender/index.js

@@ -93,11 +93,8 @@ function BlockListAppender( {
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
-	const {
-		canInsertBlockType,
-		getTemplateLock,
-		getSelectedBlockClientId,
-	} = select( blockEditorStore );
+	const { canInsertBlockType, getTemplateLock, getSelectedBlockClientId } =
+		select( blockEditorStore );
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),

package/src/components/block-list-appender/index.native.js

@@ -48,9 +48,8 @@ function BlockListAppender( {
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
-	const { getBlockOrder, canInsertBlockType, getTemplateLock } = select(
-		blockEditorStore
-	);
+	const { getBlockOrder, canInsertBlockType, getTemplateLock } =
+		select( blockEditorStore );
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -386,14 +386,12 @@ export default compose(
 				clearSelectedBlock,
 			} = dispatch( blockEditorStore );
 			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
-			const { getBlockSelectionEnd, getBlock } = select(
-				blockEditorStore
-			);
+			const { getBlockSelectionEnd, getBlock } =
+				select( blockEditorStore );
 			const { createSuccessNotice } = dispatch( noticesStore );
 
-			const {
-				__experimentalConvertBlockToStatic: convertBlockToStatic,
-			} = dispatch( reusableBlocksStore );
+			const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+				dispatch( reusableBlocksStore );
 
 			return {
 				createSuccessNotice,

package/src/components/block-mobile-toolbar/index.native.js

@@ -78,6 +78,7 @@ const BlockMobileToolbar = ( {
 			<BlockDraggable
 				clientId={ clientId }
 				draggingClientId={ draggingClientId }
+				testID="draggable-trigger-mobile-toolbar"
 			>
 				{ () => <View style={ styles.spacer } /> }
 			</BlockDraggable>

package/src/components/block-mover/button.js

@@ -108,9 +108,8 @@ const BlockMoverButton = forwardRef(
 			[ clientIds, direction ]
 		);
 
-		const { moveBlocksDown, moveBlocksUp } = useDispatch(
-			blockEditorStore
-		);
+		const { moveBlocksDown, moveBlocksUp } =
+			useDispatch( blockEditorStore );
 		const moverFunction =
 			direction === 'up' ? moveBlocksUp : moveBlocksDown;
 

package/src/components/block-mover/index.native.js

@@ -37,9 +37,8 @@ export const BlockMover = ( {
 } ) => {
 	const pickerRef = useRef();
 	const [ shouldPresentPicker, setShouldPresentPicker ] = useState( false );
-	const [ blockPageMoverState, setBlockPageMoverState ] = useState(
-		undefined
-	);
+	const [ blockPageMoverState, setBlockPageMoverState ] =
+		useState( undefined );
 	const showBlockPageMover = ( direction ) => () => {
 		if ( ! pickerRef.current ) {
 			setBlockPageMoverState( undefined );
@@ -167,9 +166,8 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, { clientIds, rootClientId } ) => {
-		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } = dispatch(
-			blockEditorStore
-		);
+		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } =
+			dispatch( blockEditorStore );
 		return {
 			onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
 			onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -35,6 +35,8 @@ Array [
     >
       <View
         collapsable={false}
+        handlerTag={3}
+        handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
@@ -93,6 +95,8 @@ Array [
     >
       <View
         collapsable={false}
+        handlerTag={4}
+        handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={

package/src/components/block-parent-selector/index.js

@@ -22,9 +22,8 @@ import { store as blockEditorStore } from '../../store';
  * @return {WPComponent} Parent block selector.
  */
 export default function BlockParentSelector() {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const { firstParentClientId, shouldHide, hasReducedUI } = useSelect(
 		( select ) => {
 			const {

package/src/components/block-pattern-setup/index.js

@@ -145,21 +145,17 @@ const BlockPatternSetup = ( {
 	clientId,
 	blockName,
 	filterPatternsFn,
-	startBlankComponent,
 	onBlockPatternSelect,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
-	const [ showBlank, setShowBlank ] = useState( false );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
-	const [
-		contentResizeListener,
-		{ height: contentHeight },
-	] = useResizeObserver();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
 
-	if ( ! patterns?.length || showBlank ) {
-		return startBlankComponent;
+	if ( ! patterns?.length ) {
+		return null;
 	}
 
 	const onBlockPatternSelectDefault = ( blocks ) => {
@@ -168,11 +164,6 @@ const BlockPatternSetup = ( {
 	};
 	const onPatternSelectCallback =
 		onBlockPatternSelect || onBlockPatternSelectDefault;
-	const onStartBlank = startBlankComponent
-		? () => {
-				setShowBlank( true );
-		  }
-		: undefined;
 	return (
 		<>
 			{ contentResizeListener }
@@ -202,7 +193,6 @@ const BlockPatternSetup = ( {
 							patterns[ activeSlide ].blocks
 						);
 					} }
-					onStartBlank={ onStartBlank }
 				/>
 			</div>
 		</>

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -15,11 +15,8 @@ import {
  */
 import { VIEWMODES } from './constants';
 
-const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
+const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		{ onStartBlank && (
-			<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
-		) }
 		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>
@@ -56,7 +53,6 @@ const SetupToolbar = ( {
 	activeSlide,
 	totalSlides,
 	onBlockPatternSelect,
-	onStartBlank,
 } ) => {
 	const isCarouselView = viewMode === VIEWMODES.carousel;
 	const displayControls = (
@@ -87,10 +83,7 @@ const SetupToolbar = ( {
 			) }
 			{ displayControls }
 			{ isCarouselView && (
-				<Actions
-					onBlockPatternSelect={ onBlockPatternSelect }
-					onStartBlank={ onStartBlank }
-				/>
+				<Actions onBlockPatternSelect={ onBlockPatternSelect } />
 			) }
 		</div>
 	);

package/src/components/block-popover/inbetween.js

@@ -28,11 +28,13 @@ function BlockPopoverInbetween( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { orientation, rootClientId } = useSelect(
+	const { orientation, rootClientId, isVisible } = useSelect(
 		( select ) => {
-			const { getBlockListSettings, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const {
+				getBlockListSettings,
+				getBlockRootClientId,
+				isBlockVisible,
+			} = select( blockEditorStore );
 
 			const _rootClientId = getBlockRootClientId( previousClientId );
 			return {
@@ -40,6 +42,9 @@ function BlockPopoverInbetween( {
 					getBlockListSettings( _rootClientId )?.orientation ||
 					'vertical',
 				rootClientId: _rootClientId,
+				isVisible:
+					isBlockVisible( previousClientId ) &&
+					isBlockVisible( nextClientId ),
 			};
 		},
 		[ previousClientId ]
@@ -48,7 +53,7 @@ function BlockPopoverInbetween( {
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
 	const style = useMemo( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -87,7 +92,7 @@ function BlockPopoverInbetween( {
 	}, [ previousElement, nextElement, isVertical ] );
 
 	const getAnchorRect = useCallback( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -149,7 +154,7 @@ function BlockPopoverInbetween( {
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement ) {
+	if ( ! previousElement || ! nextElement || ! isVisible ) {
 		return null;
 	}
 

package/src/components/block-popover/index.js

@@ -62,6 +62,7 @@ export default function BlockPopover( {
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
 			__unstableForcePosition
+			__unstableShift
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

package/src/components/block-preview/auto.js

@@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element';
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
+import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
@@ -24,19 +25,16 @@ function AutoBlockPreview( {
 	__experimentalPadding,
 	__experimentalMinHeight,
 } ) {
-	const [
-		containerResizeListener,
-		{ width: containerWidth },
-	] = useResizeObserver();
-	const [
-		contentResizeListener,
-		{ height: contentHeight },
-	] = useResizeObserver();
-	const { styles, assets } = useSelect( ( select ) => {
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
+	const { styles, assets, duotone } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
 			assets: settings.__unstableResolvedAssets,
+			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -55,11 +53,14 @@ function AutoBlockPreview( {
 		return styles;
 	}, [ styles ] );
 
+	const svgFilters = useMemo( () => {
+		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
+	}, [ duotone ] );
+
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
 	const scale = containerWidth / viewportWidth;
-
 	return (
 		<div className="block-editor-block-preview__container">
 			{ containerResizeListener }
@@ -104,12 +105,21 @@ function AutoBlockPreview( {
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
 						minHeight:
-							scale < 1 && __experimentalMinHeight
+							scale !== 0 && scale < 1 && __experimentalMinHeight
 								? __experimentalMinHeight / scale
 								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }
+					{
+						/* Filters need to be rendered before children to avoid Safari rendering issues. */
+						svgFilters.map( ( preset ) => (
+							<PresetDuotoneFilter
+								preset={ preset }
+								key={ preset.slug }
+							/>
+						) )
+					}
 					<MemoizedBlockList renderAppender={ false } />
 				</Iframe>
 			</Disabled>

package/src/components/block-selection-clearer/index.js

@@ -17,9 +17,8 @@ import { store as blockEditorStore } from '../../store';
  * @return {import('react').RefCallback} Ref callback.
  */
 export function useBlockSelectionClearer() {
-	const { hasSelectedBlock, hasMultiSelection } = useSelect(
-		blockEditorStore
-	);
+	const { hasSelectedBlock, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(