From 5b21f5cf154d0821eb19f6699d86c8cf1c3d24e6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 11 Oct 2024 08:05:45 +0200
Subject: [PATCH 1/9] Zoom Out: Remove zoom-out toolbar

---
 .../src/components/block-tools/index.js       |  15 +-
 .../block-tools/use-show-block-tools.js       |  13 --
 .../block-tools/zoom-out-popover.js           |  47 ------
 .../block-tools/zoom-out-toolbar.js           | 135 ------------------
 4 files changed, 2 insertions(+), 208 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-tools/zoom-out-popover.js
 delete mode 100644 packages/block-editor/src/components/block-tools/zoom-out-toolbar.js

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index cbcb5b8e50b09..e07e9b8f4bf5c 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -19,7 +19,6 @@ import {
 	default as InsertionPoint,
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
-import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
@@ -75,11 +74,8 @@ export default function BlockTools( {
 		isGroupable,
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
-	const {
-		showEmptyBlockSideInserter,
-		showBlockToolbarPopover,
-		showZoomOutToolbar,
-	} = useShowBlockTools();
+	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
+		useShowBlockTools();
 
 	const {
 		duplicateBlocks,
@@ -211,13 +207,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showZoomOutToolbar && (
-					<ZoomOutPopover
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
 				{ ! isZoomOutMode && ! hasFixedToolbar && (
 					<Popover.Slot
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index 97737b4ec2f5b..61b5be891fd54 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -25,8 +25,6 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
-			getBlockOrder,
-			getSectionRootClientId,
 		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
@@ -44,17 +42,7 @@ export function useShowBlockTools() {
 			! isTyping() &&
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
-		const isZoomOut = editorMode === 'zoom-out';
-		const isSectionSelected = getBlockOrder(
-			getSectionRootClientId()
-		).includes( clientId );
-		const _showZoomOutToolbar =
-			clientId &&
-			isZoomOut &&
-			! _showEmptyBlockSideInserter &&
-			isSectionSelected;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -63,7 +51,6 @@ export function useShowBlockTools() {
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
deleted file mode 100644
index 7a5c2243cf054..0000000000000
--- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * Internal dependencies
- */
-import { PrivateBlockPopover as BlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-import ZoomOutToolbar from './zoom-out-toolbar';
-
-export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
-	const { capturingClientId, isInsertionPointVisible, lastClientId } =
-		useSelectedBlockToolProps( clientId );
-
-	const popoverProps = useBlockToolbarPopoverProps( {
-		contentElement: __unstableContentRef?.current,
-		clientId,
-	} );
-
-	// Override some of the popover props for the zoom-out toolbar.
-	const props = {
-		...popoverProps,
-		placement: 'left-start',
-		flip: false,
-		shift: true,
-	};
-
-	return (
-		<BlockPopover
-			__unstableContentRef={ __unstableContentRef }
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ clsx( 'zoom-out-toolbar-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			resize={ false }
-			{ ...props }
-		>
-			<ZoomOutToolbar
-				__unstableContentRef={ __unstableContentRef }
-				clientId={ clientId }
-			/>
-		</BlockPopover>
-	);
-}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
deleted file mode 100644
index 2b5c6a3e3cea6..0000000000000
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { dragHandle, trash } from '@wordpress/icons';
-import { Button, ToolbarButton } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
-import BlockMover from '../block-mover';
-import Shuffle from '../block-toolbar/shuffle';
-import NavigableToolbar from '../navigable-toolbar';
-
-export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
-	const selected = useSelect(
-		( select ) => {
-			const {
-				getBlock,
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-				canRemoveBlock,
-				canMoveBlock,
-				getSettings,
-			} = select( blockEditorStore );
-
-			const { __experimentalSetIsInserterOpened: setIsInserterOpened } =
-				getSettings();
-
-			const { getBlockType } = select( blocksStore );
-			const { name } = getBlock( clientId );
-			const blockType = getBlockType( name );
-			const isBlockTemplatePart =
-				blockType?.name === 'core/template-part';
-
-			let isNextBlockTemplatePart = false;
-			const nextClientId = getNextBlockClientId();
-			if ( nextClientId ) {
-				const { name: nextName } = getBlock( nextClientId );
-				const nextBlockType = getBlockType( nextName );
-				isNextBlockTemplatePart =
-					nextBlockType?.name === 'core/template-part';
-			}
-
-			let isPrevBlockTemplatePart = false;
-			const prevClientId = getPreviousBlockClientId();
-			if ( prevClientId ) {
-				const { name: prevName } = getBlock( prevClientId );
-				const prevBlockType = getBlockType( prevName );
-				isPrevBlockTemplatePart =
-					prevBlockType?.name === 'core/template-part';
-			}
-
-			return {
-				isBlockTemplatePart,
-				isNextBlockTemplatePart,
-				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId ),
-				canMove: canMoveBlock( clientId ),
-				setIsInserterOpened,
-			};
-		},
-		[ clientId ]
-	);
-
-	const {
-		isBlockTemplatePart,
-		isNextBlockTemplatePart,
-		isPrevBlockTemplatePart,
-		canRemove,
-		canMove,
-	} = selected;
-
-	const { removeBlock } = useDispatch( blockEditorStore );
-
-	const showBlockDraggable = canMove && ! isBlockTemplatePart;
-
-	return (
-		<NavigableToolbar
-			className="zoom-out-toolbar"
-			/* translators: accessibility text for the block toolbar */
-			aria-label={ __( 'Block tools' ) }
-			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
-			variant="unstyled"
-			orientation="vertical"
-		>
-			{ showBlockDraggable && (
-				<BlockDraggable clientIds={ [ clientId ] }>
-					{ ( draggableProps ) => (
-						<Button
-							icon={ dragHandle }
-							className="block-selection-button_drag-handle zoom-out-toolbar-button"
-							label={ __( 'Drag' ) }
-							iconSize={ 24 }
-							size="compact"
-							// Should not be able to tab to drag handle as this
-							// button can only be used with a pointer device.
-							tabIndex="-1"
-							{ ...draggableProps }
-						/>
-					) }
-				</BlockDraggable>
-			) }
-			{ ! isBlockTemplatePart && (
-				<BlockMover
-					clientIds={ [ clientId ] }
-					hideDragHandle
-					isBlockMoverUpButtonDisabled={ isPrevBlockTemplatePart }
-					isBlockMoverDownButtonDisabled={ isNextBlockTemplatePart }
-					iconSize={ 24 }
-					size="compact"
-				/>
-			) }
-			{ canMove && canRemove && (
-				<Shuffle clientId={ clientId } as={ ToolbarButton } />
-			) }
-
-			{ canRemove && ! isBlockTemplatePart && (
-				<ToolbarButton
-					className="zoom-out-toolbar-button"
-					icon={ trash }
-					label={ __( 'Delete' ) }
-					onClick={ () => {
-						removeBlock( clientId );
-						__unstableContentRef.current?.focus();
-					} }
-				/>
-			) }
-		</NavigableToolbar>
-	);
-}

From 0d82332549a586f1c3496448111d2b6b10e2e9bc Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 11 Oct 2024 08:19:08 +0200
Subject: [PATCH 2/9] Remove useless styles

---
 .../src/components/block-tools/style.scss     | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index bfb8b958f01ca..0791dc909d5be 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -187,23 +187,3 @@
 	top: 50%;
 	left: 50%;
 }
-
-.zoom-out-toolbar {
-
-	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-	.zoom-out-toolbar-button:focus::before,
-	.block-editor-block-toolbar-shuffle:focus::before,
-	.block-selection-button_drag-handle:focus::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.block-editor-block-mover {
-		background: none;
-		border: none;
-	}
-
-	// Make the spacing consistent between controls.
-	.zoom-out-toolbar-button {
-		height: $button-size-next-default-40px;
-	}
-}

From 08babde206ada1395bafa25e2c1d4e1105430753 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 11 Oct 2024 09:47:16 +0200
Subject: [PATCH 3/9] Add shuffle button

---
 .../src/components/block-toolbar/index.js           | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 2ac2cbb12ff35..defcb143c8b2e 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -16,7 +16,7 @@ import {
 	isReusableBlock,
 	isTemplatePart,
 } from '@wordpress/blocks';
-import { ToolbarGroup } from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -35,6 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import Shuffle from './shuffle';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -67,6 +68,7 @@ export function PrivateBlockToolbar( {
 		isUsingBindings,
 		hasParentPattern,
 		hasContentOnlyLocking,
+		showShuffleButton,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -79,6 +81,7 @@ export function PrivateBlockToolbar( {
 			getBlockParentsByBlockName,
 			getTemplateLock,
 			getParentSectionBlock,
+			isZoomOutMode,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -119,6 +122,7 @@ export function PrivateBlockToolbar( {
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
+				! isZoomOutMode() &&
 				parentBlockType &&
 				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
@@ -130,6 +134,7 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
+			showShuffleButton: isZoomOutMode(),
 		};
 	}, [] );
 
@@ -205,6 +210,12 @@ export function PrivateBlockToolbar( {
 				{ ! hasContentOnlyLocking &&
 					shouldShowVisualToolbar &&
 					isMultiToolbar && <BlockGroupToolbar /> }
+				{ showShuffleButton && (
+					<Shuffle
+						clientId={ blockClientIds[ 0 ] }
+						as={ ToolbarButton }
+					/>
+				) }
 				{ shouldShowVisualToolbar && (
 					<>
 						<BlockControls.Slot

From 12d54a0f2cd47a3dbd0bff5ab570e8cd23794131 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 11 Oct 2024 09:49:02 +0200
Subject: [PATCH 4/9] Hide parent selector properly

---
 packages/block-editor/src/components/block-toolbar/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index defcb143c8b2e..4ebf0c0d4c2dd 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -184,7 +184,7 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar && isLargeViewport && (
+				{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
 					<BlockParentSelector />
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&

From 357ef468204acda796f0f416e67c222ca3e89c29 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 11 Oct 2024 09:53:45 +0200
Subject: [PATCH 5/9] Fix shuffle button separation

---
 .../block-editor/src/components/block-toolbar/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 4ebf0c0d4c2dd..d6a0985fef361 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -211,10 +211,12 @@ export function PrivateBlockToolbar( {
 					shouldShowVisualToolbar &&
 					isMultiToolbar && <BlockGroupToolbar /> }
 				{ showShuffleButton && (
-					<Shuffle
-						clientId={ blockClientIds[ 0 ] }
-						as={ ToolbarButton }
-					/>
+					<ToolbarGroup>
+						<Shuffle
+							clientId={ blockClientIds[ 0 ] }
+							as={ ToolbarButton }
+						/>
+					</ToolbarGroup>
 				) }
 				{ shouldShowVisualToolbar && (
 					<>

From 179743619b8bfc753bf33115c9dc5b3a0120c117 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 11 Oct 2024 10:12:11 +0200
Subject: [PATCH 6/9] Only keep one visible inserter

---
 .../block-tools/zoom-out-mode-inserters.js    | 65 +++++++------------
 1 file changed, 25 insertions(+), 40 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index c279cb3678202..ac15881c78d8d 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -16,30 +16,24 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		insertionPoint,
 		blockOrder,
-		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
-			getInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getSectionRootClientId,
-			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
-			insertionPoint: getInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
@@ -64,41 +58,32 @@ function ZoomOutModeInserters() {
 		return null;
 	}
 
-	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && insertionPoint?.index === index;
+	const previousClientId = selectedBlockClientId;
+	const index = blockOrder.findIndex(
+		( clientId ) => selectedBlockClientId === clientId
+	);
+	const nextClientId = blockOrder[ index + 1 ];
 
-		const previousClientId = clientId;
-		const nextClientId = blockOrder[ index ];
-
-		const isSelected =
-			selectedBlockClientId === previousClientId ||
-			selectedBlockClientId === nextClientId;
-
-		return (
-			<BlockPopoverInbetween
-				key={ index }
-				previousClientId={ previousClientId }
-				nextClientId={ nextClientId }
-			>
-				{ ! shouldRenderInsertionPoint && isSelected && (
-					<ZoomOutModeInserterButton
-						onClick={ () => {
-							setInserterIsOpened( {
-								rootClientId: sectionRootClientId,
-								insertionIndex: index,
-								tab: 'patterns',
-								category: 'all',
-							} );
-							showInsertionPoint( sectionRootClientId, index, {
-								operation: 'insert',
-							} );
-						} }
-					/>
-				) }
-			</BlockPopoverInbetween>
-		);
-	} );
+	return (
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+		>
+			<ZoomOutModeInserterButton
+				onClick={ () => {
+					setInserterIsOpened( {
+						rootClientId: sectionRootClientId,
+						insertionIndex: index,
+						tab: 'patterns',
+						category: 'all',
+					} );
+					showInsertionPoint( sectionRootClientId, index, {
+						operation: 'insert',
+					} );
+				} }
+			/>
+		</BlockPopoverInbetween>
+	);
 }
 
 export default ZoomOutModeInserters;

From 6068a719347a253a03f4396404fa81442866595a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 15 Oct 2024 16:00:00 +0100
Subject: [PATCH 7/9] Remove useless code

---
 .../src/components/block-popover/index.js     | 62 -------------------
 1 file changed, 62 deletions(-)

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 637ab1cb8a53e..f01c43ef26a71 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import {
 	forwardRef,
 	useMemo,
@@ -22,8 +21,6 @@ import {
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 import { rectUnion, getVisibleElementBounds } from '../../utils/dom';
-import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -77,38 +74,12 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const { isZoomOut, parentSectionBlock, isSectionSelected } = useSelect(
-		( select ) => {
-			const {
-				isZoomOut: isZoomOutSelector,
-				getSectionRootClientId,
-				getParentSectionBlock,
-				getBlockOrder,
-			} = unlock( select( blockEditorStore ) );
-
-			return {
-				isZoomOut: isZoomOutSelector(),
-				parentSectionBlock:
-					getParentSectionBlock( clientId ) ?? clientId,
-				isSectionSelected: getBlockOrder(
-					getSectionRootClientId()
-				).includes( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
-	// This element is used to position the zoom out view vertical toolbar
-	// correctly, relative to the selected section.
-	const parentSectionElement = useBlockElement( parentSectionBlock );
-
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
 			popoverDimensionsRecomputeCounter < 0 ||
-			( isZoomOut && ! parentSectionElement ) ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -117,35 +88,6 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
-				// The zoom out view has a vertical block toolbar that should always
-				// be on the edge of the canvas, aligned to the top of the currently
-				// selected section. This condition changes the anchor of the toolbar
-				// to the section instead of the block to handle blocks that are
-				// not full width and nested blocks to keep section height.
-				if ( isZoomOut && isSectionSelected ) {
-					// Compute the height based on the parent section of the
-					// selected block, because the selected block may be
-					// shorter than the section.
-					const canvasElementRect = getVisibleElementBounds(
-						__unstableContentRef.current
-					);
-					const parentSectionElementRect =
-						getVisibleElementBounds( parentSectionElement );
-					const anchorHeight =
-						parentSectionElementRect.bottom -
-						parentSectionElementRect.top;
-
-					// Always use the width of the section root element to make sure
-					// the toolbar is always on the edge of the canvas.
-					const anchorWidth = canvasElementRect.width;
-					return new window.DOMRectReadOnly(
-						canvasElementRect.left,
-						parentSectionElementRect.top,
-						anchorWidth,
-						anchorHeight
-					);
-				}
-
 				return lastSelectedElement
 					? rectUnion(
 							getVisibleElementBounds( selectedElement ),
@@ -157,13 +99,9 @@ function BlockPopover(
 		};
 	}, [
 		popoverDimensionsRecomputeCounter,
-		isZoomOut,
-		parentSectionElement,
 		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		isSectionSelected,
-		__unstableContentRef,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

From 93af4ce6920647e0054c17baf031a6b485066e54 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 17 Oct 2024 10:25:18 +0100
Subject: [PATCH 8/9] Fix insertion point

---
 .../src/components/block-tools/zoom-out-mode-inserters.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index ac15881c78d8d..17af902bf9baf 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -73,11 +73,11 @@ function ZoomOutModeInserters() {
 				onClick={ () => {
 					setInserterIsOpened( {
 						rootClientId: sectionRootClientId,
-						insertionIndex: index,
+						insertionIndex: index + 1,
 						tab: 'patterns',
 						category: 'all',
 					} );
-					showInsertionPoint( sectionRootClientId, index, {
+					showInsertionPoint( sectionRootClientId, index + 1, {
 						operation: 'insert',
 					} );
 				} }

From 3b037ed8ea08e1239a75c6f9dbeb17c893ff8959 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 17 Oct 2024 10:34:55 +0100
Subject: [PATCH 9/9] Fix selector

---
 packages/block-editor/src/store/private-selectors.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index c322898031065..28e0c2bd47b0c 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -17,6 +17,7 @@ import {
 	getClientIdsWithDescendants,
 	isNavigationMode,
 	getBlockRootClientId,
+	__unstableGetEditorMode,
 } from './selectors';
 import {
 	checkAllowListRecursive,
@@ -579,7 +580,7 @@ export const getBlockStyles = createSelector(
  * @return {boolean} Is zoom out mode enabled.
  */
 export function isZoomOutMode( state ) {
-	return state.editorMode === 'zoom-out';
+	return __unstableGetEditorMode( state ) === 'zoom-out';
 }
 
 /**