Consolidate styles and add comments

WordPress · Nov 4, 2024 · be563d0 · be563d0
1 parent dfe6935
commit be563d0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 13 deletions.
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -107,12 +107,9 @@
 }
 
 .has-metaboxes .editor-visual-editor {
-	flex: 1;
+	// Contains z-indexes of children so that the block toolbar will appear behind
+	// the drop shadow of the meta box pane.
 	isolation: isolate;
-
-	&:not(.is-iframed) {
-		overflow: hidden;
-	}
 }
 
 // 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
@@ -406,7 +406,9 @@ function VisualEditor( {
 							...deviceStyles,
 						},
 					} }
-					enableScroll={ deviceType !== 'Desktop' || disableIframe }
+					// 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
@@ -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.