Zoom out mode: scale iframe instead of contents

WordPress · Jan 10, 2023 · a03799d · a03799d
1 parent 7a17f01
commit a03799d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -107,6 +107,7 @@ function Iframe( {
 	tabIndex = 0,
 	scale = 1,
 	frameSize = 0,
+	expand = false,
 	readonly,
 	forwardedRef: ref,
 	...props
@@ -244,6 +245,20 @@ function Iframe( {
 			{ tabIndex >= 0 && before }
 			<iframe
 				{ ...props }
+				style={ {
+					...props.style,
+					height: expand ? contentHeight : props.style?.height,
+					marginTop: scale
+						? -( ( contentHeight * ( 1 - scale ) ) / 2 ) + frameSize
+						: props.style?.marginTop,
+					marginBottom: scale
+						? -( ( contentHeight * ( 1 - scale ) ) / 2 ) + frameSize
+						: props.style?.marginBottom,
+					transform: scale
+						? `scale( ${ scale } )`
+						: props.style?.transform,
+					transition: 'all .3s',
+				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
 				// Correct doctype is required to enable rendering in standards
@@ -258,13 +273,6 @@ function Iframe( {
 							<head ref={ headRef }>
 								{ styleAssets }
 								{ head }
-								<style>
-									{ `html { transition: background 5s; ${
-										frameSize
-											? 'background: #2f2f2f; transition: background 0s;'
-											: ''
-									} }` }
-								</style>
 							</head>
 							<body
 								ref={ bodyRef }
@@ -273,17 +281,6 @@ function Iframe( {
 									'editor-styles-wrapper',
 									...bodyClasses
 								) }
-								style={ {
-									// This is the remaining percentage from the scaling down
-									// of the iframe body(`scale(0.45)`). We also need to subtract
-									// the body's bottom margin.
-									marginBottom: `-${
-										contentHeight * ( 1 - scale ) -
-										frameSize
-									}px`,
-									marginTop: frameSize,
-									transform: `scale( ${ scale } )`,
-								} }
 								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -43,6 +43,7 @@ import {
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
+import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -52,6 +53,7 @@ import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
 import {
 	getFrameOffset,
+	getFrameScale,
 	positionToPlacement,
 	placementToMotionAnimationProps,
 	getReferenceOwnerDocument,
@@ -363,10 +365,15 @@ const UnforwardedPopover = (
 	} = useFloating( {
 		placement: normalizedPlacementFromProps,
 		middleware,
-		whileElementsMounted: ( referenceParam, floatingParam, updateParam ) =>
-			autoUpdate( referenceParam, floatingParam, updateParam, {
+		whileElementsMounted: (
+			referenceParam,
+			floatingParam,
+			updateParam
+		) => {
+			return autoUpdate( referenceParam, floatingParam, updateParam, {
 				animationFrame: true,
-			} ),
+			} );
+		},
 	} );
 
 	const arrowCallbackRef = useCallback(
@@ -399,12 +406,14 @@ const UnforwardedPopover = (
 			fallbackReferenceElement,
 			fallbackDocument: document,
 		} );
+		const scale = getFrameScale( resultingReferenceOwnerDoc );
 		const resultingReferenceElement = getReferenceElement( {
 			anchor,
 			anchorRef,
 			anchorRect,
 			getAnchorRect,
 			fallbackReferenceElement,
+			scale,
 		} );
 
 		referenceCallbackRef( resultingReferenceElement );
@@ -441,17 +450,24 @@ const UnforwardedPopover = (
 		}
 
 		const { defaultView } = referenceOwnerDocument;
+		const { frameElement } = defaultView;
+
+		const scrollContainer = frameElement
+			? getScrollContainer( frameElement )
+			: null;
 
 		const updateFrameOffset = () => {
 			frameOffsetRef.current = getFrameOffset( referenceOwnerDocument );
 			update();
 		};
 		defaultView.addEventListener( 'resize', updateFrameOffset );
+		scrollContainer?.addEventListener( 'scroll', updateFrameOffset );
 
 		updateFrameOffset();
 
 		return () => {
 			defaultView.removeEventListener( 'resize', updateFrameOffset );
+			scrollContainer?.removeEventListener( 'scroll', updateFrameOffset );
 		};
 	}, [ referenceOwnerDocument, update, refs.floating ] );
 

diff --git a/packages/components/src/popover/utils.ts b/packages/components/src/popover/utils.ts
@@ -157,6 +157,15 @@ export const getFrameOffset = (
 	return { x: iframeRect.left, y: iframeRect.top };
 };
 
+export const getFrameScale = ( document?: Document ): number => {
+	const frameElement = document?.defaultView?.frameElement as HTMLElement;
+	if ( ! frameElement ) {
+		return 1;
+	}
+	const transform = frameElement.style.transform;
+	return parseFloat( transform.replace( /scale\((\d+\.?\d*)\)/, '$1' ) );
+};
+
 export const getReferenceOwnerDocument = ( {
 	anchor,
 	anchorRef,
@@ -213,11 +222,13 @@ export const getReferenceElement = ( {
 	anchorRect,
 	getAnchorRect,
 	fallbackReferenceElement,
+	scale,
 }: Pick<
 	PopoverProps,
 	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
 > & {
 	fallbackReferenceElement: Element | null;
+	scale: number;
 } ): ReferenceType | null => {
 	let referenceElement = null;
 
@@ -279,6 +290,22 @@ export const getReferenceElement = ( {
 		referenceElement = fallbackReferenceElement.parentElement;
 	}
 
+	if ( referenceElement && scale !== 1 ) {
+		// If the popover is inside an iframe, the coordinates of the
+		// reference element need to be scaled to match the iframe's scale.
+		const rect = referenceElement.getBoundingClientRect();
+		referenceElement = {
+			getBoundingClientRect() {
+				return new window.DOMRect(
+					rect.x * scale,
+					rect.y * scale,
+					rect.width * scale,
+					rect.height * scale
+				);
+			},
+		};
+	}
+
 	// Convert any `undefined` value to `null`.
 	return referenceElement ?? null;
 };
diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -30,6 +30,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
 	return (
 		<Iframe
+			expand={ isZoomOutMode }
 			scale={ ( isZoomOutMode && 0.45 ) || undefined }
 			frameSize={ isZoomOutMode ? 100 : undefined }
 			style={ enableResizing ? {} : deviceStyles }