From 3b0bc1ca751157669f322698f054b327002d183c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 3 Aug 2026 13:15:23 +0200
Subject: [PATCH 1/2] [Website] Position WordPress notices above the floating
 Dock

---
 .../lib/playground-mu-plugin/0-playground.php | 103 ++++++++++++++++++
 .../website/src/components/dock/dock.tsx      |   2 +
 2 files changed, 105 insertions(+)

diff --git a/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php b/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
index 7969d5f9c16..47a422ea6b2 100644
--- a/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
+++ b/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
@@ -45,6 +45,109 @@ function ( $message ) {
 		</style>';
 });
 
+/**
+ * Keeps editor snackbars above the floating Playground Dock.
+ *
+ * The Dock lives two iframe layers above WordPress. Playground's scoped
+ * requests share its origin, so wp-admin can read the Dock geometry without
+ * introducing a second host-side state channel. Embedded or isolated contexts
+ * that cannot reach the Dock keep WordPress's native notice positioning.
+ */
+add_action('admin_footer', function () {
+	?>
+	<style>
+		html.playground-dock-overlaps-admin-notices
+			body.wp-admin .components-snackbar-list {
+			bottom: var(--playground-dock-notice-bottom);
+		}
+	</style>
+	<script>
+		(function () {
+			let ancestorWindow = window;
+			let frameLeft = 0;
+			let frameTop = 0;
+			let dock;
+
+			while (ancestorWindow !== ancestorWindow.parent) {
+				try {
+					const frame = ancestorWindow.frameElement;
+					if (!frame) {
+						return;
+					}
+					const frameRect = frame.getBoundingClientRect();
+					frameLeft += frameRect.left;
+					frameTop += frameRect.top;
+					ancestorWindow = ancestorWindow.parent;
+					dock = ancestorWindow.document.querySelector(
+						'[data-playground-dock]'
+					);
+					if (dock) {
+						break;
+					}
+				} catch {
+					return;
+				}
+			}
+
+			if (!dock) {
+				return;
+			}
+
+			const root = document.documentElement;
+			const updateNoticePosition = function () {
+				const dockRect = dock.getBoundingClientRect();
+				const frameBottom = frameTop + window.innerHeight;
+				const frameCenter = frameLeft + window.innerWidth / 2;
+				const overlap = frameBottom - dockRect.top;
+				const overlapsNotices =
+					dockRect.width > 0 &&
+					dockRect.height > 0 &&
+					overlap > 0 &&
+					dockRect.left < frameCenter &&
+					dockRect.right > frameCenter;
+
+				root.classList.toggle(
+					'playground-dock-overlaps-admin-notices',
+					overlapsNotices
+				);
+				if (overlapsNotices) {
+					root.style.setProperty(
+						'--playground-dock-notice-bottom',
+						`${overlap + 12}px`
+					);
+				} else {
+					root.style.removeProperty(
+						'--playground-dock-notice-bottom'
+					);
+				}
+			};
+
+			const resizeObserver = new ResizeObserver(updateNoticePosition);
+			resizeObserver.observe(dock);
+			const mutationObserver = new MutationObserver(updateNoticePosition);
+			mutationObserver.observe(dock, {
+				attributes: true,
+				attributeFilter: ['class', 'style'],
+			});
+			window.addEventListener('resize', updateNoticePosition);
+			ancestorWindow.addEventListener('resize', updateNoticePosition);
+			dock.addEventListener('transitionend', updateNoticePosition);
+			dock.addEventListener('animationend', updateNoticePosition);
+
+			window.addEventListener('pagehide', function () {
+				resizeObserver.disconnect();
+				mutationObserver.disconnect();
+				ancestorWindow.removeEventListener('resize', updateNoticePosition);
+				dock.removeEventListener('transitionend', updateNoticePosition);
+				dock.removeEventListener('animationend', updateNoticePosition);
+			}, { once: true });
+
+			updateNoticePosition();
+		})();
+	</script>
+	<?php
+});
+
 /**
  * Opt Playground pages into browser-native cross-document View Transitions.
  *
diff --git a/packages/playground/website/src/components/dock/dock.tsx b/packages/playground/website/src/components/dock/dock.tsx
index c6e78473fa8..722d6bd3ed3 100644
--- a/packages/playground/website/src/components/dock/dock.tsx
+++ b/packages/playground/website/src/components/dock/dock.tsx
@@ -1247,8 +1247,10 @@ export function Dock({
 					</button>
 				</div>
 			)}
+			{/* The web MU-plugin uses this stable hook to keep WordPress notices clear. */}
 			<nav
 				ref={dockRef}
