Boost: modernize into a unified wp-admin product (four-PR sequence)

[keoshi]

Goal

Modernize Jetpack Boost into a unified wp-admin destination with two tabs:

1. Overview (default) — read-only at-a-glance: Performance scores (Overall / Desktop / Mobile) and a Historical performance line chart for Desktop and Mobile.
2. Settings — write surface for every module toggle and per-module control currently on the Boost dashboard, ported onto WPDS Card primitives and grouped by the categories shown in the design (Code loading optimization / Image loading optimization / Image CDN / Image guide / Cornerstone pages).

After this work the in-product Recommendations list and the per-module toggle list that live on the current Boost dashboard retire. The standalone sub-pages — Cornerstone pages editor, Critical CSS Advanced, Cache Debug Log, Purchase success, Getting started — stay as separate routes for now and are linked from inside Settings cards. Cache Debug Log and Critical CSS Advanced now share the same WPDS breadcrumb shell as the Settings tab (see the sub-pages refresh PR below); deeper consolidation into drawers/modals is a follow-up.

This umbrella adapts the cadence used for the Newsletter modernization umbrella (#48530), compressed to four PRs because Boost has a simpler IA.

Approach

Four small, self-contained PRs. Each builds on the previous one. Everything from PR 1 onward is gated behind a feature filter (rsm_jetpack_ui_modernization_boost) — the legacy Boost dashboard renders unchanged unless a site explicitly opts in. The final PR flips the default and retires the legacy surface.

This mirrors the cadence of the Newsletter modernization umbrella (#48530) and the VideoPress wp-build scaffold (#48494).

PRs

• PR 1 (#48719) — wp-build scaffold + Page/router shell + tabs UI behind feature flag. Add wp-build alongside webpack in projects/plugins/boost/; introduce rsm_jetpack_ui_modernization_boost filter + helpers; branched menu render in app/admin/class-admin.php; legacy enqueue short-circuit; Page from @wordpress/admin-ui + QueryClientProvider; @wordpress/route driving ?tab=; persistent Tabs.Root from @wordpress/ui with Overview (default) and Settings. Both tabs render placeholders. No content, no chart, no toggles yet.
• PR 2 (Boost: build the Overview tab on the modernization chassis #48726) — Overview tab behind flag. Performance scores: Overall / Desktop / Mobile cards backed by the existing speed-score feature. Historical performance line chart for Desktop + Mobile, backed by the existing performance-history feature. WPDS Card.Root / Card.Header / Card.Title / Card.Content from @wordpress/ui from the start.
• PR 3 (#48784) — Settings tab behind flag. Port the existing Boost module surface onto WPDS Cards grouped by the categories shown in the design. Settings scope = current code as source of truth; the design screenshot is illustrative, not exhaustive. Inline links retain the existing sub-page routes (Cornerstone editor, Critical CSS Advanced, Cache Debug Log).
  • Sub-pages refresh (#48798) — Companion to PR 3 that gives the two destinations the Settings cards link out to today (Cache Debug Log + Critical CSS Advanced) the same breadcrumb shell + WPDS Card patterns as the modernized Settings tab. New useEnterSubPage hook hides the chassis Page header + tab row via a body class while a sub-page is mounted, and resets the chassis body-slot scroll container on entry. Drops the nested BoostAdminPage wraps and the bespoke .panel / BackButton styling. Cache Debug Log gets a WPDS outline copy button; Critical CSS Advanced renders each recommendation in its own Card.Root.
• PR 4 (#48805) — Retire the modernization gate + legacy SettingsPage. Removes the rsm_jetpack_ui_modernization_boost filter, the legacy render_settings callback (and the #jb-admin-settings mount-point), and the bespoke SettingsPage shell (with its Tips + Support chrome). The chassis-only index.tsx entry now owns all five hash routes + the Tracks page_view wrapper. Dual-bundle architecture preserved — legacy webpack still owns Settings tab content because the browser-side Critical CSS generator depends on Node-only modules wp-build's esbuild can't polyfill. Deferred to small follow-ups: jetpack_boost_tab_view Tracks event (needs analytics wired into the chassis bundle), dropping the legacy webpack pipeline (blocked on a clean-css fork ticket), and an ARIA/RTL verification pass.

Test plan (per PR)

• Hard-reload wp-admin/admin.php?page=jetpack-boost with the filter OFF — legacy Boost dashboard is unchanged at every step.
• Add add_filter( 'rsm_jetpack_ui_modernization_boost', '__return_true' ); and reload — the new chassis renders, growing in capability PR-by-PR.
• Toggle the filter back off — legacy returns immediately, no cache clears needed.
• PR 4 removes the gate entirely and the legacy dashboard; the test plan there is the smoke test for the unified product.

Architecture decisions

• Where it lives. The unified product stays in projects/plugins/boost/. Menu slug remains jetpack-boost.
• Scaffolding source of truth. wp-build pipeline (alongside webpack until PR 4); Page from @wordpress/admin-ui; @wordpress/route for tabs; React Query; WP_Build_Polyfills; the boot-layout stage / inspector pattern.
• Tabs. Tabs from @wordpress/ui, route-driven via ?tab=, persistent Tabs.Root so the indicator slides.
• Separation of concerns. Overview is read-only (scores + chart). Settings is the write surface (toggles + sub-page links). The current Recommendations list and per-module toggle list retire in PR 4.
• Sub-pages stay as routes. Cornerstone-pages editor, Critical CSS Advanced, Cache Debug Log, Purchase success, Getting started keep their existing routes. Cache Debug Log and Critical CSS Advanced are refreshed in Boost: refresh Settings sub-pages (Cache log + Critical CSS advanced) #48798 to share the modernized breadcrumb shell. Drawer/modal consolidation is still a follow-up.
• Settings scope = current code. Source of truth for what ships in Settings is the current Boost dashboard, grouped by the categories shown in the design.

Deferred

• "Run diagnostic" page-header action — defer to a later PR.
• My Jetpack Boost product card refresh — defer to a later PR.
• Sub-page consolidation into drawers/modals — defer to a later iteration.

Out of scope

• Restructuring module functionality (no behavior changes to Critical CSS, Page Cache, Minify, Image CDN, Image Guide, LCP, Cornerstone pages).
• Migrating REST endpoints.
• Adding new Boost features.
• Touching premium / upgrade flows.

References

• Newsletter modernization umbrella (cadence template): Newsletter: modernize into a unified wp-admin product (six-PR sequence) #48530
• VideoPress wp-build scaffold (PR 1 cadence model): #48494
• Newsletter PR 1 (scaffold reference): #48532
• Newsletter PR 2 (Page shell reference): #48574
• WPDS Card / Tabs: @wordpress/ui

[keoshi]

PR 3 opened: #48728 (e506314). Stacked on PR 2 (#48726); will re-point base to trunk after PR 2 squash-merges.

[keoshi]

PR 3 IA rework pushed: cfc5bb013a on top of the parity build (e506314481). Section cards group modules per the design's IA — Cornerstone pages at top, LCP moves into the Cornerstone section, the Code loading / Image CDN configuration / Image guide sections each render as one card with multiple module rows.