Skip to content

Add browser refresh confirmation for temporary sites #2561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Add browser refresh confirmation for temporary sites #2561

wants to merge 3 commits into from
+69 −1

Conversation

jnealey88
Copy link
Contributor

@jnealey88 jnealey88 commented Aug 26, 2025 •
edited
Loading

Summary

Fixes #81

This PR implements a browser confirmation dialog that warns users before they refresh or leave the page when using a temporary Playground site, preventing accidental data loss.

Changes

  • Added browserConfirmationMiddleware in slice-ui.ts that listens for the beforeunload event
  • The middleware checks if the active site is temporary (storage type is 'none')
  • Shows a browser-native confirmation dialog only for temporary sites
  • Registered the new middleware in the Redux store

Test Plan

  1. Open WordPress Playground and create a temporary site
  2. Make some changes in the WordPress admin or editor
  3. Try to refresh the page or navigate away - you should see a confirmation dialog
  4. Click "Cancel" to stay on the page, or "Leave" to proceed with the refresh/navigation
  5. Save the site to make it permanent
  6. Try to refresh again - no confirmation should appear for saved sites

Screenshots

Screenshot 2025-08-26 at 2 36 02 PM

@jnealey88
Add browser refresh confirmation for temporary sites (fixes WordPress#81
c1e4cb6 
)

Implements a beforeunload event handler that warns users when they attempt to
leave or refresh the page while using a temporary Playground site. This prevents
accidental data loss by showing a browser confirmation dialog.

Changes:
- Add browserConfirmationMiddleware to handle beforeunload events
- Check if the active site is temporary (storage === 'none')
- Show confirmation only for temporary sites, not saved ones
- Register middleware in the Redux store
@jnealey88
Simplify beforeunload handler
766bf59 
Remove unnecessary comments and custom message strings. The handler
now simply triggers the browser's confirmation dialog for temporary sites.
@adamziel adamziel mentioned this pull request Aug 28, 2025
Merged
adamziel
adamziel reviewed Aug 28, 2025
View reviewed changes
packages/playground/website/src/lib/state/redux/slice-ui.ts Outdated
const state = store.getState() as any;
// Access the active site directly from state structure
const activeSiteSlug = state.ui?.activeSite?.slug;
const activeSite = activeSiteSlug
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note the temporary site might still be opened in the background while a persisted site is also open and active. I'm not sure if that's something we need to worry about here but I just wanted to highlight it.

@adamziel
Copy link
Collaborator

I wonder what happens when we have unsaved changes in the editor and then attempt to close the tab. Normally, the editor would try to display a confirmation dialog. What would the user see? One dialog? Or two dialogs?

@adamziel
Copy link
Collaborator

Also, I wanted to surface this comment from @dmsnell:

I like the idea of warning people before they lose content, while at the same time I wonder about the need because part of what makes the Playground different is its ephemerality.

In the patch there's no message on the unload handler. I worry that what this could do is unintentionally harass people who want to quickly open and close Playground windows, people who aren't concerned with saving data.

Do you have any ideas for:

  • communicating why we're trying to interrupt the page close
  • avoid running the unload handler if there's nothing to save

@jnealey88
Improve browser refresh confirmation based on feedback
f1fa479 
- Check ALL temporary sites, not just the active one
- Track user interactions to avoid warning on quick open/close
- Skip our confirmation if WordPress editor already has unsaved changes
- Only warn users who have actually interacted with the site

This addresses concerns about:
- Multiple sites being open (temporary in background)
- Double dialogs with WordPress editor
- Harassing users who quickly open/close without editing
@jnealey88
Copy link
Contributor Author

Perfect! I've updated PR #2561 with these improvements based on the feedback:

  1. Checks ALL temporary sites (not just the active one, handles background tabs)
  2. Tracks user interaction (warning only if the user actually interacts, prevents harassing those who just open/close)
  3. Avoids double dialogs (skips our warning if the editor will show its own, prevents duplicate confirmations)
  4. Smart warning (only appears when appropriate)

This addresses all main concerns and makes the warning logic much smarter. Thanks for the thoughtful review! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamziel adamziel adamziel left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Aspect] Website [Type] Enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Give user alert to confirm browser refresh
3 participants
@jnealey88 @adamziel @fellyph