[Website] Anchor the autosave nudge to the Playgrounds Dock button - #4096
Merged
Conversation
The "Recent autosave available" card used to float in the top-right corner, far from the Playgrounds button it talks about. Render it in a Popover anchored above the Dock with a caret pointing at the Playgrounds button instead. The Dock reports the button element through the existing nudge context, and only while the button is actually on screen — a collapsed or cornered Dock falls back to the old free-floating card. On phones the anchored card becomes a compact full-width sheet sitting right above the Dock's bottom bar, still pointing at the button. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
github-actions
Bot
added
[Package][@wp-playground] Website
[Aspect] Browser
[Aspect] Website
and removed
[Package][@wp-playground] Website
labels
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Moves the “Recent autosave available” restore nudge from a fixed top-right card to a Dock-anchored Popover callout (with a mobile-optimized sheet), while preserving the prior floating fallback when the Dock button isn’t available.
Changes:
- Extend
RecentAutosaveNudgeContextto carry an anchor element + setter in addition to visibility. - Render the nudge inside a
@wordpress/componentsPopoveranchored above the Dock/Playgrounds button, with fallback to the previous fixed position. - Update Dock to register/unregister the Playgrounds button element as the anchor, and adjust styling for Popover/mobile presentation.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/playground/website/src/components/ensure-playground-site/restore-autosave-nudge.module.css | Adds anchored Popover + fallback floating styles and mobile sheet tweaks. |
| packages/playground/website/src/components/ensure-playground-site/recent-autosave-nudge-context.tsx | Expands context from boolean to { visible, anchor, setAnchor } with helper hooks. |
| packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx | Anchors the nudge via a Popover with a virtual element tied to Dock geometry. |
| packages/playground/website/src/components/dock/dock.tsx | Captures the Playgrounds button ref and reports it to the nudge context only when visible. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Match the design mock: an eyebrow header with a dismiss button, the autosaved Playground's name and age behind a WordPress avatar tile, a full-width Restore autosave action, a snapshot disclaimer, and a "Don't notify me about autosaves" link. The former "Keep this Playground" button is gone — dismissing the callout (close button, outside click) keeps the new Playground, exactly as before. The card now anchors to the Playgrounds button itself instead of the Dock's top edge, with a caret grown from 14px to 32px pointing straight at the button, and a stronger shadow so the callout stands out from the page. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
On phones the callout spans the viewport with 1px gutters, so its shadow has no room to establish depth against the page content behind it. Add a passive scrim: it sits below the Dock so the Playgrounds button the caret points at keeps full contrast, and it ignores pointer events so a tap anywhere outside the card still dismisses the nudge. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
An open pane owns the screen — the whole screen on mobile — so the callout now waits for the pane to close instead of covering it. This also un-wedges Escape: the Dock lets any open popover consume Escape before closing a pane, but the nudge popover never consumes it, so a ?overlay=blueprints deep link could not be closed from the keyboard while the nudge was up. Caught by the Blueprint gallery e2e test. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A collapsed Dock hides the Playgrounds button, and the callout used to give up and float in the top-right corner. The save status pill (Autosaved/Saved/Unsaved) stays visible in the collapsed bar and is the autosave surface anyway, so the caret now points at it instead. Only a cornered Dock — which shows no anchor at all — keeps the floating fallback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Moves the "Recent autosave available" nudge from the top-right corner to a callout pointing straight at the Playgrounds Dock button — the place where autosaves actually live — and redesigns it as a compact card. The "Keep this Playground" button is gone: closing the callout with the × or clicking anywhere outside keeps the new Playground, exactly like that button did.
On phones the callout becomes a full-width sheet directly above the Dock bar. Its 1px gutters leave a drop shadow no room to read, so a passive scrim dims the page instead — it sits below the Dock so the Playgrounds button keeps full contrast, and taps pass through it, so tapping anywhere outside still dismisses the callout.
Screencasts:
Testing
Open Playground, wait for the status to show Autosaved, then reload. The callout should point at the Playgrounds button. Restore autosave switches to the autosaved Playground; × or a click outside keeps the new one. Collapse the Dock while the page is still booting and the caret points at the save status pill instead; a cornered Dock falls back to a top-right floating card. Repeat at a phone width: a full-width sheet over a dimmed page.
The images above live on the orphan branch
adamziel/anchor-autosave-nudge-to-dock-assets— do not merge or delete it while this PR is open.