moved zoomed out class to the iframe

WordPress · Apr 18, 2024 · bb04abb · bb04abb
1 parent 219beef
commit bb04abb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
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;
 	}
 
-	.block-editor-iframe__body.is-zoomed-out &::before {
+	.edit-site-visual-editor__editor-canvas.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,18 +377,24 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
-body.is-zoomed-out {
-	display: flex;
-	flex-direction: column;
+iframe[name="editor-canvas"].edit-site-visual-editor__editor-canvas.is-zoomed-out {
+	background: #ddd;
+}
 
-	> .is-root-container {
-		flex: 1;
+.edit-site-visual-editor__editor-canvas.is-zoomed-out {
+	body {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
 
-		> main {
+		> .is-root-container {
 			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,8 +286,6 @@ 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.
@@ -299,7 +297,6 @@ 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/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -164,6 +164,7 @@ function EditorCanvas( {
 					'edit-site-visual-editor__editor-canvas',
 					{
 						'is-focused': isFocused && canvasMode === 'view',
+						'is-zoomed-out': isZoomOutMode,
 					}
 				),
 				...props,