WordPress · adamziel · Dec 15, 2025 · Dec 1, 2025 · Dec 2, 2025 · Dec 2, 2025
diff --git a/packages/playground/remote/project.json b/packages/playground/remote/project.json
@@ -24,7 +24,8 @@
 				"outputPath": "dist/packages/playground/remote",
 				"main": "packages/playground/remote/remote.html",
 				"tsConfig": "packages/playground/remote/tsconfig.lib.json"
-			}
+			},
+			"dependsOn": ["playground-blueprints:build:blueprint-schema"]
 		},
 		"dev": {
 			"executor": "@nx/vite:dev-server",

diff --git a/packages/playground/remote/remote.html b/packages/playground/remote/remote.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 	<head>
 		<title>WordPress Playground</title>

diff --git a/packages/playground/remote/src/lib/boot-playground-remote.ts b/packages/playground/remote/src/lib/boot-playground-remote.ts
@@ -36,7 +36,9 @@ import workerV2Url from './playground-worker-endpoint-blueprints-v2.ts?worker&ur
 const origin = new URL('/', (import.meta || {}).url).origin;
 
 function getWorkerUrl(): string {
-	const runner = new URL(document.location.href).searchParams.get('blueprints-runner');
+	const runner = new URL(document.location.href).searchParams.get(
+		'blueprints-runner'
+	);
 	const isV2 = runner === 'v2';
 	const selected = isV2 ? workerV2Url : workerV1Url;
 	return new URL(selected, origin) + '';

diff --git a/packages/playground/website/playwright/e2e/opfs.spec.ts b/packages/playground/website/playwright/e2e/opfs.spec.ts
@@ -66,24 +66,24 @@ test('should switch between sites', async ({ website, browserName }) => {
 	// Save the temporary site using the modal
 	await saveSiteViaModal(website.page);
 
-	await expect(
-		website.page.locator('[aria-current="page"]')
-	).not.toContainText('Temporary Playground', {
-		// Saving the site takes a while on CI
-		timeout: 90000,
-	});
 	await expect(website.page.getByLabel('Playground title')).not.toContainText(
-		'Temporary Playground'
+		'Temporary Playground',
+		{
+			// Saving the site takes a while on CI
+			timeout: 90000,
+		}
 	);
 
+	// Open the saved playgrounds overlay to switch sites
+	await website.openSavedPlaygroundsOverlay();
+
+	// Click on Temporary Playground in the overlay's site list
 	await website.page
-		.locator('button')
+		.locator('[class*="siteRowContent"]')
 		.filter({ hasText: 'Temporary Playground' })
 		.click();
 
-	await expect(website.page.locator('[aria-current="page"]')).toContainText(
-		'Temporary Playground'
-	);
+	// The overlay closes and site manager opens with the selected site
 	await expect(website.page.getByLabel('Playground title')).toContainText(
 		'Temporary Playground'
 	);
@@ -118,27 +118,35 @@ test('should preserve PHP constants when saving a temporary site to OPFS', async
 	// Save the temporary site using the modal
 	await saveSiteViaModal(website.page);
 
-	await expect(
-		website.page.locator('[aria-current="page"]')
-	).not.toContainText('Temporary Playground', {
-		// Saving the site takes a while on CI
-		timeout: 90000,
-	});
+	await expect(website.page.getByLabel('Playground title')).not.toContainText(
+		'Temporary Playground',
+		{
+			// Saving the site takes a while on CI
+			timeout: 90000,
+		}
+	);
 
 	const storedPlaygroundTitleText = await website.page
 		.getByLabel('Playground title')
 		.textContent();
 	await expect(storedPlaygroundTitleText).not.toBeNull();
 	await expect(storedPlaygroundTitleText).not.toMatch('Temporary Playground');
 
+	// Open the saved playgrounds overlay to switch sites
+	await website.openSavedPlaygroundsOverlay();
+
+	// Switch to Temporary Playground
 	await website.page
-		.locator('button')
+		.locator('[class*="siteRowContent"]')
 		.filter({ hasText: 'Temporary Playground' })
 		.click();
 
+	// Open the overlay again to switch back to the stored site
+	await website.openSavedPlaygroundsOverlay();
+
 	// Switch back to the stored site and confirm the PHP constant is still present.
 	await website.page
-		.locator('button')
+		.locator('[class*="siteRowContent"]')
 		.filter({ hasText: storedPlaygroundTitleText! })
 		.click();
 
@@ -194,9 +202,13 @@ test('should rename a saved Playground and persist after reload', async ({
 	await expect(website.page.getByLabel('Playground title')).toContainText(
 		newName
 	);
+
+	// Verify the name is also updated in the saved playgrounds overlay
+	await website.openSavedPlaygroundsOverlay();
 	await expect(
-		website.page.locator('[aria-current="page"]').first()
-	).toContainText(newName);
+		website.page.locator('[class*="siteRowName"]', { hasText: newName })
+	).toBeVisible();
+	await website.closeSavedPlaygroundsOverlay();
 });
 
 test('should show save site modal with correct elements', async ({
@@ -335,9 +347,13 @@ test('should save site with custom name', async ({ website, browserName }) => {
 			timeout: 90000,
 		}
 	);
-	await expect(website.page.locator('[aria-current="page"]')).toContainText(
-		customName
-	);
+
+	// Verify the name also appears in the saved playgrounds overlay
+	await website.openSavedPlaygroundsOverlay();
+	await expect(
+		website.page.locator('[class*="siteRowName"]', { hasText: customName })
+	).toBeVisible();
+	await website.closeSavedPlaygroundsOverlay();
 });
 
 test('should not persist save site modal through page refresh', async ({

diff --git a/packages/playground/website/playwright/website-page.ts b/packages/playground/website/playwright/website-page.ts
@@ -42,26 +42,52 @@ export class WebsitePage {
 	}
 
 	async ensureSiteManagerIsOpen() {
-		const siteManager = this.page.locator('.main-sidebar');
-		if (!(await siteManager.isVisible())) {
-			await this.page
-				.getByRole('button', { name: 'Open Site Manager' })
-				.click();
+		const siteManagerButton = this.page.getByRole('button', {
+			name: /Site Manager/,
+		});
+		const isPressed = await siteManagerButton.getAttribute('aria-pressed');
+		if (isPressed !== 'true') {
+			await siteManagerButton.click();
 		}
-		await expect(siteManager).toBeVisible();
+		// Wait for the site info panel section to be visible
+		await expect(
+			this.page.locator('section[class*="site-info-panel"]')
+		).toBeVisible();
 	}
 
 	async ensureSiteManagerIsClosed() {
-		const siteManager = this.page.locator('.main-sidebar');
-		if (await siteManager.isVisible()) {
-			const closeButton = this.page.getByRole('button', {
-				name: 'Close Site Manager',
-			});
-			if (await closeButton.isVisible()) {
-				await closeButton.click();
-			}
+		const siteManagerButton = this.page.getByRole('button', {
+			name: /Site Manager/,
+		});
+		const isPressed = await siteManagerButton.getAttribute('aria-pressed');
+		if (isPressed === 'true') {
+			await siteManagerButton.click();
+		}
+		// Wait for the site info panel section to be hidden
+		await expect(
+			this.page.locator('section[class*="site-info-panel"]')
+		).not.toBeVisible();
+	}
+
+	async openSavedPlaygroundsOverlay() {
+		await this.page
+			.getByRole('button', { name: 'Saved Playgrounds' })
+			.click();
+		await expect(
+			this.page
+				.locator('[class*="overlay"]')
+				.filter({ hasText: 'Playground' })
+		).toBeVisible();
+	}
+
+	async closeSavedPlaygroundsOverlay() {
+		const overlay = this.page
+			.locator('[class*="overlay"]')
+			.filter({ hasText: 'Playground' });
+		if (await overlay.isVisible()) {
+			await this.page.keyboard.press('Escape');
 		}
-		await expect(siteManager).not.toBeVisible();
+		await expect(overlay).not.toBeVisible();
 	}
 
 	async getSiteTitle(): Promise<string> {

diff --git a/packages/playground/website/project.json b/packages/playground/website/project.json
@@ -45,7 +45,10 @@
 					"logLevel": "info"
 				}
 			},
-			"dependsOn": ["^build"]
+			"dependsOn": [
+				"^build",
+				"playground-blueprints:build:blueprint-schema"
+			]
 		},
 		"dev": {
 			"executor": "nx:run-commands",

diff --git a/...ges/playground/website/src/components/blueprint-editor/AutosavedBlueprintBundleEditor.tsx b/...ges/playground/website/src/components/blueprint-editor/AutosavedBlueprintBundleEditor.tsx
@@ -186,10 +186,12 @@ export const AutosavedBlueprintBundleEditor = forwardRef<
 
 				// Otherwise, populate an in-memory filesystem with the Blueprint JSON.
 				fs = new EventedFilesystem(new InMemoryFilesystemBackend());
-				await populateFilesystemFromBlueprint(
-					fs,
-					originalBlueprint as Blueprint
-				);
+				if (originalBlueprint) {
+					await populateFilesystemFromBlueprint(
+						fs,
+						originalBlueprint as Blueprint
+					);
+				}
 				setFilesystem(fs);
 				return;
 			}

diff --git a/packages/playground/website/src/components/blueprint-url-modal/index.tsx b/packages/playground/website/src/components/blueprint-url-modal/index.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { TextControl } from '@wordpress/components';
+import { useAppDispatch } from '../../lib/state/redux/store';
+import {
+	setActiveModal,
+	setSiteManagerOpen,
+} from '../../lib/state/redux/slice-ui';
+import { Modal } from '../modal';
+import ModalButtons from '../modal/modal-buttons';
+import { PlaygroundRoute, redirectTo } from '../../lib/state/url/router';
+
+export function BlueprintUrlModal() {
+	const dispatch = useAppDispatch();
+	const [url, setUrl] = useState<string>('');
+
+	const closeModal = () => dispatch(setActiveModal(null));
+
+	const handleSubmit = () => {
+		const trimmed = url.trim();
+		if (!trimmed) {
+			return;
+		}
+		dispatch(setSiteManagerOpen(false));
+		closeModal();
+		redirectTo(
+			PlaygroundRoute.newTemporarySite({
+				query: {
+					'blueprint-url': trimmed,
+				},
+			})
+		);
+	};
+
+	return (
+		<Modal
+			title="Run Blueprint from URL"
+			contentLabel='This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called "Run Blueprint from URL". Pressing the Close button will close the modal and bring you back to where you were on the page.'
+			onRequestClose={closeModal}
+			small
+		>
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					handleSubmit();
+				}}
+				style={{ display: 'flex', flexDirection: 'column', gap: 12 }}
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					label="Blueprint URL"
+					value={url}
+					onChange={(val: string) => setUrl(val)}
+					placeholder="https://example.com/blueprint.json"
+					type="url"
+					autoFocus
+				/>
+				<ModalButtons
+					submitText="Run Blueprint"
+					areDisabled={!url.trim()}
+					onCancel={closeModal}
+				/>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/playground/website/src/components/browser-chrome/index.tsx b/packages/playground/website/src/components/browser-chrome/index.tsx
@@ -12,11 +12,12 @@ import {
 import { SyncLocalFilesButton } from '../sync-local-files-button';
 import { Dropdown, Icon } from '@wordpress/components';
 import { Modal } from '../../components/modal';
-import { cog } from '@wordpress/icons';
+import { cog, category } from '@wordpress/icons';
 import Button from '../button';
 import { ActiveSiteSettingsForm } from '../site-manager/site-settings-form';
 import { setSiteManagerOpen } from '../../lib/state/redux/slice-ui';
 import { SiteManagerIcon } from '@wp-playground/components';
+import { SavedPlaygroundsOverlay } from '../saved-playgrounds-overlay';
 
 interface BrowserChromeProps {
 	children?: React.ReactNode;
@@ -44,9 +45,12 @@ export default function BrowserChrome({
 		className
 	);
 	const isMobileUi = useMediaQuery('(max-width: 875px)');
-	const [isModalOpen, setIsModalOpen] = React.useState(false);
-	const onToggle = () => setIsModalOpen(!isModalOpen);
-	const closeModal = () => setIsModalOpen(false);
+	const [isSettingsModalOpen, setIsSettingsModalOpen] = React.useState(false);
+	const [isPlaygroundsOverlayOpen, setIsPlaygroundsOverlayOpen] =
+		React.useState(false);
+	const onSettingsToggle = () => setIsSettingsModalOpen(!isSettingsModalOpen);
+	const closeSettingsModal = () => setIsSettingsModalOpen(false);
+	const closePlaygroundsOverlay = () => setIsPlaygroundsOverlayOpen(false);
 
 	return (
 		<div className={wrapperClass} data-cy="simulated-browser">
@@ -67,6 +71,16 @@ export default function BrowserChrome({
 					</div>
 
 					<div className={css.toolbarButtons}>
+						<Button
+							variant="browser-chrome"
+							aria-label="Saved Playgrounds"
+							onClick={() => setIsPlaygroundsOverlayOpen(true)}
+							aria-expanded={isPlaygroundsOverlayOpen}
+							className={css.savedPlaygroundsButton}
+						>
+							<Icon icon={category} size={20} />
+						</Button>
+
 						<Button
 							variant="browser-chrome"
 							aria-label={
@@ -95,8 +109,8 @@ export default function BrowserChrome({
 								<Button
 									variant="browser-chrome"
 									aria-label="Edit Playground settings"
-									onClick={onToggle}
-									aria-expanded={isModalOpen}
+									onClick={onSettingsToggle}
+									aria-expanded={isSettingsModalOpen}
 									style={{
 										fill: '#FFF',
 										alignItems: 'center',
@@ -105,14 +119,14 @@ export default function BrowserChrome({
 								>
 									<Icon icon={cog} size={28} />
 								</Button>
-								{isModalOpen && (
+								{isSettingsModalOpen && (
 									<Modal
 										isFullScreen={true}
 										title="Playground settings"
-										onRequestClose={closeModal}
+										onRequestClose={closeSettingsModal}
 									>
 										<ActiveSiteSettingsForm
-											onSubmit={closeModal}
+											onSubmit={closeSettingsModal}
 										/>
 									</Modal>
 								)}
@@ -164,6 +178,9 @@ export default function BrowserChrome({
 				</header>
 				<div className={css.content}>{children}</div>
 			</div>
+			{isPlaygroundsOverlayOpen && (
+				<SavedPlaygroundsOverlay onClose={closePlaygroundsOverlay} />
+			)}
 		</div>
 	);
 }