[Website] Move Playground tools into the bottom Dock

[adamziel]

Replaces the former Playground with a Dock:

Rationale

The current Playground UI is fragmented between sidebars, modals, and popovers. Features are difficult to discover and difficult to find. Users are getting confused about why the browser bar is a part of the WP Admin bar, which it isn't but it certainly blends in:

The dock solves these problems by surfacing the tools in a single UI area. It covers a part of the Playground site, so it offers a few ways of getting it our of the way:

• It can be maximized, which then pushes the entire site above it.
• It can be dragged, literally moving it out of the way.
• It can be made smaller by hiding the tools.
• It can be dragged all the way to the side, where it becomes a small badge.

UI walkthroughs

Startup and Site details

Dock navigation and operation errors

Files in the Dock

Operation error above Playgrounds

Operation error retained above the Dock

Testing

Spend time using the Dock UI in your local Playground, open PRs to fix rough edges.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Moves the Playground website’s tool surfaces (new/playgrounds, editors, database/logs, export, navigation/status) into a unified bottom Dock, replacing the legacy toolbar/sidebar/overlay shells while preserving existing underlying implementations.

Changes:

• Introduces a new Dock component that routes all tool destinations through a single pane with support for mobile/full-width/collapsed/dragged/cornered layouts.
• Refactors Site Manager panels to stay mounted after first open (preserving drafts/editor state) and adds a new “Export” (share) pane.
• Updates Blueprint/file editor persistence behavior (debounced flush + serialized filesystem writes) and aligns Playwright/Cypress tests to the new UI.

Reviewed changes

Copilot reviewed 35 out of 35 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/playground/website/src/lib/state/redux/slice-ui.ts	Expands SiteManagerSection destinations and updates initial pane/overlay open behavior.
packages/playground/website/src/lib/hooks/use-debounced-callback.ts	Adds flushable debounced callback to support “save on unmount” behavior.
packages/playground/website/src/components/toolbar-buttons/download-as-zip.tsx	Exposes ZIP download helper for reuse in the Dock export pane.
packages/playground/website/src/components/site-manager/style.module.css	Adjusts site manager container styling for Dock-pane hosting.
packages/playground/website/src/components/site-manager/site-share-panel/style.module.css	New styles for the export/share pane.
packages/playground/website/src/components/site-manager/site-share-panel/index.tsx	New export pane (ZIP download, setup URL copy, GitHub export modal).
packages/playground/website/src/components/site-manager/site-info-panel/style.module.css	Updates visibility handling and small-screen header layout.
packages/playground/website/src/components/site-manager/site-info-panel/index.tsx	Keeps tool tabs mounted while routing visibility via Dock destination.
packages/playground/website/src/components/site-manager/index.tsx	Routes Dock destinations to saved-playgrounds, share, and site tools surfaces.
packages/playground/website/src/components/site-manager/blueprints-panel/style.module.css	Adjusts blueprint gallery panel styling for Dock layout.
packages/playground/website/src/components/site-manager/blueprints-panel/index.tsx	Simplifies Blueprint panel API and changes fetch URL.
packages/playground/website/src/components/saved-playgrounds-panel/style.module.css	Removes overlay-specific styles and adds Dock-pane container styles.
packages/playground/website/src/components/saved-playgrounds-panel/index.tsx	Reworks saved playgrounds UI to be a Dock pane; embeds blueprint gallery.
packages/playground/website/src/components/layout/style.module.css	Updates layout styling to integrate Dock and blurred/inert preview behavior.
packages/playground/website/src/components/layout/index.tsx	Replaces legacy chrome with Dock; manages inert/blur + click-to-dismiss surface.
packages/playground/website/src/components/dock/style.module.css	Adds Dock layout, pane transitions, disabled states, and mobile behavior.
packages/playground/website/src/components/dock/index.ts	Re-exports the new Dock component.
packages/playground/website/src/components/dock/dock.tsx	New Dock implementation (routing, focus, drag, collapse/full-width, overlay param cleanup).
packages/playground/website/src/components/dock/dock-toggle-pill.tsx	Disables/hints collapse while pane close is blocked.
packages/playground/website/src/components/dock/dock-item-button.tsx	Adds disabled support for Dock tool buttons.
packages/playground/website/src/components/browser-chrome/style.module.css	Removes obsolete toolbar styling now that Dock owns chrome.
packages/playground/website/src/components/browser-chrome/index.tsx	Reduces BrowserChrome to preview wrapper only.
packages/playground/website/src/components/blueprint-editor/blueprint-editor-filesystem.ts	Adds queued filesystem wrapper to prevent reads overtaking pending writes.
packages/playground/website/src/components/blueprint-editor/blueprint-editor-filesystem.spec.ts	Adds test ensuring remount waits for pending write.
packages/playground/website/src/components/blueprint-editor/SiteBlueprintBundleEditor.tsx	Uses queued filesystem wrapper (OPFS + in-memory) for editor correctness.
packages/playground/website/src/components/blueprint-editor/BlueprintBundleEditor.tsx	Flushes debounced writes on unmount and before running Blueprint.
packages/playground/website/src/components/address-bar/style.module.css	Improves focus-visible styling and input focus outline.
packages/playground/website/src/components/address-bar/index.tsx	Adds disabled state plumbing for address bar controls.
packages/playground/website/playwright/website-page.ts	Updates test helpers to operate via Dock destinations/panes.
packages/playground/website/playwright/e2e/website-ui.spec.ts	Adds Dock-focused E2E coverage and migrates existing tests from tabs/overlay.
packages/playground/website/playwright/e2e/vanilla-wordpress-screenshot.spec.ts	Updates screenshot path to renamed saved-playgrounds component directory.
packages/playground/website/playwright/e2e/opfs.spec.ts	Migrates OPFS flows to Dock destinations; updates ZIP import close-block behavior.
packages/playground/website/playwright/e2e/deployment.spec.ts	Updates offline-mode shell assertion to use Dock presence.
packages/playground/website/cypress/e2e/query-api.cy.ts	Migrates Cypress selectors/flows to Dock export/new tools.
packages/playground/components/src/PlaygroundFileEditor/playground-file-editor.tsx	Prevents hidden-but-mounted editor from stealing focus when Dock switches panes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 73 out of 73 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

packages/playground/website/src/components/saved-playgrounds-panel/index.tsx:1456

• This flow still uses a blocking alert for success messaging while other operations were migrated to Dock operation notices. Consider replacing the alert with the same non-blocking notice mechanism (e.g., setDockOperationNotice or an existing toast/notice component) to keep UX consistent and avoid interrupting keyboard focus/automation.

							onImported={(details) => {
								githubExportSession.recordImport(details);
								// eslint-disable-next-line no-alert
								alert(
									'Import finished! Your Playground has been updated.'
								);

[adamziel]

This is a large PR and some rough edges are expected. That being said, it's difficult to keep iterating within the confines of a single large PR and there aren't many more smaller changes I can carve out of this. I'll go ahead and merge, and then we'll resolve any papercuts one by one in follow-up PRs between now and the next playground.wordpress.net deployment on Tuesday July 21st.