Do the same thing without adding a prop to BlockCanvas

WordPress · Nov 19, 2024 · d008922 · d008922
1 parent be563d0
commit d008922
Show file tree

Hide file tree

Showing 4 changed files with 29 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
@@ -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
@@ -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
@@ -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
@@ -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;
+			}
+		}
+	}
 }