@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.0

package/src/components/block-title/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -73,9 +73,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle /> );
+		const { container } = render( <BlockTitle /> );
 
-		expect( wrapper.type() ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'renders nothing if block type does not exist', () => {
@@ -83,11 +83,12 @@ describe( 'BlockTitle', () => {
 			name: 'name-not-exists',
 			attributes: null,
 		} ) );
-		const wrapper = shallow(
+
+		const { container } = render(
 			<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
 		);
 
-		expect( wrapper.type() ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'renders title if block type exists', () => {
@@ -96,9 +97,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-exists" /> );
+		render( <BlockTitle clientId="id-name-exists" /> );
 
-		expect( wrapper.text() ).toBe( 'Block Title' );
+		expect( screen.getByText( 'Block Title' ) ).toBeVisible();
 	} );
 
 	it( 'renders label if it is set', () => {
@@ -107,9 +108,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe( 'Test Label' );
+		expect( screen.getByText( 'Test Label' ) ).toBeVisible();
 	} );
 
 	it( 'should prioritize reusable block title over title', () => {
@@ -119,9 +120,10 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe( 'Reuse me!' );
+		expect( screen.queryByText( 'Test Label' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Reuse me!' ) ).toBeVisible();
 	} );
 
 	it( 'should prioritize block label over title', () => {
@@ -130,11 +132,12 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe(
-			'A Custom Label like a Block Variation Label'
-		);
+		expect( screen.queryByText( 'Test Label' ) ).not.toBeInTheDocument();
+		expect(
+			screen.getByText( 'A Custom Label like a Block Variation Label' )
+		).toBeVisible();
 	} );
 
 	it( 'should default to block information title if no reusable title or block name is available', () => {
@@ -143,9 +146,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe( 'Block With Label' );
+		expect( screen.getByText( 'Block With Label' ) ).toBeVisible();
 	} );
 
 	it( 'truncates the label with custom truncate length', () => {
@@ -154,14 +157,14 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow(
+		render(
 			<BlockTitle
 				clientId="id-name-with-long-label"
 				maximumLength={ 12 }
 			/>
 		);
 
-		expect( wrapper.text() ).toBe( 'This is a...' );
+		expect( screen.getByText( 'This is a...' ) ).toBeVisible();
 	} );
 
 	it( 'should not truncate the label if maximum length is undefined', () => {
@@ -170,12 +173,12 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow(
-			<BlockTitle clientId="id-name-with-long-label" />
-		);
+		render( <BlockTitle clientId="id-name-with-long-label" /> );
 
-		expect( wrapper.text() ).toBe(
-			'This is a longer label than typical for blocks to have.'
-		);
+		expect(
+			screen.getByText(
+				'This is a longer label than typical for blocks to have.'
+			)
+		).toBeVisible();
 	} );
 } );

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

@@ -37,6 +37,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		hasReducedUI,
 		isValid,
 		isVisual,
+		isContentLocked,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -45,6 +46,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isBlockValid,
 			getBlockRootClientId,
 			getSettings,
+			__unstableGetContentLockingParent,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -66,6 +68,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isVisual: selectedBlockClientIds.every(
 				( id ) => getBlockMode( id ) === 'visual'
 			),
+			isContentLocked: !! __unstableGetContentLockingParent(
+				selectedBlockClientId
+			),
 		};
 	}, [] );
 
@@ -112,24 +117,27 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar && ! displayHeaderToolbar && (
-				<BlockParentSelector clientIds={ blockClientIds } />
-			) }
+			{ ! isMultiToolbar &&
+				! displayHeaderToolbar &&
+				! isContentLocked && <BlockParentSelector /> }
 			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-						<BlockSwitcher clientIds={ blockClientIds } />
-						{ ! isMultiToolbar && (
-							<BlockLockToolbar
-								clientId={ blockClientIds[ 0 ] }
+				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+					! isContentLocked && (
+						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+							<BlockSwitcher clientIds={ blockClientIds } />
+							{ ! isMultiToolbar && (
+								<BlockLockToolbar
+									clientId={ blockClientIds[ 0 ] }
+								/>
+							) }
+							<BlockMover
+								clientIds={ blockClientIds }
+								hideDragHandle={
+									hideDragHandle || hasReducedUI
+								}
 							/>
-						) }
-						<BlockMover
-							clientIds={ blockClientIds }
-							hideDragHandle={ hideDragHandle || hasReducedUI }
-						/>
-					</ToolbarGroup>
-				) }
+						</ToolbarGroup>
+					) }
 			</div>
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
@@ -161,7 +169,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				</>
 			) }
 			<BlockEditVisuallyButton clientIds={ blockClientIds } />
