[Website] Add error notices and delete confirmation modal to site management by bgrgicak · Pull Request #3454 · WordPress/wordpress-playground

bgrgicak · 2026-04-01T19:50:10Z

Motivation for the change, related issues

Follow-up to PR feedback on #3401. The PlaygroundSitesAPI methods throw descriptive errors for MCP consumers, but UI components were silently swallowing them. Additionally, site deletion used window.confirm, which is inconsistent with the rest of the modal-based UI and blocks the main thread.

Implementation details

Error notices in modals

Rename modal: catches errors from sitesAPI.rename() and displays them in a <Notice> component.
Save modal: surfaces the actual error message (instead of a generic string) and moves the error notice above the action buttons for visibility.
Delete modal (new): catches errors from sitesAPI.delete() and displays them inline.

Delete confirmation modal

Replaces window.confirm with a new DeleteSiteModal component, consistent with the existing rename/save modal pattern.
Adds DELETE_SITE modal slug and siteSlugToDelete UI state to the Redux store.
Both the site info panel and saved playgrounds overlay now dispatch the modal instead of calling window.confirm.

API documentation

Adds JSDoc comments with @param, @returns, and @throws tags to every method on the PlaygroundSitesAPI interface.

Minor cleanups

Inlines getActiveSiteOrThrow — each call site now checks and throws with a context-specific message ("No active site selected").
persistTemporarySite now lets showDirectoryPicker errors propagate instead of silently returning, so callers can handle cancellation.
Removes post-persist storage === 'none' safety-net checks that are no longer needed.

Testing Instructions

In save-site-modal/index.tsx, add throw new Error('test') before the persistTemporarySite call in handleSubmit
Open the Playground website and try saving a temporary site — confirm the error appears as a notice inside the modal
Repeat for rename-site-modal/index.tsx (before sitesAPI.rename()) and delete-site-modal/index.tsx (before sitesAPI.delete())
Remove the temporary throw statements
Save, rename, and delete a site — confirm each operation succeeds and the modal closes

…umers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

This PR improves site-management UX by surfacing API errors inside modals and replacing blocking window.confirm deletion with a dedicated modal flow.

Changes:

Add inline error notices to rename/save/delete site modals so API errors aren’t silently swallowed.
Replace window.confirm with a new DeleteSiteModal and Redux UI state to track which site is being deleted.
Add JSDoc (@param, @returns, @throws) documentation across the PlaygroundSitesAPI interface.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/playground/website/src/lib/state/redux/slice-ui.ts	Adds `DELETE_SITE` modal slug and `siteSlugToDelete` UI state/action to support delete modal flow.
packages/playground/website/src/lib/state/redux/site-management-api-middleware.ts	Adds API JSDoc and updates error/guard behavior for active-site operations and deletion messaging.
packages/playground/website/src/lib/state/redux/persist-temporary-site.ts	Lets directory picker errors propagate so callers can show cancellation/errors in UI.
packages/playground/website/src/components/site-manager/site-info-panel/index.tsx	Switches delete action from `window.confirm` + API call to opening the delete modal with selected slug.
packages/playground/website/src/components/saved-playgrounds-overlay/index.tsx	Switches delete action to open delete modal (instead of confirming + calling API directly).
packages/playground/website/src/components/save-site-modal/index.tsx	Displays real error messages via `<Notice>` and moves error notice above action buttons.
packages/playground/website/src/components/rename-site-modal/index.tsx	Shows rename errors inline via `<Notice>` and unifies form layout via shared modal form CSS.
packages/playground/website/src/components/modal/style.module.css	Adds shared `.modal-form` styling for consistent modal form layout.
packages/playground/website/src/components/layout/index.tsx	Wires `DELETE_SITE` slug to render the new `DeleteSiteModal`.
packages/playground/website/src/components/delete-site-modal/index.tsx	Introduces a delete confirmation modal with inline error handling.

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

Copilot · 2026-04-01T21:00:20Z

+	const handleDeleteSite = (site: SiteInfo, closeMenu: () => void) => {
+		dispatch(setSiteSlugToDelete(site.slug));
+		modalDispatch(setActiveModal(modalSlugs.DELETE_SITE));
+		closeMenu();
 	};


