revert changes, add an extra class to the iframe

WordPress · Apr 19, 2024 · 8cdca14 · 8cdca14
1 parent bb04abb
commit 8cdca14
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,7 +4,7 @@ iframe[name="editor-canvas"] {
 	display: block;
 }
 
-iframe[name="editor-canvas"]:not(.has-editor-padding) {
+iframe[name="editor-canvas"]:not(.has-editor-padding):not(.is-zoomed-out) {
 	background-color: $white;
 }
 

diff --git a/packages/block-editor/src/components/block-content-overlay/content.scss b/packages/block-editor/src/components/block-content-overlay/content.scss
@@ -37,7 +37,7 @@
 		pointer-events: none;
 	}
 
-	.edit-site-visual-editor__editor-canvas.is-zoomed-out &::before {
+	.block-editor-iframe__body.is-zoomed-out &::before {
 		// Unfortunately because of the vw unit, this is not always going to be exact
 		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
 		width: calc(100vw);

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -377,24 +377,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
-iframe[name="editor-canvas"].edit-site-visual-editor__editor-canvas.is-zoomed-out {
-	background: #ddd;
-}
+body.is-zoomed-out {
+	display: flex;
+	flex-direction: column;
 
-.edit-site-visual-editor__editor-canvas.is-zoomed-out {
-	body {
+	> .is-root-container {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
+		height: 100%;
 
-		> .is-root-container {
+		> main {
 			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-
-			> main {
-				flex: 1;
-			}
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -286,6 +286,8 @@ function Iframe( {
 			// Hack to get proper margins when scaling the iframe document.
 			const bottomFrameSize = frameSize - contentHeight * ( 1 - scale );
 
+			iframeDocument.body.classList.add( 'is-zoomed-out' );
+
 			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
 			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
 			// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
@@ -297,6 +299,7 @@ function Iframe( {
 			}
 
 			return () => {
+				iframeDocument.body.classList.remove( 'is-zoomed-out' );
 				iframeDocument.documentElement.style.transform = '';
 				iframeDocument.documentElement.style.marginTop = '';
 				iframeDocument.documentElement.style.marginBottom = '';

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -32,6 +32,9 @@
 		width: 100%;
 		height: 100%;
 		background: $white;
+		&.is-zoomed-out {
+			background: #ddd;
+		}
 	}
 
 	.edit-site-visual-editor__editor-canvas {