google / google/site-kit-wp

Add the "What's new?" empty state

Open
#13,327 2 comments 0 reactions 0 assignees View on GitHub
P0 Team M Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 14h
Merged PRs (30d)
77

Description

## Feature Description

**What's new?** runs dry for two kinds of user: somebody who has just caught up — read, set up or dismissed everything that was new to them — and somebody who has been away long enough that the features they missed have aged out. Either way the tab has nothing to list, and today (#13321) that leaves them looking at a blank tab.

This issue gives them somewhere to go instead: a reassurance that they're up to date, and a route to the rest of the catalog, where the features they haven't set up yet are always listed.

For reference, see the [Empty state](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.33xfx558eblg) section in the design doc, and the [design](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=827-19376) in Figma.

---------------

_Do not alter or remove anything below. The following sections will be managed by moderators only._

## Acceptance criteria

- Where the **What's new?** tab (#13321) has nothing to list, the feature list is replaced by a centred empty state: an illustration, the heading *"You're up to date!"*, and the body *"There are no new feature announcements right now, but you can explore other features that will help you grow your site"*.
- The empty state is shown whatever the reason the tab is empty — nothing new has been released for this user, or everything that was new has been seen and aged out, dismissed, or set up.
- The empty state carries an **Explore features** button, which takes the user to the **All services and features** tab.
- The empty state stands in for the feature list only. Anything shown above the list is unaffected — in particular the auto-updates notice (#13323) still appears above the empty state where it applies.
- A new illustration asset is added for the empty state.
- The empty state matches the Figma design.

## Implementation Brief

- [ ] In `assets/js/components/feature-discovery/whats-new/WhatsNewTab.tsx`
- Export [the graphic asset](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=831-8159&t=gyJGalWnAypVxKdj-4) from Figma as an SVG from Figma. Lazily import with `lazy()`.
- Define an `onClickEmpty()` that navigates to `#/all-services` with `navigate = useNavigate()`.
- If `getWhatsNewFeatures()` (#13321) resolves to empty, in place of the features list:
- Render the SVG inside `` and ``, consistent with other SVGs.
- Render title as a ``.
- Render description as a `

`.
- Render "Explore features" as a ``.
- [ ] In `assets/sass/components/feature-discovery/_googlesitekit-whats-new.scss`
- Add styles for the empty state.

### Test Coverage

- Add coverage for `WhatsNewTab` to verify that the empty state is rendered if `getWhatsNewFeatures()` resolves as empty, and that the button navigates when clicked.
- Add VRT reference for the `WhatsNewTab` story with no features (#13321).

## QA Brief

-

## Changelog entry

-

Contributor guide

Open the contributing guide

Research direction

Start in assets/js/components/feature-discovery/whats-new/WhatsNewTab.tsx and review how other SVGs use lazy(), Suspense, and MediaErrorHandler. Add the empty-state behavior and navigation described in the acceptance criteria, then update assets/sass/components/feature-discovery/_googlesitekit-whats-new.scss. Add WhatsNewTab coverage for an empty result and button navigation, plus a no-features VRT reference.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.