-			<BlockSettingsMenu clientIds={ blockClientIds } />
+			{ ! isContentLocked && (
+				<BlockSettingsMenu clientIds={ blockClientIds } />
+			) }
 		</div>
 	);
 };

package/src/components/block-tools/block-contextual-toolbar.js

@@ -20,8 +20,12 @@ import { store as blockEditorStore } from '../../store';
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const { blockType, hasParents, showParentSelector } = useSelect(
 		( select ) => {
-			const { getBlockName, getBlockParents, getSelectedBlockClientIds } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockParents,
+				getSelectedBlockClientIds,
+				__unstableGetContentLockingParent,
+			} = select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -42,7 +46,10 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						'__experimentalParentSelector',
 						true
 					) &&
-					selectedBlockClientIds.length <= 1,
+					selectedBlockClientIds.length <= 1 &&
+					! __unstableGetContentLockingParent(
+						selectedBlockClientId
+					),
 			};
 		},
 		[]

package/src/components/block-tools/block-selection-button.js

@@ -39,6 +39,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockMover from '../block-mover';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -59,6 +60,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				getBlockIndex,
 				hasBlockMovingClientId,
 				getBlockListSettings,
+				__unstableGetEditorMode,
 			} = select( blockEditorStore );
 			const index = getBlockIndex( clientId );
 			const { name, attributes } = getBlock( clientId );
@@ -69,11 +71,19 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				attributes,
 				blockMovingMode,
 				orientation: getBlockListSettings( rootClientId )?.orientation,
