refactor(email-preview): align with NewsletterPreview rendering contract (NPPD-1525)

kmwilkerson · claude · kmwilkerson · commit ae4d00e6207a · 2026-05-15T11:22:49.000-05:00
Address thomasguillot review feedback: 848px source viewport, 1:1 aspect
ratio, fade-in via is-ready class with opacity transition, iframe height
measured from contentDocument after stylesheets/images load (8s safety
timeout), state reset on postId change. Adds tests for is-ready class
and reset-on-postId-change behaviour.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/wizards/newspack/views/settings/emails/email-preview.scss b/src/wizards/newspack/views/settings/emails/email-preview.scss
@@ -1,23 +1,29 @@
 // Email preview thumbnail container.
 .newspack-email-preview {
 	width: 100%;
-	aspect-ratio: 4 / 3;
+	aspect-ratio: 1;
 	overflow: hidden;
 	position: relative;
-	background: #f6f7f7;
+	background: transparent;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 
 	&__iframe {
-		width: 600px;
-		height: 1800px;
+		width: 848px;
+		height: auto;
 		border: 0;
 		position: absolute;
 		top: 0;
 		left: 0;
 		transform-origin: top left;
 		pointer-events: none;
+		opacity: 0;
+		transition: opacity 200ms ease-out;
+	}
+
+	&.is-ready &__iframe {
+		opacity: 1;
 	}
 
 	// Loading / error placeholder overlay.
diff --git a/src/wizards/newspack/views/settings/emails/email-preview.test.js b/src/wizards/newspack/views/settings/emails/email-preview.test.js
@@ -50,6 +50,21 @@ global.ResizeObserver = class {
 	disconnect() {}
 };
 
+/**
+ * Helper: simulate iframe onLoad and stub contentDocument so
+ * handleIframeLoad resolves immediately (no pending assets).
+ */
+function simulateIframeLoad( iframe ) {
+	Object.defineProperty( iframe, 'contentDocument', {
+		value: {
+			querySelectorAll: () => [],
+			body: { scrollHeight: 900 },
+		},
+		configurable: true,
+	} );
+	iframe.dispatchEvent( new Event( 'load' ) );
+}
+
 describe( 'EmailPreview', () => {
 	beforeEach( () => {
 		apiFetch.mockReset();
@@ -65,7 +80,7 @@ describe( 'EmailPreview', () => {
 		expect( screen.getByRole( 'presentation' ) ).toBeTruthy();
 	} );
 
-	it( 'renders iframe on successful fetch', async () => {
+	it( 'renders iframe on successful fetch and gains is-ready after load', async () => {
 		apiFetch.mockResolvedValue( {
 			html: '<html><body><p>Hello Sample Reader</p></body></html>',
 			post_id: 123,
@@ -78,6 +93,18 @@ describe( 'EmailPreview', () => {
 			expect( iframe ).toBeTruthy();
 			expect( iframe.getAttribute( 'srcdoc' ) ).toContain( 'Sample Reader' );
 		} );
+
+		// Before onLoad the container should NOT have is-ready.
+		const container = document.querySelector( '.newspack-email-preview' );
+		expect( container.classList.contains( 'is-ready' ) ).toBe( false );
+
+		// Simulate iframe load.
+		const iframe = document.querySelector( '.newspack-email-preview__iframe' );
+		simulateIframeLoad( iframe );
+
+		await waitFor( () => {
+			expect( container.classList.contains( 'is-ready' ) ).toBe( true );
+		} );
 	} );
 
 	it( 'renders fallback placeholder on fetch error', async () => {
@@ -113,4 +140,45 @@ describe( 'EmailPreview', () => {
 			} );
 		} );
 	} );
+
+	it( 'resets state when postId changes', async () => {
+		apiFetch.mockResolvedValue( {
+			html: '<html><body><p>First email</p></body></html>',
+			post_id: 1,
+		} );
+
+		const { rerender } = render( <EmailPreview postId={ 1 } /> );
+
+		// Wait for first render to complete.
+		await waitFor( () => {
+			const iframe = document.querySelector( '.newspack-email-preview__iframe' );
+			expect( iframe ).toBeTruthy();
+		} );
+
+		// Simulate onLoad for first email.
+		simulateIframeLoad( document.querySelector( '.newspack-email-preview__iframe' ) );
+		await waitFor( () => {
+			expect( document.querySelector( '.newspack-email-preview' ).classList.contains( 'is-ready' ) ).toBe( true );
+		} );
+
+		// Change postId — should reset and re-fetch.
+		apiFetch.mockResolvedValue( {
+			html: '<html><body><p>Second email</p></body></html>',
+			post_id: 2,
+		} );
+
+		rerender( <EmailPreview postId={ 2 } /> );
+
+		// is-ready should be removed during re-fetch.
+		await waitFor( () => {
+			expect( document.querySelector( '.newspack-email-preview' ).classList.contains( 'is-ready' ) ).toBe( false );
+		} );
+
+		// New iframe should appear with updated content.
+		await waitFor( () => {
+			const iframe = document.querySelector( '.newspack-email-preview__iframe' );
+			expect( iframe ).toBeTruthy();
+			expect( iframe.getAttribute( 'srcdoc' ) ).toContain( 'Second email' );
+		} );
+	} );
 } );
diff --git a/src/wizards/newspack/views/settings/emails/email-preview.tsx b/src/wizards/newspack/views/settings/emails/email-preview.tsx
@@ -4,13 +4,17 @@
  * Lazy-loads via IntersectionObserver: the REST fetch only fires once the
  * component scrolls into view. On success an iframe with srcDoc displays the
  * rendered HTML; on error an envelope icon placeholder is shown instead.
+ *
+ * Rendering contract mirrors NewsletterPreview in newspack-newsletters:
+ * 848 px source viewport, 1 : 1 aspect ratio, fade-in via `is-ready` class,
+ * and iframe height measured from the loaded document.
  */
 
 /**
  * WordPress dependencies.
  */
 import apiFetch from '@wordpress/api-fetch';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { Icon, envelope } from '@wordpress/icons';
 
@@ -23,15 +27,18 @@ interface EmailPreviewProps {
 	postId: number;
 }
 
-const IFRAME_WIDTH = 600;
+const IFRAME_WIDTH = 848;
 
 const EmailPreview: React.FC< EmailPreviewProps > = ( { postId } ) => {
 	const containerRef = useRef< HTMLDivElement >( null );
+	const iframeRef = useRef< HTMLIFrameElement >( null );
 	const [ isVisible, setIsVisible ] = useState( false );
 	const [ html, setHtml ] = useState< string | null >( null );
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ hasError, setHasError ] = useState( false );
 	const [ scale, setScale ] = useState( 0 );
+	const [ iframeHeight, setIframeHeight ] = useState< number | null >( null );
+	const [ isReady, setIsReady ] = useState( false );
 
 	// Observe visibility — fetch only when the thumbnail enters the viewport.
 	useEffect( () => {
@@ -79,13 +86,17 @@ const EmailPreview: React.FC< EmailPreviewProps > = ( { postId } ) => {
 		return () => ro.disconnect();
 	}, [] );
 
-	// Fetch preview HTML once visible.
+	// Fetch preview HTML once visible. Reset state on postId change.
 	useEffect( () => {
 		if ( ! isVisible ) {
 			return;
 		}
 
 		setIsLoading( true );
+		setIsReady( false );
+		setIframeHeight( null );
+		setHasError( false );
+		setHtml( null );
 		apiFetch< { html: string; post_id: number } >( {
 			path: `/newspack/v1/wizard/newspack-settings/emails/${ postId }/preview`,
 		} )
@@ -100,9 +111,42 @@ const EmailPreview: React.FC< EmailPreviewProps > = ( { postId } ) => {
 			} );
 	}, [ isVisible, postId ] );
 
+	// Handle iframe load: wait for stylesheets and images, then measure height and reveal.
+	const handleIframeLoad = useCallback( () => {
+		const doc = iframeRef.current?.contentDocument;
+		if ( ! doc ) {
+			return;
+		}
+
+		const awaitLoad = ( el: HTMLLinkElement | HTMLImageElement ) =>
+			new Promise< void >( resolve => {
+				el.addEventListener( 'load', () => resolve(), { once: true } );
+				el.addEventListener( 'error', () => resolve(), { once: true } );
+			} );
+
+		const linkPromises = Array.from( doc.querySelectorAll< HTMLLinkElement >( 'link[rel="stylesheet"]' ) )
+			.filter( link => ! link.sheet )
+			.map( awaitLoad );
+		const imgPromises = Array.from( doc.querySelectorAll< HTMLImageElement >( 'img' ) )
+			.filter( img => ! img.complete )
+			.map( awaitLoad );
+
+		// 8 s safety so a slow asset never strands the spinner.
+		const safety = setTimeout( () => {
+			setIframeHeight( doc.body.scrollHeight );
+			setIsReady( true );
+		}, 8000 );
+
+		Promise.all( [ ...linkPromises, ...imgPromises ] ).then( () => {
+			clearTimeout( safety );
+			setIframeHeight( doc.body.scrollHeight );
+			setIsReady( true );
+		} );
+	}, [] );
+
 	return (
-		<div ref={ containerRef } className="newspack-email-preview">
-			{ isLoading && (
+		<div ref={ containerRef } className={ `newspack-email-preview${ isReady ? ' is-ready' : '' }` }>
+			{ ( isLoading || ( html && ! isReady ) ) && ! hasError && (
 				<div className="newspack-email-preview__placeholder">
 					<Spinner />
 				</div>
@@ -112,14 +156,19 @@ const EmailPreview: React.FC< EmailPreviewProps > = ( { postId } ) => {
 					<Icon icon={ envelope } size={ 48 } />
 				</div>
 			) }
-			{ html && ! hasError && ! isLoading && scale > 0 && (
+			{ html && ! hasError && scale > 0 && (
 				<iframe
+					ref={ iframeRef }
 					className="newspack-email-preview__iframe"
 					srcDoc={ html }
 					sandbox=""
 					tabIndex={ -1 }
 					title="Email preview"
-					style={ { transform: `scale(${ scale })` } }
+					onLoad={ handleIframeLoad }
+					style={ {
+						transform: `scale(${ scale })`,
+						height: iframeHeight ? `${ iframeHeight }px` : undefined,
+					} }
 				/>
 			) }
 		</div>
