From 34e54854c51db362b4fb8540f5bae81a52618faf Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 22 Nov 2024 10:59:06 +0100
Subject: [PATCH 1/2] Always render metaboxes areas and use CSS to hide them
 when all panels are inactive.

---
 .../edit-post/src/components/layout/index.js     | 16 ++++++++++------
 .../edit-post/src/components/layout/style.scss   |  4 ++++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index aec14eab989f0..bc10294d07b50 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -226,10 +226,6 @@ function MetaBoxesMain( { isLegacy } ) {
 		}
 	};
 
-	if ( ! hasAnyVisible ) {
-		return;
-	}
-
 	const contents = (
 		<div
 			className={ clsx(
@@ -281,14 +277,22 @@ function MetaBoxesMain( { isLegacy } ) {
 	if ( isShort ) {
 		Pane = NavigableRegion;
 		paneProps = {
-			className: clsx( className, 'is-toggle-only' ),
+			className: clsx(
+				className,
+				'is-toggle-only',
+				! hasAnyVisible && 'is-hidden'
+			),
 		};
 	} else {
 		Pane = ResizableBox;
 		paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */ ( {
 			as: NavigableRegion,
 			ref: metaBoxesMainRef,
-			className: clsx( className, 'is-resizable' ),
+			className: clsx(
+				className,
+				'is-resizable',
+				! hasAnyVisible && 'is-hidden'
+			),
 			defaultSize: { height: openHeight },
 			minHeight: min,
 			maxHeight: usedMax,
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 18f12c1dbfbb9..7949658b52a04 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -10,6 +10,10 @@
 	&.is-resizable {
 		padding-block-start: $grid-unit-30;
 	}
+
+	&.is-hidden {
+		display: none;
+	}
 }
 
 .edit-post-meta-boxes-main__presenter {

From 7d9d1130e20fd38c9fe597bc22ec6493b13ffcb1 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 22 Nov 2024 14:08:16 +0100
Subject: [PATCH 2/2] Only use a NavigableRegion when the Meta Boxes area is
 visible.

---
 packages/edit-post/src/components/layout/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index bc10294d07b50..6a1fbd4969431 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -272,10 +272,11 @@ function MetaBoxesMain( { isLegacy } ) {
 		}
 	};
 	const className = 'edit-post-meta-boxes-main';
-	const paneLabel = __( 'Meta Boxes' );
+	const paneLabel = hasAnyVisible ? __( 'Meta Boxes' ) : undefined;
 	let Pane, paneProps;
 	if ( isShort ) {
-		Pane = NavigableRegion;
+		// Only use a NavigableRegion when the Meta Boxes area is visible.
+		Pane = hasAnyVisible ? NavigableRegion : 'div';
 		paneProps = {
 			className: clsx(
 				className,
@@ -286,7 +287,8 @@ function MetaBoxesMain( { isLegacy } ) {
 	} else {
 		Pane = ResizableBox;
 		paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */ ( {
-			as: NavigableRegion,
+			// Only use a NavigableRegion when the Meta Boxes area is visible.
+			as: hasAnyVisible ? NavigableRegion : 'div',
 			ref: metaBoxesMainRef,
 			className: clsx(
 				className,