+				editorMode: __unstableGetEditorMode(),
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { index, name, attributes, blockMovingMode, orientation } = selected;
+	const {
+		index,
+		name,
+		attributes,
+		blockMovingMode,
+		orientation,
+		editorMode,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -236,25 +246,34 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					<BlockIcon icon={ blockInformation?.icon } showColors />
 				</FlexItem>
 				<FlexItem>
-					<BlockDraggable clientIds={ [ clientId ] }>
-						{ ( draggableProps ) => (
-							<Button
-								icon={ dragHandle }
-								className="block-selection-button_drag-handle"
-								aria-hidden="true"
-								label={ dragHandleLabel }
-								// Should not be able to tab to drag handle as this
-								// button can only be used with a pointer device.
-								tabIndex="-1"
-								{ ...draggableProps }
-							/>
-						) }
-					</BlockDraggable>
+					{ editorMode === 'zoom-out' && (
+						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+					) }
+					{ editorMode === 'navigation' && (
+						<BlockDraggable clientIds={ [ clientId ] }>
+							{ ( draggableProps ) => (
+								<Button
+									icon={ dragHandle }
+									className="block-selection-button_drag-handle"
+									aria-hidden="true"
+									label={ dragHandleLabel }
+									// Should not be able to tab to drag handle as this
+									// button can only be used with a pointer device.
+									tabIndex="-1"
+									{ ...draggableProps }
+								/>
+							) }
+						</BlockDraggable>
+					) }
 				</FlexItem>
 				<FlexItem>
 					<Button
 						ref={ ref }
-						onClick={ () => setNavigationMode( false ) }
+						onClick={
+							editorMode === 'navigation'
+								? () => setNavigationMode( false )
+								: undefined
+						}
 						onKeyDown={ onKeyDown }
 						label={ label }
 						showTooltip={ false }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -10,15 +5,20 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InsertionPoint from './insertion-point';
+import {
+	InsertionPointOpenRef,
+	default as InsertionPoint,
+} from './insertion-point';
 import SelectedBlockPopover from './selected-block-popover';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
+import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
@@ -35,10 +35,15 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const hasFixedToolbar = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasFixedToolbar,
-		[]
-	);
+	const { hasFixedToolbar, isZoomOutMode } = useSelect( ( select ) => {
+		const { __unstableGetEditorMode, getSettings } =
+			select( blockEditorStore );
+
+		return {
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+		};
+	}, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -59,14 +64,14 @@ export default function BlockTools( {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				const rootClientId = getBlockRootClientId( first( clientIds ) );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 				moveBlocksUp( clientIds, rootClientId );
 			}
 		} else if ( isMatch( 'core/block-editor/move-down', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				const rootClientId = getBlockRootClientId( first( clientIds ) );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 				moveBlocksDown( clientIds, rootClientId );
 			}
 		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
@@ -85,13 +90,13 @@ export default function BlockTools( {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				insertAfterBlock( last( clientIds ) );
+				insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				insertBeforeBlock( first( clientIds ) );
+				insertBeforeBlock( clientIds[ 0 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
@@ -106,30 +111,41 @@ export default function BlockTools( {
 		}
 	}
 
+	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
+	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
-			<InsertionPoint __unstableContentRef={ __unstableContentRef }>
-				{ ( hasFixedToolbar || ! isLargeViewport ) && (
-					<BlockContextualToolbar isFixed />
+			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
+				{ ! isZoomOutMode && (
+					<InsertionPoint
+						__unstableContentRef={ __unstableContentRef }
+					/>
 				) }
+				{ ! isZoomOutMode &&
+					( hasFixedToolbar || ! isLargeViewport ) && (
+						<BlockContextualToolbar isFixed />
+					) }
 				{ /* Even if the toolbar is fixed, the block popover is still
-					needed for navigation and exploded mode. */ }
+					needed for navigation and zoom-out mode. */ }
 				<SelectedBlockPopover
 					__unstableContentRef={ __unstableContentRef }
 				/>
 				{ /* Used for the inline rich text toolbar. */ }
-				<Popover.Slot
-					name="block-toolbar"
-					ref={ usePopoverScroll( __unstableContentRef ) }
-				/>
+				<Popover.Slot name="block-toolbar" ref={ blockToolbarRef } />
 				{ children }
 				{ /* Used for inline rich text popovers. */ }
 				<Popover.Slot
 					name="__unstable-block-tools-after"
-					ref={ usePopoverScroll( __unstableContentRef ) }
+					ref={ blockToolbarAfterRef }
 				/>
-			</InsertionPoint>
+				{ isZoomOutMode && (
+					<ZoomOutModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
+			</InsertionPointOpenRef.Provider>
 		</div>
 	);
 }

package/src/components/block-tools/insertion-point.js

@@ -200,6 +200,7 @@ function InsertionPointPopover( {
 				<motion.div
 					variants={ lineVariants }
 					className="block-editor-block-list__insertion-point-indicator"
+					data-testid="block-list-insertion-point-indicator"
 				/>
 				{ isInserterShown && (
 					<motion.div
@@ -227,15 +228,10 @@ function InsertionPointPopover( {
 	);
 }
 
-export default function InsertionPoint( { children, ...props } ) {
+export default function InsertionPoint( props ) {
 	const isVisible = useSelect( ( select ) => {
 		return select( blockEditorStore ).isBlockInsertionPointVisible();
 	}, [] );
 
-	return (
-		<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-			{ isVisible && <InsertionPointPopover { ...props } /> }
-			{ children }
-		</InsertionPointOpenRef.Provider>
-	);
+	return isVisible && <InsertionPointPopover { ...props } />;
 }

package/src/components/block-tools/selected-block-popover.js

@@ -24,7 +24,7 @@ import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 
 function selector( select ) {
 	const {
-		isNavigationMode,
+		__unstableGetEditorMode,
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
@@ -32,7 +32,7 @@ function selector( select ) {
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
 	return {
-		isNavigationMode: isNavigationMode(),
+		editorMode: __unstableGetEditorMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
@@ -51,7 +51,7 @@ function SelectedBlockPopover( {
 	__unstableContentRef,
 } ) {
 	const {
-		isNavigationMode,
+		editorMode,
 		isMultiSelecting,
 		isTyping,
 		hasFixedToolbar,
@@ -80,17 +80,18 @@ function SelectedBlockPopover( {
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
-		! isTyping && ! isNavigationMode && isEmptyDefaultBlock;
-	const shouldShowBreadcrumb = isNavigationMode;
+		! isTyping && editorMode === 'edit' && isEmptyDefaultBlock;
+	const shouldShowBreadcrumb =
+		editorMode === 'navigation' || editorMode === 'zoom-out';
 	const shouldShowContextualToolbar =
-		! isNavigationMode &&
+		editorMode === 'edit' &&
 		! hasFixedToolbar &&
 		isLargeViewport &&
 		! isMultiSelecting &&
 		! showEmptyBlockSideInserter &&
 		! isTyping;
 	const canFocusHiddenToolbar =
-		! isNavigationMode &&
+		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&
 		! hasFixedToolbar &&
 		! isEmptyDefaultBlock;
@@ -132,6 +133,7 @@ function SelectedBlockPopover( {
 			} ) }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
+			resize={ false }
 			{ ...popoverProps }
 		>
 			{ shouldShowContextualToolbar && (

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

@@ -171,6 +171,11 @@
 	.block-selection-button_select-button.components-button {
 		padding: 0;
 	}
+
+	.block-editor-block-mover {
+		background: unset;
+		border: none;
+	}
 }
 
 // Hide the popover block editor list while dragging.

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -14,15 +14,19 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-
 // By default the toolbar sets the `shift` prop. If the user scrolls the page
 // down the toolbar will stay on screen by adopting a sticky position at the
 // top of the viewport.
-const DEFAULT_PROPS = { __unstableForcePosition: true, __unstableShift: true };
+const DEFAULT_PROPS = {
+	flip: false,
+	shift: true,
+};
 
 // When there isn't enough height between the top of the block and the editor
 // canvas, the `shift` prop is set to `false`, as it will cause the block to be
-// obscured. The `flip` behavior is enabled (by setting `forcePosition` to
-// `false`), which positions the toolbar below the block.
+// obscured. The `flip` behavior is enabled, which positions the toolbar below
+// the block. This only happens if the block is smaller than the viewport, as
+// otherwise the toolbar will be off-screen.
 const RESTRICTED_HEIGHT_PROPS = {
-	__unstableForcePosition: false,
-	__unstableShift: false,
+	flip: true,
+	shift: false,
 };
 
 /**
@@ -42,7 +46,16 @@ function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
 	const blockRect = selectedBlockElement.getBoundingClientRect();
 	const contentRect = contentElement.getBoundingClientRect();
 
-	if ( blockRect.top - contentRect.top > toolbarHeight ) {
+	// The document element's clientHeight represents the viewport height.
+	const viewportHeight =
+		contentElement.ownerDocument.documentElement.clientHeight;
+
+	const hasSpaceForToolbarAbove =
+		blockRect.top - contentRect.top > toolbarHeight;
+	const isBlockTallerThanViewport =
+		blockRect.height > viewportHeight - toolbarHeight;
+
+	if ( hasSpaceForToolbarAbove || isBlockTallerThanViewport ) {
 		return DEFAULT_PROPS;
 	}
 

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopoverInbetween from '../block-popover/inbetween';
+import { store as blockEditorStore } from '../../store';
+import Inserter from '../inserter';
+
+function ZoomOutModeInserters( { __unstableContentRef } ) {
+	const [ isReady, setIsReady ] = useState( false );
+	const blockOrder = useSelect( ( select ) => {
+		return select( blockEditorStore ).getBlockOrder();
+	}, [] );
+
+	// Defer the initial rendering to avoid the jumps due to the animation.
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			setIsReady( true );
+		}, 500 );
+		return () => {
+			clearTimeout( timeout );
+		};
+	}, [] );
+
+	if ( ! isReady ) {
+		return null;
+	}
+
+	return blockOrder.map( ( clientId, index ) => {
+		if ( index === blockOrder.length - 1 ) {
+			return null;
+		}
+		return (
+			<BlockPopoverInbetween
+				key={ clientId }
+				previousClientId={ clientId }
+				nextClientId={ blockOrder[ index + 1 ] }
+				__unstableContentRef={ __unstableContentRef }
+			>
+				<div className="block-editor-block-list__insertion-point-inserter is-with-inserter">
+					<Inserter
+						position="bottom center"
+						clientId={ blockOrder[ index + 1 ] }
+						__experimentalIsQuick
+					/>
+				</div>
+			</BlockPopoverInbetween>
+		);
+	} );
+}
+
+export default ZoomOutModeInserters;