[Website] Position WordPress notices above the floating Dock

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.
  *

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,