diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 734000a8711dd..e425d111e49f1 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -123,10 +123,7 @@ $z-layers: (
 	".edit-site-navigation-panel__preview": 32,
 
 	// Above the block list and the header.
-	".block-editor-block-list__block-popover": 31,
-
-	// Under the block popover (block toolbar).
-	".block-editor-block-list__insertion-point-popover": 28,
+	".block-editor-block-popover": 31,
 
 	// Show snackbars above everything (similar to popovers)
 	".components-snackbar-list": 100000,
diff --git a/packages/block-editor/src/components/block-popover/README.md b/packages/block-editor/src/components/block-popover/README.md
new file mode 100644
index 0000000000000..379eb561a0262
--- /dev/null
+++ b/packages/block-editor/src/components/block-popover/README.md
@@ -0,0 +1,41 @@
+# BlockPopover and BlockPopoverInbetween
+
+These two components allow rendering editor UI by the block (in a popover) but outside the canvas. This is important to avoid messing with the style and layout of the block list.
+
+For example, it's used to render the contextual block toolbar and the in-between block inserter.
+
+## BlockPopover
+
+### Props
+
+#### clientId
+
+The client ID of the block representing the top position of the popover.
+
+-   Type: `String`
+-   Required: Yes
+
+#### bottomClientId
+
+The client ID of the block representing the bottom position of the popover.
+
+-   Type: `String`
+-   Required: No
+
+## BlockPopoverInbetween
+
+### Props
+
+#### previousClientId
+
+The client ID of the block before the popover.
+
+-   Type: `String`
+-   Required: Yes
+
+#### nextClientId
+
+The client ID of the block after the popover.
+
+-   Type: `String`
+-   Required: Yes
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
new file mode 100644
index 0000000000000..72453ac181981
--- /dev/null
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useCallback, useMemo, createContext } from '@wordpress/element';
+import { Popover } from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import usePopoverScroll from './use-popover-scroll';
+
+export const InsertionPointOpenRef = createContext();
+
+function BlockPopoverInbetween( {
+	previousClientId,
+	nextClientId,
+	children,
+	__unstablePopoverSlot,
+	__unstableContentRef,
+	...props
+} ) {
+	const { orientation, rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockListSettings, getBlockRootClientId } = select(
+				blockEditorStore
+			);
+
+			const _rootClientId = getBlockRootClientId( previousClientId );
+			return {
+				orientation:
+					getBlockListSettings( _rootClientId )?.orientation ||
+					'vertical',
+				rootClientId: _rootClientId,
+			};
+		},
+		[ previousClientId ]
+	);
+	const previousElement = useBlockElement( previousClientId );
+	const nextElement = useBlockElement( nextClientId );
+	const isVertical = orientation === 'vertical';
+	const style = useMemo( () => {
+		if ( ! previousElement && ! nextElement ) {
+			return {};
+		}
+
+		const previousRect = previousElement
+			? previousElement.getBoundingClientRect()
+			: null;
+		const nextRect = nextElement
+			? nextElement.getBoundingClientRect()
+			: null;
+
+		if ( isVertical ) {
+			return {
+				width: previousElement
+					? previousElement.offsetWidth
+					: nextElement.offsetWidth,
+				height:
+					nextRect && previousRect
+						? nextRect.top - previousRect.bottom
+						: 0,
+			};
+		}
+
+		let width = 0;
+		if ( previousRect && nextRect ) {
+			width = isRTL()
+				? previousRect.left - nextRect.right
+				: nextRect.left - previousRect.right;
+		}
+
+		return {
+			width,
+			height: previousElement
+				? previousElement.offsetHeight
+				: nextElement.offsetHeight,
+		};
+	}, [ previousElement, nextElement, isVertical ] );
+
+	const getAnchorRect = useCallback( () => {
+		if ( ! previousElement && ! nextElement ) {
+			return {};
+		}
+
+		const { ownerDocument } = previousElement || nextElement;
+
+		const previousRect = previousElement
+			? previousElement.getBoundingClientRect()
+			: null;
+		const nextRect = nextElement
+			? nextElement.getBoundingClientRect()
+			: null;
+
+		if ( isVertical ) {
+			if ( isRTL() ) {
+				return {
+					top: previousRect ? previousRect.bottom : nextRect.top,
+					left: previousRect ? previousRect.right : nextRect.right,
+					right: previousRect ? previousRect.left : nextRect.left,
+					bottom: nextRect ? nextRect.top : previousRect.bottom,
+					ownerDocument,
+				};
+			}
+
+			return {
+				top: previousRect ? previousRect.bottom : nextRect.top,
+				left: previousRect ? previousRect.left : nextRect.left,
+				right: previousRect ? previousRect.right : nextRect.right,
+				bottom: nextRect ? nextRect.top : previousRect.bottom,
+				ownerDocument,
+			};
+		}
+
+		if ( isRTL() ) {
+			return {
+				top: previousRect ? previousRect.top : nextRect.top,
+				left: previousRect ? previousRect.left : nextRect.right,
+				right: nextRect ? nextRect.right : previousRect.left,
+				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+				ownerDocument,
+			};
+		}
+
+		return {
+			top: previousRect ? previousRect.top : nextRect.top,
+			left: previousRect ? previousRect.right : nextRect.left,
+			right: nextRect ? nextRect.left : previousRect.right,
+			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+			ownerDocument,
+		};
+	}, [ previousElement, nextElement ] );
+
+	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+
+	if ( ! previousElement || ! nextElement ) {
+		return null;
+	}
+
+	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+	// While ideally it would be enough to capture the
+	// bubbling focus event from the Inserter, due to the
+	// characteristics of click focusing of `button`s in
+	// Firefox and Safari, it is not reliable.
+	//
+	// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+	return (
+		<Popover
+			ref={ popoverScrollRef }
+			noArrow
+			animate={ false }
+			getAnchorRect={ getAnchorRect }
+			focusOnMount={ false }
+			// Render in the old slot if needed for backward compatibility,
+			// otherwise render in place (not in the the default popover slot).
+			__unstableSlotName={ __unstablePopoverSlot || null }
+			// Forces a remount of the popover when its position changes
+			// This makes sure the popover doesn't animate from its previous position.
+			key={ nextClientId + '--' + rootClientId }
+			{ ...props }
+			className={ classnames(
+				'block-editor-block-popover',
+				props.className
+			) }
+		>
+			<div style={ style }>{ children }</div>
+		</Popover>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+}
+
+export default BlockPopoverInbetween;
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
new file mode 100644
index 0000000000000..2bff678f977b6
--- /dev/null
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Popover } from '@wordpress/components';
+import { getScrollContainer } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import usePopoverScroll from './use-popover-scroll';
+
+export default function BlockPopover( {
+	clientId,
+	bottomClientId,
+	children,
+	__unstablePopoverSlot,
+	__unstableContentRef,
+	...props
+} ) {
+	const selectedElement = useBlockElement( clientId );
+	const lastSelectedElement = useBlockElement( bottomClientId ?? clientId );
+	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+
+	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
+		return null;
+	}
+
+	const anchorRef = {
+		top: selectedElement,
+		bottom: lastSelectedElement,
+	};
+
+	const { ownerDocument } = selectedElement;
+	const stickyBoundaryElement =
+		ownerDocument.defaultView.frameElement ||
+		getScrollContainer( selectedElement ) ||
+		ownerDocument.body;
+
+	return (
+		<Popover
+			ref={ popoverScrollRef }
+			noArrow
+			animate={ false }
+			position="top right left"
+			focusOnMount={ false }
+			anchorRef={ anchorRef }
+			__unstableStickyBoundaryElement={ stickyBoundaryElement }
+			// Render in the old slot if needed for backward compatibility,
+			// otherwise render in place (not in the the default popover slot).
+			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableBoundaryParent
+			// Observe movement for block animations (especially horizontal).
+			__unstableObserveElement={ selectedElement }
+			shouldAnchorIncludePadding
+			// Used to safeguard sticky position behavior against cases where it would permanently
+			// obscure specific sections of a block.
+			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
+			{ ...props }
+			className={ classnames(
+				'block-editor-block-popover',
+				props.className
+			) }
+		>
+			{ children }
+		</Popover>
+	);
+}
diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
new file mode 100644
index 0000000000000..86d11ed94007f
--- /dev/null
+++ b/packages/block-editor/src/components/block-popover/style.scss
@@ -0,0 +1,24 @@
+
+.components-popover.block-editor-block-popover {
+	z-index: z-index(".block-editor-block-popover");
+	position: absolute;
+
+	.components-popover__content {
+		margin: 0 !important;
+		min-width: auto;
+		width: max-content;
+		background: none;
+		border: none;
+		box-shadow: none;
+		overflow-y: visible;
+
+		// Allow clicking through the toolbar holder.
+		pointer-events: none;
+
+		// Position the block toolbar.
+		> * {
+			pointer-events: all;
+		}
+	}
+}
+
diff --git a/packages/block-editor/src/components/block-tools/use-popover-scroll.js b/packages/block-editor/src/components/block-popover/use-popover-scroll.js
similarity index 92%
rename from packages/block-editor/src/components/block-tools/use-popover-scroll.js
rename to packages/block-editor/src/components/block-popover/use-popover-scroll.js
index 59c395efac3ca..8aeb768e302f6 100644
--- a/packages/block-editor/src/components/block-tools/use-popover-scroll.js
+++ b/packages/block-editor/src/components/block-popover/use-popover-scroll.js
@@ -10,7 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  *
  * @param {Object} scrollableRef
  */
