WordPress · adamziel · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025
diff --git a/packages/playground/remote/iframes-trap.js b/packages/playground/remote/iframes-trap.js
diff --git a/packages/playground/remote/remote.html b/packages/playground/remote/remote.html
@@ -2,6 +2,99 @@
 <html>
 	<head>
 		<title>WordPress Playground</title>
+		<!--
+			Set up the message listener for cross-frame iframe creation requests.
+			This is needed BEFORE the service worker is registered, because nested iframes
+			(like TinyMCE inside WordPress) may need to create controlled iframes in this
+			ancestor window. The full iframes-trap.js will be loaded by the service worker
+			for other pages, but this listener must be available immediately.
+		-->
+		<script>
+			// Minimal message listener for iframe creation requests from child frames.
+			// This is a subset of iframes-trap.js that handles the postMessage protocol.
+			(function() {
+				// Native createElement reference
+				const nativeCreateElement = Document.prototype.createElement;
+				const nativeSetAttribute = Element.prototype.setAttribute;
+				const nativeIframeSrc = Object.getOwnPropertyDescriptor(HTMLIFrameElement.prototype, 'src');
+
+				// Mark that we have the listener
+				window.__controlled_iframes_loaded__ = true;
+
+				// Storage for created iframes that children can access
+				window.__pg_iframes = {};
+
+				window.addEventListener('message', async (event) => {
+					if (event.data?.type !== '__playground_create_iframe') {
+						return;
+					}
+
+					const { config } = event.data;
+					const port = event.ports[0];
+
+					if (!port) {
+						return;
+					}
+
+					try {
+						// Create iframe using native createElement
+						const iframe = nativeCreateElement.call(document, 'iframe');
+						iframe.id = config.id;
+
+						// Copy attributes
+						if (config.attributes) {
+							for (const [name, value] of Object.entries(config.attributes)) {
+								iframe.setAttribute(name, value);
+							}
+						}
+
+						// Apply styles
+						if (config.style) {
+							Object.assign(iframe.style, config.style);
+						}
+
+						// Append to body
+						document.body.appendChild(iframe);
+
+						// Set src using native setter
+						if (config.src) {
+							if (nativeIframeSrc?.set) {
+								nativeIframeSrc.set.call(iframe, config.src);
+							} else {
+								nativeSetAttribute.call(iframe, 'src', config.src);
+							}
+						}
+
+						// Store reference so child can access it
+						window.__pg_iframes[config.id] = iframe;
+
+						// Wait for the iframe to have a service worker controller before responding.
+						// This is critical for Firefox where timing can be different.
+						const waitForController = async (maxWait = 10000) => {
+							const start = Date.now();
+							while (Date.now() - start < maxWait) {
+								try {
+									if (iframe.contentWindow?.navigator?.serviceWorker?.controller) {
+										return true;
+									}
+								} catch {
+									// Cross-origin or not ready
+								}
+								await new Promise(r => setTimeout(r, 50));
+							}
+							return false;
+						};
+
+						// Wait for controller, but don't block indefinitely
+						await waitForController();
+
+						port.postMessage({ success: true, iframeId: config.id });
+					} catch (error) {
+						port.postMessage({ error: error.message });
+					}
+				});
+			})();
+		</script>
 		<style>
 			* {
 				box-sizing: border-box;