diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 2c895c1f286ac4..ea67d3bc7b8df0 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -18,6 +18,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 import {
 	BlockEditorProvider,
 	BlockList,
+	BlockTools,
 	WritingFlow,
 	ObserveTyping,
 } from '@wordpress/block-editor';
@@ -34,12 +35,13 @@ function MyEditorComponent() {
 			onChange={ ( blocks ) => updateBlocks( blocks ) }
 		>
 			<SlotFillProvider>
-				<Popover.Slot name="block-toolbar" />
-				<WritingFlow>
-					<ObserveTyping>
-						<BlockList />
-					</ObserveTyping>
-				</WritingFlow>
+				<BlockTools>
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList />
+						</ObserveTyping>
+					</WritingFlow>
+				</BlockTools>
 				<Popover.Slot />
 			</SlotFillProvider>
 		</BlockEditorProvider>
@@ -226,6 +228,17 @@ _Returns_
 
 Undocumented declaration.
 
+<a name="BlockTools" href="#BlockTools">#</a> **BlockTools**
+
+Renders block tools (the block toolbar, select/navigation mode toolbar, the
+insertion point and a slot for the inline rich text toolbar). Must be wrapped
+around the block content and editor styles wrapper or iframe.
+
+_Parameters_
+
+-   _$0_ `Object`: Props.
+-   _$0.children_ `Object`: The block content and style container.
+
 <a name="BlockVerticalAlignmentControl" href="#BlockVerticalAlignmentControl">#</a> **BlockVerticalAlignmentControl**
 
 Undocumented declaration.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 4d866a6994ec6b..9ba63035bfa8e7 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -16,10 +16,10 @@ import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import useBlockDropZone from '../use-block-drop-zone';
 import { useInBetweenInserter } from './use-in-between-inserter';
-import BlockTools from '../block-tools';
 import { store as blockEditorStore } from '../../store';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
+import BlockToolsBackCompat from '../block-tools/back-compat';
 
 function Root( { className, children } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -67,11 +67,11 @@ function Root( { className, children } ) {
 export default function BlockList( { className, __experimentalLayout } ) {
 	usePreParsePatterns();
 	return (
-		<BlockTools>
+		<BlockToolsBackCompat>
 			<Root className={ className }>
 				<BlockListItems __experimentalLayout={ __experimentalLayout } />
 			</Root>
-		</BlockTools>
+		</BlockToolsBackCompat>
 	);
 }
 
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index f5c93ab2566918..5f85f371637008 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,7 +44,7 @@
 	}
 }
 
-.block-editor-block-contextual-toolbar.has-parent {
+.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
 	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
 
 	.show-icon-labels & {
diff --git a/packages/block-editor/src/components/block-tools/back-compat.js b/packages/block-editor/src/components/block-tools/back-compat.js
new file mode 100644
index 00000000000000..a3bfb4ee68ab17
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/back-compat.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { Disabled } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
+import BlockPopover from './block-popover';
+
+export default function BlockToolsBackCompat( { children } ) {
+	const openRef = useContext( InsertionPointOpenRef );
+	const isDisabled = useContext( Disabled.Context );
+
+	// If context is set, `BlockTools` is a parent component.
+	if ( openRef || isDisabled ) {
+		return children;
+	}
+
+	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
+		alternative: 'wp.blockEditor.BlockTools',
+	} );
+
+	return (
+		<InsertionPoint __unstablePopoverSlot="block-toolbar">
+			<BlockPopover __unstablePopoverSlot="block-toolbar" />
+			{ children }
+		</InsertionPoint>
+	);
+}
diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
index c33c4024edbb3f..f08341a191fa08 100644
--- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
@@ -14,10 +14,10 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import NavigableToolbar from '../navigable-toolbar';
-import { BlockToolbar } from '../';
+import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 
-function BlockContextualToolbar( { focusOnMount, ...props } ) {
+function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const { blockType, hasParents } = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -43,20 +43,19 @@ function BlockContextualToolbar( { focusOnMount, ...props } ) {
 	// Shifts the toolbar to make room for the parent block selector.
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents,
+		'is-fixed': isFixed,
 	} );
 
 	return (
-		<div className="block-editor-block-contextual-toolbar-wrapper">
-			<NavigableToolbar
-				focusOnMount={ focusOnMount }
-				className={ classes }
-				/* translators: accessibility text for the block toolbar */
-				aria-label={ __( 'Block tools' ) }
-				{ ...props }
-			>
-				<BlockToolbar />
-			</NavigableToolbar>
-		</div>
+		<NavigableToolbar
+			focusOnMount={ focusOnMount }
+			className={ classes }
+			/* translators: accessibility text for the block toolbar */
+			aria-label={ __( 'Block tools' ) }
+			{ ...props }
+		>
+			<BlockToolbar hideDragHandle={ isFixed } />
+		</NavigableToolbar>
 	);
 }
 
diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js
index 822a942308b233..8b82c1b1847db9 100644
--- a/packages/block-editor/src/components/block-tools/block-popover.js
+++ b/packages/block-editor/src/components/block-tools/block-popover.js
@@ -51,6 +51,7 @@ function BlockPopover( {
 	isValid,
 	isEmptyDefaultBlock,
 	capturingClientId,
+	__unstablePopoverSlot,
 } ) {
 	const {
 		isNavigationMode,
@@ -180,7 +181,9 @@ function BlockPopover( {
 			anchorRef={ anchorRef }
 			className="block-editor-block-list__block-popover"
 			__unstableStickyBoundaryElement={ stickyBoundaryElement }
-			__unstableSlotName="block-toolbar"
+			// 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 }
@@ -293,7 +296,7 @@ function wrapperSelector( select ) {
 	};
 }
 
-export default function WrappedBlockPopover() {
+export default function WrappedBlockPopover( { __unstablePopoverSlot } ) {
 	const selected = useSelect( wrapperSelector, [] );
 
 	if ( ! selected ) {
@@ -320,6 +323,7 @@ export default function WrappedBlockPopover() {
 			isValid={ isValid }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
 			capturingClientId={ capturingClientId }
+			__unstablePopoverSlot={ __unstablePopoverSlot }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 14aaf661c001e7..73fda8a70ce9e7 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -1,14 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { Popover } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import InsertionPoint from './insertion-point';
 import BlockPopover from './block-popover';
+import { store as blockEditorStore } from '../../store';
+import BlockContextualToolbar from './block-contextual-toolbar';
 
+/**
+ * Renders block tools (the block toolbar, select/navigation mode toolbar, the
+ * insertion point and a slot for the inline rich text toolbar). Must be wrapped
+ * around the block content and editor styles wrapper or iframe.
+ *
+ * @param {Object} $0          Props.
+ * @param {Object} $0.children The block content and style container.
+ */
 export default function BlockTools( { children } ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const hasFixedToolbar = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().hasFixedToolbar,
+		[]
+	);
+
 	return (
 		<InsertionPoint>
+			{ ( hasFixedToolbar || ! isLargeViewport ) && (
+				<BlockContextualToolbar isFixed />
+			) }
+			{ /* Even if the toolbar is fixed, the block popover is still
+                 needed for navigation mode. */ }
 			<BlockPopover />
+			{ /* Used for the inline rich text toolbar. */ }
+			<Popover.Slot name="block-toolbar" />
 			{ children }
+			{ /* Forward compatibility: a place to render block tools behind the
+                 content so it can be tabbed to properly. */ }
 		</InsertionPoint>
 	);
 }
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 b462565d8f95b0..32b51c626e75e0 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -26,7 +26,7 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-
 
 export const InsertionPointOpenRef = createContext();
 
-function InsertionPointPopover() {
+function InsertionPointPopover( { __unstablePopoverSlot } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
@@ -117,6 +117,7 @@ function InsertionPointPopover() {
 	}, [ previousElement, nextElement ] );
 
 	const getAnchorRect = useCallback( () => {
+		const { ownerDocument } = previousElement;
 		const previousRect = previousElement.getBoundingClientRect();
 		const nextRect = nextElement
 			? nextElement.getBoundingClientRect()
@@ -128,6 +129,7 @@ function InsertionPointPopover() {
 					left: previousRect.right,
 					right: previousRect.left,
 					bottom: nextRect ? nextRect.top : previousRect.bottom,
+					ownerDocument,
 				};
 			}
 
@@ -136,6 +138,7 @@ function InsertionPointPopover() {
 				left: previousRect.left,
 				right: previousRect.right,
 				bottom: nextRect ? nextRect.top : previousRect.bottom,
+				ownerDocument,
 			};
 		}
 
@@ -145,6 +148,7 @@ function InsertionPointPopover() {
 				left: nextRect ? nextRect.right : previousRect.left,
 				right: previousRect.left,
 				bottom: previousRect.bottom,
+				ownerDocument,
 			};
 		}
 
@@ -153,6 +157,7 @@ function InsertionPointPopover() {
 			left: previousRect.right,
 			right: nextRect ? nextRect.left : previousRect.right,
 			bottom: previousRect.bottom,
+			ownerDocument,
 		};
 	}, [ previousElement, nextElement ] );
 
@@ -205,7 +210,9 @@ function InsertionPointPopover() {
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
 			className="block-editor-block-list__insertion-point-popover"
-			__unstableSlotName="block-toolbar"
+			// Render in the old slot if needed for backward compatibility,
+			// otherwise render in place (not in the the default popover slot).
+			__unstableSlotName={ __unstablePopoverSlot || null }
 		>
 			<div
 				ref={ ref }
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 013f24b784e131..35f8a4f12dcb56 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -124,6 +124,25 @@
 		border-right-color: $gray-900;
 	}
 
+	&.is-fixed {
+		position: sticky;
+		top: 0;
+		width: 100%;
+		z-index: z-index(".block-editor-block-list__block-popover");
+		// Fill up when empty
+		min-height: $block-toolbar-height;
+		display: block;
+
+		border: none;
+		border-bottom: $border-width solid $gray-200;
+		border-radius: 0;
+
+		.block-editor-block-toolbar .components-toolbar-group,
+		.block-editor-block-toolbar .components-toolbar {
+			border-right-color: $gray-200;
+		}
+	}
+
 	.block-editor-block-mover-button {
 		overflow: hidden;
 	}
@@ -140,29 +159,23 @@
 }
 
 // Position mover arrows for both toolbars.
-.block-editor-block-contextual-toolbar,
-.edit-post-header-toolbar__block-toolbar,
-.edit-site-header-toolbar__block-toolbar,
-.edit-navigation-layout__block-toolbar,
-.edit-widgets-header__block-toolbar {
-	.block-editor-block-mover:not(.is-horizontal) {
-		// Position SVGs.
-		.block-editor-block-mover-button {
-			&:focus::before {
-				left: 0 !important;
-				min-width: 0;
-				width: 100%;
-			}
+.block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) {
+	// Position SVGs.
+	.block-editor-block-mover-button {
+		&:focus::before {
+			left: 0 !important;
+			min-width: 0;
+			width: 100%;
 		}
+	}
 
-		@include break-small() {
-			.block-editor-block-mover-button.is-up-button svg {
-				top: 5px;
-			}
+	@include break-small() {
+		.block-editor-block-mover-button.is-up-button svg {
+			top: 5px;
+		}
 
-			.block-editor-block-mover-button.is-down-button svg {
-				bottom: 5px;
-			}
+		.block-editor-block-mover-button.is-down-button svg {
+			bottom: 5px;
 		}
 	}
 }
@@ -234,7 +247,6 @@
 	}
 }
 
-
 /**
  * Popovers.
  */
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 669b8e1ade2a54..c5fa4e766e6e43 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -105,6 +105,7 @@ export { default as BlockSettingsMenu } from './block-settings-menu';
 export { default as BlockSettingsMenuControls } from './block-settings-menu-controls';
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
+export { default as BlockTools } from './block-tools';
 export {
 	default as CopyHandler,
 	useClipboardHandler as __unstableUseClipboardHandler,
diff --git a/packages/components/src/disabled/index.js b/packages/components/src/disabled/index.js
index 2e7cab577a2bd1..e05bdea2bd19f4 100644
--- a/packages/components/src/disabled/index.js
+++ b/packages/components/src/disabled/index.js
@@ -20,7 +20,8 @@ import { focus } from '@wordpress/dom';
  */
 import { StyledWrapper } from './styles/disabled-styles';
 
-const { Consumer, Provider } = createContext( false );
+const Context = createContext( false );
+const { Consumer, Provider } = Context;
 
 /**
  * Names of control nodes which qualify for disabled behavior.
@@ -111,6 +112,7 @@ function Disabled( { className, children, isDisabled = true, ...props } ) {
 	);
 }
 
+Disabled.Context = Context;
 Disabled.Consumer = Consumer;
 
 export default Disabled;
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 0cb8a975344fad..5833a836056363 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -53,9 +53,10 @@ function computeAnchorRect(
 			return;
 		}
 
+		const rect = getAnchorRect( anchorRefFallback.current );
 		return offsetIframe(
-			getAnchorRect( anchorRefFallback.current ),
-			anchorRefFallback.current.ownerDocument
+			rect,
+			rect.ownerDocument || anchorRefFallback.current.ownerDocument
 		);
 	}
 
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index b0788a513dc3b9..f7f72531f326b1 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
 import { useMemo, createPortal } from '@wordpress/element';
 import {
 	BlockList,
+	BlockTools,
 	BlockSelectionClearer,
 	BlockInspector,
 	ObserveTyping,
@@ -79,17 +80,15 @@ export default function SidebarBlockEditor( {
 						setIsInserterOpened={ setIsInserterOpened }
 					/>
 
-					<div className="customize-widgets__contextual-toolbar-wrapper">
-						<Popover.Slot name="block-toolbar" />
-					</div>
-
-					<BlockSelectionClearer>
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
-						</WritingFlow>
-					</BlockSelectionClearer>
+					<BlockTools>
+						<BlockSelectionClearer>
+							<WritingFlow>
+								<ObserveTyping>
+									<BlockList />
+								</ObserveTyping>
+							</WritingFlow>
+						</BlockSelectionClearer>
+					</BlockTools>
 
 					{ createPortal(
 						// This is a temporary hack to prevent button component inside <BlockInspector>
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
index 6f200ba31144a6..c74cd056b4affd 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
@@ -1,4 +1,4 @@
-.customize-widgets__contextual-toolbar-wrapper {
+.customize-control-sidebar_block_editor .block-editor-block-list__block-popover {
 	position: fixed;
 	// Appear over block placeholders, but under widgets page headings.
 	z-index: 8;
diff --git a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
index e108828c31e638..5a0c79151b2778 100644
--- a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
+++ b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
@@ -3,6 +3,14 @@
  */
 import { createNewPost, pressKeyWithModifier } from '@wordpress/e2e-test-utils';
 
+async function isInBlockToolbar() {
+	return await page.evaluate( () => {
+		return !! document.activeElement.closest(
+			'.block-editor-block-toolbar'
+		);
+	} );
+}
+
 describe.each( [
 	[ 'unified', true ],
 	[ 'contextual', false ],
@@ -21,18 +29,6 @@ describe.each( [
 		}, isUnifiedToolbar );
 	} );
 
-	const isInBlockToolbar = () =>
-		page.evaluate( ( _isUnifiedToolbar ) => {
-			if ( _isUnifiedToolbar ) {
-				return !! document.activeElement
-					.closest( '.edit-post-header-toolbar' )
-					.querySelector( '.block-editor-block-toolbar' );
-			}
-			return !! document.activeElement.closest(
-				'.block-editor-block-toolbar'
-			);
-		}, isUnifiedToolbar );
-
 	it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => {
 		// Assumes new post focus starts in title. Create first new
 		// block by ArrowDown.
diff --git a/packages/edit-navigation/src/components/layout/block-toolbar.js b/packages/edit-navigation/src/components/layout/block-toolbar.js
deleted file mode 100644
index 082aec025fed89..00000000000000
--- a/packages/edit-navigation/src/components/layout/block-toolbar.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	BlockToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { Popover } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-
-export default function NavigationEditorBlockToolbar( { isFixed } ) {
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
-	return (
-		<>
-			<Popover.Slot name="block-toolbar" />
-			{ isFixed && (
-				<div className="edit-navigation-layout__block-toolbar">
-					{ ! isNavigationMode && <BlockToolbar hideDragHandle /> }
-				</div>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index 6cb4be9099693d..1afed1978c90ab 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/packages/edit-navigation/src/components/layout/index.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
+	BlockTools,
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 } from '@wordpress/block-editor';
 import { Popover, SlotFillProvider, Spinner } from '@wordpress/components';
@@ -37,7 +38,6 @@ import NavigationEditorShortcuts from './shortcuts';
 import Sidebar from './sidebar';
 import Header from '../header';
 import Notices from '../notices';
-import BlockToolbar from './block-toolbar';
 import Editor from '../editor';
 import InspectorAdditions from '../inspector-additions';
 import { store as editNavigationStore } from '../../store';
@@ -163,10 +163,7 @@ export default function Layout( { blockEditorSettings } ) {
 											/>
 										) }
 									{ isBlockEditorReady && (
-										<>
-											<BlockToolbar
-												isFixed={ ! isLargeViewport }
-											/>
+										<BlockTools>
 											<div
 												className="edit-navigation-layout__content-area"
 												ref={ contentAreaRef }
@@ -196,7 +193,7 @@ export default function Layout( { blockEditorSettings } ) {
 													}
 												/>
 											</div>
-										</>
+										</BlockTools>
 									) }
 								</>
 							}
diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
index 1a802cefff5ac3..423c2cbdf41265 100644
--- a/packages/edit-navigation/src/components/layout/style.scss
+++ b/packages/edit-navigation/src/components/layout/style.scss
@@ -64,34 +64,6 @@
 	}
 }
 
-.edit-navigation-layout__block-toolbar {
-	// Make the fixed toolbar appear in a similar position to the floating toolbar.
-	// Take the spacing for the floating toolbar, then subtract the toolbar height and
-	// the gap between the content area and the toolbar.
-	margin-top: $navigation-editor-spacing-top - $block-toolbar-height - $grid-unit-15;
-
-	.block-editor-block-toolbar {
-		background: $white;
-		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
-		max-width: $navigation-editor-width;
-		margin: auto;
-		overflow-y: hidden;
-	}
-
-	.components-toolbar,
-	.components-toolbar-group {
-		border-right-color: $gray-900;
-
-		.components-toolbar,
-		.components-toolbar-group {
-			border-width: 0;
-		}
-	}
-
-	height: $block-toolbar-height;
-}
-
 .edit-navigation-empty-state {
 	max-width: $navigation-editor-width;
 	margin-left: auto;
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index a7014f63eef3db..7aa191a0163987 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -10,7 +5,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import {
-	BlockToolbar,
 	NavigableToolbar,
 	BlockNavigationDropdown,
 	ToolSelector,
@@ -35,13 +29,10 @@ function HeaderToolbar() {
 	const inserterButton = useRef();
 	const { setIsInserterOpened } = useDispatch( editPostStore );
 	const {
-		hasFixedToolbar,
 		isInserterEnabled,
 		isInserterOpened,
 		isTextModeEnabled,
-		previewDeviceType,
 		showIconLabels,
-		isTemplateMode,
 	} = useSelect( ( select ) => {
 		const {
 			hasInserterItems,
@@ -49,9 +40,6 @@ function HeaderToolbar() {
 			getBlockSelectionEnd,
 		} = select( blockEditorStore );
 		return {
-			hasFixedToolbar: select( editPostStore ).isFeatureActive(
-				'fixedToolbar'
-			),
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			isInserterEnabled:
 				select( editPostStore ).getEditorMode() === 'visual' &&
@@ -63,26 +51,16 @@ function HeaderToolbar() {
 			isInserterOpened: select( editPostStore ).isInserterOpened(),
 			isTextModeEnabled:
 				select( editPostStore ).getEditorMode() === 'text',
-			previewDeviceType: select(
-				editPostStore
-			).__experimentalGetPreviewDeviceType(),
 			showIconLabels: select( editPostStore ).isFeatureActive(
 				'showIconLabels'
 			),
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
 
-	const displayBlockToolbar =
-		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
-
-	const toolbarAriaLabel = displayBlockToolbar
-		? /* translators: accessibility text for the editor toolbar when Top Toolbar is on */
-		  __( 'Document and block tools' )
-		: /* translators: accessibility text for the editor toolbar when Top Toolbar is off */
-		  __( 'Document tools' );
+	/* translators: accessibility text for the editor toolbar */
+	const toolbarAriaLabel = __( 'Document tools' );
 
 	const overflowItems = (
 		<>
@@ -163,19 +141,6 @@ function HeaderToolbar() {
 			</div>
 
 			<TemplateTitle />
-
-			{ displayBlockToolbar && (
-				<div
-					className={ classnames(
-						'edit-post-header-toolbar__block-toolbar',
-						{
-							'is-pushed-down': isTemplateMode,
-						}
-					) }
-				>
-					<BlockToolbar hideDragHandle />
-				</div>
-			) }
 		</NavigableToolbar>
 	);
 }
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index f1be46ff3c2803..5ce5499012446d 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -92,68 +92,6 @@
 	}
 }
 
-// Block toolbar when fixed to the top of the screen.
-.edit-post-header-toolbar__block-toolbar {
-	// Stack toolbar below Editor Bar.
-	position: absolute;
-	top: $header-height + $border-width;
-	left: 0;
-	right: 0;
-	background: $white;
-	border-bottom: $border-width solid $gray-300;
-
-	&:empty {
-		display: none;
-	}
-
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-top: none;
-		border-bottom: none;
-	}
-
-	.is-sidebar-opened & {
-		display: none;
-	}
-
-	.block-editor-block-toolbar__block-parent-selector-wrapper {
-		display: none;
-	}
-
-	@include break-medium {
-		.is-sidebar-opened & {
-			display: block;
-			right: $sidebar-width;
-		}
-	}
-
-	// Move toolbar into top Editor Bar.
-	@include break-wide {
-		&:not(.is-pushed-down) {
-			position: static;
-			left: auto;
-			right: auto;
-			background: none;
-			border-bottom: none;
-
-			.is-sidebar-opened & {
-				right: auto;
-			}
-
-			.block-editor-block-toolbar {
-				border-left: $border-width solid $gray-300;
-			}
-
-			.block-editor-block-toolbar .components-toolbar-group,
-			.block-editor-block-toolbar .components-toolbar {
-				$top-toolbar-padding: ($header-height - $grid-unit-60) / 2;
-				height: $header-height;
-				padding: $top-toolbar-padding 0;
-			}
-		}
-	}
-}
-
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
 	margin-right: $grid-unit-10;
 	// Special dimensions for this button.
@@ -172,28 +110,6 @@
 	padding: 0 $grid-unit-10;
 }
 
-.show-icon-labels {
-
-	.edit-post-header-toolbar__left > * + * {
-		margin-left: $grid-unit-10;
-	}
-
-	// Always display block toolbar under main toolbar when text labels are visible
-	.edit-post-header-toolbar__block-toolbar {
-		@include break-wide {
-			position: absolute;
-			top: $header-height + $border-width;
-			left: 0;
-			right: 0;
-			border-bottom: $border-width solid $gray-300;
-			padding: 0;
-			background-color: $white;
-
-			.block-editor-block-toolbar .components-toolbar-group,
-			.block-editor-block-toolbar .components-toolbar {
-				height: auto;
-				padding: 0;
-			}
-		}
-	}
+.show-icon-labels .edit-post-header-toolbar__left > * + * {
+	margin-left: $grid-unit-10;
 }
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index bed80afdcb5775..abbf333442cb0c 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -14,6 +14,7 @@ import {
 import {
 	WritingFlow,
 	BlockList,
+	BlockTools,
 	store as blockEditorStore,
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 	__unstableUseTypewriter as useTypewriter,
@@ -29,7 +30,7 @@ import {
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
-import { Popover, Button } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { arrowLeft } from '@wordpress/icons';
@@ -103,6 +104,8 @@ export default function VisualEditor( { styles } ) {
 		height: '100%',
 		width: '100%',
 		margin: 0,
+		display: 'flex',
+		flexFlow: 'column',
 	};
 	const templateModeStyles = {
 		...desktopCanvasStyles,
@@ -192,42 +195,43 @@ export default function VisualEditor( { styles } ) {
 				animate={ animatedStyles }
 				initial={ desktopCanvasStyles }
 			>
-				<Popover.Slot name="block-toolbar" />
-				<MaybeIframe
-					isTemplateMode={ isTemplateMode }
-					contentRef={ contentRef }
-					styles={ styles }
-					style={ { paddingBottom } }
-				>
-					<AnimatePresence>
-						<motion.div
-							key={ isTemplateMode ? 'template' : 'post' }
-							initial={ { opacity: 0 } }
-							animate={ { opacity: 1 } }
-						>
-							<WritingFlow>
-								{ ! isTemplateMode && (
-									<div className="edit-post-visual-editor__post-title-wrapper">
-										<PostTitle />
-									</div>
-								) }
-								<BlockList
-									__experimentalLayout={
-										themeSupportsLayout
-											? {
-													type: 'default',
-													// Find a way to inject this in the support flag code (hooks).
-													alignments: themeSupportsLayout
-														? alignments
-														: undefined,
-											  }
-											: undefined
-									}
-								/>
-							</WritingFlow>
-						</motion.div>
-					</AnimatePresence>
-				</MaybeIframe>
+				<BlockTools>
+					<MaybeIframe
+						isTemplateMode={ isTemplateMode }
+						contentRef={ contentRef }
+						styles={ styles }
+						style={ { paddingBottom } }
+					>
+						<AnimatePresence>
+							<motion.div
+								key={ isTemplateMode ? 'template' : 'post' }
+								initial={ { opacity: 0 } }
+								animate={ { opacity: 1 } }
+							>
+								<WritingFlow>
+									{ ! isTemplateMode && (
+										<div className="edit-post-visual-editor__post-title-wrapper">
+											<PostTitle />
+										</div>
+									) }
+									<BlockList
+										__experimentalLayout={
+											themeSupportsLayout
+												? {
+														type: 'default',
+														// Find a way to inject this in the support flag code (hooks).
+														alignments: themeSupportsLayout
+															? alignments
+															: undefined,
+												  }
+												: undefined
+										}
+									/>
+								</WritingFlow>
+							</motion.div>
+						</AnimatePresence>
+					</MaybeIframe>
+				</BlockTools>
 			</motion.div>
 			<__unstableBlockSettingsMenuFirstItem>
 				{ ( { onClose } ) => (
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 79e1d43e8f7626..234db2a5a96637 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -1,6 +1,7 @@
 .edit-post-visual-editor {
 	position: relative;
-
+	display: flex;
+	flex-flow: column;
 
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 266a6df88bd6a3..3aa39ff2f816ed 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -11,6 +11,7 @@ import {
 	BlockInspector,
 	WritingFlow,
 	BlockList,
+	BlockTools,
 	__unstableBlockSettingsMenuFirstItem,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
@@ -19,7 +20,6 @@ import {
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
-import { Popover } from '@wordpress/components';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 
 /**
@@ -102,25 +102,26 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<BlockInspector />
 			</SidebarInspectorFill>
 			<div className="edit-site-visual-editor" ref={ toolWrapperRef }>
-				<Popover.Slot name="block-toolbar" />
-				<Iframe
-					style={ resizedCanvasStyles }
-					headHTML={ window.__editorStyles.html }
-					head={ <EditorStyles styles={ settings.styles } /> }
-					ref={ ref }
-					contentRef={ mergedRefs }
-				>
-					<WritingFlow>
-						<BlockList
-							className="edit-site-block-editor__block-list"
-							__experimentalLayout={ {
-								type: 'default',
-								// At the root level of the site editor, no alignments should be allowed.
-								alignments: [],
-							} }
-						/>
-					</WritingFlow>
-				</Iframe>
+				<BlockTools>
+					<Iframe
+						style={ resizedCanvasStyles }
+						headHTML={ window.__editorStyles.html }
+						head={ <EditorStyles styles={ settings.styles } /> }
+						ref={ ref }
+						contentRef={ mergedRefs }
+					>
+						<WritingFlow>
+							<BlockList
+								className="edit-site-block-editor__block-list"
+								__experimentalLayout={ {
+									type: 'default',
+									// At the root level of the site editor, no alignments should be allowed.
+									alignments: [],
+								} }
+							/>
+						</WritingFlow>
+					</Iframe>
+				</BlockTools>
 				<__unstableBlockSettingsMenuFirstItem>
 					{ ( { onClose } ) => (
 						<BlockInspectorButton onClick={ onClose } />
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 1e1737185747a5..1b8283f3d1a159 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -23,6 +23,8 @@
 .edit-site-visual-editor {
 	position: relative;
 	height: 100%;
+	display: flex;
+	flex-flow: column;
 
 	iframe {
 		display: block;
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 1ecc11aa842156..9c6bdcb8c4e945 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -5,7 +5,6 @@ import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	ToolSelector,
-	BlockToolbar,
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -36,7 +35,6 @@ export default function Header( {
 	const {
 		deviceType,
 		entityTitle,
-		hasFixedToolbar,
 		template,
 		templateType,
 		isInserterOpen,
@@ -46,7 +44,6 @@ export default function Header( {
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
-			isFeatureActive,
 			getEditedPostType,
 			getEditedPostId,
 			isInserterOpened,
@@ -71,7 +68,6 @@ export default function Header( {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			entityTitle: _entityTitle,
 			isLoaded: _isLoaded,
-			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
 			template: record,
 			templateType: postType,
 			isInserterOpen: isInserterOpened(),
@@ -89,8 +85,6 @@ export default function Header( {
 	} = useDispatch( editSiteStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const displayBlockToolbar =
-		! isLargeViewport || deviceType !== 'Desktop' || hasFixedToolbar;
 
 	return (
 		<div className="edit-site-header">
@@ -136,11 +130,6 @@ export default function Header( {
 							/>
 						</>
 					) }
-					{ displayBlockToolbar && (
-						<div className="edit-site-header-toolbar__block-toolbar">
-							<BlockToolbar hideDragHandle />
-						</div>
-					) }
 				</div>
 			</div>
 
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
index 1b4d68e1c8f71b..b7fd7852ad2fd3 100644
--- a/packages/edit-site/src/components/header/style.scss
+++ b/packages/edit-site/src/components/header/style.scss
@@ -162,60 +162,3 @@ body.is-navigation-sidebar-open {
 		}
 	}
 }
-
-// Block toolbar when fixed to the top of the screen.
-.edit-site-header-toolbar__block-toolbar {
-	// Stack toolbar below Editor Bar.
-	position: absolute;
-	top: $header-height + $border-width;
-	left: 0;
-	right: 0;
-	background: $white;
-	border-bottom: $border-width solid $gray-300;
-
-	&:empty {
-		display: none;
-	}
-
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-top: none;
-		border-bottom: none;
-	}
-
-	.is-sidebar-opened & {
-		display: none;
-	}
-
-	@include break-medium {
-		.is-sidebar-opened & {
-			display: block;
-			right: $sidebar-width;
-		}
-	}
-
-	// Move toolbar into top Editor Bar.
-	@include break-wide {
-		padding-left: $grid-unit-10;
-		position: static;
-		left: auto;
-		right: auto;
-		background: none;
-		border-bottom: none;
-
-		.is-sidebar-opened & {
-			right: auto;
-		}
-
-		.block-editor-block-toolbar {
-			border-left: $border-width solid $gray-300;
-		}
-
-		.block-editor-block-toolbar .components-toolbar-group,
-		.block-editor-block-toolbar .components-toolbar {
-			$top-toolbar-padding: ( $header-height - $grid-unit-60 ) / 2;
-			height: $header-height;
-			padding: $top-toolbar-padding 0;
-		}
-	}
-}
diff --git a/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss b/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss
index a81badbfad9e95..a201d8092809fa 100644
--- a/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss
+++ b/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss
@@ -3,10 +3,6 @@
 	.edit-widgets-header {
 		margin-top: -16px;
 		border-top: 1px solid $gray-300;
-	}
-
-	.edit-widgets-header,
-	.edit-widgets-header__block-toolbar {
 		background: #fff;
 		margin-left: -12px;
 		margin-right: -12px;
diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
index 29cb861346664c..992d710db03088 100644
--- a/packages/edit-widgets/src/components/header/index.js
+++ b/packages/edit-widgets/src/components/header/index.js
@@ -6,12 +6,10 @@ import { __, _x } from '@wordpress/i18n';
 import { Button, ToolbarItem } from '@wordpress/components';
 import {
 	BlockNavigationDropdown,
-	BlockToolbar,
 	NavigableToolbar,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
-import { useViewportMatch } from '@wordpress/compose';
 import { plus } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
@@ -26,7 +24,6 @@ import { store as editWidgetsStore } from '../../store';
 
 function Header() {
 	const inserterButton = useRef();
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const widgetAreaClientId = useLastSelectedWidgetArea();
 	const isLastSelectedWidgetAreaOpen = useSelect(
 		( select ) =>
@@ -101,11 +98,6 @@ function Header() {
 					<PinnedItems.Slot scope="core/edit-widgets" />
 				</div>
 			</div>
-			{ ! isLargeViewport && (
-				<div className="edit-widgets-header__block-toolbar">
-					<BlockToolbar hideDragHandle />
-				</div>
-			) }
 		</>
 	);
 }
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index ddfd782a910fa0..3b64974e54afb5 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -27,11 +27,6 @@
 	display: flex;
 }
 
-.edit-widgets-header__block-toolbar {
-	border-bottom: 1px solid $gray-300;
-	border-top: 1px solid $gray-300;
-}
-
 .edit-widgets-header-toolbar {
 	border: none;
 
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
index 5b878f3b7d93ef..619904e11c5835 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { Popover } from '@wordpress/components';
 import {
 	BlockList,
+	BlockTools,
 	BlockEditorKeyboardShortcuts,
 	BlockSelectionClearer,
 	WritingFlow,
@@ -26,14 +26,15 @@ export default function WidgetAreasBlockEditorContent( {
 			<KeyboardShortcuts />
 			<BlockEditorKeyboardShortcuts />
 			<Notices />
-			<Popover.Slot name="block-toolbar" />
-			<BlockSelectionClearer>
-				<WritingFlow>
-					<ObserveTyping>
-						<BlockList className="edit-widgets-main-block-list" />
-					</ObserveTyping>
-				</WritingFlow>
-			</BlockSelectionClearer>
+			<BlockTools>
+				<BlockSelectionClearer>
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList className="edit-widgets-main-block-list" />
+						</ObserveTyping>
+					</WritingFlow>
+				</BlockSelectionClearer>
+			</BlockTools>
 		</div>
 	);
 }
diff --git a/storybook/stories/playground/index.js b/storybook/stories/playground/index.js
index d5e0a67623ab2e..d87fb3907bbde4 100644
--- a/storybook/stories/playground/index.js
+++ b/storybook/stories/playground/index.js
@@ -6,6 +6,7 @@ import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
 	BlockList,
+	BlockTools,
 	BlockInspector,
 	WritingFlow,
 	ObserveTyping,
@@ -37,16 +38,17 @@ function App() {
 					<div className="playground__sidebar">
 						<BlockInspector />
 					</div>
-					<div className="editor-styles-wrapper">
-						<Popover.Slot name="block-toolbar" />
-						<BlockEditorKeyboardShortcuts.Register />
-						<BlockEditorKeyboardShortcuts />
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
-						</WritingFlow>
-					</div>
+					<BlockTools>
+						<div className="editor-styles-wrapper">
+							<BlockEditorKeyboardShortcuts.Register />
+							<BlockEditorKeyboardShortcuts />
+							<WritingFlow>
+								<ObserveTyping>
+									<BlockList />
+								</ObserveTyping>
+							</WritingFlow>
+						</div>
+					</BlockTools>
 					<Popover.Slot />
 				</BlockEditorProvider>
 			</SlotFillProvider>