From 707a733c671e981e210312c01c1af07ce5f8e9a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 7 Oct 2024 17:54:27 +0200
Subject: [PATCH] [Website] Restore the single-click "Edit Settings" flow
 (#1854)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Motivation for the change, related issues

Restores the easily accessible "Edit settings" button Playground had
before merging #1731, and refocuses the user experience on a single,
temporary Playground. Multiple Playgrounds are still possible, but now
they're less emphasized.

As we've learned from @annezazu and other users, the recent [Multiple
Playgrounds UI
update](https://github.com/WordPress/wordpress-playground/pull/1731)
made rapid fire iterations in Playground more difficult. Before #1731,
we've had an easily accessible button to update WP and PHP versions.
After #1731, that feature required multiple clicks and finding the right
button.

This PR introduces the following changes:

* Add an easily-accessible "Site settings" button for quick PHP/WP
version updates
* The URL reflects the Query API values used to create the temporary
Playground.
* Limit the number of temporary Playground sites to exactly one – just
like before #1731. The temporary Playground is always there and cannot
be deleted.
* The only way to create a stored Playground is by saving the temporary
Playground. Once you do that, you get a fresh temporary Playground.

Kudos to @jarekmorawski for thinking through and designing multiple
variations of the user flows ❤️

## Technical details

The implementation is straightforward and focused on rearranging React
components and CSS. There's one gotcha in the process of saving
temporary site settings. The settings form submission calls
`window.history.pushState()` and the `EnsurePlaygroundIsSelected`
component watches for the URL changes. However, the user may click the
"Update Settings & Reset Playground" button even without changing any
form value. Normally, this would mean we can't detect a change and reset
the Playground. This PR, thus, adds the `?random=<random string>`
parameter to the query string to allow Playground notice the change and
recreate the temporary site.

## Visuals

![CleanShot 2024-10-06 at 23 19
12@2x](https://github.com/user-attachments/assets/11e69587-a6ca-4f73-8d51-f15997950e71)

![CleanShot 2024-10-07 at 01 35
12@2x](https://github.com/user-attachments/assets/0e13f94a-adef-4f5a-8fc3-f3f4b9a577c6)

Here's the video walkthrough – note I've recorded it before this PR was
fully ready for a review:


https://github.com/user-attachments/assets/b2f04fa6-d7d5-43ad-93e2-975a2a9cea21

## Follow up work

There are more design elements to consider, e.g. Snackbar notices.
@jarekmorawski already designed some improvements and is working more. I
would still like to get this PR in and continue iterating based on the
feedback we get.

## UI updates checklist

- [x] Tested mobile interactions
- [x] Resolved accessibility issues reported by Axe Devtools

## Testing plan

CI aside, interact with the design proposed in this PR and confirm it
feels right.
---
 packages/playground/website/index.html        |   2 +-
 .../website/playwright/e2e/website-ui.spec.ts | 158 +++--
 .../website/playwright/website-page.ts        |  75 +--
 .../src/components/browser-chrome/index.tsx   |  43 ++
 .../browser-chrome/style.module.css           |  13 +
 .../edit-site-settings-button/index.tsx       |  42 ++
 .../style.module.css                          |   3 +
 .../ensure-playground-site-is-selected.tsx    | 101 +--
 .../website/src/components/layout/index.tsx   |   2 +-
 .../src/components/layout/style.module.css    |   3 +
 .../components/playground-viewport/index.tsx  |  19 +-
 .../src/components/plugin-ide/setup.ts        |  31 -
 .../src/components/site-manager/icons.tsx     |   3 +-
 .../src/components/site-manager/index.tsx     |   8 +-
 .../components/site-manager/sidebar/index.tsx | 195 +++---
 .../site-manager/sidebar/style.module.css     |  22 +-
 .../site-manager/site-create-button/index.tsx |  50 --
 .../site-manager/site-info-panel/index.tsx    | 620 ++++++------------
 .../site-info-panel/style.module.css          |  67 +-
 .../active-site-settings-form.tsx             |  35 +
 .../site-manager/site-settings-form/index.tsx | 562 +---------------
 .../stored-site-settings-form.tsx}            |  90 ++-
 .../site-settings-form/style.module.css       |  43 ++
 .../temporary-site-settings-form.tsx}         |  63 +-
 .../unconnected-site-settings-form.tsx        | 498 ++++++++++++++
 .../site-manager/storage-type/index.tsx       |   2 +-
 .../website/src/lib/get-relative-date.ts      |  31 +
 .../website/src/lib/site-metadata.ts          |   6 +-
 .../lib/state/redux/persist-temporary-site.ts |   3 +
 .../src/lib/state/redux/slice-sites.ts        |  76 ++-
 .../website/src/lib/state/url/router.ts       |  14 +-
 31 files changed, 1338 insertions(+), 1542 deletions(-)
 create mode 100644 packages/playground/website/src/components/edit-site-settings-button/index.tsx
 create mode 100644 packages/playground/website/src/components/edit-site-settings-button/style.module.css
 delete mode 100644 packages/playground/website/src/components/plugin-ide/setup.ts
 delete mode 100644 packages/playground/website/src/components/site-manager/site-create-button/index.tsx
 create mode 100644 packages/playground/website/src/components/site-manager/site-settings-form/active-site-settings-form.tsx
 rename packages/playground/website/src/components/site-manager/{site-edit-button/index.tsx => site-settings-form/stored-site-settings-form.tsx} (51%)
 rename packages/playground/website/src/components/site-manager/{start-similar-site-button/index.tsx => site-settings-form/temporary-site-settings-form.tsx} (57%)
 create mode 100644 packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx
 create mode 100644 packages/playground/website/src/lib/get-relative-date.ts

diff --git a/packages/playground/website/index.html b/packages/playground/website/index.html
index e7392029e0..91806487eb 100644
--- a/packages/playground/website/index.html
+++ b/packages/playground/website/index.html
@@ -43,7 +43,7 @@
 		</script>
 	</head>
 	<body>
-		<main id="root">
+		<main id="root" aria-label="WordPress Playground">
 			<script>
 				const query = new URLSearchParams(window.location.search);
 				const shouldLazyLoadPlayground =
diff --git a/packages/playground/website/playwright/e2e/website-ui.spec.ts b/packages/playground/website/playwright/e2e/website-ui.spec.ts
index d866b7a782..3336e9e31c 100644
--- a/packages/playground/website/playwright/e2e/website-ui.spec.ts
+++ b/packages/playground/website/playwright/e2e/website-ui.spec.ts
@@ -13,7 +13,7 @@ test('should reflect the URL update from the navigation bar in the WordPress sit
 	website,
 }) => {
 	await website.goto('./?url=/wp-admin/');
-	await website.ensureSiteViewIsExpanded();
+	await website.ensureSiteManagerIsClosed();
 	await expect(website.page.locator('input[value="/wp-admin/"]')).toHaveValue(
 		'/wp-admin/'
 	);
@@ -23,74 +23,98 @@ test('should correctly load /wp-admin without the trailing slash', async ({
 	website,
 }) => {
 	await website.goto('./?url=/wp-admin');
-	await website.ensureSiteViewIsExpanded();
+	await website.ensureSiteManagerIsClosed();
 	await expect(website.page.locator('input[value="/wp-admin/"]')).toHaveValue(
 		'/wp-admin/'
 	);
 });
 
-test('should switch between sites', async ({ website }) => {
+test('should switch between sites', async ({ website, browserName }) => {
+	test.skip(
+		browserName === 'webkit',
+		`This test relies on OPFS which isn't available in Playwright's flavor of Safari.`
+	);
+
 	await website.goto('./');
 
 	await website.ensureSiteManagerIsOpen();
-	await website.openNewSiteModal();
-
-	const newSiteName = await website.page
-		.locator('input[placeholder="Playground name"]')
-		.inputValue();
 
-	await website.clickCreateInNewSiteModal();
+	await expect(website.page.getByText('Save')).toBeEnabled();
+	await website.page.getByText('Save').click();
+	// We shouldn't need to explicitly call .waitFor(), but the test fails without it.
+	// Playwright logs that something "intercepts pointer events", that's probably related.
+	await website.page.getByText('Save in this browser').waitFor();
+	await website.page.getByText('Save in this browser').click({ force: true });
+	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'
+	);
 
-	await expect(await website.getSiteTitle()).toMatch(newSiteName);
+	await website.page
+		.locator('button')
+		.filter({ hasText: 'Temporary Playground' })
+		.click();
 
-	const sidebarItem = website.page.locator(
-		'.components-button[class*="_sidebar-item"]:not([class*="_sidebar-item--selected_"])'
+	await expect(website.page.locator('[aria-current="page"]')).toContainText(
+		'Temporary Playground'
+	);
+	await expect(website.page.getByLabel('Playground title')).toContainText(
+		'Temporary Playground'
 	);
-	const siteName = await sidebarItem
-		.locator('.components-flex-item[class*="_sidebar-item--site-name"]')
-		.innerText();
-	await sidebarItem.click();
-
-	await expect(siteName).toMatch(await website.getSiteTitle());
 });
 
 SupportedPHPVersions.forEach(async (version) => {
+	/**
+	 * WordPress 6.6 dropped support for PHP 7.0 and 7.1 and won't load on these versions.
+	 * Therefore, we're skipping the test for these versions.
+	 * @see https://make.wordpress.org/core/2024/04/08/dropping-support-for-php-7-1/
+	 */
+	if (['7.0', '7.1'].includes(version)) {
+		return;
+	}
+
 	test(`should switch PHP version to ${version}`, async ({ website }) => {
-		/**
-		 * WordPress 6.6 dropped support for PHP 7.0 and 7.1 so we need to skip these versions.
-		 * @see https://make.wordpress.org/core/2024/04/08/dropping-support-for-php-7-1/
-		 */
-		if (['7.0', '7.1'].includes(version)) {
-			return;
-		}
 		await website.goto(`./`);
-		await website.openForkPlaygroundSettings();
-		await website.selectPHPVersion(version);
-		await website.clickSaveInForkPlaygroundSettings();
-
-		await expect(website.getSiteInfoRowLocator('PHP version')).toHaveText(
-			`${version} (with extensions)`
+		await website.ensureSiteManagerIsOpen();
+		await website.page.getByLabel('PHP version').selectOption(version);
+		await website.page
+			.getByText('Apply Settings & Reset Playground')
+			.click();
+		await website.ensureSiteManagerIsClosed();
+		await website.ensureSiteManagerIsOpen();
+
+		await expect(website.page.getByLabel('PHP version')).toHaveValue(
+			version
 		);
+		await expect(
+			website.page.getByLabel('Load PHP extensions')
+		).toBeChecked();
 	});
 
 	test(`should not load additional PHP ${version} extensions when not requested`, async ({
 		website,
 	}) => {
 		await website.goto('./');
-		await website.openForkPlaygroundSettings();
-		await website.selectPHPVersion(version);
-
-		// Uncheck the "with extensions" checkbox
-		const phpExtensionCheckbox = website.page.locator(
-			'.components-checkbox-control__input[name="withExtensions"]'
-		);
-		await phpExtensionCheckbox.uncheck();
-
-		await website.clickSaveInForkPlaygroundSettings();
-
-		await expect(website.getSiteInfoRowLocator('PHP version')).toHaveText(
+		await website.ensureSiteManagerIsOpen();
+		await website.page.getByLabel('PHP version').selectOption(version);
+		await website.page.getByLabel('Load PHP extensions').uncheck();
+		await website.page
+			.getByText('Apply Settings & Reset Playground')
+			.click();
+		await website.ensureSiteManagerIsClosed();
+		await website.ensureSiteManagerIsOpen();
+
+		await expect(website.page.getByLabel('PHP version')).toHaveValue(
 			version
 		);
+		await expect(
+			website.page.getByLabel('Load PHP extensions')
+		).not.toBeChecked();
 	});
 });
 
@@ -102,13 +126,19 @@ Object.keys(MinifiedWordPressVersions)
 			website,
 		}) => {
 			await website.goto('./');
-			await website.openForkPlaygroundSettings();
-			await website.selectWordPressVersion(version);
-			await website.clickSaveInForkPlaygroundSettings();
+			await website.ensureSiteManagerIsOpen();
+			await website.page
+				.getByLabel('WordPress version')
+				.selectOption(version);
+			await website.page
+				.getByText('Apply Settings & Reset Playground')
+				.click();
+			await website.ensureSiteManagerIsClosed();
+			await website.ensureSiteManagerIsOpen();
 
 			await expect(
-				website.getSiteInfoRowLocator('WordPress version')
-			).toHaveText(version);
+				website.page.getByLabel('WordPress version')
+			).toHaveValue(version);
 		});
 	});
 
