A4A Proof of Concept: Resources Center v2 (UI only)

[jeffgolenski]

Do not merge.

Proof-of-concept for the Resources "Learn" page: stage navigation, product/content-type/audience filtering, search, resource cards, an in-portal preview modal, and consolidated "top resources" as a highlighted, labeled item within the filtered browse. UI-only, mock data, no backend.

Works for both https://agencies.automattic.com/resources-and-tools/learn & https://agencies-beta.automattic.com/resources/learn (which we're moving towards)

Linear project

Proposed Changes

A UI-only prototype of an enhanced browse experience for the Resources → Learn
page (/resources/learn). All content now lives in a single, filterable view.

• Stage navigation — a segmented control (All / Learn / Sell / Manage / Grow) as the primary browse axis.
• Filtering — Product, Content type, and Audience filters (via DataViews), combinable with the stage selection, with active-filter chips + reset.
• Search — filters cards by title + description.
• Resource cards — placeholder thumbnail, product, title, description, a content-type label + an audience label (Badge), and a Preview action.
• In-portal preview modal — opens a per-content-type placeholder preview (PDF/doc frame, slide frame, video-player box, rendered-text block) with a stub Download action; open/close/Esc/focus-trap handled by the shared Modal.
• Top resources, consolidated — the two static top-of-page sections were removed. "Top resource" is now a flag on individual items that renders a labeled Badge, a subtle blue highlight, and sorts those items first in every view (All and each filter).
• Mock data — ~24 static items spread across every product / stage / content type / audience live in browse-resources-data.ts. No backend or API wiring.

Reuses existing design-system components throughout (@automattic/ui Badge, @wordpress/dataviews, ToggleGroupControl, the dashboard Card, Modal, and layout primitives). The only new CSS is one small scoped module for the card layout + the top-resource highlight.

Screenshots

Why are these changes being made?

To communicate the intended direction for the Resources browse experience as something clickable rather than a written spec. It demonstrates filtering, search, card layout, the preview modal, and how "top resources" can be folded into one browse surface — a shared reference for design and engineering to react to.

Testing Instructions

Dashboard (A4A)

1. Run yarn start-dashboard (or the full A4A dev server) and open my.a4a.localhost:3000/resources/learn.
2. Toggle the stage segmented control and confirm the grid filters by stage.
3. Use the search box (title/description) and the Add filter menu (Product / Content type / Audience); confirm the chips + reset work and combine with the stage selection.
4. Confirm the 3 "Top resource" cards (blue highlight + label) appear first in All and in their respective stage filters.
5. Click a card / Preview and confirm the modal opens with a per-type placeholder preview and closes via the ✕, Esc, or Close.

The same shared components also render on the classic A4A Calypso page at /resources-and-tools/learn.

Screenshots

Notes / open items (POC)

• Design pass required — the highlight, badges, thumbnails, and preview placeholders are intentionally rough; they signal direction, not final visuals.
• Lands on both surfaces — the change is in the shared resource-center.tsx, so it affects both the new dashboard page and the current production A4A page. No feature flag yet — add one if prod should stay unchanged for now.
• Placeholder-only — no HubSpot File Manager / real files, no engagement tracking, no personalization; Download is a stub.
• "Top resource" badge reuses the info (blue) intent — the same as the audience badge — because Badge has no dedicated "featured" variant. A new variant would read better.
• Dead code — the previous static implementation (resource-section.tsx, the old resource-card.tsx, browse-all-resources.tsx, format-resources.tsx, and the use-* hooks) is now unused and would be removed in a real implementation.
• Data — the page is now fully mock-driven; the real agencyResourcesQuery is no longer rendered (the route loader still prefetches it).

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes? — N/A, UI-only POC
• Have you tested the feature in Simple, Atomic, and self-hosted Jetpack sites?
• Have you checked for TypeScript, React or other console errors?
• For UI changes, have you tested the affected components in dark mode? — uses theme tokens; not exhaustively verified
• Have you tested accessibility for your changes? — relies on the reused components' built-in keyboard/SR behavior
• Have you used memoizing on expensive computations?
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation? — new strings are placeholder POC copy
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label?

[github-actions]

WordPress.com

• Dashboard Live (direct link)

  https://calypso.live?image=registry.a8c.com/calypso/app:commit-76ee490eaef76566c69aa73184ff852bf4726f93&env=dashboard

• Calypso Live (/home) (direct link)

  https://calypso.live/home?image=registry.a8c.com/calypso/app:commit-76ee490eaef76566c69aa73184ff852bf4726f93

---

Automattic for Agencies

• Dashboard Live (direct link)

  https://calypso.live?image=registry.a8c.com/calypso/app:commit-76ee490eaef76566c69aa73184ff852bf4726f93&env=dashboard-a4a

• Automattic for Agencies Live (direct link)

  https://calypso.live?image=registry.a8c.com/calypso/app:commit-76ee490eaef76566c69aa73184ff852bf4726f93&env=a8c-for-agencies

---

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-76ee490eaef76566c69aa73184ff852bf4726f93&env=jetpack