-export function usePopoverScroll( scrollableRef ) {
+function usePopoverScroll( scrollableRef ) {
 	return useRefEffect(
 		( node ) => {
 			if ( ! scrollableRef ) {
@@ -32,3 +32,5 @@ export function usePopoverScroll( scrollableRef ) {
 		[ scrollableRef ]
 	);
 }
+
+export default usePopoverScroll;
diff --git a/packages/block-editor/src/components/block-tools/back-compat.js b/packages/block-editor/src/components/block-tools/back-compat.js
index 0b7cf7cf702f0..eb8ba03cbf046 100644
--- a/packages/block-editor/src/components/block-tools/back-compat.js
+++ b/packages/block-editor/src/components/block-tools/back-compat.js
@@ -9,7 +9,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
-import BlockPopover from './block-popover';
+import BlockPopover from './selected-block-popover';
 
 export default function BlockToolsBackCompat( { children } ) {
 	const openRef = useContext( InsertionPointOpenRef );
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index 73805544c7f7a..07ba78151e9de 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -38,6 +38,7 @@ import BlockIcon from '../block-icon';
 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';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -49,7 +50,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
  *
  * @return {WPComponent} The component to be rendered.
  */
-function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
+function BlockSelectionButton( { clientId, rootClientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const selected = useSelect(
 		( select ) => {
@@ -90,6 +91,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 
 		speak( label );
 	}, [ label ] );
+	const blockElement = useBlockElement( clientId );
 
 	const {
 		hasBlockMovingClientId,
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index d581a43dae4a8..8ef20c29b5283 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -15,10 +15,10 @@ import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordp
  * Internal dependencies
  */
 import InsertionPoint from './insertion-point';
-import BlockPopover from './block-popover';
+import SelectedBlockPopover from './selected-block-popover';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
-import { usePopoverScroll } from './use-popover-scroll';
+import usePopoverScroll from '../block-popover/use-popover-scroll';
 
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
@@ -112,8 +112,10 @@ export default function BlockTools( {
 					<BlockContextualToolbar isFixed />
 				) }
 				{ /* Even if the toolbar is fixed, the block popover is still
-                 needed for navigation mode. */ }
-				<BlockPopover __unstableContentRef={ __unstableContentRef } />
+					needed for navigation and exploded mode. */ }
+				<SelectedBlockPopover
+					__unstableContentRef={ __unstableContentRef }
+				/>
 				{ /* Used for the inline rich text toolbar. */ }
 				<Popover.Slot
 					name="block-toolbar"
diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
index bd065dba4464f..96e3fb1043d71 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -7,24 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useCallback,
-	useRef,
-	useMemo,
-	createContext,
-	useContext,
-} from '@wordpress/element';
-import { Popover, __unstableMotion as motion } from '@wordpress/components';
+import { useRef, createContext, useContext } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
 import { useReducedMotion } from '@wordpress/compose';
-import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import { usePopoverScroll } from './use-popover-scroll';
+import BlockPopoverInbetween from '../block-popover/inbetween';
 
 export const InsertionPointOpenRef = createContext();
 
@@ -78,109 +70,10 @@ function InsertionPointPopover( {
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
-	const previousElement = useBlockElement( previousClientId );
-	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
-	const style = useMemo( () => {
-		if ( ! previousElement && ! nextElement ) {
-			return {};
-		}
-
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
-
-		if ( isVertical ) {
-			return {
-				width: previousElement
-					? previousElement.offsetWidth
-					: nextElement.offsetWidth,
-				height:
-					nextRect && previousRect
-						? nextRect.top - previousRect.bottom
-						: 0,
-			};
-		}
-
-		let width = 0;
-		if ( previousRect && nextRect ) {
-			width = isRTL()
-				? previousRect.left - nextRect.right
-				: nextRect.left - previousRect.right;
-		}
-
-		return {
-			width,
-			height: previousElement
-				? previousElement.offsetHeight
-				: nextElement.offsetHeight,
-		};
-	}, [ previousElement, nextElement ] );
-
-	const getAnchorRect = useCallback( () => {
-		if ( ! previousElement && ! nextElement ) {
-			return {};
-		}
-
-		const { ownerDocument } = previousElement || nextElement;
-
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
-
-		if ( isVertical ) {
-			if ( isRTL() ) {
-				return {
-					top: previousRect ? previousRect.bottom : nextRect.top,
-					left: previousRect ? previousRect.right : nextRect.right,
-					right: previousRect ? previousRect.left : nextRect.left,
-					bottom: nextRect ? nextRect.top : previousRect.bottom,
-					ownerDocument,
-				};
-			}
-
-			return {
-				top: previousRect ? previousRect.bottom : nextRect.top,
-				left: previousRect ? previousRect.left : nextRect.left,
-				right: previousRect ? previousRect.right : nextRect.right,
-				bottom: nextRect ? nextRect.top : previousRect.bottom,
-				ownerDocument,
-			};
-		}
-
-		if ( isRTL() ) {
-			return {
-				top: previousRect ? previousRect.top : nextRect.top,
-				left: previousRect ? previousRect.left : nextRect.right,
-				right: nextRect ? nextRect.right : previousRect.left,
-				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
-				ownerDocument,
-			};
-		}
 
-		return {
-			top: previousRect ? previousRect.top : nextRect.top,
-			left: previousRect ? previousRect.right : nextRect.left,
-			right: nextRect ? nextRect.left : previousRect.right,
-			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
-			ownerDocument,
-		};
-	}, [ previousElement, nextElement ] );
-
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 	const disableMotion = useReducedMotion();
 
-	const className = classnames(
-		'block-editor-block-list__insertion-point',
-		'is-' + orientation
-	);
-
 	function onClick( event ) {
 		if ( event.target === ref.current && nextClientId ) {
 			selectBlock( nextClientId, -1 );
@@ -203,11 +96,6 @@ function InsertionPointPopover( {
 		}
 	}
 
-	// Only show the in-between inserter between blocks, so when there's a
-	// previous and a next element.
-	const showInsertionPointInserter =
-		previousElement && nextElement && isInserterShown;
-
 	// Define animation variants for the line element.
 	const horizontalLine = {
 		start: {
@@ -261,7 +149,7 @@ function InsertionPointPopover( {
 			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: showInsertionPointInserter ? 0.4 : 0 },
+			transition: { delay: isInserterShown ? 0.4 : 0 },
 		},
 		hover: {
 			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
@@ -281,27 +169,17 @@ function InsertionPointPopover( {
 		},
 	};
 
-	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-	// While ideally it would be enough to capture the
-	// bubbling focus event from the Inserter, due to the
-	// characteristics of click focusing of `button`s in
-	// Firefox and Safari, it is not reliable.
-	//
-	// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+	const className = classnames(
+		'block-editor-block-list__insertion-point',
+		'is-' + orientation
+	);
+
 	return (
-		<Popover
-			ref={ popoverScrollRef }
-			noArrow
-			animate={ false }
-			getAnchorRect={ getAnchorRect }
-			focusOnMount={ false }
-			className="block-editor-block-list__insertion-point-popover"
-			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
-			// Forces a remount of the popover when its position changes
-			// This makes sure the popover doesn't animate from its previous position.
-			key={ nextClientId + '--' + rootClientId }
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+			__unstablePopoverSlot={ __unstablePopoverSlot }
+			__unstableContentRef={ __unstableContentRef }
 		>
 			<motion.div
 				layout={ ! disableMotion }
@@ -315,16 +193,15 @@ function InsertionPointPopover( {
 				onClick={ onClick }
 				onFocus={ onFocus }
 				className={ classnames( className, {
-					'is-with-inserter': showInsertionPointInserter,
+					'is-with-inserter': isInserterShown,
 				} ) }
 				onHoverEnd={ maybeHideInserterPoint }
-				style={ style }
 			>
 				<motion.div
 					variants={ lineVariants }
 					className="block-editor-block-list__insertion-point-indicator"
 				/>
-				{ showInsertionPointInserter && (
+				{ isInserterShown && (
 					<motion.div
 						variants={ inserterVariants }
 						className={ classnames(
@@ -346,28 +223,18 @@ function InsertionPointPopover( {
 					</motion.div>
 				) }
 			</motion.div>
-		</Popover>
+		</BlockPopoverInbetween>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 }
 
-export default function InsertionPoint( {
-	children,
-	__unstablePopoverSlot,
-	__unstableContentRef,
-} ) {
+export default function InsertionPoint( { children, ...props } ) {
 	const isVisible = useSelect( ( select ) => {
 		return select( blockEditorStore ).isBlockInsertionPointVisible();
 	}, [] );
 
 	return (
 		<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-			{ isVisible && (
-				<InsertionPointPopover
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-				/>
-			) }
+			{ isVisible && <InsertionPointPopover { ...props } /> }
 			{ children }
 		</InsertionPointOpenRef.Provider>
 	);
diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js
similarity index 62%
rename from packages/block-editor/src/components/block-tools/block-popover.js
rename to packages/block-editor/src/components/block-tools/selected-block-popover.js
index e6da62defa055..a96142a38bee7 100644
--- a/packages/block-editor/src/components/block-tools/block-popover.js
+++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js
@@ -9,11 +9,9 @@ import classnames from 'classnames';
  */
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
-import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -22,8 +20,7 @@ import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import { usePopoverScroll } from './use-popover-scroll';
+import BlockPopover from '../block-popover';
 
 function selector( select ) {
 	const {
@@ -40,16 +37,16 @@ function selector( select ) {
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		isCaretWithinFormattedText: isCaretWithinFormattedText(),
-		hasMultiSelection: hasMultiSelection(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
-		lastClientId: getLastMultiSelectedBlockClientId(),
+		lastClientId: hasMultiSelection()
+			? getLastMultiSelectedBlockClientId()
+			: null,
 	};
 }
 
-function BlockPopover( {
+function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
-	isValid,
 	isEmptyDefaultBlock,
 	capturingClientId,
 	__unstablePopoverSlot,
@@ -60,7 +57,6 @@ function BlockPopover( {
 		isMultiSelecting,
 		isTyping,
 		isCaretWithinFormattedText,
-		hasMultiSelection,
 		hasFixedToolbar,
 		lastClientId,
 	} = useSelect( selector, [] );
@@ -83,21 +79,19 @@ function BlockPopover( {
 		[ clientId ]
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const [ isToolbarForced, setIsToolbarForced ] = useState( false );
+	const isToolbarForced = useRef( false );
 	const [ isInserterShown, setIsInserterShown ] = useState( false );
 	const { stopTyping } = useDispatch( blockEditorStore );
 
-	// Controls when the side inserter on empty lines should
-	// be shown, including writing and selection modes.
 	const showEmptyBlockSideInserter =
-		! isTyping && ! isNavigationMode && isEmptyDefaultBlock && isValid;
+		! isTyping && ! isNavigationMode && isEmptyDefaultBlock;
 	const shouldShowBreadcrumb = isNavigationMode;
 	const shouldShowContextualToolbar =
 		! isNavigationMode &&
 		! hasFixedToolbar &&
 		isLargeViewport &&
-		! showEmptyBlockSideInserter &&
 		! isMultiSelecting &&
+		! showEmptyBlockSideInserter &&
 		( ! isTyping || isCaretWithinFormattedText );
 	const canFocusHiddenToolbar =
 		! isNavigationMode &&
@@ -108,7 +102,7 @@ function BlockPopover( {
 	useShortcut(
 		'core/block-editor/focus-toolbar',
 		() => {
-			setIsToolbarForced( true );
+			isToolbarForced.current = true;
 			stopTyping( true );
 		},
 		{
@@ -117,55 +111,17 @@ function BlockPopover( {
 	);
 
 	useEffect( () => {
-		if ( ! shouldShowContextualToolbar ) {
-			setIsToolbarForced( false );
-		}
-	}, [ shouldShowContextualToolbar ] );
+		isToolbarForced.current = false;
+	} );
 
 	// Stores the active toolbar item index so the block toolbar can return focus
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
-	const selectedElement = useBlockElement( clientId );
-	const lastSelectedElement = useBlockElement( lastClientId );
-	const capturingElement = useBlockElement( capturingClientId );
-
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
-
-	if (
-		! shouldShowBreadcrumb &&
-		! shouldShowContextualToolbar &&
-		! isToolbarForced &&
-		! showEmptyBlockSideInserter
-	) {
+	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
 		return null;
 	}
 
-	let node = selectedElement;
-
-	if ( ! node ) {
-		return null;
-	}
-
-	if ( capturingClientId ) {
-		node = capturingElement;
-	}
-
-	let anchorRef = node;
-
-	if ( hasMultiSelection ) {
-		// Wait to render the popover until the bottom reference is available
-		// as well.
-		if ( ! lastSelectedElement ) {
-			return null;
-		}
-
-		anchorRef = {
-			top: node,
-			bottom: lastSelectedElement,
-		};
-	}
-
 	function onFocus() {
 		setIsInserterShown( true );
 	}
@@ -174,48 +130,17 @@ function BlockPopover( {
 		setIsInserterShown( false );
 	}
 
-	// Position above the anchor, pop out towards the right, and position in the
-	// left corner. For the side inserter, pop out towards the left, and
-	// position in the right corner.
-	// To do: refactor `Popover` to make this prop clearer.
-	const popoverPosition = showEmptyBlockSideInserter
-		? 'top left right'
-		: 'top right left';
-	const { ownerDocument } = node;
-	const stickyBoundaryElement = showEmptyBlockSideInserter
-		? undefined
-		: // The sticky boundary element should be the boundary at which the
-		  // the block toolbar becomes sticky when the block scolls out of view.
-		  // In case of an iframe, this should be the iframe boundary, otherwise
-		  // the scroll container.
-		  ownerDocument.defaultView.frameElement ||
-		  getScrollContainer( node ) ||
-		  ownerDocument.body;
-
 	return (
-		<Popover
-			ref={ popoverScrollRef }
-			noArrow
-			animate={ false }
-			position={ popoverPosition }
-			focusOnMount={ false }
-			anchorRef={ anchorRef }
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
 			className={ classnames( 'block-editor-block-list__block-popover', {
 				'is-insertion-point-visible': isInsertionPointVisible,
 			} ) }
-			__unstableStickyBoundaryElement={ stickyBoundaryElement }
-			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
-			__unstableBoundaryParent
-			// Observe movement for block animations (especially horizontal).
-			__unstableObserveElement={ node }
-			shouldAnchorIncludePadding
-			// Used to safeguard sticky position behavior against cases where it would permanently
-			// obscure specific sections of a block.
-			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
+			__unstablePopoverSlot={ __unstablePopoverSlot }
+			__unstableContentRef={ __unstableContentRef }
 		>
-			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
+			{ shouldShowContextualToolbar && (
 				<div
 					onFocus={ onFocus }
 					onBlur={ onBlur }
@@ -240,11 +165,11 @@ function BlockPopover( {
 					/>
 				</div>
 			) }
-			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
+			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced }
+					focusOnMount={ isToolbarForced.current }
 					__experimentalInitialIndex={
 						initialToolbarItemIndexRef.current
 					}
@@ -260,20 +185,9 @@ function BlockPopover( {
 				<BlockSelectionButton
 					clientId={ clientId }
 					rootClientId={ rootClientId }
-					blockElement={ node }
 				/>
 			) }
-			{ showEmptyBlockSideInserter && (
-				<div className="block-editor-block-list__empty-block-inserter">
-					<Inserter
-						position="bottom right"
-						rootClientId={ rootClientId }
-						clientId={ clientId }
-						__experimentalIsQuick
-					/>
-				</div>
-			) }
-		</Popover>
+		</BlockPopover>
 	);
 }
 
@@ -294,7 +208,7 @@ function wrapperSelector( select ) {
 		return;
 	}
 
-	const { name, attributes = {}, isValid } = getBlock( clientId ) || {};
+	const { name, attributes = {} } = getBlock( clientId ) || {};
 	const blockParentsClientIds = getBlockParents( clientId );
 
 	// Get Block List Settings for all ancestors of the current Block clientId.
@@ -314,7 +228,6 @@ function wrapperSelector( select ) {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
-		isValid,
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -335,7 +248,6 @@ export default function WrappedBlockPopover( {
 		clientId,
 		rootClientId,
 		name,
-		isValid,
 		isEmptyDefaultBlock,
 		capturingClientId,
 	} = selected;
@@ -345,10 +257,9 @@ export default function WrappedBlockPopover( {
 	}
 
 	return (
-		<BlockPopover
+		<SelectedBlockPopover
 			clientId={ clientId }
 			rootClientId={ rootClientId }
-			isValid={ isValid }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index e13f97ed6b32b..3f026d1cd75a0 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -4,6 +4,10 @@
 
 .block-editor-block-list__insertion-point {
 	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
 .block-editor-block-list__insertion-point-indicator {
@@ -49,7 +53,6 @@
 }
 
 // Sibling inserter / "inbetweenserter".
-.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter,
 .block-editor-block-list__block-popover-inserter {
@@ -98,7 +101,7 @@
 		position: sticky;
 		top: 0;
 		width: 100%;
-		z-index: z-index(".block-editor-block-list__block-popover");
+		z-index: z-index(".block-editor-block-popover");
 		// Fill up when empty
 		min-height: $block-toolbar-height;
 		display: block;
@@ -181,37 +184,6 @@
 	}
 }
 
-/**
- * Popovers.
- */
-
-.block-editor-block-list__insertion-point-popover.is-without-arrow {
-	z-index: z-index(".block-editor-block-list__insertion-point-popover");
-	position: absolute;
-	pointer-events: none;
-
-	* {
-		pointer-events: none;
-	}
-
-	.is-with-inserter {
-		pointer-events: all;
-
-		* {
-			pointer-events: all;
-		}
-	}
-
-	.components-popover__content.components-popover__content {
-		// Needs specificity.
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-		margin-left: 0;
-	}
-}
-
 // Hide the popover block editor list while dragging.
 // Using a hacky animation to delay hiding the element.
 // It's needed because if we hide the element immediately upon dragging,
@@ -226,33 +198,12 @@
 }
 
 .components-popover.block-editor-block-list__block-popover {
-	z-index: z-index(".block-editor-block-list__block-popover");
-	position: absolute;
-
-	.components-popover__content {
-		margin: 0 !important;
-		min-width: auto;
-		width: max-content;
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-
-		// Allow clicking through the toolbar holder.
-		pointer-events: none;
-
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar,
-		.block-editor-block-list__empty-block-inserter {
-			pointer-events: all;
-		}
-
-		// Position the block toolbar.
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar {
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
-		}
+	// Position the block toolbar.
+	.block-editor-block-list__block-selection-button,
+	.block-editor-block-contextual-toolbar {
+		pointer-events: all;
+		margin-top: $grid-unit-15;
+		margin-bottom: $grid-unit-15;
 	}
 
 	// Hide the block toolbar if the insertion point is shown.
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
index d2359b77b2ec8..015743207898d 100644
--- a/packages/block-editor/src/components/default-block-appender/style.scss
+++ b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -34,8 +34,7 @@
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
 // that exists only on empty documents.
-.block-editor-default-block-appender .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
+.block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;
 	right: 0;
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 9907f61c03c3c..b2228762f12db 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -16,6 +16,7 @@
 @import "./components/block-navigation/style.scss";
 @import "./components/block-parent-selector/style.scss";
 @import "./components/block-patterns-list/style.scss";
+@import "./components/block-popover/style.scss";
 @import "./components/block-preview/style.scss";
 @import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";
diff --git a/packages/e2e-test-utils/src/click-block-appender.js b/packages/e2e-test-utils/src/click-block-appender.js
index ac133c073ded3..caae3dbf11dc7 100644
--- a/packages/e2e-test-utils/src/click-block-appender.js
+++ b/packages/e2e-test-utils/src/click-block-appender.js
@@ -10,4 +10,5 @@ export async function clickBlockAppender() {
 		'.block-editor-default-block-appender__content'
 	);
 	await appender.click();
+	await page.evaluate( () => new Promise( window.requestIdleCallback ) );
 }
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index c295fbd77f01a..5207771ad548b 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -10,7 +10,6 @@ import {
 	pressKeyTimes,
 	searchForBlock,
 	setBrowserViewport,
-	showBlockToolbar,
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
@@ -170,68 +169,6 @@ describe( 'Inserting blocks', () => {
 		).not.toBeNull();
 	} );
 
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/9583
-	it( 'should not allow transfer of focus outside of the block-insertion menu once open', async () => {
-		// Enter the default block and click the inserter toggle button to the left of it.
-		await page.keyboard.press( 'Enter' );
-		await showBlockToolbar();
-		await page.click(
-			'.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle'
-		);
-
-		// Expect the inserter search input to be the active element.
-		let activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'components-search-control__input'
-		);
-
-		// Try using the up arrow key (vertical navigation triggers the issue described in #9583).
-		await page.keyboard.press( 'ArrowUp' );
-
-		// Expect the inserter search input to still be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'components-search-control__input'
-		);
-
-		// Tab to the block list.
-		await page.keyboard.press( 'Tab' );
-
-		// Expect the block list to be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-block-types-list__item'
-		);
-
-		// Try using the up arrow key.
-		await page.keyboard.press( 'ArrowUp' );
-
-		// Expect the block list to still be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-block-types-list__item'
-		);
-
-		// Press escape to close the block inserter.
-		await page.keyboard.press( 'Escape' );
-
-		// Expect focus to have transferred back to the inserter toggle button.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-inserter__toggle'
-		);
-	} );
-
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/23263
 	it( 'inserts blocks at root level when using the root appender while selection is in an inner block', async () => {
 		await insertBlock( 'Buttons' );
@@ -310,12 +247,11 @@ describe( 'Inserting blocks', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'First paragraph' );
 		await insertBlock( 'Image' );
-		await showBlockToolbar();
 		const paragraphBlock = await page.$(
 			'p[aria-label="Paragraph block"]'
 		);
 		paragraphBlock.click();
-		await showBlockToolbar();
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
 
 		// Open the global inserter and search for the Heading block.
 		await searchForBlock( 'Heading' );
@@ -323,7 +259,6 @@ describe( 'Inserting blocks', () => {
 		const headingButton = (
 			await page.$x( `//button//span[contains(text(), 'Heading')]` )
 		 )[ 0 ];
-
 		// Hover over the block should show the blue line indicator.
 		await headingButton.hover();
 
diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
index ddc36ff4a4770..1a1fe9a2e0157 100644
--- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
+++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
@@ -42,9 +42,7 @@ async function testBlockToolbarKeyboardNavigation(
 
 async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
 	await page.click( `[aria-label="${ currentBlockTitle }"]` );
-	await page.evaluate( () => {
-		document.querySelector( '.editor-block-list-item-group' ).click();
-	} );
+	await page.click( '.editor-block-list-item-group' );
 }
 
 async function testGroupKeyboardNavigation(