Split view with meta boxes even with legacy canvas (#66706)

* Split view with meta boxes with non-iframed canvas

* Fix scrolling of device previews

* Consolidate styles and add comments

* Do the same thing without adding a prop to BlockCanvas

* Fix horizontal overflow of device previews

Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: jartes <jartes@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>

packages/block-editor/src/components/block-canvas/index.js

@@ -56,7 +56,8 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				style={ { height, display: 'flex' } }
+				className="block-editor-block-canvas"
+				style={ { height } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -67,10 +68,6 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ {
-						height: '100%',
-						width: '100%',
-					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -81,6 +78,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
+			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe

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 {

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 ) {
@@ -586,9 +575,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

@@ -385,6 +385,7 @@ function VisualEditor( {
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
 					'is-iframed': ! disableIframe,
+					'is-scrollable': disableIframe || deviceType !== 'Desktop',
 				}
 			) }
 		>

packages/editor/src/components/visual-editor/style.scss

@@ -6,6 +6,9 @@
 	// when the iframe doesn't cover the whole canvas
 	// like the "focused entities".
 	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;
 
 	// This overrides the iframe background since it's applied again here
 	// It also prevents some style glitches if `editor-visual-editor`
@@ -25,12 +28,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.
@@ -44,4 +41,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;
+			}
+		}
+	}
 }