From 2e97c9560a62d0d0620f83bba62b81157f7b9be9 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 11 Sep 2024 08:55:55 -0700
Subject: [PATCH 1/5] Split view with meta boxes with non-iframed canvas

---
 .../edit-post/src/components/layout/index.js  | 23 ++++---------------
 .../src/components/layout/style.scss          | 16 +++++++++++--
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index b50e17054fd3e..c893d257420dd 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -148,11 +148,7 @@ function useEditorStyles( ...additionalStyles ) {
 	] );
 }
 
-/**
- * @param {Object}  props
- * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
- */
-function MetaBoxesMain( { isLegacy } ) {
+function MetaBoxesMain() {
 	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { isMetaBoxLocationVisible } = select( editPostStore );
@@ -232,22 +228,15 @@ function MetaBoxesMain( { isLegacy } ) {
 
 	const contents = (
 		<div
-			className={ clsx(
-				// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
-				'edit-post-layout__metaboxes',
-				! isLegacy && 'edit-post-meta-boxes-main__liner'
-			) }
-			hidden={ ! isLegacy && isShort && ! isOpen }
+			// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
+			className="edit-post-layout__metaboxes edit-post-meta-boxes-main__liner"
+			hidden={ isShort && ! isOpen }
 		>
 			<MetaBoxes location="normal" />
 			<MetaBoxes location="advanced" />
 		</div>
 	);
 
-	if ( isLegacy ) {
-		return contents;
-	}
-
 	const isAutoHeight = openHeight === undefined;
 	let usedMax = '50%'; // Approximation before max has a value.
 	if ( max !== undefined ) {
@@ -580,9 +569,7 @@ function Layout( {
 						}
 						extraContent={
 							! isDistractionFree &&
-							showMetaBoxes && (
-								<MetaBoxesMain isLegacy={ ! shouldIframe } />
-							)
+							showMetaBoxes && <MetaBoxesMain />
 						}
 					>
 						<PostLockedModal />
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 18f12c1dbfbb9..4f1d7f8d68eeb 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -108,9 +108,21 @@
 
 .has-metaboxes .editor-visual-editor {
 	flex: 1;
+	isolation: isolate;
+
+	&:not(.is-iframed) {
+		overflow: hidden;
 
-	&.is-iframed {
-		isolation: isolate;
+		.editor-resizable-editor {
+			height: auto !important; // TODO: double-check this isn’t problematic or whether it can be obviated with code change to visual-editor.
+			display: flex;
+			flex-direction: column;
+		}
+
+		.editor-resizable-editor > * {
+			flex: 1 1 100%;
+			overflow: auto;
+		}
 	}
 }
 

From dfe6935b888f560c2143f5a05ce60445133580f9 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 2 Nov 2024 16:53:33 -0700
Subject: [PATCH 2/5] Fix scrolling of device previews

---
 .../src/components/block-canvas/index.js      | 18 ++++++++++-----
 .../src/components/block-canvas/style.scss    | 22 +++++++++++++++++++
 .../src/components/layout/style.scss          | 11 ----------
 .../src/components/visual-editor/index.js     |  1 +
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index c399f38054ed4..ef70c4a26d14e 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -33,6 +38,7 @@ export function ExperimentalBlockCanvas( {
 	styles,
 	contentRef: contentRefProp,
 	iframeProps,
+	enableScroll,
 } ) {
 	useBlockCommands();
 	const isTabletViewport = useViewportMatch( 'medium', '<' );
@@ -51,12 +57,17 @@ export function ExperimentalBlockCanvas( {
 					frameSize: '40px',
 			  }
 			: {};
+	const className = clsx(
+		'block-editor-block-canvas',
+		enableScroll && 'is-scrollable'
+	);
 
 	if ( ! shouldIframe ) {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				style={ { height, display: 'flex' } }
+				className={ className }
+				style={ { height } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -67,10 +78,6 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ {
-						height: '100%',
-						width: '100%',
-					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -81,6 +88,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
+			className={ className }
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 0b37b4dd1447e..adfaf9e62faaf 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -1,3 +1,25 @@
+.block-editor-block-canvas.is-scrollable {
+	overflow: auto;
+
+	// Applicable only when legacy (non-iframed).
+	> .block-editor-writing-flow {
+		display: flow-root;
+		min-height: 100%;
+		box-sizing: border-box;
+	}
+
+	// Applicable only when iframed.
+	> .block-editor-iframe__container {
+		display: flex;
+		flex-direction: column;
+
+		> .block-editor-iframe__scale-container {
+			flex: 1 0 fit-content;
+			display: flow-root;
+		}
+	}
+}
+
 iframe[name="editor-canvas"] {
 	box-sizing: border-box;
 	width: 100%;
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 4f1d7f8d68eeb..996103317415c 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -112,17 +112,6 @@
 
 	&:not(.is-iframed) {
 		overflow: hidden;
-
-		.editor-resizable-editor {
-			height: auto !important; // TODO: double-check this isn’t problematic or whether it can be obviated with code change to visual-editor.
-			display: flex;
-			flex-direction: column;
-		}
-
-		.editor-resizable-editor > * {
-			flex: 1 1 100%;
-			overflow: auto;
-		}
 	}
 }
 
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 795a4f983f153..857cd2ec27959 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -406,6 +406,7 @@ function VisualEditor( {
 							...deviceStyles,
 						},
 					} }
+					enableScroll={ deviceType !== 'Desktop' || disableIframe }
 				>
 					{ themeSupportsLayout &&
 						! themeHasDisabledLayoutStyles &&

From be563d0f0fcab4a7a39d7e80b269937c4b8df76b Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 3 Nov 2024 20:23:19 -0800
Subject: [PATCH 3/5] Consolidate styles and add comments

---
 packages/edit-post/src/components/layout/style.scss      | 7 ++-----
 .../editor/src/components/editor-interface/style.scss    | 3 ++-
 packages/editor/src/components/visual-editor/index.js    | 4 +++-
 packages/editor/src/components/visual-editor/style.scss  | 9 +++------
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 996103317415c..7a7f13382661a 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -107,12 +107,9 @@
 }
 
 .has-metaboxes .editor-visual-editor {
-	flex: 1;
+	// Contains z-indexes of children so that the block toolbar will appear behind
+	// the drop shadow of the meta box pane.
 	isolation: isolate;
-
-	&:not(.is-iframed) {
-		overflow: hidden;
-	}
 }
 
 // Adjust the position of the notices
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
index 05b23fe2304dd..7219e03058fc4 100644
--- a/packages/editor/src/components/editor-interface/style.scss
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -8,5 +8,6 @@
 }
 
 .editor-visual-editor {
-	flex: 1 0 auto;
+	// Fits the height to the parent — flex-shrink ensures it doesn’t create overflow.
+	flex: 1 1 0%;
 }
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 857cd2ec27959..5a75355e08b6b 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -406,7 +406,9 @@ function VisualEditor( {
 							...deviceStyles,
 						},
 					} }
-					enableScroll={ deviceType !== 'Desktop' || disableIframe }
+					// When there’s no iframe the canvas is the scrolling context and with the
+					// iframe, device previews may overflow vertically.
+					enableScroll={ disableIframe || deviceType !== 'Desktop' }
 				>
 					{ themeSupportsLayout &&
 						! themeHasDisabledLayoutStyles &&
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
index fae61eda6b801..e54dd5c1b6641 100644
--- a/packages/editor/src/components/visual-editor/style.scss
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -2,6 +2,9 @@
 	position: relative;
 	display: flex;
 	background-color: $gray-300;
+	// Allows the height to fit the parent container and avoids parent scrolling contexts from
+	// having overflow due to popovers of block tools.
+	overflow: hidden;
 
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
@@ -14,12 +17,6 @@
 		padding: $grid-unit-30 $grid-unit-30 0;
 	}
 
-	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
-	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
-	&.is-iframed {
-		overflow: hidden;
-	}
-
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
 	// This is duplicated in edit-site.

From d00892256f310540bb806e8b507c59332f99c6b9 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 18 Nov 2024 20:41:02 -0800
Subject: [PATCH 4/5] Do the same thing without adding a prop to BlockCanvas

---
 .../src/components/block-canvas/index.js      | 14 ++--------
 .../src/components/block-canvas/style.scss    | 22 ----------------
 .../src/components/visual-editor/index.js     |  4 +--
 .../src/components/visual-editor/style.scss   | 26 +++++++++++++++++++
 4 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index ef70c4a26d14e..36aca7fa1c722 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -38,7 +33,6 @@ export function ExperimentalBlockCanvas( {
 	styles,
 	contentRef: contentRefProp,
 	iframeProps,
-	enableScroll,
 } ) {
 	useBlockCommands();
 	const isTabletViewport = useViewportMatch( 'medium', '<' );
@@ -57,16 +51,12 @@ export function ExperimentalBlockCanvas( {
 					frameSize: '40px',
 			  }
 			: {};
-	const className = clsx(
-		'block-editor-block-canvas',
-		enableScroll && 'is-scrollable'
-	);
 
 	if ( ! shouldIframe ) {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				className={ className }
+				className="block-editor-block-canvas"
 				style={ { height } }
 			>
 				<EditorStyles
@@ -88,7 +78,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
-			className={ className }
+			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index adfaf9e62faaf..0b37b4dd1447e 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -1,25 +1,3 @@
-.block-editor-block-canvas.is-scrollable {
-	overflow: auto;
-
-	// Applicable only when legacy (non-iframed).
-	> .block-editor-writing-flow {
-		display: flow-root;
-		min-height: 100%;
-		box-sizing: border-box;
-	}
-
-	// Applicable only when iframed.
-	> .block-editor-iframe__container {
-		display: flex;
-		flex-direction: column;
-
-		> .block-editor-iframe__scale-container {
-			flex: 1 0 fit-content;
-			display: flow-root;
-		}
-	}
-}
-
 iframe[name="editor-canvas"] {
 	box-sizing: border-box;
 	width: 100%;
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 5a75355e08b6b..122252ea4a469 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -385,6 +385,7 @@ function VisualEditor( {
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
 					'is-iframed': ! disableIframe,
+					'is-scrollable': disableIframe || deviceType !== 'Desktop',
 				}
 			) }
 		>
@@ -406,9 +407,6 @@ function VisualEditor( {
 							...deviceStyles,
 						},
 					} }
-					// When there’s no iframe the canvas is the scrolling context and with the
-					// iframe, device previews may overflow vertically.
-					enableScroll={ disableIframe || deviceType !== 'Desktop' }
 				>
 					{ themeSupportsLayout &&
 						! themeHasDisabledLayoutStyles &&
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
index e54dd5c1b6641..15c5aa43b66d8 100644
--- a/packages/editor/src/components/visual-editor/style.scss
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -30,4 +30,30 @@
 			padding: 6px;
 		}
 	}
+
+	// The cases for this are non-iframed editor canvas or previewing devices. The block canvas is
+	// made the scrolling context.
+	&.is-scrollable .block-editor-block-canvas {
+		overflow: auto;
+
+		// Applicable only when legacy (non-iframed).
+		> .block-editor-writing-flow {
+			display: flow-root;
+			min-height: 100%;
+			box-sizing: border-box; // Ensures that 100% min-height doesn’t create overflow.
+		}
+
+		// Applicable only when iframed. These styles ensure that if the the iframe is
+		// given a fixed height and it’s taller than the viewport then scrolling is
+		// allowed. This is needed for device previews.
+		> .block-editor-iframe__container {
+			display: flex;
+			flex-direction: column;
+
+			> .block-editor-iframe__scale-container {
+				flex: 1 0 fit-content;
+				display: flow-root;
+			}
+		}
+	}
 }

From 2fdda7804449f5530dec6b2fedd4100cf5cbfb52 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 18 Nov 2024 22:20:51 -0800
Subject: [PATCH 5/5] Fix horizontal overflow of device previews

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

diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
index 3b4d97a097964..0aa46c9c3278f 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -60,7 +60,7 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					overflowY: 'auto',
+					maxWidth: '100%',
 				};
 			default:
 				return {