@@ -117,9 +147,7 @@ test('should display networking as inactive by default', async ({
 }) => {
 	await website.goto('./');
 	await website.ensureSiteManagerIsOpen();
-	await expect(website.getSiteInfoRowLocator('Network access')).toContainText(
-		'No'
-	);
+	await expect(website.page.getByLabel('Network access')).not.toBeChecked();
 });
 
 test('should display networking as active when networking is enabled', async ({
@@ -127,33 +155,31 @@ test('should display networking as active when networking is enabled', async ({
 }) => {
 	await website.goto('./?networking=yes');
 	await website.ensureSiteManagerIsOpen();
-	await expect(website.getSiteInfoRowLocator('Network access')).toContainText(
-		'Yes'
-	);
+	await expect(website.page.getByLabel('Network access')).toBeChecked();
 });
 
 test('should enable networking when requested', async ({ website }) => {
 	await website.goto('./');
 
-	await website.openForkPlaygroundSettings();
-	await website.setNetworkingEnabled(true);
-	await website.clickSaveInForkPlaygroundSettings();
+	await website.ensureSiteManagerIsOpen();
+	await website.page.getByLabel('Network access').check();
+	await website.page.getByText('Apply Settings & Reset Playground').click();
+	await website.ensureSiteManagerIsClosed();
+	await website.ensureSiteManagerIsOpen();
 
-	await expect(website.getSiteInfoRowLocator('Network access')).toContainText(
-		'Yes'
-	);
+	await expect(website.page.getByLabel('Network access')).toBeChecked();
 });
 
 test('should disable networking when requested', async ({ website }) => {
 	await website.goto('./?networking=yes');
 
-	await website.openForkPlaygroundSettings();
-	await website.setNetworkingEnabled(false);
-	await website.clickSaveInForkPlaygroundSettings();
+	await website.ensureSiteManagerIsOpen();
+	await website.page.getByLabel('Network access').uncheck();
+	await website.page.getByText('Apply Settings & Reset Playground').click();
+	await website.ensureSiteManagerIsClosed();
+	await website.ensureSiteManagerIsOpen();
 
-	await expect(website.getSiteInfoRowLocator('Network access')).toContainText(
-		'No'
-	);
+	await expect(website.page.getByLabel('Network access')).not.toBeChecked();
 });
 
 test('should display PHP output even when a fatal error is hit', async ({
diff --git a/packages/playground/website/playwright/website-page.ts b/packages/playground/website/playwright/website-page.ts
index 6e6fb72c23..b254c774dd 100644
--- a/packages/playground/website/playwright/website-page.ts
+++ b/packages/playground/website/playwright/website-page.ts
@@ -25,92 +25,25 @@ export class WebsitePage {
 	}
 
 	async ensureSiteManagerIsOpen() {
-		const siteManagerHeading = this.page.getByText('Your Playgrounds');
-		if (!(await siteManagerHeading.isVisible({ timeout: 5000 }))) {
+		const siteManagerHeading = this.page.locator('.main-sidebar');
+		if (await siteManagerHeading.isHidden({ timeout: 5000 })) {
 			await this.page.getByLabel('Open Site Manager').click();
 		}
 		await expect(siteManagerHeading).toBeVisible();
 	}
 
-	async ensureSiteViewIsExpanded() {
+	async ensureSiteManagerIsClosed() {
 		const openSiteButton = this.page.locator('div[title="Open site"]');
 		if (await openSiteButton.isVisible({ timeout: 5000 })) {
 			await openSiteButton.click();
 		}
-
-		const siteManagerHeading = this.page.getByText('Your Playgrounds');
+		const siteManagerHeading = this.page.locator('.main-sidebar');
 		await expect(siteManagerHeading).not.toBeVisible();
 	}
 
-	async openNewSiteModal() {
-		const addPlaygroundButton = this.page.locator(
-			'button.components-button',
-			{
-				hasText: 'Add Playground',
-			}
-		);
-		await addPlaygroundButton.click();
-	}
-
-	async clickCreateInNewSiteModal() {
-		const createTempPlaygroundButton = this.page.locator(
-			'button.components-button',
-			{
-				hasText: 'Create a temporary Playground',
-			}
-		);
-		await createTempPlaygroundButton.click();
-	}
-
 	async getSiteTitle(): Promise<string> {
 		return await this.page
 			.locator('h1[class*="_site-info-header-details-name"]')
 			.innerText();
 	}
-
-	async openForkPlaygroundSettings() {
-		await this.ensureSiteManagerIsOpen();
-		const editSettingsButton = this.page.locator(
-			'button.components-button',
-			{
-				hasText: 'Create a similar Playground',
-			}
-		);
-		await editSettingsButton.click({ timeout: 5000 });
-	}
-
-	async selectPHPVersion(version: string) {
-		const phpVersionSelect = this.page.locator('select[name=phpVersion]');
-		await phpVersionSelect.selectOption(version);
-	}
-
-	async clickSaveInForkPlaygroundSettings() {
-		const saveSettingsButton = this.page.locator(
-			'button.components-button.is-primary',
-			{
-				hasText: 'Create',
-			}
-		);
-		await saveSettingsButton.click();
-	}
-
-	async selectWordPressVersion(version: string) {
-		const wordpressVersionSelect = this.page.locator(
-			'select[name=wpVersion]'
-		);
-		await wordpressVersionSelect.selectOption(version);
-	}
-
-	getSiteInfoRowLocator(key: string) {
-		return this.page.getByLabel(key);
-	}
-
-	async setNetworkingEnabled(enabled: boolean) {
-		const checkbox = this.page.locator('input[name="withNetworking"]');
-		if (enabled) {
-			await checkbox.check();
-		} else {
-			await checkbox.uncheck();
-		}
-	}
 }
diff --git a/packages/playground/website/src/components/browser-chrome/index.tsx b/packages/playground/website/src/components/browser-chrome/index.tsx
index 45efa40405..5ff7739043 100644
--- a/packages/playground/website/src/components/browser-chrome/index.tsx
+++ b/packages/playground/website/src/components/browser-chrome/index.tsx
@@ -9,6 +9,10 @@ import {
 	useActiveSite,
 } from '../../lib/state/redux/store';
 import { SyncLocalFilesButton } from '../sync-local-files-button';
+import { Dropdown, Icon } from '@wordpress/components';
+import { cog } from '@wordpress/icons';
+import Button from '../button';
+import { ActiveSiteSettingsForm } from '../site-manager/site-settings-form';
 
 interface BrowserChromeProps {
 	children?: React.ReactNode;
@@ -57,6 +61,45 @@ export default function BrowserChrome({
 					</div>
 
 					<div className={css.toolbarButtons}>
+						<Dropdown
+							className="my-container-class-name"
+							contentClassName="my-dropdown-content-classname"
+							popoverProps={{ placement: 'bottom-start' }}
+							renderToggle={({ isOpen, onToggle }) => (
+								<Button
+									variant="browser-chrome"
+									aria-label="Edit Playground settings"
+									onClick={onToggle}
+									aria-expanded={isOpen}
+									style={{
+										padding: '0 10px',
+										fill: '#FFF',
+										alignItems: 'center',
+										display: 'flex',
+									}}
+								>
+									<Icon icon={cog} />
+								</Button>
+							)}
+							renderContent={({ onClose }) => (
+								<div
+									style={{
+										width: 400,
+										maxWidth: '100vw',
+										padding: 0,
+									}}
+								>
+									<div className={css.headerSection}>
+										<h2 style={{ margin: 0 }}>
+											Playground settings
+										</h2>
+									</div>
+									<ActiveSiteSettingsForm
+										onSubmit={onClose}
+									/>
+								</div>
+							)}
+						/>
 						{activeSite?.metadata?.storage === 'local-fs' ? (
 							<SyncLocalFilesButton />
 						) : null}
diff --git a/packages/playground/website/src/components/browser-chrome/style.module.css b/packages/playground/website/src/components/browser-chrome/style.module.css
index c29d85585b..4ddff2b7c7 100644
--- a/packages/playground/website/src/components/browser-chrome/style.module.css
+++ b/packages/playground/website/src/components/browser-chrome/style.module.css
@@ -2,6 +2,15 @@ body.is-embedded .fake-window-wrapper {
 	padding: 15px;
 }
 
+.header-section {
+	padding: 24px;
+	padding-bottom: 0;
+}
+
+.header-section:has(+ :global(.site-settings-form.is-stored-site)) {
+	padding-bottom: 24px;
+}
+
 .wrapper {
 	height: 100%;
 	transition: padding ease-in-out 0.2s;
@@ -77,6 +86,10 @@ body.is-embedded .fake-window-wrapper {
 	pointer-events: none;
 }
 
+.padded {
+	padding: 24px;
+}
+
 @media (max-width: 1100px) {
 	.has-site-manager {
 		.window-controls {
diff --git a/packages/playground/website/src/components/edit-site-settings-button/index.tsx b/packages/playground/website/src/components/edit-site-settings-button/index.tsx
new file mode 100644
index 0000000000..c2a89a2ee1
--- /dev/null
+++ b/packages/playground/website/src/components/edit-site-settings-button/index.tsx
@@ -0,0 +1,42 @@
+import css from './style.module.css';
+import { useAppDispatch } from '../../lib/state/redux/store';
+
+import Button from '../button';
+import { setSiteManagerOpen } from '../../lib/state/redux/slice-ui';
+
+function SiteManagerIcon() {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M1.99967 1.58301H4.49967C4.72979 1.58301 4.91634 1.76956 4.91634 1.99967V4.49967C4.91634 4.72979 4.72979 4.91634 4.49967 4.91634H1.99967C1.76956 4.91634 1.58301 4.72979 1.58301 4.49967V1.99967C1.58301 1.76956 1.76956 1.58301 1.99967 1.58301ZM0.333008 1.99967C0.333008 1.0792 1.0792 0.333008 1.99967 0.333008H4.49967C5.42015 0.333008 6.16634 1.0792 6.16634 1.99967V4.49967C6.16634 5.42015 5.42015 6.16634 4.49967 6.16634H1.99967C1.0792 6.16634 0.333008 5.42015 0.333008 4.49967V1.99967ZM9.49967 1.58301H11.9997C12.2298 1.58301 12.4163 1.76956 12.4163 1.99967V4.49967C12.4163 4.72979 12.2298 4.91634 11.9997 4.91634H9.49967C9.26956 4.91634 9.08301 4.72979 9.08301 4.49967V1.99967C9.08301 1.76956 9.26956 1.58301 9.49967 1.58301ZM7.83301 1.99967C7.83301 1.0792 8.5792 0.333008 9.49967 0.333008H11.9997C12.9201 0.333008 13.6663 1.0792 13.6663 1.99967V4.49967C13.6663 5.42015 12.9201 6.16634 11.9997 6.16634H9.49967C8.5792 6.16634 7.83301 5.42015 7.83301 4.49967V1.99967ZM11.9997 9.08301H9.49967C9.26956 9.08301 9.08301 9.26956 9.08301 9.49967V11.9997C9.08301 12.2298 9.26956 12.4163 9.49967 12.4163H11.9997C12.2298 12.4163 12.4163 12.2298 12.4163 11.9997V9.49967C12.4163 9.26956 12.2298 9.08301 11.9997 9.08301ZM9.49967 7.83301C8.5792 7.83301 7.83301 8.5792 7.83301 9.49967V11.9997C7.83301 12.9201 8.5792 13.6663 9.49967 13.6663H11.9997C12.9201 13.6663 13.6663 12.9201 13.6663 11.9997V9.49967C13.6663 8.5792 12.9201 7.83301 11.9997 7.83301H9.49967ZM1.99967 9.08301H4.49967C4.72979 9.08301 4.91634 9.26956 4.91634 9.49967V11.9997C4.91634 12.2298 4.72979 12.4163 4.49967 12.4163H1.99967C1.76956 12.4163 1.58301 12.2298 1.58301 11.9997V9.49967C1.58301 9.26956 1.76956 9.08301 1.99967 9.08301ZM0.333008 9.49967C0.333008 8.5792 1.0792 7.83301 1.99967 7.83301H4.49967C5.42015 7.83301 6.16634 8.5792 6.16634 9.49967V11.9997C6.16634 12.9201 5.42015 13.6663 4.49967 13.6663H1.99967C1.0792 13.6663 0.333008 12.9201 0.333008 11.9997V9.49967Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}
+
+export function OpenSiteManagerButton() {
+	const dispatch = useAppDispatch();
+
+	const onClick = () => {
+		dispatch(setSiteManagerOpen(true));
+	};
+	return (
+		<Button
+			variant="browser-chrome"
+			aria-label="Open Site Manager"
+			className={css.openSiteManagerButton}
+			onClick={onClick}
+		>
+			<SiteManagerIcon />
+		</Button>
+	);
+}
diff --git a/packages/playground/website/src/components/edit-site-settings-button/style.module.css b/packages/playground/website/src/components/edit-site-settings-button/style.module.css
new file mode 100644
index 0000000000..94c84dd084
--- /dev/null
+++ b/packages/playground/website/src/components/edit-site-settings-button/style.module.css
@@ -0,0 +1,3 @@
+.open-site-manager-button:global(> svg) {
+	margin-top: 4px;
+}
diff --git a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx
index 12335106f1..685c9f01d1 100644
--- a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx
+++ b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx
@@ -3,20 +3,16 @@ import { resolveBlueprintFromURL } from '../../lib/state/url/resolve-blueprint-f
 import { useCurrentUrl } from '../../lib/state/url/router-hooks';
 import { opfsSiteStorage } from '../../lib/state/opfs/opfs-site-storage';
 import {
-	addSite,
 	siteListingLoaded,
-	deriveSlugFromSiteName,
-	SiteInfo,
 	selectSiteBySlug,
+	setTemporarySiteSpec,
 } from '../../lib/state/redux/slice-sites';
-import { createSiteMetadata, SiteMetadata } from '../../lib/site-metadata';
 import {
 	setActiveSite,
 	useAppDispatch,
 	useAppSelector,
 } from '../../lib/state/redux/store';
-import { randomSiteName } from '../../lib/state/redux/random-site-name';
-import { PlaygroundRoute, redirectTo } from '../../lib/state/url/router';
+import { redirectTo } from '../../lib/state/url/router';
 import { logger } from '@php-wasm/logger';
 
 /**
@@ -35,7 +31,6 @@ export function EnsurePlaygroundSiteIsSelected({
 	const siteListingStatus = useAppSelector(
 		(state) => state.sites.loadingState
 	);
-	const sites = useAppSelector((state) => state.sites.entities);
 	const dispatch = useAppDispatch();
 	const url = useCurrentUrl();
 	const requestedSiteSlug = url.searchParams.get('site-slug');
@@ -60,31 +55,29 @@ export function EnsurePlaygroundSiteIsSelected({
 
 	useEffect(() => {
 		async function ensureSiteIsSelected() {
+			// Don't create a new temporary site until the site listing settles.
+			// Otherwise, the status change from "loading" to "loaded" would
+			// re-run this entire effect, potentially leading to multiple
+			// sites being created since we couldn't look for duplicates yet.
+			if (!['loaded', 'error'].includes(siteListingStatus)) {
+				return;
+			}
+
 			// If the site slug is provided, try to load the site.
 			if (requestedSiteSlug) {
-				// Wait until the site listing is loaded
-				if (siteListingStatus !== 'loaded') {
-					return;
-				}
-
 				// If the site does not exist, redirect to a new temporary site.
 				if (!requestedSiteObject) {
 					// @TODO: Notification: 'The requested site was not found. Redirecting to a new temporary site.'
 					logger.log(
 						'The requested site was not found. Redirecting to a new temporary site.'
 					);
-					redirectTo(PlaygroundRoute.newTemporarySite());
+					const currentUrl = new URL(window.location.href);
+					currentUrl.searchParams.delete('site-slug');
+					redirectTo(currentUrl.toString());
 					return;
 				}
-				dispatch(setActiveSite(requestedSiteSlug));
-				return;
-			}
 
-			// Don't create a new temporary site until the site listing settles.
-			// Otherwise, the status change from "loading" to "loaded" would
-			// re-run this entire effect, potentially leading to multiple
-			// sites being created since we couldn't look for duplicates yet.
-			if (!['loaded', 'error'].includes(siteListingStatus)) {
+				dispatch(setActiveSite(requestedSiteSlug));
 				return;
 			}
 
@@ -92,34 +85,20 @@ export function EnsurePlaygroundSiteIsSelected({
 			// Lean on the Query API parameters and the Blueprint API to
 			// create the new site.
 			const url = new URL(window.location.href);
-			const blueprint = await resolveBlueprintFromURL(url);
-			const siteNameFromUrl = url.searchParams.get('name')?.trim();
-			const urlParams = {
-				searchParams: Object.fromEntries(url.searchParams.entries()),
-				hash: url.hash,
-			};
-			const newSiteInfo = await createNewSiteInfo({
-				metadata: {
-					name: siteNameFromUrl || undefined,
-					originalBlueprint: blueprint,
-				},
-				originalUrlParams: urlParams,
-			});
-
-			// Check if there's an existing site that matches the requested
-			// specification exactly.
-			const existingSite = Object.values(sites).find(
-				(site) =>
-					JSON.stringify(site.originalUrlParams) ===
-					JSON.stringify(urlParams)
-			);
-			if (existingSite) {
-				dispatch(setActiveSite(existingSite.slug));
-				return;
-			}
-
 			// Create a new site otherwise
-			await dispatch(addSite(newSiteInfo));
+			const newSiteInfo = await dispatch(
+				setTemporarySiteSpec({
+					metadata: {
+						originalBlueprint: await resolveBlueprintFromURL(url),
+					},
+					originalUrlParams: {
+						searchParams: Object.fromEntries(
+							url.searchParams.entries()
+						),
+						hash: url.hash,
+					},
+				})
+			);
 			dispatch(setActiveSite(newSiteInfo.slug));
 		}
 
@@ -129,29 +108,3 @@ export function EnsurePlaygroundSiteIsSelected({
 
 	return children;
 }
-
-/**
- * The initial information used to create a new site.
- */
-export type InitialSiteInfo = Omit<SiteInfo, 'id' | 'slug' | 'whenCreated'>;
-async function createNewSiteInfo(
-	initialInfo: Partial<Omit<InitialSiteInfo, 'metadata'>> & {
-		metadata?: Partial<Omit<SiteMetadata, 'runtimeConfiguration'>>;
-	}
-): Promise<SiteInfo> {
-	const { name: providedName, ...remainingMetadata } =
-		initialInfo.metadata || {};
-
-	const name = providedName || randomSiteName();
-
-	return {
-		slug: deriveSlugFromSiteName(name),
-
-		...initialInfo,
-
-		metadata: await createSiteMetadata({
-			name,
-			...remainingMetadata,
-		}),
-	};
-}
diff --git a/packages/playground/website/src/components/layout/index.tsx b/packages/playground/website/src/components/layout/index.tsx
index d53690a5e8..67770be2be 100644
--- a/packages/playground/website/src/components/layout/index.tsx
+++ b/packages/playground/website/src/components/layout/index.tsx
@@ -51,7 +51,7 @@ export function Layout() {
 	const dispatch = useAppDispatch();
 
 	return (
-		<div className={css.layout}>
+		<div className={`${css.layout}`}>
 			<Modals />
 			<CSSTransition
 				nodeRef={siteManagerWrapperRef}
diff --git a/packages/playground/website/src/components/layout/style.module.css b/packages/playground/website/src/components/layout/style.module.css
index a9b83696dc..f981356539 100644
--- a/packages/playground/website/src/components/layout/style.module.css
+++ b/packages/playground/website/src/components/layout/style.module.css
@@ -149,4 +149,7 @@ body {
 	.site-manager-wrapper-enter-active {
 		width: 100%;
 	}
+	.site-manager-wrapper-exit-active + .site-view {
+		display: block;
+	}
 }
diff --git a/packages/playground/website/src/components/playground-viewport/index.tsx b/packages/playground/website/src/components/playground-viewport/index.tsx
index f1d3666950..0614f6a7ac 100644
--- a/packages/playground/website/src/components/playground-viewport/index.tsx
+++ b/packages/playground/website/src/components/playground-viewport/index.tsx
@@ -19,7 +19,7 @@ import {
 	selectTemporarySites,
 } from '../../lib/state/redux/slice-sites';
 import classNames from 'classnames';
-import { SiteCreateButton } from '../site-manager/site-create-button';
+import { PlaygroundRoute, redirectTo } from '../../lib/state/url/router';
 
 export const supportedDisplayModes = [
 	'browser-full-screen',
@@ -130,14 +130,15 @@ export const KeepAliveTemporarySitesViewport = () => {
 						className={css.siteErrorContent}
 						style={{ textAlign: 'center' }}
 					>
-						<h2>You don't have any sites right now</h2>
-						<SiteCreateButton>
-							{(onClick) => (
-								<Button variant="primary" onClick={onClick}>
-									Add first site
-								</Button>
-							)}
-						</SiteCreateButton>
+						<h2>You don't have any Playgrounds right now</h2>
+						<Button
+							variant="primary"
+							onClick={() => {
+								redirectTo(PlaygroundRoute.newTemporarySite());
+							}}
+						>
+							Create a temporary Playground
+						</Button>
 					</div>
 				</div>
 			</div>
diff --git a/packages/playground/website/src/components/plugin-ide/setup.ts b/packages/playground/website/src/components/plugin-ide/setup.ts
deleted file mode 100644
index 88d807bd7c..0000000000
--- a/packages/playground/website/src/components/plugin-ide/setup.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// if (query.has('ide')) {
-// 	let doneFirstBoot = false;
-// 	const { WordPressPluginIDE, createBlockPluginFixture } = await import(
-// 		'@wp-playground/plugin-ide'
-// 	);
-// 	const { default: React } = await import('react');
-// 	const {
-// 		default: { render },
-// 	} = await import('react-dom');
-// 	render(
-// 		<WordPressPluginIDE
-// 			plugin={createBlockPluginFixture}
-// 			workerThread={playground}
-// 			initialEditedFile="edit.js"
-// 			reactDevUrl="/assets/react.development.js"
-// 			reactDomDevUrl="/assets/react-dom.development.js"
-// 			fastRefreshScriptUrl="/assets/setup-react-refresh-runtime.js"
-// 			onBundleReady={async (bundleContents: string) => {
-// 				if (doneFirstBoot) {
-// 					(wpFrame.contentWindow as any).eval(bundleContents);
-// 				} else {
-// 					doneFirstBoot = true;
-// 					await playground.goTo(query.get('url') || '/');
-// 				}
-// 			}}
-// 		/>,
-// 		document.getElementById('test-snippets')!
-// 	);
-// } else {
-// 	await playground.goTo(query.get('url') || '/');
-// }
diff --git a/packages/playground/website/src/components/site-manager/icons.tsx b/packages/playground/website/src/components/site-manager/icons.tsx
index a08409089f..aef46a86af 100644
--- a/packages/playground/website/src/components/site-manager/icons.tsx
+++ b/packages/playground/website/src/components/site-manager/icons.tsx
@@ -93,13 +93,14 @@ export const FolderIcon = (
 	</svg>
 );
 
-export const ClockIcon = (
+export const ClockIcon = (props?: React.SVGProps<SVGSVGElement>) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="14"
 		height="14"
 		viewBox="0 0 14 14"
 		fill="none"
+		{...props}
 	>
 		<path
 			fillRule="evenodd"
diff --git a/packages/playground/website/src/components/site-manager/index.tsx b/packages/playground/website/src/components/site-manager/index.tsx
index 11208b5a41..639ef17ef1 100644
--- a/packages/playground/website/src/components/site-manager/index.tsx
+++ b/packages/playground/website/src/components/site-manager/index.tsx
@@ -9,6 +9,7 @@ import classNames from 'classnames';
 
 import { forwardRef, useState } from 'react';
 import { SiteInfo } from '../../lib/state/redux/slice-sites';
+import { setSiteManagerOpen } from '../../lib/state/redux/slice-ui';
 
 export const SiteManager = forwardRef<
 	HTMLDivElement,
@@ -33,7 +34,12 @@ export const SiteManager = forwardRef<
 	const sitesList = (
 		<Sidebar
 			className={css.sidebar}
-			afterSiteClick={() => setActiveSection('site-info')}
+			afterSiteClick={() => {
+				if (fullScreenSiteManager) {
+					// Close the site manager so the site view is visible.
+					dispatch(setSiteManagerOpen(false));
+				}
+			}}
 		/>
 	);
 	const siteInfoPanel = activeSite && (
diff --git a/packages/playground/website/src/components/site-manager/sidebar/index.tsx b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
index db91ab61ed..dac4c66c95 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/index.tsx
+++ b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
@@ -9,18 +9,20 @@ import {
 	FlexBlock,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	Button,
 } from '@wordpress/components';
-import { TemporaryStorageIcon, WordPressIcon } from '../icons';
+import { ClockIcon, WordPressIcon } from '../icons';
 import {
 	setActiveSite,
 	useActiveSite,
 	useAppDispatch,
 	useAppSelector,
 } from '../../../lib/state/redux/store';
-import { SiteCreateButton } from '../site-create-button';
 import { SiteLogo } from '../../../lib/site-metadata';
-import { selectSortedSites } from '../../../lib/state/redux/slice-sites';
+import {
+	selectSortedSites,
+	selectTemporarySite,
+} from '../../../lib/state/redux/slice-sites';
+import { PlaygroundRoute, redirectTo } from '../../../lib/state/url/router';
 
 export function Sidebar({
 	className,
@@ -29,7 +31,10 @@ export function Sidebar({
 	className?: string;
 	afterSiteClick?: (slug: string) => void;
 }) {
-	const sites = useAppSelector(selectSortedSites);
+	const storedSites = useAppSelector(selectSortedSites).filter(
+		(site) => site.metadata.storage !== 'none'
+	);
+	const temporarySite = useAppSelector(selectTemporarySite);
 	const activeSite = useActiveSite();
 	const dispatch = useAppDispatch();
 
@@ -65,7 +70,7 @@ export function Sidebar({
 		// Disable the `role` as Axe accessibility checker complains that a `menu`
 		// role cannot have `div`, `nav`, `footer` and `button` as children.
 		<NavigableMenu
-			className={classNames(css.sidebar, className)}
+			className={classNames(css.sidebar, className, 'main-sidebar')}
 			// eslint-disable-next-line jsx-a11y/aria-role
 			role=""
 			aria-orientation={undefined}
@@ -76,71 +81,110 @@ export function Sidebar({
 				{/* <Logo className={css.sidebarLogoButton} /> */}
 			</div>
 			<nav className={classNames(css.sidebarSection, css.sidebarContent)}>
-				<Heading
-					level="2"
-					className={classNames(
-						css.sidebarLabel,
-						css.sidebarListLabel
-					)}
-				>
-					Your Playgrounds
-				</Heading>
 				<MenuGroup className={css.sidebarList}>
-					{sites.map((site) => {
-						/**
-						 * The `wordpress` site is selected when no site slug is provided.
-						 */
-						const isSelected = site.slug === activeSite?.slug;
-						return (
-							<MenuItem
-								key={site.slug}
-								className={classNames(css.sidebarItem, {
-									[css.sidebarItemSelected]: isSelected,
-								})}
-								onClick={() => onSiteClick(site.slug)}
-								isSelected={isSelected}
-								// eslint-disable-next-line jsx-a11y/aria-role
-								role=""
-								title={
-									site.metadata.storage === 'none'
-										? 'This is a temporary Playground. Your changes will be lost on page refresh.'
-										: ''
-								}
-								icon={
-									site.metadata.storage === 'none' ? (
-										<TemporaryStorageIcon
-											className={
-												css.sidebarItemStorageIcon
-											}
-										/>
-									) : undefined
-								}
-								iconPosition="right"
-							>
-								<HStack justify="flex-start" alignment="center">
-									{site.metadata.logo ? (
-										<img
-											src={getLogoDataURL(
-												site.metadata.logo
-											)}
-											alt={site.metadata.name + ' logo'}
-											className={css.sidebarItemLogo}
-										/>
-									) : (
-										<WordPressIcon
-											className={css.sidebarItemLogo}
-										/>
-									)}
-									<FlexBlock
-										className={css.sidebarItemSiteName}
-									>
-										{site.metadata.name}
-									</FlexBlock>
-								</HStack>
-							</MenuItem>
-						);
-					})}
+					<MenuItem
+						className={classNames(css.sidebarItem, {
+							[css.sidebarItemSelected]:
+								activeSite?.metadata.storage === 'none',
+						})}
+						onClick={() => {
+							if (temporarySite) {
+								onSiteClick(temporarySite.slug);
+								return;
+							}
+							redirectTo(PlaygroundRoute.newTemporarySite());
+						}}
+						isSelected={activeSite?.metadata.storage === 'none'}
+						// eslint-disable-next-line jsx-a11y/aria-role
+						role=""
+						title="This is a temporary Playground. Your changes will be lost on page refresh."
+						{...(activeSite?.metadata.storage === 'none'
+							? {
+									'aria-current': 'page',
+							  }
+							: {})}
+					>
+						<HStack justify="flex-start" alignment="center">
+							<ClockIcon className={css.sidebarItemLogo} />
+							<FlexBlock className={css.sidebarItemSiteName}>
+								Temporary Playground
+							</FlexBlock>
+						</HStack>
+					</MenuItem>
 				</MenuGroup>
+				{storedSites.length > 0 && (
+					<>
+						<Heading
+							level="2"
+							className={classNames(
+								css.sidebarLabel,
+								css.sidebarListLabel
+							)}
+						>
+							Saved Playgrounds
+						</Heading>
+						<MenuGroup className={css.sidebarList}>
+							{storedSites.map((site) => {
+								/**
+								 * The `wordpress` site is selected when no site slug is provided.
+								 */
+								const isSelected =
+									site.slug === activeSite?.slug;
+								return (
+									<MenuItem
+										key={site.slug}
+										className={classNames(css.sidebarItem, {
+											[css.sidebarItemSelected]:
+												isSelected,
+										})}
+										onClick={() => onSiteClick(site.slug)}
+										isSelected={isSelected}
+										// eslint-disable-next-line jsx-a11y/aria-role
+										role=""
+										{...(isSelected
+											? {
+													'aria-current': 'page',
+											  }
+											: {})}
+									>
+										<HStack
+											justify="flex-start"
+											alignment="center"
+										>
+											{site.metadata.logo ? (
+												<img
+													src={getLogoDataURL(
+														site.metadata.logo
+													)}
+													alt={
+														site.metadata.name +
+														' logo'
+													}
+													className={
+														css.sidebarItemLogo
+													}
+												/>
+											) : (
+												<WordPressIcon
+													className={
+														css.sidebarItemLogo
+													}
+												/>
+											)}
+											<FlexBlock
+												className={
+													css.sidebarItemSiteName
+												}
+											>
+												{site.metadata.name}
+											</FlexBlock>
+										</HStack>
+									</MenuItem>
+								);
+							})}
+						</MenuGroup>
+					</>
+				)}
 			</nav>
 			<footer
 				className={classNames(css.sidebarSection, css.sidebarFooter)}
@@ -163,19 +207,6 @@ export function Sidebar({
 					))}
 				</ItemGroup>
 			</footer>
-			<SiteCreateButton>
-				{(onClick) => (
-					<div className={css.addSiteButtonWrapper}>
-						<Button
-							variant="primary"
-							className={css.addSiteButtonButton}
-							onClick={onClick}
-						>
-							Add Playground
-						</Button>
-					</div>
-				)}
-			</SiteCreateButton>
 		</NavigableMenu>
 	);
 }
diff --git a/packages/playground/website/src/components/site-manager/sidebar/style.module.css b/packages/playground/website/src/components/site-manager/sidebar/style.module.css
index 2fda6d2969..bcd639c2c0 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/style.module.css
+++ b/packages/playground/website/src/components/site-manager/sidebar/style.module.css
@@ -32,7 +32,7 @@
 .sidebar-label {
 	color: #949494 !important;
 	text-transform: uppercase;
-	padding: 0 12px 8px;
+	padding: 8px 12px 8px;
 	font-size: 12px !important;
 }
 
@@ -105,23 +105,3 @@
 	font-weight: 400;
 	vertical-align: middle;
 }
-
-.add-site-button-button {
-	width: 100%;
-	margin: 0;
-	padding: 0 16px;
-	border-top: 1px solid #2b2b2b;
-	background-color: var(--site-manager-background-color);
-	position: sticky;
-	bottom: 0;
-	align-items: center;
-	justify-content: center;
-}
-
-.add-site-button-wrapper {
-	text-align: center;
-	display: block;
-	width: 100%;
-	margin-top: 16px;
-	padding: 0 16px;
-}
diff --git a/packages/playground/website/src/components/site-manager/site-create-button/index.tsx b/packages/playground/website/src/components/site-manager/site-create-button/index.tsx
deleted file mode 100644
index ae7012f9e4..0000000000
--- a/packages/playground/website/src/components/site-manager/site-create-button/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Modal } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import SiteSettingsForm, { SiteFormData } from '../site-settings-form';
-import { PlaygroundRoute, redirectTo } from '../../../lib/state/url/router';
-
-export function SiteCreateButton({
-	children,
-}: {
-	children: (onClick: () => void) => React.ReactNode;
-}) {
-	const [isModalOpen, setModalOpen] = useState(false);
-
-	const addSite = async (data: SiteFormData) => {
-		redirectTo(
-			PlaygroundRoute.newTemporarySite({
-				query: {
-					php: data.phpVersion,
-					wp: data.wpVersion,
-					name: data.name,
-					networking: data.withNetworking ? 'yes' : 'no',
-					'php-extension-bundle': data.withExtensions
-						? 'kitchen-sink'
-						: 'light',
-					language: data.language,
-					multisite: data.multisite ? 'yes' : 'no',
-				},
-			})
-		);
-		setModalOpen(false);
-	};
-
-	return (
-		<>
-			{children(() => setModalOpen(true))}
-
-			{isModalOpen && (
-				<Modal
-					title="Create a new Playground"
-					onRequestClose={() => setModalOpen(false)}
-				>
-					<SiteSettingsForm
-						onSubmit={addSite}
-						onCancel={() => setModalOpen(false)}
-						submitButtonText="Create a temporary Playground"
-					/>
-				</Modal>
-			)}
-		</>
-	);
-}
diff --git a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
index aa9f922cd2..9a3ec290ea 100644
--- a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
@@ -11,13 +11,10 @@ import {
 	MenuItem,
 	TabPanel,
 } from '@wordpress/components';
-import { useMediaQuery } from '@wordpress/compose';
-import { moreVertical, external, copy, chevronLeft } from '@wordpress/icons';
+import { moreVertical, external, chevronLeft } from '@wordpress/icons';
 import { SiteLogs } from '../../log-modal';
 import { useAppDispatch, useAppSelector } from '../../../lib/state/redux/store';
-import { StorageType } from '../storage-type';
 import { usePlaygroundClientInfo } from '../../../lib/use-playground-client';
-import { SiteEditButton } from '../site-edit-button';
 import { OfflineNotice } from '../../offline-notice';
 import { DownloadAsZipMenuItem } from '../../toolbar-buttons/download-as-zip';
 import { GithubExportMenuItem } from '../../toolbar-buttons/github-export-menu-item';
@@ -25,29 +22,12 @@ import { GithubImportMenuItem } from '../../toolbar-buttons/github-import-menu-i
 import { ReportError } from '../../toolbar-buttons/report-error';
 import { RestoreFromZipMenuItem } from '../../toolbar-buttons/restore-from-zip';
 import { TemporarySiteNotice } from '../temporary-site-notice';
-import { SitePersistButton } from '../site-persist-button';
 import { SiteInfo } from '../../../lib/state/redux/slice-sites';
 import { setSiteManagerOpen } from '../../../lib/state/redux/slice-ui';
 import { selectClientInfoBySiteSlug } from '../../../lib/state/redux/slice-clients';
 import { encodeStringAsBase64 } from '../../../lib/base64';
-import { StartSimilarSiteButton } from '../start-similar-site-button';
-
-function SiteInfoRow({
-	label,
-	value,
-}: {
-	label: string;
-	value: string | JSX.Element;
-}) {
-	return (
-		<Flex justify="flex-start" expanded={true}>
-			<FlexItem className={css.infoRowLabel}>{label}</FlexItem>
-			<FlexItem className={css.infoRowValue} aria-label={label}>
-				{value}
-			</FlexItem>
-		</Flex>
-	);
-}
+import { ActiveSiteSettingsForm } from '../site-settings-form/active-site-settings-form';
+import { getRelativeDate } from '../../../lib/get-relative-date';
 
 export function SiteInfoPanel({
 	className,
@@ -81,19 +61,24 @@ export function SiteInfoPanel({
 	const playground = clientInfo?.client;
 	const dispatch = useAppDispatch();
 
-	const navigationButtonsPlacement = useMediaQuery('(min-width: 1400px)')
-		? 'header'
-		: mobileUi
-		? 'footer'
-		: 'menu';
 	function navigateTo(path: string) {
 		if (siteViewHidden) {
 			// Close the site manager so the site view is visible.
 			dispatch(setSiteManagerOpen(false));
 		}
 
-		playground?.goTo(path);
+		if (playground) {
+			playground.goTo(path);
+		}
 	}
+	const isTemporary = site.metadata.storage === 'none';
+
+	const { opfsMountDescriptor } = usePlaygroundClientInfo(site.slug) || {};
+
+	const localDirName =
+		site.metadata?.storage === 'local-fs'
+			? (opfsMountDescriptor as any)?.device?.handle?.name
+			: undefined;
 
 	return (
 		<section
@@ -101,9 +86,6 @@ export function SiteInfoPanel({
 				[css.isMobile]: mobileUi,
 			})}
 		>
-			{site.metadata.storage === 'none' ? (
-				<TemporarySiteNotice className={css.siteNotice} />
-			) : null}
 			<Flex
 				direction="column"
 				gap={1}
@@ -114,137 +96,132 @@ export function SiteInfoPanel({
 				<FlexItem style={{ flexShrink: 0 }}>
 					<Flex
 						direction="row"
-						gap={4}
+						gap={2}
 						justify="space-between"
 						align="center"
 						expanded={true}
 						className={css.padded}
+						style={{ paddingBottom: 10 }}
 					>
-						<FlexItem>
-							<Flex direction="row" gap={2}>
-								{mobileUi && (
-									<FlexItem>
-										<Button
-											variant="link"
-											label="Back to sites list"
-											icon={() => (
-												<Icon
-													icon={chevronLeft}
-													size={38}
-												/>
-											)}
-											className={css.grayLinkDark}
-											onClick={onBackButtonClick}
-										/>
-									</FlexItem>
-								)}
-								<FlexItem className={css.siteInfoHeaderIcon}>
-									{site.metadata.logo ? (
-										<img
-											src={getLogoDataURL(
-												site.metadata.logo
-											)}
-											alt={site.metadata.name + ' logo'}
-										/>
-									) : (
-										<WordPressIcon
-											className={
-												css.siteInfoHeaderIconDefault
-											}
-										/>
+						{mobileUi && (
+							<FlexItem>
+								<Button
+									variant="link"
+									label="Back to sites list"
+									icon={() => (
+										<Icon icon={chevronLeft} size={38} />
 									)}
-								</FlexItem>
-								<Flex
-									direction="column"
-									gap={0.25}
-									expanded={true}
+									className={css.grayLinkDark}
+									onClick={onBackButtonClick}
+								/>
+							</FlexItem>
+						)}
+						<FlexItem className={css.siteInfoHeaderIcon}>
+							{site.metadata.logo ? (
+								<img
+									src={getLogoDataURL(site.metadata.logo)}
+									alt={site.metadata.name + ' logo'}
+								/>
+							) : (
+								<WordPressIcon
+									className={css.siteInfoHeaderIconDefault}
+								/>
+							)}
+						</FlexItem>
+						<FlexItem style={{ flexGrow: 1 }}>
+							<Flex direction="column" gap={0.25} expanded={true}>
+								<h1
+									className={css.siteInfoHeaderDetailsName}
+									aria-label="Playground title"
 								>
-									<h1
-										className={
-											css.siteInfoHeaderDetailsName
-										}
-									>
-										{site.metadata.name}
-									</h1>
+									{isTemporary
+										? 'Temporary Playground'
+										: site.metadata.name}
+								</h1>
+								{!isTemporary && (
 									<span
 										className={
 											css.siteInfoHeaderDetailsCreatedAt
 										}
 									>
-										{site.metadata.whenCreated
-											? `Created ${new Date(
-													site.metadata.whenCreated
-											  ).toLocaleString()}`
-											: 'Created recently'}
+										{(function () {
+											const createdAgo = site.metadata
+												.whenCreated
+												? getRelativeDate(
+														new Date(
+															// -2 to make sure it's in the past. We want to
+															// avoid accidentally signaling this happened in
+															// the future, e.g. "in 1 seconds"
+															site.metadata
+																.whenCreated - 2
+														)
+												  )
+												: '';
+											switch (site.metadata.storage) {
+												case 'local-fs':
+													return (
+														'Saved in a local directory' +
+														(localDirName
+															? ` (${localDirName})`
+															: '') +
+														` ${createdAgo}`
+													);
+												case 'opfs':
+													return `Saved in this browser ${createdAgo}`;
+											}
+										})()}{' '}
 									</span>
-								</Flex>
+								)}
 							</Flex>
 						</FlexItem>
-						<FlexItem style={{ flexShrink: 0 }}>
-							<Flex direction="row" gap={4} align="center">
-								{navigationButtonsPlacement === 'header' && (
-									<>
-										<Button
-											variant="tertiary"
-											disabled={!playground}
-											onClick={() =>
-												navigateTo('/wp-admin/')
-											}
-										>
-											WP Admin
-										</Button>
-										<Button
-											variant="secondary"
-											disabled={!playground}
-											onClick={() => navigateTo('/')}
-										>
-											Homepage
-										</Button>
-									</>
-								)}
-								<DropdownMenu
-									icon={moreVertical}
-									label="Additional actions"
-									popoverProps={{
-										placement: 'bottom-end',
+						{siteViewHidden ? (
+							<FlexItem style={{ flexShrink: 0 }}>
+								<Button
+									variant="primary"
+									onClick={() => {
+										dispatch(setSiteManagerOpen(false));
 									}}
 								>
-									{({ onClose }) => (
-										<>
-											{navigationButtonsPlacement ===
-												'menu' && (
-												<MenuGroup>
-													<MenuItem
-														icon={external}
-														iconPosition="right"
-														aria-label="Go to homepage"
-														onClick={() => {
-															navigateTo('/');
-															onClose();
-														}}
-													>
-														Homepage
-													</MenuItem>
-													<MenuItem
-														icon={external}
-														iconPosition="right"
-														aria-label="Go to WP Admin"
-														onClick={() => {
-															navigateTo(
-																'/wp-admin/'
-															);
-															onClose();
-														}}
-													>
-														WP Admin
-													</MenuItem>
-												</MenuGroup>
-											)}
+									Open site
+								</Button>
+							</FlexItem>
+						) : (
+							<>
+								<FlexItem>
+									<Button
+										variant="tertiary"
+										disabled={!playground}
+										onClick={() => navigateTo('/wp-admin/')}
+									>
+										WP Admin
+									</Button>
+								</FlexItem>
+								<FlexItem>
+									<Button
+										variant="secondary"
+										disabled={!playground}
+										onClick={() => navigateTo('/')}
+									>
+										Homepage
+									</Button>
+								</FlexItem>
+							</>
+						)}
+						<FlexItem>
+							<DropdownMenu
+								icon={moreVertical}
+								label="Additional actions"
+								popoverProps={{
+									placement: 'bottom-end',
+								}}
+							>
+								{({ onClose }) => (
+									<>
+										{!isTemporary && (
 											<MenuGroup>
 												<MenuItem
-													aria-label="Delete this site"
+													aria-label="Delete this Playground"
 													className={css.danger}
-													disabled={!playground}
 													onClick={() =>
 														removeSiteAndCloseMenu(
 															onClose
@@ -254,38 +231,55 @@ export function SiteInfoPanel({
 													Delete
 												</MenuItem>
 											</MenuGroup>
-											<MenuGroup>
-												<DownloadAsZipMenuItem
-													onClose={onClose}
-													disabled={!playground}
-												/>
-												<RestoreFromZipMenuItem
-													onClose={onClose}
-													disabled={!playground}
-												/>
-												<GithubImportMenuItem
-													onClose={onClose}
-													disabled={
-														offline || !playground
-													}
-												/>
-												<GithubExportMenuItem
-													onClose={onClose}
-													disabled={
-														offline || !playground
-													}
-												/>
-											</MenuGroup>
-											<MenuGroup>
-												<ReportError
-													onClose={onClose}
-													disabled={offline}
-												/>
-											</MenuGroup>
-										</>
-									)}
-								</DropdownMenu>
-							</Flex>
+										)}
+										<MenuGroup>
+											<DownloadAsZipMenuItem
+												onClose={onClose}
+												disabled={!playground}
+											/>
+											<RestoreFromZipMenuItem
+												onClose={onClose}
+												disabled={!playground}
+											/>
+											<GithubImportMenuItem
+												onClose={onClose}
+												disabled={
+													offline || !playground
+												}
+											/>
+											<GithubExportMenuItem
+												onClose={onClose}
+												disabled={
+													offline || !playground
+												}
+											/>
+											<MenuItem
+												// @ts-ignore
+												href={`/builder/builder.html#${encodeStringAsBase64(
+													JSON.stringify(
+														site.metadata
+															.originalBlueprint as any
+													) as string
+												)}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												icon={external}
+												iconPosition="right"
+												aria-label="View Blueprint"
+												disabled={offline}
+											>
+												View Blueprint
+											</MenuItem>
+										</MenuGroup>
+										<MenuGroup>
+											<ReportError
+												onClose={onClose}
+												disabled={offline}
+											/>
+										</MenuGroup>
+									</>
+								)}
+							</DropdownMenu>
 						</FlexItem>
 					</Flex>
 				</FlexItem>
@@ -308,12 +302,21 @@ export function SiteInfoPanel({
 							<>
 								{tab.name === 'settings' && (
 									<div
-										className={classNames(
-											css.tabContents,
-											css.padded
-										)}
+										className={classNames(css.tabContents)}
 									>
-										<SiteSettingsTab site={site} />
+										{offline ? (
+											<div className={css.padded}>
+												<OfflineNotice />
+											</div>
+										) : null}
+
+										{isTemporary ? (
+											<TemporarySiteNotice
+												className={css.siteNotice}
+											/>
+										) : null}
+
+										<ActiveSiteSettingsForm />
 									</div>
 								)}
 								{tab.name === 'logs' && (
@@ -338,264 +341,7 @@ export function SiteInfoPanel({
 						)}
 					</TabPanel>
 				</FlexItem>
-				{navigationButtonsPlacement === 'footer' && (
-					<FlexItem className={css.mobileFooter}>
-						<Flex direction="row" gap={2} justify="center">
-							<FlexItem style={{ flexGrow: 1 }}>
-								<Button
-									className={css.mobileFooterButton}
-									variant="secondary"
-									disabled={!playground}
-									onClick={() => navigateTo('/wp-admin/')}
-								>
-									WP Admin
-								</Button>
-							</FlexItem>
-							<FlexItem style={{ flexGrow: 1 }}>
-								<Button
-									className={css.mobileFooterButton}
-									variant="primary"
-									disabled={!playground}
-									onClick={() => navigateTo('/')}
-								>
-									Homepage
-								</Button>
-							</FlexItem>
-						</Flex>
-					</FlexItem>
-				)}
 			</Flex>
 		</section>
 	);
 }
-
-function SiteSettingsTab({ site }: { site: SiteInfo }) {
-	const username = 'admin';
-	const password = 'password';
-
-	const offline = useAppSelector((state) => state.ui.offline);
-
-	const { opfsMountDescriptor, client } =
-		usePlaygroundClientInfo(site.slug) || {};
-
-	const localDirName =
-		site.metadata?.storage === 'local-fs'
-			? (opfsMountDescriptor as any)?.device?.handle?.name
-			: undefined;
-
-	return (
-		<>
-			{offline ? <OfflineNotice /> : null}
-			<Flex
-				gap={8}
-				direction="column"
-				className={css.maxWidth}
-				justify="flex-start"
-				expanded={true}
-			>
-				<FlexItem>
-					<Flex
-						gap={4}
-						direction="column"
-						className={css.infoTable}
-						expanded={true}
-					>
-						<FlexItem>
-							<h2 className={css.sectionTitle}>
-								Playground details
-							</h2>
-						</FlexItem>
-						<SiteInfoRow label="Name" value={site.metadata.name} />
-						<SiteInfoRow
-							label="Storage"
-							value={
-								<Flex
-									direction="row"
-									gap={4}
-									justify="center"
-									align="center"
-								>
-									<FlexItem>
-										<StorageType
-											type={site.metadata.storage}
-										/>
-									</FlexItem>
-
-									{site.metadata.storage === 'none' ? (
-										<FlexItem
-											style={{
-												display: 'flex',
-												alignItems: 'center',
-												justifyContent: 'center',
-												alignSelf: 'stretch',
-											}}
-										>
-											<SitePersistButton
-												siteSlug={site.slug}
-											>
-												<Button
-													variant="link"
-													disabled={!client}
-													style={{ marginTop: '1px' }}
-												>
-													Save
-												</Button>
-											</SitePersistButton>
-										</FlexItem>
-									) : null}
-
-									{site.metadata.storage === 'local-fs' &&
-									localDirName ? (
-										<FlexItem>
-											{` (${localDirName})`}
-										</FlexItem>
-									) : null}
-								</Flex>
-							}
-						/>
-						<SiteInfoRow
-							label="WordPress version"
-							value={
-								site.metadata.runtimeConfiguration
-									.preferredVersions.wp
-							}
-						/>
-						<SiteInfoRow
-							label="PHP version"
-							value={`${
-								site.metadata.runtimeConfiguration
-									.preferredVersions.php
-							}${
-								site.metadata.runtimeConfiguration.phpExtensionBundles?.includes(
-									'kitchen-sink'
-								)
-									? ' (with extensions)'
-									: ''
-							}`}
-						/>
-						<SiteInfoRow
-							label="Network access"
-							value={
-								site.metadata.runtimeConfiguration.features
-									?.networking
-									? 'Yes'
-									: 'No'
-							}
-						/>
-					</Flex>
-				</FlexItem>
-
-				<FlexItem>
-					<Flex direction="column" gap={2} expanded={true}>
-						<FlexItem>
-							<h3 className={css.sectionTitle}>WP Admin</h3>
-						</FlexItem>
-						<SiteInfoRow
-							label="Username"
-							value={
-								<Button
-									variant="link"
-									className={classNames(
-										css.grayLink,
-										css.buttonNoPadding
-									)}
-									icon={() => <Icon size={16} icon={copy} />}
-									iconPosition="right"
-									onClick={() => {
-										navigator.clipboard.writeText(username);
-									}}
-									label="Copy username"
-								>
-									{username}
-								</Button>
-							}
-						/>
-						<SiteInfoRow
-							label="Password"
-							value={
-								<Button
-									variant="link"
-									className={classNames(
-										css.grayLink,
-										css.buttonNoPadding
-									)}
-									icon={() => <Icon size={16} icon={copy} />}
-									iconPosition="right"
-									onClick={() => {
-										navigator.clipboard.writeText(password);
-									}}
-									label="Copy password"
-								>
-									{password}
-								</Button>
-							}
-						/>
-					</Flex>
-				</FlexItem>
-				<FlexItem>
-					<Flex
-						direction="row"
-						gap={8}
-						expanded={true}
-						justify="flex-start"
-					>
-						<FlexItem>
-							{site.metadata.storage === 'none' ? (
-								<StartSimilarSiteButton siteSlug={site.slug}>
-									{(onClick) => (
-										<Button
-											variant="tertiary"
-											className={css.buttonNoPadding}
-											onClick={onClick}
-										>
-											Create a similar Playground
-										</Button>
-									)}
-								</StartSimilarSiteButton>
-							) : (
-								<SiteEditButton siteSlug={site.slug}>
-									{(onClick) => (
-										<Button
-											variant="tertiary"
-											className={css.buttonNoPadding}
-											onClick={onClick}
-										>
-											Edit Playground settings
-										</Button>
-									)}
-								</SiteEditButton>
-							)}
-						</FlexItem>
-						{site.metadata.originalBlueprint ? (
-							<FlexItem>
-								<Button
-									variant="link"
-									className={css.buttonNoPadding}
-									// The published `Button` component type does not accept the
-									// "href" prop even though the actual component does accept one.
-									// @ts-ignore
-									href={`/builder/builder.html#${encodeStringAsBase64(
-										JSON.stringify(
-											site.metadata
-												.originalBlueprint as any
-										) as string
-									)}`}
-									target="_blank"
-									rel="noopener noreferrer"
-									icon={() => (
-										<Icon icon={external} size={16} />
-									)}
-									aria-label="Go to Blueprints Builder"
-									iconPosition="right"
-									disabled={offline}
-								>
-									View Blueprint
-								</Button>
-							</FlexItem>
-						) : null}
-					</Flex>
-				</FlexItem>
-			</Flex>
-		</>
-	);
-}
diff --git a/packages/playground/website/src/components/site-manager/site-info-panel/style.module.css b/packages/playground/website/src/components/site-manager/site-info-panel/style.module.css
index 14b38a8ef6..b907f764fc 100644
--- a/packages/playground/website/src/components/site-manager/site-info-panel/style.module.css
+++ b/packages/playground/website/src/components/site-manager/site-info-panel/style.module.css
@@ -46,8 +46,6 @@
 .tab-contents {
 	width: 100%;
 	flex-direction: column;
-	padding-top: var(--padding-size);
-	padding-bottom: var(--padding-size);
 	position: relative;
 }
 
@@ -61,7 +59,10 @@
 }
 
 .site-notice {
-	padding: 40px var(--padding-size);
+	padding: var(--padding-size);
+	:global(& .components-notice__content) {
+		margin: 0;
+	}
 }
 
 .section-title {
@@ -117,13 +118,6 @@
 }
 
 .site-info-header-details-name {
-	/* Provide enough space for most autogenerated site names to avoid
-	   flickering site manager panel width when switching between
-	   sites having names of different lengths */
-	/* NOTE: This used to be `width`, not `min-width`, and it is possible
-	   the above comment no longer applies. */
-	min-width: 20ch;
-	height: 24px;
 	margin: 0;
 
 	/* Inside auto layout */
@@ -132,7 +126,7 @@
 	align-self: stretch;
 	flex-grow: 0;
 
-	font-size: 18px;
+	font-size: clamp(14px, 2.5vw, 18px);
 	line-height: 24px;
 	font-weight: 500;
 	/* identical to box height, or 150% */
@@ -140,15 +134,10 @@
 
 	/* Gutenberg/Gray 900 */
 	color: var(--color-gray-900);
-
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
 }
 
 .site-info-header-details-created-at {
 	width: 100%;
-	height: 20px;
 	font-size: 14px;
 	line-height: 20px;
 	/* identical to box height, or 154% */
@@ -157,36 +146,6 @@
 	color: #757575;
 }
 
-.site-info-header-actions {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	padding: 0px;
-	gap: 8px;
-
-	height: 20px;
-	flex: none;
-}
-
-.site-info-section {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	padding: 0px;
-	width: 100%;
-	gap: 16px;
-}
-
-.info-row-label {
-	min-width: 130px;
-	flex-basis: 130px;
-	color: var(--color-gray-600);
-}
-
-.info-row-value {
-	color: var(--color-gray-900);
-}
-
 .max-width {
 	width: 100%;
 }
@@ -194,19 +153,3 @@
 .danger {
 	color: var(--color-alert-red);
 }
-
-.mobile-footer {
-	min-height: 70px !important;
-	width: 100%;
-	margin: 0;
-	align-items: center;
-	justify-content: center;
-	padding: 16px;
-	border-top: 1px solid var(--color-gray-200);
-	background: #fff;
-}
-
-.mobile-footer-button {
-	width: 100%;
-	justify-content: center;
-}
diff --git a/packages/playground/website/src/components/site-manager/site-settings-form/active-site-settings-form.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/active-site-settings-form.tsx
new file mode 100644
index 0000000000..0acad1c12e
--- /dev/null
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/active-site-settings-form.tsx
@@ -0,0 +1,35 @@
+import { useActiveSite } from '../../../lib/state/redux/store';
+import { StoredSiteSettingsForm } from './stored-site-settings-form';
+import { TemporarySiteSettingsForm } from './temporary-site-settings-form';
+
+export function ActiveSiteSettingsForm({
+	onSubmit,
+}: {
+	onSubmit?: () => void;
+}) {
+	const activeSite = useActiveSite();
+
+	if (!activeSite) {
+		return null;
+	}
+
+	switch (activeSite.metadata?.storage) {
+		case 'none':
+			return (
+				<TemporarySiteSettingsForm
+					siteSlug={activeSite.slug}
+					onSubmit={onSubmit}
+				/>
+			);
+		case 'opfs':
+		case 'local-fs':
+			return (
+				<StoredSiteSettingsForm
+					siteSlug={activeSite.slug}
+					onSubmit={onSubmit}
+				/>
+			);
+		default:
+			return null;
+	}
+}
diff --git a/packages/playground/website/src/components/site-manager/site-settings-form/index.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/index.tsx
index 409d8edc9f..cd9d8453eb 100644
--- a/packages/playground/website/src/components/site-manager/site-settings-form/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/index.tsx
@@ -1,558 +1,4 @@
-import type { SupportedPHPVersion } from '@php-wasm/universal';
-import { SupportedPHPVersionsList } from '@php-wasm/universal';
-import css from './style.module.css';
-import { Button, CheckboxControl, SelectControl } from '@wordpress/components';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import classNames from 'classnames';
-import {
-	__experimentalInputControl as InputControl,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { useSupportedWordPressVersions } from './use-supported-wordpress-versions';
-import { randomSiteName } from '../../../lib/state/redux/random-site-name';
-
-export interface SiteSettingsFormProps {
-	onSubmit: (data: any) => void;
-	onCancel?: () => void;
-	formFields?: Partial<Record<keyof SiteFormData, boolean>>;
-	submitButtonText?: string;
-	defaultValues?: Partial<SiteFormData>;
-}
-
-export interface SiteFormData {
-	name: string;
-	phpVersion: SupportedPHPVersion;
-	wpVersion: string;
-	language: string;
-	withExtensions: boolean;
-	withNetworking: boolean;
-	multisite: boolean;
-}
-
-export default function SiteSettingsForm({
-	onSubmit,
-	onCancel,
-	submitButtonText,
-	defaultValues = {},
-	formFields = {
-		name: true,
-		phpVersion: true,
-		wpVersion: true,
-		language: true,
-		withExtensions: true,
-		withNetworking: true,
-		multisite: true,
-	},
-}: SiteSettingsFormProps) {
-	defaultValues = {
-		name: randomSiteName(),
-		phpVersion: '8.0',
-		wpVersion: 'latest',
-		language: '',
-		withExtensions: true,
-		withNetworking: true,
-		multisite: false,
-		...defaultValues,
-	};
-	const {
-		handleSubmit,
-		setValue,
-		getValues,
-		control,
-		formState: { errors },
-	} = useForm<SiteFormData>({
-		defaultValues,
-	});
-
-	const { supportedWPVersions, latestWPVersion } =
-		useSupportedWordPressVersions();
-
-	useEffect(() => {
-		if (
-			latestWPVersion &&
-			['', 'latest'].includes(getValues('wpVersion'))
-		) {
-			setValue('wpVersion', latestWPVersion);
-		}
-	}, [latestWPVersion, setValue, getValues]);
-
-	return (
-		<form onSubmit={handleSubmit(onSubmit)}>
-			<VStack spacing={6}>
-				{formFields.name && (
-					<VStack>
-						<Controller
-							control={control}
-							name="name"
-							rules={{
-								required: {
-									message: 'Playground name is required',
-									value: true,
-								},
-								maxLength: {
-									message: 'Playground name is too long',
-									value: 80,
-								},
-							}}
-							render={({ field: { onChange, ...rest } }) => (
-								<InputControl
-									label="Playground name"
-									placeholder="Playground name"
-									help={errors.name?.message}
-									className={classNames(css.addSiteInput, {
-										[css.invalidInput]: !!errors.name,
-									})}
-									autoFocus={true}
-									data-1p-ignore
-									onChange={(value, { event }) => {
-										onChange(event);
-									}}
-									{...rest}
-								/>
-							)}
-						/>
-					</VStack>
-				)}
-				<HStack
-					justify="space-between"
-					alignment="flex-start"
-					expanded={true}
-					className={css.growChildren}
-				>
-					{formFields.wpVersion && (
-						<Controller
-							control={control}
-							name="wpVersion"
-							rules={{
-								required: {
-									message: 'WordPress Version is required',
-									value: true,
-								},
-							}}
-							render={({ field: { onChange, ...rest } }) => (
-								<div>
-									<SelectControl
-										label="WordPress Version"
-										help={errors.wpVersion?.message}
-										className={classNames(
-											css.addSiteInput,
-											{
-												[css.invalidInput]:
-													!!errors.wpVersion,
-											}
-										)}
-										options={
-											/*
-											 * Without an empty option, React sometimes says
-											 * the current selected version is "nightly" when
-											 * `wp` is actually "6.4".
-											 */
-											[
-												{
-													label: '-- Select a version --',
-													value: '',
-												},
-												...Object.keys(
-													supportedWPVersions || {}
-												).map((version) => ({
-													label: `WordPress ${supportedWPVersions[version]}`,
-													value: version,
-												})),
-											]
-										}
-										onChange={(value, extra) => {
-											onChange(extra?.event);
-										}}
-										{...rest}
-									/>
-									<a
-										href="https://wordpress.github.io/wordpress-playground/blueprints/examples#load-an-older-wordpress-version"
-										target="_blank"
-										rel="noreferrer"
-										style={{ fontSize: '0.9em' }}
-									>
-										Need an older version?
-									</a>
-								</div>
-							)}
-						/>
-					)}
-
-					{formFields.language && (
-						<Controller
-							control={control}
-							name="language"
-							render={({ field: { onChange, ...rest } }) => (
-								<SelectControl
-									label="Language"
-									help={errors.language?.message}
-									className={classNames(css.addSiteInput, {
-										[css.invalidInput]: !!errors.language,
-									})}
-									options={[
-										// @TODO: Let's extract this to a
-										// dedicated module and add a test
-										// (or build step) to ensure that
-										// all supported locales are included.
-										{ value: 'af', label: 'Afrikaans' },
-										{ value: 'ar', label: 'Arabic' },
-										{
-											value: 'ary',
-											label: 'Moroccan Arabic',
-										},
-										{ value: 'as', label: 'Assamese' },
-										{ value: 'bel', label: 'Belarusian' },
-										{ value: 'bg_BG', label: 'Bulgarian' },
-										{
-											value: 'bn_BD',
-											label: 'Bengali (Bangladesh)',
-										},
-										{ value: 'bo', label: 'Tibetan' },
-										{ value: 'bs_BA', label: 'Bosnian' },
-										{ value: 'ca', label: 'Catalan' },
-										{ value: 'ceb', label: 'Cebuano' },
-										{
-											value: 'ckb',
-											label: 'Kurdish (Sorani)',
-										},
-										{ value: 'cs_CZ', label: 'Czech' },
-										{ value: 'cy', label: 'Welsh' },
-										{ value: 'da_DK', label: 'Danish' },
-										{
-											value: 'de_AT',
-											label: 'German (Austria)',
-										},
-										{
-											value: 'de_CH',
-											label: 'German (Switzerland)',
-										},
-										{
-											value: 'de_CH_informal',
-											label: 'German (Switzerland, Informal)',
-										},
-										{ value: 'de_DE', label: 'German' },
-										{
-											value: 'de_DE_formal',
-											label: 'German (Formal)',
-										},
-										{ value: 'dzo', label: 'Dzongkha' },
-										{ value: 'el', label: 'Greek' },
-										{
-											value: 'en_AU',
-											label: 'English (Australia)',
-										},
-										{
-											value: 'en_CA',
-											label: 'English (Canada)',
-										},
-										{
-											value: 'en_GB',
-											label: 'English (UK)',
-										},
-										{
-											value: 'en_NZ',
-											label: 'English (New Zealand)',
-										},
-										{
-											value: '',
-											label: 'English (United States)',
-										},
-										{
-											value: 'en_ZA',
-											label: 'English (South Africa)',
-										},
-										{ value: 'eo', label: 'Esperanto' },
-										{
-											value: 'es_AR',
-											label: 'Spanish (Argentina)',
-										},
-										{
-											value: 'es_CL',
-											label: 'Spanish (Chile)',
-										},
-										{
-											value: 'es_CO',
-											label: 'Spanish (Colombia)',
-										},
-										{
-											value: 'es_CR',
-											label: 'Spanish (Costa Rica)',
-										},
-										{
-											value: 'es_ES',
-											label: 'Spanish (Spain)',
-										},
-										{
-											value: 'es_GT',
-											label: 'Spanish (Guatemala)',
-										},
-										{
-											value: 'es_MX',
-											label: 'Spanish (Mexico)',
-										},
-										{
-											value: 'es_PE',
-											label: 'Spanish (Peru)',
-										},
-										{
-											value: 'es_UY',
-											label: 'Spanish (Uruguay)',
-										},
-										{
-											value: 'es_VE',
-											label: 'Spanish (Venezuela)',
-										},
-										{ value: 'et', label: 'Estonian' },
-										{ value: 'eu', label: 'Basque' },
-										{ value: 'fa_IR', label: 'Persian' },
-										{ value: 'fi', label: 'Finnish' },
-										{
-											value: 'fr_BE',
-											label: 'French (Belgium)',
-										},
-										{
-											value: 'fr_CA',
-											label: 'French (Canada)',
-										},
-										{
-											value: 'fr_FR',
-											label: 'French (France)',
-										},
-										{ value: 'fur', label: 'Friulian' },
-										{
-											value: 'gd',
-											label: 'Scottish Gaelic',
-										},
-										{ value: 'gl_ES', label: 'Galician' },
-										{ value: 'gu', label: 'Gujarati' },
-										{ value: 'haz', label: 'Hazaragi' },
-										{ value: 'he_IL', label: 'Hebrew' },
-										{ value: 'hi_IN', label: 'Hindi' },
-										{ value: 'hr', label: 'Croatian' },
-										{
-											value: 'hsb',
-											label: 'Upper Sorbian',
-										},
-										{ value: 'hu_HU', label: 'Hungarian' },
-										{ value: 'hy', label: 'Armenian' },
-										{ value: 'id_ID', label: 'Indonesian' },
-										{ value: 'is_IS', label: 'Icelandic' },
-										{ value: 'it_IT', label: 'Italian' },
-										{ value: 'ja', label: 'Japanese' },
-										{ value: 'jv_ID', label: 'Javanese' },
-										{ value: 'kab', label: 'Kabyle' },
-										{ value: 'ka_GE', label: 'Georgian' },
-										{ value: 'kk', label: 'Kazakh' },
-										{ value: 'km', label: 'Khmer' },
-										{ value: 'kn', label: 'Kannada' },
-										{ value: 'ko_KR', label: 'Korean' },
-										{ value: 'lo', label: 'Lao' },
-										{ value: 'lt_LT', label: 'Lithuanian' },
-										{ value: 'lv', label: 'Latvian' },
-										{ value: 'mk_MK', label: 'Macedonian' },
-										{ value: 'ml_IN', label: 'Malayalam' },
-										{ value: 'mn', label: 'Mongolian' },
-										{ value: 'mr', label: 'Marathi' },
-										{ value: 'ms_MY', label: 'Malay' },
-										{
-											value: 'my_MM',
-											label: 'Myanmar (Burmese)',
-										},
-										{
-											value: 'nb_NO',
-											label: 'Norwegian (Bokmål)',
-										},
-										{ value: 'ne_NP', label: 'Nepali' },
-										{
-											value: 'nl_BE',
-											label: 'Dutch (Belgium)',
-										},
-										{ value: 'nl_NL', label: 'Dutch' },
-										{
-											value: 'nl_NL_formal',
-											label: 'Dutch (Formal)',
-										},
-										{
-											value: 'nn_NO',
-											label: 'Norwegian (Nynorsk)',
-										},
-										{ value: 'oci', label: 'Occitan' },
-										{ value: 'pa_IN', label: 'Punjabi' },
-										{ value: 'pl_PL', label: 'Polish' },
-										{ value: 'ps', label: 'Pashto' },
-										{
-											value: 'pt_AO',
-											label: 'Portuguese (Angola)',
-										},
-										{
-											value: 'pt_BR',
-											label: 'Portuguese (Brazil)',
-										},
-										{
-											value: 'pt_PT',
-											label: 'Portuguese (Portugal)',
-										},
-										{
-											value: 'pt_PT_ao90',
-											label: 'Portuguese (Portugal, AO90)',
-										},
-										{ value: 'rhg', label: 'Rohingya' },
-										{ value: 'ro_RO', label: 'Romanian' },
-										{ value: 'ru_RU', label: 'Russian' },
-										{ value: 'sah', label: 'Sakha' },
-										{ value: 'si_LK', label: 'Sinhala' },
-										{ value: 'skr', label: 'Saraiki' },
-										{ value: 'sk_SK', label: 'Slovak' },
-										{ value: 'sl_SI', label: 'Slovenian' },
-										{ value: 'snd', label: 'Sindhi' },
-										{ value: 'sq', label: 'Albanian' },
-										{ value: 'sr_RS', label: 'Serbian' },
-										{ value: 'sv_SE', label: 'Swedish' },
-										{ value: 'sw', label: 'Swahili' },
-										{ value: 'szl', label: 'Silesian' },
-										{ value: 'tah', label: 'Tahitian' },
-										{ value: 'ta_IN', label: 'Tamil' },
-										{ value: 'te', label: 'Telugu' },
-										{ value: 'th', label: 'Thai' },
-										{ value: 'tl', label: 'Tagalog' },
-										{ value: 'tr_TR', label: 'Turkish' },
-										{ value: 'tt_RU', label: 'Tatar' },
-										{ value: 'ug_CN', label: 'Uighur' },
-										{ value: 'uk', label: 'Ukrainian' },
-										{ value: 'ur', label: 'Urdu' },
-										{ value: 'uz_UZ', label: 'Uzbek' },
-										{ value: 'vi', label: 'Vietnamese' },
-										{
-											value: 'zh_CN',
-											label: 'Chinese (China)',
-										},
-										{
-											value: 'zh_HK',
-											label: 'Chinese (Hong Kong)',
-										},
-										{
-											value: 'zh_TW',
-											label: 'Chinese (Taiwan)',
-										},
-									].sort((a, b) =>
-										a.label.localeCompare(b.label)
-									)}
-									onChange={(value, extra) => {
-										onChange(extra?.event);
-									}}
-									{...rest}
-								/>
-							)}
-						/>
-					)}
-					{formFields.phpVersion && (
-						<Controller
-							control={control}
-							name="phpVersion"
-							rules={{
-								required: {
-									message: 'PHP Version is required',
-									value: true,
-								},
-							}}
-							render={({ field: { onChange, ...rest } }) => (
-								<SelectControl
-									label="PHP Version"
-									help={errors.phpVersion?.message}
-									className={classNames(css.addSiteInput, {
-										[css.invalidInput]: !!errors.phpVersion,
-									})}
-									// Workaround to avoid cutting off the "PHP Version" label.
-									// In `@wordpress/components`, the field label is ~10px shorter
-									// than the <select> element. That's not a problem when the select
-									// options have long names and stretch the <select> element, but
-									// the options in this specific fields are shorter than the label.
-									// 100px is an arbitrary value that seems to work.
-									// @TODO: Contribute to @wordpress/components to fix this.
-									style={{ minWidth: '100px' }}
-									options={SupportedPHPVersionsList.map(
-										(version) => ({
-											label: `PHP ${version}`,
-											value: version,
-										})
-									)}
-									onChange={(value, extra) => {
-										onChange(extra?.event);
-									}}
-									{...rest}
-								/>
-							)}
-						/>
-					)}
-				</HStack>
-				<VStack spacing={1}>
-					{formFields.multisite && (
-						<Controller
-							control={control}
-							name="multisite"
-							render={({ field: { onChange, ref, ...rest } }) => (
-								<CheckboxControl
-									label="Create a multisite network"
-									onChange={(isChecked) => {
-										setValue('multisite', isChecked);
-									}}
-									{...rest}
-									value={rest.value ? 'true' : 'false'}
-									checked={rest.value}
-								/>
-							)}
-						/>
-					)}
-					{formFields.withExtensions && (
-						<Controller
-							control={control}
-							name="withExtensions"
-							render={({ field: { onChange, ref, ...rest } }) => (
-								<CheckboxControl
-									label="Load libxml, openssl, mbstring, iconv, gd"
-									onChange={(isChecked) => {
-										setValue('withExtensions', isChecked);
-									}}
-									help="Uncheck to reduce download size by ~ 6MB."
-									{...rest}
-									value={rest.value ? 'true' : 'false'}
-									checked={rest.value}
-								/>
-							)}
-						/>
-					)}
-					{formFields.withNetworking && (
-						<Controller
-							control={control}
-							name="withNetworking"
-							render={({ field: { onChange, ref, ...rest } }) => (
-								<CheckboxControl
-									label="Allow network access"
-									onChange={(isChecked) => {
-										setValue('withNetworking', isChecked);
-									}}
-									{...rest}
-									value={rest.value ? 'true' : 'false'}
-									checked={rest.value}
-								/>
-							)}
-						/>
-					)}
-				</VStack>
-
-				<HStack justify="flex-end" spacing={6}>
-					{onCancel && (
-						<Button variant="link" onClick={onCancel}>
-							Cancel
-						</Button>
-					)}
-					<Button type="submit" variant="primary">
-						{submitButtonText}
-					</Button>
-				</HStack>
-			</VStack>
-		</form>
-	);
-}
+export { ActiveSiteSettingsForm } from './active-site-settings-form';
+export type { SiteFormData } from './unconnected-site-settings-form';
+export { TemporarySiteSettingsForm } from './temporary-site-settings-form';
+export { UnconnectedSiteSettingsForm } from './unconnected-site-settings-form';
diff --git a/packages/playground/website/src/components/site-manager/site-edit-button/index.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx
similarity index 51%
rename from packages/playground/website/src/components/site-manager/site-edit-button/index.tsx
rename to packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx
index 7ffd7237c9..ef09045fa5 100644
--- a/packages/playground/website/src/components/site-manager/site-edit-button/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx
@@ -1,30 +1,38 @@
-import { Modal } from '@wordpress/components';
-import { useMemo, useState } from 'react';
-import { useAppSelector, useAppDispatch } from '../../../lib/state/redux/store';
-import SiteSettingsForm, { SiteFormData } from '../site-settings-form';
+import { useMemo } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../lib/state/redux/store';
+import css from './style.module.css';
+import {
+	Icon,
+	Button,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { info } from '@wordpress/icons';
 import {
 	selectSiteBySlug,
 	updateSiteMetadata,
 } from '../../../lib/state/redux/slice-sites';
+import {
+	SiteFormData,
+	UnconnectedSiteSettingsForm,
+} from './unconnected-site-settings-form';
 
-export function SiteEditButton({
+export function StoredSiteSettingsForm({
 	siteSlug,
-	children,
+	onSubmit,
 }: {
 	siteSlug: string;
-	children: (onClick: () => void) => React.ReactNode;
+	onSubmit?: () => void;
 }) {
 	const siteInfo = useAppSelector((state) =>
 		selectSiteBySlug(state, siteSlug)
 	)!;
-	const [isModalOpen, setModalOpen] = useState(false);
 	const dispatch = useAppDispatch();
 	const updateSite = async (data: SiteFormData) => {
 		await dispatch(
 			updateSiteMetadata({
 				slug: siteSlug,
 				changes: {
-					name: data.name,
 					runtimeConfiguration: {
 						...siteInfo.metadata.runtimeConfiguration,
 						features: {
@@ -43,8 +51,8 @@ export function SiteEditButton({
 				},
 			})
 		);
+		onSubmit?.();
 		// @TODO: Display a notification "site updated"
-		setModalOpen(false);
 	};
 
 	const defaultValues = useMemo<Partial<SiteFormData>>(
@@ -64,28 +72,46 @@ export function SiteEditButton({
 	);
 
 	return (
-		<div>
-			{children(() => setModalOpen(true))}
-
-			{isModalOpen && (
-				<Modal
-					title="Edit Playground settings"
-					onRequestClose={() => setModalOpen(false)}
+		<UnconnectedSiteSettingsForm
+			className="is-stored-site"
+			onSubmit={updateSite}
+			defaultValues={defaultValues}
+			enabledFields={{
+				wpVersion: false,
+				language: false,
+				multisite: false,
+			}}
+			header={
+				<HStack
+					as="p"
+					spacing={3}
+					className={`${css.notice} ${css.formSection}`}
+					style={{ margin: 0 }}
+					alignment="center"
+					justify="flex-start"
+				>
+					<Icon icon={info} size={16} />
+					<span>
+						Stored Playgrounds have limited configuration options.
+					</span>
+				</HStack>
+			}
+			footer={
+				<VStack
+					justify="flex-end"
+					spacing={6}
+					className={css.formSection}
+					style={{ paddingTop: 0 }}
 				>
-					<SiteSettingsForm
-						onSubmit={updateSite}
-						onCancel={() => setModalOpen(false)}
-						submitButtonText="Update"
-						formFields={{
-							name: true,
-							phpVersion: true,
-							withExtensions: true,
-							withNetworking: true,
-						}}
-						defaultValues={defaultValues}
-					/>
-				</Modal>
-			)}
-		</div>
+					<Button
+						type="submit"
+						variant="primary"
+						style={{ justifyContent: 'center' }}
+					>
+						Save & Reload
+					</Button>
+				</VStack>
+			}
+		/>
 	);
 }
diff --git a/packages/playground/website/src/components/site-manager/site-settings-form/style.module.css b/packages/playground/website/src/components/site-manager/site-settings-form/style.module.css
index 2497abb599..4dadab70c6 100644
--- a/packages/playground/website/src/components/site-manager/site-settings-form/style.module.css
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/style.module.css
@@ -1,7 +1,15 @@
+.site-title {
+	margin: 0;
+}
+
 .grow-children > * {
 	flex-grow: 1;
 }
 
+:global(.components-popover__content:has(.site-settings-form)) {
+	padding: 0;
+}
+
 .invalid-input :global(.components-input-control__backdrop) {
 	border-color: #e26f56 !important;
 }
@@ -9,3 +17,38 @@
 .invalid-input :global(.components-base-control__help) {
 	color: #e26f56;
 }
+
+.form-section {
+	padding: 24px;
+}
+
+.form-section p {
+	margin: 0;
+}
+
+.form-section :global(.components-select-control > :first-child) {
+	width: 50%;
+}
+.form-section :global(.components-select-control > :first-child label) {
+	text-transform: none;
+	font-weight: normal;
+	font-size: 14px;
+	color: #757575;
+}
+.form-section :global(.components-select-control > :nth-child(2)) {
+	width: auto;
+	flex-shrink: 1;
+}
+
+.notice {
+	background-color: #f3f6fd;
+}
+
+.footer {
+	background-color: #f3f6fd;
+	button {
+		width: 100%;
+		align-self: center;
+		justify-content: center;
+	}
+}
diff --git a/packages/playground/website/src/components/site-manager/start-similar-site-button/index.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx
similarity index 57%
rename from packages/playground/website/src/components/site-manager/start-similar-site-button/index.tsx
rename to packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx
index e7670d18ac..8b52332cd3 100644
--- a/packages/playground/website/src/components/site-manager/start-similar-site-button/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx
@@ -1,22 +1,24 @@
-import { Modal } from '@wordpress/components';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import css from './style.module.css';
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
 import { useAppSelector } from '../../../lib/state/redux/store';
-import SiteSettingsForm, { SiteFormData } from '../site-settings-form';
 import { selectSiteBySlug } from '../../../lib/state/redux/slice-sites';
 import { redirectTo, PlaygroundRoute } from '../../../lib/state/url/router';
-import { randomSiteName } from '../../../lib/state/redux/random-site-name';
+import {
+	SiteFormData,
+	UnconnectedSiteSettingsForm,
+} from './unconnected-site-settings-form';
 
-export function StartSimilarSiteButton({
+export function TemporarySiteSettingsForm({
 	siteSlug,
-	children,
+	onSubmit,
 }: {
 	siteSlug: string;
-	children: (onClick: () => void) => React.ReactNode;
+	onSubmit?: () => void;
 }) {
 	const siteInfo = useAppSelector((state) =>
 		selectSiteBySlug(state, siteSlug)
 	)!;
-	const [isModalOpen, setModalOpen] = useState(false);
 	const updateSite = async (data: SiteFormData) => {
 		redirectTo(
 			PlaygroundRoute.newTemporarySite({
@@ -24,7 +26,6 @@ export function StartSimilarSiteButton({
 				query: {
 					php: data.phpVersion,
 					wp: data.wpVersion,
-					name: data.name,
 					networking: data.withNetworking ? 'yes' : 'no',
 					'php-extension-bundle': data.withExtensions
 						? 'kitchen-sink'
@@ -34,19 +35,13 @@ export function StartSimilarSiteButton({
 				},
 			})
 		);
+		onSubmit?.();
 		// @TODO: Display a notification of updated site or forked site
-		setModalOpen(false);
 	};
 	const defaultValues = useMemo<Partial<SiteFormData>>(() => {
 		const searchParams = siteInfo.originalUrlParams?.searchParams || {};
 		const runtimeConf = siteInfo.metadata?.runtimeConfiguration || {};
 		return {
-			// @TODO: Choose one:
-			// - Populate with the site name from the original URL params and
-			//   when the site is saved, update it instead of creating a new temp site.
-			// - Fork existing site and populate with new random name.
-			// - Allow user to choose between Fork and Edit operations
-			name: randomSiteName(),
 			phpVersion: runtimeConf?.preferredVersions?.php as any,
 			wpVersion: runtimeConf?.preferredVersions?.wp as any,
 			withNetworking: runtimeConf?.features?.networking,
@@ -61,22 +56,26 @@ export function StartSimilarSiteButton({
 	}, [siteInfo]);
 
 	return (
-		<div>
-			{children(() => setModalOpen(true))}
-
-			{isModalOpen && (
-				<Modal
-					title="Create a similar Playground"
-					onRequestClose={() => setModalOpen(false)}
+		<UnconnectedSiteSettingsForm
+			className="is-temporary-site"
+			onSubmit={updateSite}
+			defaultValues={defaultValues}
+			footer={
+				<VStack
+					justify="flex-end"
+					spacing={6}
+					style={{ margin: 0 }}
+					className={`${css.footer} ${css.formSection}`}
 				>
-					<SiteSettingsForm
-						onSubmit={updateSite}
-						onCancel={() => setModalOpen(false)}
-						submitButtonText="Create"
-						defaultValues={defaultValues}
-					/>
-				</Modal>
-			)}
-		</div>
+					<p>
+						<b>Destructive action!</b> Applying these settings will
+						reset the WordPress site to its initial state.
+					</p>
+					<Button type="submit" variant="primary">
+						Apply Settings & Reset Playground
+					</Button>
+				</VStack>
+			}
+		/>
 	);
 }
diff --git a/packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx
new file mode 100644
index 0000000000..a5681fa78c
--- /dev/null
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx
@@ -0,0 +1,498 @@
+import type { SupportedPHPVersion } from '@php-wasm/universal';
+import { SupportedPHPVersionsList } from '@php-wasm/universal';
+import css from './style.module.css';
+import { CheckboxControl, SelectControl } from '@wordpress/components';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import classNames from 'classnames';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useSupportedWordPressVersions } from './use-supported-wordpress-versions';
+
+type ConfigurableFields = Record<
+	keyof SiteFormData & ('wpVersion' | 'language' | 'multisite'),
+	boolean
+>;
+
+export interface SiteSettingsFormProps {
+	onSubmit: (data: any) => void;
+	header?: React.ReactNode;
+	footer?: React.ReactNode;
+	className?: string;
+	enabledFields?: ConfigurableFields;
+	defaultValues?: Partial<SiteFormData>;
+}
+
+export interface SiteFormData {
+	phpVersion: SupportedPHPVersion;
+	wpVersion: string;
+	language: string;
+	withExtensions: boolean;
+	withNetworking: boolean;
+	multisite: boolean;
+}
+
+export function UnconnectedSiteSettingsForm({
+	onSubmit,
+	header,
+	footer,
+	className,
+	defaultValues = {},
+	enabledFields = {
+		wpVersion: true,
+		language: true,
+		multisite: true,
+	},
+}: SiteSettingsFormProps) {
+	defaultValues = {
+		phpVersion: '8.0',
+		wpVersion: 'latest',
+		language: '',
+		withExtensions: true,
+		withNetworking: true,
+		multisite: false,
+		...defaultValues,
+	};
+	const {
+		handleSubmit,
+		setValue,
+		getValues,
+		control,
+		formState: { errors },
+	} = useForm<SiteFormData>({
+		defaultValues,
+	});
+
+	const { supportedWPVersions, latestWPVersion } =
+		useSupportedWordPressVersions();
+
+	useEffect(() => {
+		if (
+			latestWPVersion &&
+			['', 'latest'].includes(getValues('wpVersion'))
+		) {
+			setValue('wpVersion', latestWPVersion);
+		}
+	}, [latestWPVersion, setValue, getValues]);
+
+	return (
+		<form
+			onSubmit={handleSubmit(onSubmit)}
+			className={classNames(className, 'site-settings-form')}
+		>
+			{header}
+			<VStack spacing={3} className={css.formSection}>
+				<Controller
+					control={control}
+					name="wpVersion"
+					rules={{
+						required: {
+							message: 'WordPress Version is required',
+							value: true,
+						},
+					}}
+					disabled={!enabledFields.wpVersion}
+					render={({ field: { onChange, ...rest } }) => (
+						<div>
+							<SelectControl
+								size="compact"
+								__nextHasNoMarginBottom={true}
+								label="WordPress Version"
+								labelPosition="side"
+								help={errors.wpVersion?.message}
+								className={classNames(css.addSiteInput, {
+									[css.invalidInput]: !!errors.wpVersion,
+								})}
+								options={
+									/*
+									 * Without an empty option, React sometimes says
+									 * the current selected version is "nightly" when
+									 * `wp` is actually "6.4".
+									 */
+									[
+										{
+											label: '-- Select a version --',
+											value: '',
+										},
+										...Object.keys(
+											supportedWPVersions || {}
+										).map((version) => ({
+											label: `${supportedWPVersions[version]}`,
+											value: version,
+										})),
+									]
+								}
+								onChange={(value, extra) => {
+									onChange(extra?.event);
+								}}
+								{...rest}
+							/>
+
+							{enabledFields.wpVersion && (
+								<a
+									href="https://wordpress.github.io/wordpress-playground/blueprints/examples#load-an-older-wordpress-version"
+									target="_blank"
+									rel="noreferrer"
+									style={{ fontSize: '0.9em' }}
+								>
+									Need an older version?
+								</a>
+							)}
+						</div>
+					)}
+				/>
+
+				<Controller
+					control={control}
+					name="phpVersion"
+					rules={{
+						required: {
+							message: 'PHP Version is required',
+							value: true,
+						},
+					}}
+					render={({ field: { onChange, ...rest } }) => (
+						<SelectControl
+							size="compact"
+							__nextHasNoMarginBottom={true}
+							label="PHP Version"
+							labelPosition="side"
+							help={errors.phpVersion?.message}
+							className={classNames(css.addSiteInput, {
+								[css.invalidInput]: !!errors.phpVersion,
+							})}
+							options={SupportedPHPVersionsList.map(
+								(version) => ({
+									label: `PHP ${version}`,
+									value: version,
+								})
+							)}
+							onChange={(value, extra) => {
+								onChange(extra?.event);
+							}}
+							{...rest}
+						/>
+					)}
+				/>
+
+				<Controller
+					control={control}
+					name="language"
+					render={({ field: { onChange, ...rest } }) => (
+						<SelectControl
+							size="compact"
+							__nextHasNoMarginBottom={true}
+							label="Language"
+							labelPosition="side"
+							help={errors.language?.message}
+							className={classNames(css.addSiteInput, {
+								[css.invalidInput]: !!errors.language,
+							})}
+							disabled={!enabledFields.language}
+							options={[
+								// @TODO: Let's extract this to a
+								// dedicated module and add a test
+								// (or build step) to ensure that
+								// all supported locales are included.
+								{ value: 'af', label: 'Afrikaans' },
+								{ value: 'ar', label: 'Arabic' },
+								{
+									value: 'ary',
+									label: 'Moroccan Arabic',
+								},
+								{ value: 'as', label: 'Assamese' },
+								{ value: 'bel', label: 'Belarusian' },
+								{ value: 'bg_BG', label: 'Bulgarian' },
+								{
+									value: 'bn_BD',
+									label: 'Bengali (Bangladesh)',
+								},
+								{ value: 'bo', label: 'Tibetan' },
+								{ value: 'bs_BA', label: 'Bosnian' },
+								{ value: 'ca', label: 'Catalan' },
+								{ value: 'ceb', label: 'Cebuano' },
+								{
+									value: 'ckb',
+									label: 'Kurdish (Sorani)',
+								},
+								{ value: 'cs_CZ', label: 'Czech' },
+								{ value: 'cy', label: 'Welsh' },
+								{ value: 'da_DK', label: 'Danish' },
+								{
+									value: 'de_AT',
+									label: 'German (Austria)',
+								},
+								{
+									value: 'de_CH',
+									label: 'German (Switzerland)',
+								},
+								{
+									value: 'de_CH_informal',
+									label: 'German (Switzerland, Informal)',
+								},
+								{ value: 'de_DE', label: 'German' },
+								{
+									value: 'de_DE_formal',
+									label: 'German (Formal)',
+								},
+								{ value: 'dzo', label: 'Dzongkha' },
+								{ value: 'el', label: 'Greek' },
+								{
+									value: 'en_AU',
+									label: 'English (Australia)',
+								},
+								{
+									value: 'en_CA',
+									label: 'English (Canada)',
+								},
+								{
+									value: 'en_GB',
+									label: 'English (UK)',
+								},
+								{
+									value: 'en_NZ',
+									label: 'English (New Zealand)',
+								},
+								{
+									value: '',
+									label: 'English (United States)',
+								},
+								{
+									value: 'en_ZA',
+									label: 'English (South Africa)',
+								},
+								{ value: 'eo', label: 'Esperanto' },
+								{
+									value: 'es_AR',
+									label: 'Spanish (Argentina)',
+								},
+								{
+									value: 'es_CL',
+									label: 'Spanish (Chile)',
+								},
+								{
+									value: 'es_CO',
+									label: 'Spanish (Colombia)',
+								},
+								{
+									value: 'es_CR',
+									label: 'Spanish (Costa Rica)',
+								},
+								{
+									value: 'es_ES',
+									label: 'Spanish (Spain)',
+								},
+								{
+									value: 'es_GT',
+									label: 'Spanish (Guatemala)',
+								},
+								{
+									value: 'es_MX',
+									label: 'Spanish (Mexico)',
+								},
+								{
+									value: 'es_PE',
+									label: 'Spanish (Peru)',
+								},
+								{
+									value: 'es_UY',
+									label: 'Spanish (Uruguay)',
+								},
+								{
+									value: 'es_VE',
+									label: 'Spanish (Venezuela)',
+								},
+								{ value: 'et', label: 'Estonian' },
+								{ value: 'eu', label: 'Basque' },
+								{ value: 'fa_IR', label: 'Persian' },
+								{ value: 'fi', label: 'Finnish' },
+								{
+									value: 'fr_BE',
+									label: 'French (Belgium)',
+								},
+								{
+									value: 'fr_CA',
+									label: 'French (Canada)',
+								},
+								{
+									value: 'fr_FR',
+									label: 'French (France)',
+								},
+								{ value: 'fur', label: 'Friulian' },
+								{
+									value: 'gd',
+									label: 'Scottish Gaelic',
+								},
+								{ value: 'gl_ES', label: 'Galician' },
+								{ value: 'gu', label: 'Gujarati' },
+								{ value: 'haz', label: 'Hazaragi' },
+								{ value: 'he_IL', label: 'Hebrew' },
+								{ value: 'hi_IN', label: 'Hindi' },
+								{ value: 'hr', label: 'Croatian' },
+								{
+									value: 'hsb',
+									label: 'Upper Sorbian',
+								},
+								{ value: 'hu_HU', label: 'Hungarian' },
+								{ value: 'hy', label: 'Armenian' },
+								{ value: 'id_ID', label: 'Indonesian' },
+								{ value: 'is_IS', label: 'Icelandic' },
+								{ value: 'it_IT', label: 'Italian' },
+								{ value: 'ja', label: 'Japanese' },
+								{ value: 'jv_ID', label: 'Javanese' },
+								{ value: 'kab', label: 'Kabyle' },
+								{ value: 'ka_GE', label: 'Georgian' },
+								{ value: 'kk', label: 'Kazakh' },
+								{ value: 'km', label: 'Khmer' },
+								{ value: 'kn', label: 'Kannada' },
+								{ value: 'ko_KR', label: 'Korean' },
+								{ value: 'lo', label: 'Lao' },
+								{ value: 'lt_LT', label: 'Lithuanian' },
+								{ value: 'lv', label: 'Latvian' },
+								{ value: 'mk_MK', label: 'Macedonian' },
+								{ value: 'ml_IN', label: 'Malayalam' },
+								{ value: 'mn', label: 'Mongolian' },
+								{ value: 'mr', label: 'Marathi' },
+								{ value: 'ms_MY', label: 'Malay' },
+								{
+									value: 'my_MM',
+									label: 'Myanmar (Burmese)',
+								},
+								{
+									value: 'nb_NO',
+									label: 'Norwegian (Bokmål)',
+								},
+								{ value: 'ne_NP', label: 'Nepali' },
+								{
+									value: 'nl_BE',
+									label: 'Dutch (Belgium)',
+								},
+								{ value: 'nl_NL', label: 'Dutch' },
+								{
+									value: 'nl_NL_formal',
+									label: 'Dutch (Formal)',
+								},
+								{
+									value: 'nn_NO',
+									label: 'Norwegian (Nynorsk)',
+								},
+								{ value: 'oci', label: 'Occitan' },
+								{ value: 'pa_IN', label: 'Punjabi' },
+								{ value: 'pl_PL', label: 'Polish' },
+								{ value: 'ps', label: 'Pashto' },
+								{
+									value: 'pt_AO',
+									label: 'Portuguese (Angola)',
+								},
+								{
+									value: 'pt_BR',
+									label: 'Portuguese (Brazil)',
+								},
+								{
+									value: 'pt_PT',
+									label: 'Portuguese (Portugal)',
+								},
+								{
+									value: 'pt_PT_ao90',
+									label: 'Portuguese (Portugal, AO90)',
+								},
+								{ value: 'rhg', label: 'Rohingya' },
+								{ value: 'ro_RO', label: 'Romanian' },
+								{ value: 'ru_RU', label: 'Russian' },
+								{ value: 'sah', label: 'Sakha' },
+								{ value: 'si_LK', label: 'Sinhala' },
+								{ value: 'skr', label: 'Saraiki' },
+								{ value: 'sk_SK', label: 'Slovak' },
+								{ value: 'sl_SI', label: 'Slovenian' },
+								{ value: 'snd', label: 'Sindhi' },
+								{ value: 'sq', label: 'Albanian' },
+								{ value: 'sr_RS', label: 'Serbian' },
+								{ value: 'sv_SE', label: 'Swedish' },
+								{ value: 'sw', label: 'Swahili' },
+								{ value: 'szl', label: 'Silesian' },
+								{ value: 'tah', label: 'Tahitian' },
+								{ value: 'ta_IN', label: 'Tamil' },
+								{ value: 'te', label: 'Telugu' },
+								{ value: 'th', label: 'Thai' },
+								{ value: 'tl', label: 'Tagalog' },
+								{ value: 'tr_TR', label: 'Turkish' },
+								{ value: 'tt_RU', label: 'Tatar' },
+								{ value: 'ug_CN', label: 'Uighur' },
+								{ value: 'uk', label: 'Ukrainian' },
+								{ value: 'ur', label: 'Urdu' },
+								{ value: 'uz_UZ', label: 'Uzbek' },
+								{ value: 'vi', label: 'Vietnamese' },
+								{
+									value: 'zh_CN',
+									label: 'Chinese (China)',
+								},
+								{
+									value: 'zh_HK',
+									label: 'Chinese (Hong Kong)',
+								},
+								{
+									value: 'zh_TW',
+									label: 'Chinese (Taiwan)',
+								},
+							].sort((a, b) => a.label.localeCompare(b.label))}
+							onChange={(value, extra) => {
+								onChange(extra?.event);
+							}}
+							{...rest}
+						/>
+					)}
+				/>
+
+				<Controller
+					control={control}
+					name="withNetworking"
+					render={({ field: { onChange, ref, ...rest } }) => (
+						<CheckboxControl
+							label="Allow network access"
+							onChange={(isChecked) => {
+								setValue('withNetworking', isChecked);
+							}}
+							{...rest}
+							value={rest.value ? 'true' : 'false'}
+							checked={rest.value}
+						/>
+					)}
+				/>
+
+				<Controller
+					control={control}
+					name="multisite"
+					disabled={!enabledFields.multisite}
+					render={({ field: { onChange, ref, ...rest } }) => (
+						<CheckboxControl
+							label="Create a multisite network"
+							onChange={(isChecked) => {
+								setValue('multisite', isChecked);
+							}}
+							{...rest}
+							value={rest.value ? 'true' : 'false'}
+							checked={rest.value}
+						/>
+					)}
+				/>
+
+				<Controller
+					control={control}
+					name="withExtensions"
+					render={({ field: { onChange, ref, ...rest } }) => (
+						<CheckboxControl
+							label="Load PHP extensions"
+							onChange={(isChecked) => {
+								setValue('withExtensions', isChecked);
+							}}
+							help="~6MB (libxml, openssl, mbstring, iconv, gd)"
+							{...rest}
+							value={rest.value ? 'true' : 'false'}
+							checked={rest.value}
+						/>
+					)}
+				/>
+			</VStack>
+			{footer}
+		</form>
+	);
+}
diff --git a/packages/playground/website/src/components/site-manager/storage-type/index.tsx b/packages/playground/website/src/components/site-manager/storage-type/index.tsx
index fe71cc424d..cf5d86363a 100644
--- a/packages/playground/website/src/components/site-manager/storage-type/index.tsx
+++ b/packages/playground/website/src/components/site-manager/storage-type/index.tsx
@@ -22,7 +22,7 @@ export function StorageType({ type }: { type: SiteStorageType }) {
 		case 'none':
 			return (
 				<div className={css.storageType}>
-					<Icon size={16} icon={ClockIcon} />
+					<ClockIcon />
 					<span>Temporary</span>
 				</div>
 			);
diff --git a/packages/playground/website/src/lib/get-relative-date.ts b/packages/playground/website/src/lib/get-relative-date.ts
new file mode 100644
index 0000000000..6d4c2e8567
--- /dev/null
+++ b/packages/playground/website/src/lib/get-relative-date.ts
@@ -0,0 +1,31 @@
+export function getRelativeDate(inputDate: Date): string {
+	const formatter = new Intl.RelativeTimeFormat('en', {
+		style: 'long',
+	});
+
+	const now = new Date();
+	const diffInSeconds = Math.floor(
+		(inputDate.getTime() - now.getTime()) / 1000
+	);
+
+	const intervals = [
+		{ unit: 'year', seconds: 31536000 },
+		{ unit: 'month', seconds: 2592000 },
+		{ unit: 'day', seconds: 86400 },
+		{ unit: 'hour', seconds: 3600 },
+		{ unit: 'minute', seconds: 60 },
+		{ unit: 'second', seconds: 1 },
+	] as const;
+
+	for (const interval of intervals) {
+		const value = Math.floor(diffInSeconds / interval.seconds);
+		if (![1, -1, 0].includes(value)) {
+			if (value < 60 && interval.unit === 'second') {
+				return 'a moment ago';
+			}
+			return formatter.format(value, interval.unit);
+		}
+	}
+
+	return 'right now';
+}
diff --git a/packages/playground/website/src/lib/site-metadata.ts b/packages/playground/website/src/lib/site-metadata.ts
index b8701299c3..041e2163d3 100644
--- a/packages/playground/website/src/lib/site-metadata.ts
+++ b/packages/playground/website/src/lib/site-metadata.ts
@@ -59,9 +59,9 @@ export interface SiteMetadata {
 }
 
 export async function createSiteMetadata(
-	initialMetadata: { name: string } & Partial<
-		Omit<SiteMetadata, 'runtimeConfiguration'>
-	>
+	initialMetadata: {
+		name: string;
+	} & Partial<Omit<SiteMetadata, 'runtimeConfiguration'>>
 ): Promise<SiteMetadata> {
 	const { name, originalBlueprint, ...remainingMetadata } = initialMetadata;
 
diff --git a/packages/playground/website/src/lib/state/redux/persist-temporary-site.ts b/packages/playground/website/src/lib/state/redux/persist-temporary-site.ts
index 64611e58d3..187fb33591 100644
--- a/packages/playground/website/src/lib/state/redux/persist-temporary-site.ts
+++ b/packages/playground/website/src/lib/state/redux/persist-temporary-site.ts
@@ -163,6 +163,9 @@ export function persistTemporarySite(
 				slug: siteSlug,
 				changes: {
 					storage: storageType,
+					// Reset the created date. Mental model: From the perspective of
+					// the storage backend, the site was just created.
+					whenCreated: Date.now(),
 				},
 			})
 		);
diff --git a/packages/playground/website/src/lib/state/redux/slice-sites.ts b/packages/playground/website/src/lib/state/redux/slice-sites.ts
index 5d8a3c0584..2f47417a95 100644
--- a/packages/playground/website/src/lib/state/redux/slice-sites.ts
+++ b/packages/playground/website/src/lib/state/redux/slice-sites.ts
@@ -4,7 +4,7 @@ import {
 	PayloadAction,
 	createSelector,
 } from '@reduxjs/toolkit';
-import { SiteMetadata } from '../../site-metadata';
+import { createSiteMetadata, SiteMetadata } from '../../site-metadata';
 import {
 	selectActiveSite,
 	PlaygroundDispatch,
@@ -12,6 +12,7 @@ import {
 	setActiveSite,
 } from './store';
 import { opfsSiteStorage } from '../opfs/opfs-site-storage';
+import { randomSiteName } from './random-site-name';
 
 /**
  * The Site model used to represent a site within Playground.
@@ -144,6 +145,9 @@ export function updateSite({
 		dispatch: PlaygroundDispatch,
 		getState: () => PlaygroundReduxState
 	) => {
+		if ('storage' in changes) {
+			throw new Error('Cannot update storage for a site.');
+		}
 		dispatch(
 			sitesSlice.actions.updateSite({
 				id: slug,
@@ -171,9 +175,12 @@ export function addSite(siteInfo: SiteInfo) {
 		dispatch: PlaygroundDispatch,
 		getState: () => PlaygroundReduxState
 	) => {
-		if (siteInfo.metadata.storage !== 'none') {
-			await opfsSiteStorage?.create(siteInfo.slug, siteInfo.metadata);
+		if (siteInfo.metadata.storage === 'none') {
+			throw new Error(
+				'Cannot add a temporary site. Use setTemporarySiteSpec instead.'
+			);
 		}
+		await opfsSiteStorage?.create(siteInfo.slug, siteInfo.metadata);
 		dispatch(sitesSlice.actions.addSite(siteInfo));
 	};
 }
@@ -191,9 +198,10 @@ export function removeSite(slug: string) {
 	) => {
 		const activeSite = selectActiveSite(getState());
 		const siteInfo = selectSiteBySlug(getState(), slug);
-		if (siteInfo.metadata.storage !== 'none') {
-			await opfsSiteStorage?.delete(siteInfo.slug);
+		if (siteInfo.metadata.storage === 'none') {
+			throw new Error('Cannot remove a temporary site.');
 		}
+		await opfsSiteStorage?.delete(siteInfo.slug);
 		dispatch(sitesSlice.actions.removeSite(siteInfo.slug));
 
 		// Select the most recently created site
@@ -206,6 +214,57 @@ export function removeSite(slug: string) {
 	};
 }
 
+/**
+ * Creates a new site in the OPFS and in the redux state.
+ *
+ * @param siteInfo The site info to add.
+ * @returns
+ */
+export function setTemporarySiteSpec(
+	siteInfo: Omit<Partial<SiteInfo>, 'metadata'> & {
+		metadata: Partial<SiteMetadata>;
+	}
+) {
+	return async (
+		dispatch: PlaygroundDispatch,
+		getState: () => PlaygroundReduxState
+	) => {
+		const currentTemporarySite = selectTemporarySite(getState());
+		if (currentTemporarySite) {
+			// If the current temporary site is the same as the site we're setting,
+			// then we don't need to create a new site.
+			if (
+				JSON.stringify(currentTemporarySite.originalUrlParams) ===
+				JSON.stringify(siteInfo.originalUrlParams)
+			) {
+				return currentTemporarySite;
+			}
+		}
+
+		const sites = getState().sites.entities;
+
+		// First, delete any existing temporary sites
+		for (const site of Object.values(sites)) {
+			if (site.metadata.storage === 'none') {
+				dispatch(sitesSlice.actions.removeSite(site.slug));
+			}
+		}
+
+		// Then create a new temporary site
+		const siteName = siteInfo.metadata.name || randomSiteName();
+		const newSiteInfo = {
+			...siteInfo,
+			slug: deriveSlugFromSiteName(siteName),
+			metadata: await createSiteMetadata({
+				...siteInfo.metadata,
+				name: siteName,
+				storage: 'none' as const,
+			}),
+		};
+		dispatch(sitesSlice.actions.addSite(newSiteInfo));
+		return newSiteInfo;
+	};
+}
 export const { setLoadingState } = sitesSlice.actions;
 
 export const {
@@ -225,6 +284,13 @@ export const selectSortedSites = createSelector(
 		)
 );
 
+export const selectTemporarySite = createSelector(
+	[selectAllSites],
+	(sites: SiteInfo[]) => {
+		return sites.find((site) => site.metadata.storage === 'none');
+	}
+);
+
 export const selectTemporarySites = createSelector(
 	[selectAllSites],
 	(sites: SiteInfo[]) => {
diff --git a/packages/playground/website/src/lib/state/url/router.ts b/packages/playground/website/src/lib/state/url/router.ts
index 1257f601ba..ce180dd9f8 100644
--- a/packages/playground/website/src/lib/state/url/router.ts
+++ b/packages/playground/website/src/lib/state/url/router.ts
@@ -55,13 +55,19 @@ export class PlaygroundRoute {
 		} = {},
 		baseUrl: string = window.location.href
 	) {
-		const { query, hash } = config;
+		const query =
+			(config.query as Record<string, string | undefined>) || {};
 		return updateUrl(
 			baseUrl,
 			{
-				searchParams:
-					(query as Record<string, string | undefined>) || {},
-				hash,
+				searchParams: {
+					...query,
+					// Ensure a part of the URL is unique so we can still
+					// reload the temporary site even if its configuration
+					// hasn't changed.
+					random: Math.random().toString(36).substring(2, 15),
+				},
+				hash: config.hash,
 			},
 			'replace'
 		);