Split view with meta boxes even with legacy canvas

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

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%;

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 />

packages/edit-post/src/components/layout/style.scss

@@ -107,11 +107,9 @@
 }
 
 .has-metaboxes .editor-visual-editor {
-	flex: 1;
-
-	&.is-iframed {
-		isolation: isolate;
-	}
+	// Contains z-indexes of children so that the block toolbar will appear behind
+	// the drop shadow of the meta box pane.
+	isolation: isolate;
 }
 
 // Adjust the position of the notices

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%;
 }

packages/editor/src/components/visual-editor/index.js

@@ -406,6 +406,9 @@ 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 &&

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.