diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 9266cbbb10a55..17f9728e9b89c 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -156,6 +156,28 @@ function useEditorStyles() {
 	] );
 }
 
+function MetaBoxesDetails() {
+	const hasMetaboxes = useSelect( ( select ) => {
+		const { getMetaBoxesPerLocation } = select( editPostStore );
+		return (
+			getMetaBoxesPerLocation( 'normal' ).length > 0 ||
+			getMetaBoxesPerLocation( 'advanced' ).length > 0
+		);
+	}, [] );
+	if ( ! hasMetaboxes ) {
+		return null;
+	}
+	return (
+		<details className="edit-post-layout__metaboxes-details">
+			<summary className="edit-post-layout__metaboxes-details-summary">
+				{ __( 'Meta Boxes' ) }
+			</summary>
+			<MetaBoxes location="normal" />
+			<MetaBoxes location="advanced" />
+		</details>
+	);
+}
+
 function Layout( {
 	postId: initialPostId,
 	postType: initialPostType,
@@ -361,8 +383,7 @@ function Layout( {
 						! isDistractionFree &&
 						showMetaBoxes && (
 							<div className="edit-post-layout__metaboxes">
-								<MetaBoxes location="normal" />
-								<MetaBoxes location="advanced" />
+								<MetaBoxesDetails />
 							</div>
 						)
 					}
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 5fdaceaa002be..60db3045f5d1d 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -3,6 +3,29 @@
 	clear: both;
 }
 
+.edit-post-layout__metaboxes-details {
+	background: $white;
+	border-top: $border-width solid $gray-200;
+}
+
+.edit-post-layout__metaboxes-details[open] {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.edit-post-layout__metaboxes-details summary {
+	cursor: pointer;
+	color: $gray-900;
+	height: 24px;
+	line-height: 24px;
+	font-size: 13px;
+	list-style-position: outside;
+	margin-left: 24px;
+}
+
 // Adjust the position of the notices
 .components-editor-notices__snackbar {
 	position: fixed;
diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
index 03efae92c72f7..0a53d8d2ffa13 100644
--- a/packages/edit-post/src/components/layout/use-should-iframe.js
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -5,36 +5,29 @@ import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
 const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
 
 export function useShouldIframe() {
-	const {
-		isBlockBasedTheme,
-		hasV3BlocksOnly,
-		isEditingTemplate,
-		hasMetaBoxes,
-	} = useSelect( ( select ) => {
-		const { getEditorSettings, getCurrentPostType } = select( editorStore );
-		const { getBlockTypes } = select( blocksStore );
-		const editorSettings = getEditorSettings();
-		return {
-			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
-			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
-				return type.apiVersion >= 3;
-			} ),
-			isEditingTemplate: getCurrentPostType() === 'wp_template',
-			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
-		};
-	}, [] );
+	const { isBlockBasedTheme, hasV3BlocksOnly, isEditingTemplate } = useSelect(
+		( select ) => {
+			const { getEditorSettings, getCurrentPostType } =
+				select( editorStore );
+			const { getBlockTypes } = select( blocksStore );
+			const editorSettings = getEditorSettings();
+			return {
+				isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
+				hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
+					return type.apiVersion >= 3;
+				} ),
+				isEditingTemplate: getCurrentPostType() === 'wp_template',
+			};
+		},
+		[]
+	);
 
 	return (
-		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-			! hasMetaBoxes ) ||
+		hasV3BlocksOnly ||
+		( isGutenbergPlugin && isBlockBasedTheme ) ||
 		isEditingTemplate
 	);
 }
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
index fae61eda6b801..4a1d44eaf748b 100644
--- a/packages/editor/src/components/visual-editor/style.scss
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -2,6 +2,7 @@
 	position: relative;
 	display: flex;
 	background-color: $gray-300;
+	isolation: isolate;
 
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
diff --git a/test/e2e/specs/editor/plugins/meta-boxes.spec.js b/test/e2e/specs/editor/plugins/meta-boxes.spec.js
index 1b7adc18760ff..511b3837f8030 100644
--- a/test/e2e/specs/editor/plugins/meta-boxes.spec.js
+++ b/test/e2e/specs/editor/plugins/meta-boxes.spec.js
@@ -26,7 +26,7 @@ test.describe( 'Meta boxes', () => {
 		await expect( saveDraft ).toBeDisabled();
 
 		// Add title to enable valid non-empty post save.
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'Hello Meta' );
 
@@ -44,7 +44,7 @@ test.describe( 'Meta boxes', () => {
 		page,
 	} ) => {
 		// Publish a post so there's something for the latest posts dynamic block to render.
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'A published post' );
 		await page.keyboard.press( 'Enter' );
@@ -53,7 +53,7 @@ test.describe( 'Meta boxes', () => {
 
 		// Publish a post with the latest posts dynamic block.
 		await admin.createNewPost();
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'Dynamic block test' );
 		await editor.insertBlock( { name: 'core/latest-posts' } );
@@ -70,10 +70,12 @@ test.describe( 'Meta boxes', () => {
 		editor,
 		page,
 	} ) => {
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'A published post' );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
 		await page.keyboard.type( 'Excerpt from content.' );
 
 		const postId = await editor.publishPost();
@@ -89,9 +91,11 @@ test.describe( 'Meta boxes', () => {
 		page,
 	} ) => {
 		await editor.openDocumentSettingsSidebar();
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
 		await page.keyboard.type( 'Excerpt from content.' );
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'A published post' );
 
diff --git a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
index 710e06b35e124..0b695fef53dcf 100644
--- a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
+++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
@@ -20,10 +20,14 @@ test.describe( 'WP Editor Meta Boxes', () => {
 		await admin.createNewPost();
 
 		// Add title to enable valid non-empty post save.
-		await page
+		await editor.canvas
 			.locator( 'role=textbox[name="Add title"i]' )
 			.type( 'Hello Meta' );
 
+		await page.click(
+			'summary.edit-post-layout__metaboxes-details-summary'
+		);
+
 		// Switch tinymce to Text mode, first waiting for it to initialize
 		// because otherwise it will flip back to Visual mode once initialized.
 		await page.locator( '#test_tinymce_id_ifr' ).waitFor();
diff --git a/test/e2e/specs/editor/various/publish-button.spec.js b/test/e2e/specs/editor/various/publish-button.spec.js
index 631ddcd0fe61b..cdc9c1a993636 100644
--- a/test/e2e/specs/editor/various/publish-button.spec.js
+++ b/test/e2e/specs/editor/various/publish-button.spec.js
@@ -70,13 +70,12 @@ test.describe( 'Post publish button', () => {
 		admin,
 		page,
 		requestUtils,
+		editor,
 	} ) => {
 		await requestUtils.activatePlugin( 'gutenberg-test-plugin-meta-box' );
 		await admin.createNewPost();
-		await page
-			.getByRole( 'textbox', {
-				name: 'Add title',
-			} )
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'Test post' );
 
 		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );