Canvas preview scale

Dynamically adjust the scale of the iframe (preview) based on the view port / container size and actively listens for resize events to respond.

Ideally, the source templates should be handling any responsive design  problems, instead of going around it here.

cc: @wpscholar

Author: wpalani

build/2.7.4/onboarding.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-core-data', 'wp-data', 'wp-deprecated', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-media-utils', 'wp-preferences', 'wp-url'), 'version' => '52ccb128c4a624f21547');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-core-data', 'wp-data', 'wp-deprecated', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-media-utils', 'wp-preferences', 'wp-url'), 'version' => '987507288a1b0cd041df');

build/2.7.4/onboarding.js

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
+import { forwardRef } from '@wordpress/element';
 
-const Iframe = ( {
+const Iframe = forwardRef( ( {
 	title,
 	src,
 	width = 400,
@@ -10,7 +11,7 @@ const Iframe = ( {
 	viewportHeight = 1000,
 	className,
 	...props
-} ) => {
+}, ref ) => {
 	return (
 		<div
 			className={ classNames(
@@ -35,9 +36,10 @@ const Iframe = ( {
 					transform: `scale(${ viewportScale })`,
 				} }
 				{ ...props }
+				ref={ ref }
 			/>
 		</div>
 	);
-};
+} );
 
 export default Iframe;

src/app/components/Iframe/Iframe.js

@@ -1,3 +1,5 @@
+/* global ResizeObserver */
+import { useRef, useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { nfdOnboardingStore } from '@/data/store';
 import { Iframe } from '@/components';
@@ -14,7 +16,17 @@ const Preview = () => {
 			selectedHomepage: select( nfdOnboardingStore ).getSelectedHomepage(),
 		};
 	} );
-	
+
+	const refMap = useRef( {
+		previewContainer: null,
+		previewContainerResizeObserver: null,
+		iframeElement: null,
+		previousIframeDimensions: {
+			width: 0,
+			height: 0,
+		},
+	} );
+
 	const StatusOverlay = () => {
 		const appHeaderHeight = document.querySelector( '.nfd-onboarding-header' )?.offsetHeight || 0;
 
@@ -29,7 +41,7 @@ const Preview = () => {
 					<Spinner
 						variant="primary"
 						size="8"
-						/>
+					/>
 				</div>
 			);
 		}
@@ -47,9 +59,10 @@ const Preview = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ selectedHomepage ] );
 
+	// Calculate the iframe height.
 	const calculateIframeHeight = () => {
-		// Get the height from the iframe
-		const iframeDoc = window.frames[ `nfd-onboarding-${ preview.slug }` ]?.document;
+		// Get the iframe content height.
+		const iframeDoc = refMap.current.iframeElement?.contentWindow?.document;
 		if ( iframeDoc ) {
 			return iframeDoc.documentElement.scrollHeight;
 		}
@@ -58,24 +71,115 @@ const Preview = () => {
 		return window.innerHeight - appHeaderHeight;
 	};
 
-	const iframeOnLoad = () => {
-		setIframeHeight( calculateIframeHeight() );
+	/**
+	 * Calculate the iframe content (preview) scale based on the parent container width.
+	 */
+	const calculateIframeContentScale = () => {
+		const previewContainer = refMap.current.previewContainer;
+		const iframeDoc = refMap.current.iframeElement?.contentWindow?.document;
+		if ( ! previewContainer || ! iframeDoc ) {
+			return;
+		}
+
+		const containerWidth = previewContainer.offsetWidth;
+		if ( containerWidth === 0 ) {
+			return;
+		}
+
+		// Set the preview content scale by changing its zoom property.
+		const setContentScale = ( value ) => {
+			iframeDoc.documentElement.style.setProperty( 'zoom', value, 'important' );
+		};
 
 		/**
-		 * Custom styles to add spacing around the preview.
+		 * The scale breakpoints map.
+		 * The order of the breakpoints is important.
+		 * The first breakpoint that matches the container width will be used.
 		 */
-		const iframeDoc = document.getElementById( `nfd-onboarding-${ preview.slug }-selected` )?.contentWindow?.document;
+		const scaleBreakpointsMap = [
+			{ minWidth: 1440, scale: 1 },
+			{ minWidth: 1280, scale: 0.95 },
+			{ minWidth: 1024, scale: 0.9 },
+			{ minWidth: 768, scale: 0.85 },
+			{ minWidth: 480, scale: 0.8 },
+		];
+
+		// Find the scale breakpoint that matches the container width.
+		const scaleBreakpoint = scaleBreakpointsMap.find( ( breakpoint ) => containerWidth > breakpoint.minWidth );
+		if ( scaleBreakpoint ) {
+			setContentScale( scaleBreakpoint.scale );
+		} else {
+			setContentScale( 1 );
+		}
+	};
+
+	/**
+	 * Dynamically control the iframe content scale and height.
+	 * Runs on iframe load/re-render.
+	 *
+	 * Don't let the code scare you, just follow the comments and you'll be fine.
+	 */
+	const dynamicallyControlIframeScale = () => {
+		// Disconnect lingering resize observer.
+		if ( refMap.current.previewContainerResizeObserver ) {
+			refMap.current.previewContainerResizeObserver.disconnect();
+		}
+		// Observe the preview container for resize events (console, user window resize, etc).
+		refMap.current.previewContainerResizeObserver = new ResizeObserver( ( entries ) => {
+			entries.forEach( ( entry ) => {
+				// Get the new width and height values after the resize event.
+				const { width: newWidth, height: newHeight } = entry.contentRect;
+
+				// Check which values have changed (width, height, both, none).
+				const widthHasChanged = newWidth !== refMap.current.previousIframeDimensions.width;
+				const heightHasChanged = newHeight !== refMap.current.previousIframeDimensions.height;
+
+				// Update the previous dimensions to the new values.
+				refMap.current.previousIframeDimensions = {
+					width: newWidth,
+					height: newHeight,
+				};
+
+				// If the width has changed, calculate the iframe content scale.
+				if ( widthHasChanged ) {
+					calculateIframeContentScale();
+				}
+
+				// If the height has changed, set the iframe height.
+				if ( heightHasChanged ) {
+					setIframeHeight( calculateIframeHeight() );
+				}
+			} );
+		} );
+		refMap.current.previewContainerResizeObserver.observe( refMap.current.previewContainer );
+	};
+
+	// On unmount: Disconnect the resize observer.
+	useEffect( () => {
+		return () => {
+			if ( refMap.current.previewContainerResizeObserver ) {
+				refMap.current.previewContainerResizeObserver.disconnect();
+			}
+		};
+	}, [] );
+
+	const iframeOnLoad = () => {
+		dynamicallyControlIframeScale();
+
+		const iframeDoc = refMap.current.iframeElement?.contentWindow?.document;
 		if ( iframeDoc ) {
-			// Preview margins and styles
+			/**
+			 * The styles below add the spacing around the preview.
+			 */
 			// <html> styles
-			iframeDoc.documentElement.style.setProperty("padding", "40px 25px 110px", "important");
-			iframeDoc.documentElement.style.setProperty("overflow", "overlay", "important");
-			iframeDoc.documentElement.style.setProperty("background-color", "#ECEDEE", "important");
+			iframeDoc.documentElement.style.setProperty( 'padding', '40px 25px 110px', 'important' );
+			iframeDoc.documentElement.style.setProperty( 'overflow', 'overlay', 'important' );
+			iframeDoc.documentElement.style.setProperty( 'background-color', '#ECEDEE', 'important' );
 			// <body> styles
-			iframeDoc.body.style.setProperty("border-radius", "10px", "important");
-			iframeDoc.body.style.setProperty("overflow", "overlay", "important");
-			iframeDoc.body.style.setProperty("border", "1px solid #CBD5E1", "important");
-			iframeDoc.body.style.setProperty("box-shadow", "0 0 0px 2px #c5cbd4, 0 0 25px 7px rgba(64, 77, 96, 0.1)", "important");
+			iframeDoc.body.style.setProperty( 'border-radius', '10px', 'important' );
+			iframeDoc.body.style.setProperty( 'overflow', 'overlay', 'important' );
+			iframeDoc.body.style.setProperty( 'border', '1px solid #CBD5E1', 'important' );
+			iframeDoc.body.style.setProperty( 'box-shadow', '0 0 0px 2px #c5cbd4, 0 0 25px 7px rgba(64, 77, 96, 0.1)', 'important' );
 			// End: Preview styles
 		}
 
@@ -86,9 +190,17 @@ const Preview = () => {
 	};
 
 	return (
-		<div className="nfd-onboarding-canvas-preview nfd-relative nfd-w-full">
+		<div
+			className="nfd-onboarding-canvas-preview nfd-relative nfd-w-full"
+			ref={ ( el ) => {
+				refMap.current.previewContainer = el;
+			} }
+		>
 			<StatusOverlay />
 			{ preview && <Iframe
+				ref={ ( el ) => {
+					refMap.current.iframeElement = el;
+				} }
 				title={ preview.slug }
 				id={ `nfd-onboarding-${ preview.slug }-selected` }
 				src={ preview.iframeSrc }
@@ -99,7 +211,7 @@ const Preview = () => {
 				onLoad={ iframeOnLoad }
 				tabIndex="-1"
 				inert
-				className="nfd-cursor-default"
+				className="nfd-cursor-default "
 			/> }
 		</div>
 	);