Iframe: scale html instead of iframe el for zoom out (#59334)

* Iframe: scale html instead of iframe el for zoom out * Fix popover * Fix overflow * Fix overflow for device preview
WordPress · Feb 24, 2024 · 9469295 · 9469295
1 parent 70e5316
commit 9469295
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -453,7 +453,8 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
 	transition: all 0.3s;
+	background-color: $gray-300;
 	transform-origin: top center;
 }
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -106,7 +106,6 @@ function Iframe( {
 	tabIndex = 0,
 	scale = 1,
 	frameSize = 0,
-	expand = false,
 	readonly,
 	forwardedRef: ref,
 	...props
@@ -139,6 +138,8 @@ function Iframe( {
 			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
+			documentElement.classList.add( 'block-editor-iframe__html' );
+
 			clearerRef( documentElement );
 
 			// Ideally ALL classes that are added through get_body_class should
@@ -241,6 +242,21 @@ function Iframe( {
 	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
 	const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
 
+	useEffect( () => {
+		if ( iframeDocument && scale !== 1 ) {
+			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
+			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
+			iframeDocument.documentElement.style.marginBottom = `${
+				-marginFromScaling * 2 + frameSize
+			}px`;
+			return () => {
+				iframeDocument.documentElement.style.transform = '';
+				iframeDocument.documentElement.style.marginTop = '';
+				iframeDocument.documentElement.style.marginBottom = '';
+			};
+		}
+	}, [ scale, frameSize, marginFromScaling, iframeDocument ] );
+
 	return (
 		<>
 			{ tabIndex >= 0 && before }
@@ -250,19 +266,7 @@ function Iframe( {
 				style={ {
 					border: 0,
 					...props.style,
-					height: expand ? contentHeight : props.style?.height,
-					marginTop:
-						scale !== 1
-							? -marginFromScaling + frameSize
-							: props.style?.marginTop,
-					marginBottom:
-						scale !== 1
-							? -marginFromScaling + frameSize
-							: props.style?.marginBottom,
-					transform:
-						scale !== 1
-							? `scale( ${ scale } )`
-							: props.style?.transform,
+					height: props.style?.height,
 					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }

diff --git a/packages/block-editor/src/components/resizable-box-popover/index.js b/packages/block-editor/src/components/resizable-box-popover/index.js
@@ -16,7 +16,7 @@ export default function ResizableBoxPopover( {
 	return (
 		<BlockPopoverCover
 			clientId={ clientId }
-			__unstablePopoverSlot="__unstable-block-tools-after"
+			__unstablePopoverSlot="block-toolbar"
 			{ ...props }
 		>
 			<ResizableBox { ...resizableBoxProps } />

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -107,7 +107,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				expand: isZoomOutMode,
 				scale: isZoomOutMode ? 0.45 : undefined,
 				frameSize: isZoomOutMode ? 100 : undefined,
 				className: classnames(

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -22,7 +22,6 @@
 	position: relative;
 	height: 100%;
 	display: block;
-	overflow: hidden;
 	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
@@ -62,8 +61,6 @@
 
 	.components-resizable-box__container {
 		margin: 0 auto;
-		// Removing this will cancel the bottom margins in the iframe.
-		overflow: auto;
 	}
 
 	&.is-view-mode {

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -98,7 +98,7 @@ body.js.site-editor-php {
 	}
 
 	.interface-interface-skeleton__content {
-		background-color: $gray-900;
+		background-color: $gray-300;
 	}
 }