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 <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: cbravobernal <[email protected]> Co-authored-by: jartes <[email protected]> Co-authored-by: bph <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: MadtownLems <[email protected]>
WordPress · Dec 22, 2024 · b4d3c22 · b4d3c22
1 parent e5ef7c6
commit b4d3c22
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 37 deletions.
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
@@ -41,7 +41,8 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				style={ { height, display: 'flex' } }
+				className="block-editor-block-canvas"
+				style={ { height } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -52,10 +53,6 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ {
-						height: '100%',
-						width: '100%',
-					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -66,6 +63,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
+			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe

diff --git 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 {

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -170,11 +170,7 @@ function useEditorStyles() {
 	] );
 }
 
-/**
- * @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 );
@@ -254,22 +250,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 ) {
@@ -600,9 +589,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
@@ -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

diff --git 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
@@ -389,7 +389,8 @@ function VisualEditor( {
 				{
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
-					'is-iframed': shouldIframe,
+					'is-iframed': ! disableIframe,
+					'is-scrollable': disableIframe || deviceType !== 'Desktop',
 				}
 			) }
 		>

diff --git 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.
@@ -33,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;
+			}
+		}
+	}
 }