Deletion modal state is being split across two dispatchers (dispatch vs modalDispatch). If these target different Redux stores/providers, the modal can open without ui.siteSlugToDelete set (or vice versa), causing the UI to render no modal content and leaving activeModal stuck. Use the same dispatcher for both setSiteSlugToDelete(...) and setActiveModal(...) so the slug and modal state are always updated atomically in the same store.

@bgrgicak Valid point for consideration? Thoughts? Not a blocker of course.

If these target different Redux stores/providers, the modal can open without ui.siteSlugToDelete set (or vice versa)

Both dispatches use the same store.

Copilot · 2026-04-01T21:00:21Z

+	if (!site || site.metadata.storage === 'none') {
+		return null;
+	}


When activeModal is DELETE_SITE but the selected site is missing (e.g., stale slug, deleted elsewhere, or store mismatch), returning null renders no modal while leaving the modal route/state active. This can strand users with modal=delete-site in the URL and no visible way to close it. Instead of returning null, proactively close/reset the modal state (e.g., via an effect) or render a minimal modal that explains the issue and offers a close button.

@bgrgicak This one too?

Add useEffect to handle unexisting site deletion modal state

When the DELETE_SITE modal is active but the target site no longer exists (e.g. stale URL), dispatch closeModal actions so the URL param is cleaned up. Also remove the storage === 'none' guard since both callers already prevent temporary sites from reaching this modal. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

These modals require Redux state (siteSlugToDelete / siteSlugToRename) that is not persisted in the URL, so restoring them from a stale URL param would silently show nothing. Exclude them like save-site and remove the now-unnecessary cleanup effect from DeleteSiteModal. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ashfame

Changeset looks good. I haven't personally tested it yet. Plan to do tomorrow, but just in case if this falls off the radar, feel free to merge. Hence, approving!

bgrgicak and others added 7 commits March 31, 2026 22:23

Inline getActiveSiteOrThrow

d8530d4

Improve error messages to be context-neutral for both UI and MCP cons…

3fd14d9

…umers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add JSDoc comments to PlaygroundSitesAPI

ad1937c

Make persistTemporarySite throw on directory picker cancellation

0b0a92a

Add rename error UI notice

f7c675e

Add delete site confirmation modal to replace window.confirm

a7a8cd6

Add save error UI notice

e3ebe12

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

bgrgicak self-assigned this Apr 1, 2026

bgrgicak added [Type] Enhancement New feature or request [Aspect] Website [Type] Developer Documentation Documentation for developers [Package][@wp-playground] Website labels Apr 1, 2026

Use Notice component in save modal

6dd8960

bgrgicak mentioned this pull request Apr 1, 2026

[Website] Centralized site management API and expose as window.playgroundSites #3401

Merged

bgrgicak marked this pull request as ready for review April 1, 2026 20:58

bgrgicak requested review from a team, adamziel, ashfame and Copilot April 1, 2026 20:58

Copilot AI reviewed Apr 1, 2026

View reviewed changes

bgrgicak and others added 3 commits April 7, 2026 11:49

Merge branch 'trunk' into update/sites-api-feedback

b0890f9

ashfame approved these changes Apr 15, 2026

View reviewed changes

Add useEffect to handle unexisting site deletion modal state

7684980

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Website] Add error notices and delete confirmation modal to site management#3454

[Website] Add error notices and delete confirmation modal to site management#3454
bgrgicak wants to merge 12 commits intotrunkfrom
update/sites-api-feedback

bgrgicak commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

ashfame Apr 15, 2026

Uh oh!

bgrgicak Apr 16, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

ashfame Apr 15, 2026

Uh oh!

bgrgicak Apr 16, 2026

Uh oh!

Uh oh!

ashfame left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

bgrgicak commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation for the change, related issues

Implementation details

Error notices in modals

Delete confirmation modal

API documentation

Minor cleanups

Testing Instructions

Testing Instructions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

ashfame Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

bgrgicak Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

ashfame Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

bgrgicak Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ashfame left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bgrgicak commented Apr 1, 2026 •

edited

Loading