[WP6.8.1] Use split view for meta boxes only when canvas is iframed and “Desktop” view

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

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

packages/edit-post/src/components/layout/index.js

@@ -149,7 +149,11 @@ function useEditorStyles( ...additionalStyles ) {
 	] );
 }
 
-function MetaBoxesMain() {
+/**
+ * @param {Object}  props
+ * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
+ */
+function MetaBoxesMain( { isLegacy } ) {
 	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { isMetaBoxLocationVisible } = select( editPostStore );
@@ -229,15 +233,22 @@ function MetaBoxesMain() {
 
 	const contents = (
 		<div
-			// 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 }
+			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 }
 		>
 			<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 ) {
@@ -388,6 +399,7 @@ function Layout( {
 		isWelcomeGuideVisible,
 		templateId,
 		enablePaddingAppender,
+		isDevicePreview,
 	} = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
@@ -406,8 +418,12 @@ function Layout( {
 			const { getBlockSelectionStart, isZoomOut } = unlock(
 				select( blockEditorStore )
 			);
-			const { getEditorMode, getRenderingMode, getDefaultRenderingMode } =
-				unlock( select( editorStore ) );
+			const {
+				getEditorMode,
+				getRenderingMode,
+				getDefaultRenderingMode,
+				getDeviceType,
+			} = unlock( select( editorStore ) );
 			const isRenderingPostOnly = getRenderingMode() === 'post-only';
 			const isNotDesignPostType =
 				! DESIGN_POST_TYPES.includes( currentPostType );
@@ -441,6 +457,7 @@ function Layout( {
 						: null,
 				enablePaddingAppender:
 					! isZoomOut() && isRenderingPostOnly && isNotDesignPostType,
+				isDevicePreview: getDeviceType() !== 'Desktop',
 			};
 		},
 		[
@@ -593,7 +610,13 @@ function Layout( {
 						}
 						extraContent={
 							! isDistractionFree &&
-							showMetaBoxes && <MetaBoxesMain />
+							showMetaBoxes && (
+								<MetaBoxesMain
+									isLegacy={
+										! shouldIframe || isDevicePreview
+									}
+								/>
+							)
 						}
 					>
 						<PostLockedModal />

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

@@ -107,9 +107,14 @@
 	clear: both;
 }
 
-.has-metaboxes .editor-visual-editor {
-	// Contains z-indexes of children so that the block toolbar will appear behind
-	// the drop shadow of the meta box pane.
+// Only when the split view is active the visual editor should allow shrinking and
+// its main size should be zero.
+.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
+	flex-shrink: 1;
+	flex-basis: 0%;
+}
+
+.has-metaboxes .editor-visual-editor.is-iframed {
 	isolation: isolate;
 }
 

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

@@ -8,6 +8,5 @@
 }
 
 .editor-visual-editor {
-	// Fits the height to the parent — flex-shrink ensures it doesn’t create overflow.
-	flex: 1 1 0%;
+	flex: 1 0 auto;
 }

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

@@ -385,7 +385,6 @@ 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,9 +6,6 @@
 	// 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`
@@ -28,6 +25,12 @@
 		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.
@@ -41,30 +44,4 @@
 			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;
-			}
-		}
-	}
 }