Agentic UI: Site-creation onboarding redesign — umbrella (do not merge)#3797
Draft
shaunandrews wants to merge 24 commits into
Draft
Agentic UI: Site-creation onboarding redesign — umbrella (do not merge)#3797shaunandrews wants to merge 24 commits into
shaunandrews wants to merge 24 commits into
Conversation
The File > Add Site menu item (Cmd+N) and wp-studio://add-site blueprint deeplinks fired IPC events that only the legacy renderer listened for, so both were dead in the new UI. Subscribe to them through the connector and route into the onboarding flow, handing deep-linked blueprints to the configure step via a pending-blueprint slot. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Brings the redesigned Add Site look to the ui-classic onboarding flow: animated illustrations on the flow-picker cards, the interactive dot-grid backdrop, frosted-glass card treatment with brand hover states, and centered heading copy matching the desktop renderer. The import card is now a live drop target that jumps straight to the configure step, and the backup filename helpers are shared instead of duplicated per UI. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ector The create-site form accepted any string as a WordPress version. Fetch installable versions from the wordpress.org version-check API (same shared helper the desktop renderer uses) and render a select ordered latest > nightly/beta > stable. Falls back to the free-text input when the fetch fails so site creation never blocks offline, and drops blueprint-seeded versions that aren't installable, matching the desktop renderer. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…flow The gallery now matches the redesigned desktop experience: an Empty Site card with a Playground live preview, the curated featured trio with display names and pinned ordering, an Explore section with search across titles, excerpts, and categories, and Live Preview pills overlaid on card images. The curation rules (featured slugs, renames, excerpt overrides, order) move into @studio/common so the two UIs share one source of truth. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Ports the desktop renderer's pull-remote creation path: a fourth flow- picker card (disabled offline) leads to a new /onboarding/connect route with a WordPress.com sign-in view and a picker over syncable sites. On connect, Studio creates the local site without starting its server, persists the connection, kicks off a pull, and lands on the site view where the existing sync-activity indicator shows progress. The connector gains a skipStart create option (mapping to the main process' noStart) and a signup variant of authenticate. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
All four creation flows now announce '<name> site added.' to screen readers on success, matching the desktop renderer. Site names seeded from blueprints and backup filenames run through the shared find-available-name helper so a colliding name gets an incremented suffix instead of a path error the user has to resolve by hand. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ual review The classic UI's compact-density rule squashes every SVG to 16px icon size, collapsing the onboarding illustrations and the Empty Site glyph; add a data-keep-size escape hatch that defers back to the SVG's own width/height attributes. The onboarding layout also clipped the top of content taller than the viewport (the full blueprint gallery) because it centered with flex justify; switch to auto block margins inside a scrollable container so short pages stay centered and tall ones scroll. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ions, connect grid Four fixes from design review of the onboarding flow: - Actions now dock in a fixed bottom bar with a progressive-blur scrim (the desktop renderer's stepper treatment) instead of sitting inline in each form; sub-screens get a consistent Back button there too. - Content is properly centered in the viewport on every screen — a regression from the earlier overflow fix, which had moved centering to the wrong flex axis. Form pages now render as a centered narrow column with centered headings. - Route and step changes animate via the View Transitions API (fade and rise), restoring the stepped feel of the desktop renderer's Navigator. - Connect a site is a responsive grid of cards with live screenshot thumbnails, WP.com/Pressable and Staging badges, and search — matching the desktop site picker — instead of a plain text list. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…rm fixes, full connect list - The flow picker is back to three options: Build a new site now leads to the gallery (retitled 'Build a new site'), where Empty site hands off to the create form — blueprints are a choice within building, not a top-level path. The standalone blueprint card and its illustration are gone, and the create form backs into the gallery. - The create form's local-path field and inline errors used hardcoded light colors; they now follow the themed --wp-components vars like their sibling inputs. Input prefix icons (the email envelope) inherit the foreground instead of defaulting to black, and unchecked checkboxes use the themed input background instead of glowing white in dark mode. - Connect a site lists every site on the account — non-syncable ones stay visible but disabled with a status label (Needs upgrade, Already connected, Unsupported...) instead of being silently filtered out, which made the list look mysteriously short. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The connect screen now matches the desktop renderer's picker: syncable sites lead, followed by explained groups — Already connected, Enable hosting features first (with an Enable link to wordpress.com hosting features), Upgrade your plan to sync (with an Upgrade plan link and the site's current plan badge), and Not available for sync. Thumbnails carry WP.com/Pressable and Production/Staging environment chips, and the header gains the Refresh list and Supported sites helper links. The list itself was a fraction of the account: the shared fetchSyncableSites hit the unpaginated v1.2 /me/sites endpoint, which silently returns a subset (7 of 70 sites on a real account). It now drains the paginated v1.3 endpoint with the same parameters the desktop renderer's site picker uses, which also benefits the CLI's push/pull site lookups. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds breathing room above the heading, fits all four starter cards (Empty site + the curated trio) on a single row — folding to a 2x2 grid on narrow windows — and collapses Explore more blueprints behind an accordion toggle, closed by default with the search field appearing on expand. With the long tail tucked away, the whole screen fits in one viewport. Grid pages get a little more width (820 to 960) to keep the four-up cards comfortable. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…dion The Live Preview pill becomes a compact eye-icon button with a 'View a preview in your browser' tooltip, matching how previews read elsewhere. Upload your own moves inside the Explore more blueprints accordion since it belongs to the blueprints section, and the accordion now animates open and closed (a 0fr-to-1fr grid-row slide with a fade; content stays mounted and inert while collapsed so both directions animate). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Below 900px the three option cards stack vertically and each switches to a horizontal layout — illustration on the left, text on the right — instead of squeezing three columns. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The site-creation flow fills the window with no title bar, leaving nothing to drag the window by. Invisible strips along the top, left, and bottom edges now act as the drag region — a phantom title bar without the chrome. A full-background drag region would have been simpler but the window manager consumes mouse events over drag areas, which froze the interactive dot grid; the strips keep the background alive for it. The right edge stays free for the scroll bar, and interactive elements overlapping a strip (the close button) remain clickable via the global no-drag rule. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Ports the desktop renderer's remaining count-based behaviors: a single- site account gets a 'Connect your site' heading with one comfortable pre-selected card and the helper links beneath it (no search header); an empty account gets a prompt to create a new WordPress.com site, opening the same wordpress.com flow as the desktop Create button; and the grid uses auto-fit so a handful of sites renders larger cards instead of empty columns. Search already only appeared past five sites. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The mouse's back/forward side buttons now drive router history across the classic UI — Electron doesn't translate them into navigation the way browsers do. The Enable/Upgrade overlays on the Connect picker get a proper scrim (40% black, no blur, so the site underneath stays recognizable) to keep the buttons legible over light and busy thumbnails. And the picker gains a 'full' width variant (capped at 1360px) plus a higher column minimum on large windows, so thumbnails grow with the viewport instead of just adding columns. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
shaunandrews
changed the title
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
1 participant
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.
Important
Do not merge. Do not review code here. This PR exists so the complete experience can be checked out and tested from a single branch. All review and merging happens on the split PRs below — fixes land there, never here.
The plan
This redesign ships as ten small PRs in three waves. Each wave is based on trunk once the wave before it has merged; until then, later waves are drafts based on an integration branch so their diffs stay focused.
Wave 1 — independent, ready for review now
Wave 2 — the flows (drafts on
site-creation-foundationuntil wave 1 merges)Wave 3 — the capstone (draft on
site-creation-flowsuntil wave 2 merges)Lifecycle
How AI was used in this PR
The feature was designed and built by Shaun on this exploration branch with Claude Code assistance; the split into the PRs above was prepared with Claude Code. Each split branch was typechecked independently.
Testing the whole experience
workbench/site-creationand runnpm start.Screenshots