+				data-playground-dock=""
 				className={classNames(css.dock, {
 					[css.dockCollapsed]: isCollapsed,
 					[css.dockFull]: !isMobile && isFullWidth,

From 5d82a196a58acdfcc186d799e5db3df6834c38d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 3 Aug 2026 16:24:48 +0200
Subject: [PATCH 2/2] [Website] Relay Dock notice offsets across iframe
 boundaries

---
 .../remote/src/lib/boot-playground-remote.ts  | 21 +++++
 .../remote/src/lib/playground-client.ts       |  8 ++
 .../lib/playground-mu-plugin/0-playground.php | 89 ++++---------------
 .../website/src/components/dock/dock.tsx      | 59 +++++++++++-
 4 files changed, 105 insertions(+), 72 deletions(-)

diff --git a/packages/playground/remote/src/lib/boot-playground-remote.ts b/packages/playground/remote/src/lib/boot-playground-remote.ts
index 073218133c1..aca29dbb8dc 100644
--- a/packages/playground/remote/src/lib/boot-playground-remote.ts
+++ b/packages/playground/remote/src/lib/boot-playground-remote.ts
@@ -130,6 +130,7 @@ export async function bootPlaygroundRemote() {
 	);
 
 	const wpFrame = document.querySelector('#wp') as HTMLIFrameElement;
+	let editorNoticeBottomOffset: number | undefined;
 	const phpRemoteApi: PHPRemoteApi = {
 		async onDownloadProgress(fn) {
 			return phpWorkerApi.onDownloadProgress(fn);
@@ -366,6 +367,15 @@ export async function bootPlaygroundRemote() {
 				sandbox: wpFrame.getAttribute('sandbox'),
 			});
 		},
+		async setEditorNoticeBottomOffset(bottom) {
+			editorNoticeBottomOffset =
+				typeof bottom === 'number' &&
+				Number.isFinite(bottom) &&
+				bottom > 0
+					? bottom
+					: undefined;
+			postEditorNoticeBottomOffset();
+		},
 		async setIframeSandboxFlags(flags: string[]) {
 			wpFrame.setAttribute('sandbox', flags.join(' '));
 		},
@@ -554,6 +564,17 @@ export async function bootPlaygroundRemote() {
 			}
 		},
 	};
+	wpFrame.addEventListener('load', postEditorNoticeBottomOffset);
+
+	function postEditorNoticeBottomOffset() {
+		wpFrame.contentWindow?.postMessage(
+			{
+				type: 'playground-editor-notice-bottom-offset',
+				bottom: editorNoticeBottomOffset,
+			},
+			'*'
+		);
+	}
 
 	await phpWorkerApi.isConnected();
 
diff --git a/packages/playground/remote/src/lib/playground-client.ts b/packages/playground/remote/src/lib/playground-client.ts
index 0ff6b6a115b..764b5de89d9 100644
--- a/packages/playground/remote/src/lib/playground-client.ts
+++ b/packages/playground/remote/src/lib/playground-client.ts
@@ -54,6 +54,14 @@ export interface WebClientMixin extends ProgressReceiver {
 	 */
 	captureSiteThumbnail(): Promise<SiteThumbnail>;
 
+	/**
+	 * Sets the bottom offset for WordPress editor notices.
+	 *
+	 * @internal Used by the Playground website to keep notices clear of its
+	 * floating Dock.
+	 */
+	setEditorNoticeBottomOffset(bottom: number | undefined): Promise<void>;
+
 	/**
 	 * Sets the iframe sandbox flags.
 	 * @param flags The iframe sandbox flags.
diff --git a/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php b/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
index 47a422ea6b2..b83da5389b1 100644
--- a/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
+++ b/packages/playground/remote/src/lib/playground-mu-plugin/0-playground.php
@@ -48,10 +48,9 @@ function ( $message ) {
 /**
  * Keeps editor snackbars above the floating Playground Dock.
  *
- * The Dock lives two iframe layers above WordPress. Playground's scoped
- * requests share its origin, so wp-admin can read the Dock geometry without
- * introducing a second host-side state channel. Embedded or isolated contexts
- * that cannot reach the Dock keep WordPress's native notice positioning.
+ * The host measures the Dock and relays its bottom offset through the
+ * Playground client. postMessage crosses the iframe boundary even when the
+ * host, remote, and WordPress documents cannot inspect each other's DOM.
  */
 add_action('admin_footer', function () {
 	?>
@@ -63,86 +62,36 @@ function ( $message ) {
 	</style>
 	<script>
 		(function () {
-			let ancestorWindow = window;
-			let frameLeft = 0;
-			let frameTop = 0;
-			let dock;
-
-			while (ancestorWindow !== ancestorWindow.parent) {
-				try {
-					const frame = ancestorWindow.frameElement;
-					if (!frame) {
-						return;
-					}
-					const frameRect = frame.getBoundingClientRect();
-					frameLeft += frameRect.left;
-					frameTop += frameRect.top;
-					ancestorWindow = ancestorWindow.parent;
-					dock = ancestorWindow.document.querySelector(
-						'[data-playground-dock]'
-					);
-					if (dock) {
-						break;
-					}
-				} catch {
+			const root = document.documentElement;
+			window.addEventListener('message', function (event) {
+				// The remote may be cross-origin, so its window identity is the
+				// trust boundary for this presentation-only message.
+				if (
+					event.source !== window.parent ||
+					event.data?.type !== 'playground-editor-notice-bottom-offset'
+				) {
 					return;
 				}
-			}
-
-			if (!dock) {
-				return;
-			}
-
-			const root = document.documentElement;
-			const updateNoticePosition = function () {
-				const dockRect = dock.getBoundingClientRect();
-				const frameBottom = frameTop + window.innerHeight;
-				const frameCenter = frameLeft + window.innerWidth / 2;
-				const overlap = frameBottom - dockRect.top;
-				const overlapsNotices =
-					dockRect.width > 0 &&
-					dockRect.height > 0 &&
-					overlap > 0 &&
-					dockRect.left < frameCenter &&
-					dockRect.right > frameCenter;
-
+				const bottom = event.data.bottom;
+				const hasBottomOffset =
+					typeof bottom === 'number' &&
+					Number.isFinite(bottom) &&
+					bottom > 0;
 				root.classList.toggle(
 					'playground-dock-overlaps-admin-notices',
-					overlapsNotices
+					hasBottomOffset
 				);
-				if (overlapsNotices) {
+				if (hasBottomOffset) {
 					root.style.setProperty(
 						'--playground-dock-notice-bottom',
-						`${overlap + 12}px`
+						`${bottom}px`
 					);
 				} else {
 					root.style.removeProperty(
 						'--playground-dock-notice-bottom'
 					);
 				}
-			};
-
-			const resizeObserver = new ResizeObserver(updateNoticePosition);
-			resizeObserver.observe(dock);
-			const mutationObserver = new MutationObserver(updateNoticePosition);
-			mutationObserver.observe(dock, {
-				attributes: true,
-				attributeFilter: ['class', 'style'],
 			});
-			window.addEventListener('resize', updateNoticePosition);
-			ancestorWindow.addEventListener('resize', updateNoticePosition);
-			dock.addEventListener('transitionend', updateNoticePosition);
-			dock.addEventListener('animationend', updateNoticePosition);
-
-			window.addEventListener('pagehide', function () {
-				resizeObserver.disconnect();
-				mutationObserver.disconnect();
-				ancestorWindow.removeEventListener('resize', updateNoticePosition);
-				dock.removeEventListener('transitionend', updateNoticePosition);
-				dock.removeEventListener('animationend', updateNoticePosition);
-			}, { once: true });
-
-			updateNoticePosition();
 		})();
 	</script>
 	<?php
diff --git a/packages/playground/website/src/components/dock/dock.tsx b/packages/playground/website/src/components/dock/dock.tsx
index 722d6bd3ed3..0b7cf8cbb54 100644
--- a/packages/playground/website/src/components/dock/dock.tsx
+++ b/packages/playground/website/src/components/dock/dock.tsx
@@ -62,6 +62,7 @@ import { DockTogglePill } from './dock-toggle-pill';
 import {
 	DOCK_DRAG_EDGE,
 	DOCK_OPERATION_TOAST_MIN_HEIGHT,
+	DOCK_PANE_GAP,
 	getDockOperationToastStyle,
 	getDockPaneStyle,
 } from './dock-positioning';
@@ -208,6 +209,7 @@ export function Dock({
 	const paneCopy = PANE_COPY[section];
 	const paneTitle = paneCopy.title;
 	const isMobile = useIsMobileDock();
+	const activeClient = clientInfo?.client;
 	const isEditorSection = section === 'blueprint' || section === 'files';
 	// Logs hold long monospace records, so they get a wider pane.
 	const isWideSection = section === 'logs';
@@ -319,6 +321,61 @@ export function Dock({
 		return () => observer.disconnect();
 	}, []);
 
+	useEffect(() => {
+		const dock = dockRef.current;
+		if (!activeClient || !dock) {
+			return;
+		}
+
+		const updateEditorNoticePosition = () => {
+			const dockRect = dock.getBoundingClientRect();
+			const viewportCenter = window.innerWidth / 2;
+			const overlap = window.innerHeight - dockRect.top;
+			const overlapsNotices =
+				!isMobile &&
+				!isFullWidth &&
+				dockRect.width > 0 &&
+				dockRect.height > 0 &&
+				overlap > 0 &&
+				dockRect.left < viewportCenter &&
+				dockRect.right > viewportCenter;
+			void activeClient.setEditorNoticeBottomOffset(
+				overlapsNotices ? overlap + DOCK_PANE_GAP : undefined
+			);
+		};
+
+		let resizeObserver: ResizeObserver | undefined;
+		if (typeof ResizeObserver !== 'undefined') {
+			resizeObserver = new ResizeObserver(updateEditorNoticePosition);
+			resizeObserver.observe(dock);
+		}
+		const mutationObserver = new MutationObserver(
+			updateEditorNoticePosition
+		);
+		mutationObserver.observe(dock, {
+			attributes: true,
+			attributeFilter: ['class', 'style'],
+		});
+		window.addEventListener('resize', updateEditorNoticePosition);
+		dock.addEventListener('transitionend', updateEditorNoticePosition);
+		dock.addEventListener('animationend', updateEditorNoticePosition);
+		updateEditorNoticePosition();
+
+		return () => {
+			resizeObserver?.disconnect();
+			mutationObserver.disconnect();
+			window.removeEventListener('resize', updateEditorNoticePosition);
+			dock.removeEventListener(
+				'transitionend',
+				updateEditorNoticePosition
+			);
+			dock.removeEventListener(
+				'animationend',
+				updateEditorNoticePosition
+			);
+		};
+	}, [activeClient, isFullWidth, isMobile]);
+
 	useEffect(() => {
 		/** Keeps floating geometry inside the live viewport. */
 		const updateViewportSize = () => {
@@ -1247,10 +1304,8 @@ export function Dock({
 					</button>
 				</div>
 			)}
-			{/* The web MU-plugin uses this stable hook to keep WordPress notices clear. */}
 			<nav
 				ref={dockRef}
-				data-playground-dock=""
 				className={classNames(css.dock, {
 					[css.dockCollapsed]: isCollapsed,
 					[css.dockFull]: !isMobile && isFullWidth,