[Website] Separate in-place and fresh-site settings actions

[adamziel]

What this does

This PR adds a choice to the Site Settings form. When you change the settings, you may either:

• Clone with the current Playground with new settings (when the current Playground is saved)
• Apply the new settings to the currently Playground (only applicable to PHP and networking and only if Playground is saved or autosaved)
• Discard the current Playground and start a new one with these settings (when the current Playground is unsaved)

Before this PR, you could only start a new Playground with the new settings. Sometimes that's useful, sometimes that's confusing. Ideally we'd offer a way to change any setting on the active site, but it's not really possible to seamlessly downgrade or upgrade the WordPress version on an existing site. The plugins, compatibility etc. will all likely be affected. Therefore, Playground does the next best thing and offers every viable option for every combination of choices.

Implementation

Saved and autosaved Playgrounds can apply PHP and network changes in place. WordPress version, language, and multisite changes switch the primary action to Create a fresh Playground while keeping the current site. Temporary Playgrounds get one destructive fresh-site action because they cannot be updated in place.

Runtime settings are written together, so a PHP-and-network submission triggers one metadata transition instead of two consecutive reboots. Submissions are serialized before React paints the pending state, failures stay with the form instead of overlapping its actions, and the action menu implements standard arrow/Home/End keyboard navigation.

Testing

• 13 focused Vitest tests for classification, pending submission, retry, and footer state
• 5 Chromium E2E flows covering temporary sites, keyboard behavior, atomic runtime updates, structural changes, same-task double clicks, and preservation of saved sites
• npm exec nx -- run-many -t lint typecheck -p playground-website --parallel=2

UI walkthrough

Apply runtime changes in place, then create a fresh Playground for a structural change — MP4 recording

Apply runtime changes to this Playground	Create a fresh Playground for structural changes

[Copilot]

Pull request overview

Note

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

Aligns Playground Site Details actions with what settings can actually change in-place vs requiring a fresh Playground, while improving submission handling, error UX, and keyboard accessibility.

Changes:

• Adds atomic runtime settings updates (PHP + networking) via a single metadata write.
• Introduces serialized settings submissions with per-form error retention and pending-state behavior.
• Implements split-button action footers + keyboard-navigable action menu, with updated Vitest and Playwright coverage.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/playground/website/src/lib/state/redux/site-management-api-middleware.ts	Adds updateRuntimeSettings to atomically persist PHP/network updates.
packages/playground/website/src/components/site-manager/site-settings-form/use-site-settings-submission.ts	Adds a hook to serialize submissions, track pending/error, and support retry.
packages/playground/website/src/components/site-manager/site-settings-form/use-site-settings-submission.spec.tsx	Adds Vitest coverage for serialization and retry behavior.
packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx	Extends footer rendering to accept a context callback and provides current values/defaults/submit handler.
packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx	Switches temporary site footer to the shared action footer + serialized submission handling.
packages/playground/website/src/components/site-manager/site-settings-form/style.module.css	Adds styling for split-button UI, action menu, and inline error placement.
packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx	Routes apply vs fresh-site actions through the new footer and runtime update API.
packages/playground/website/src/components/site-manager/site-settings-form/site-settings-actions.ts	Adds classification helpers for when a fresh Playground is required vs in-place apply.
packages/playground/website/src/components/site-manager/site-settings-form/site-settings-actions.spec.ts	Adds unit tests for action classification logic and messaging.
packages/playground/website/src/components/site-manager/site-settings-form/site-settings-action-footer.tsx	Introduces split-button + dropdown menu actions with keyboard navigation and error display.
packages/playground/website/src/components/site-manager/site-settings-form/site-settings-action-footer.spec.tsx	Adds Vitest coverage for pending/disabled state and error placement.
packages/playground/website/src/components/site-manager/site-settings-form/autosaved-site-settings-form.tsx	Splits autosaved behavior: apply runtime changes in-place, create fresh for structural changes.
packages/playground/website/playwright/e2e/website-ui.spec.ts	Updates E2E flows to validate new action behaviors and keyboard navigation.

---

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