Build the "What's new?" tab

[techanvil]

Feature Description

What's new? is the tab a returning user opens the hub on: the features released since they last caught up, that they haven't already set up or dismissed. It's also what the hub's new-feature indicators point at, so visiting it is what clears them.

This issue builds the tab — the list, its order, and the marking as seen that visiting it performs. The call to action on each card (#13322), the notice that sits above the list (#13323), the CTA shown when there's nothing to list (#13327), and the menu behind each card's dismiss control (#13357) are each their own issue.

For reference, see the The "What's new?" tab and Newness & per-user state sections in the design doc, and the What's new? design in Figma.

---

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

Acceptance criteria

• The What's new? tab lists the features that are currently new to the user (Implement the newness model & derived selectors #13246), each as a feature card (Build FeatureCard + EffortIndicator (Storybook) #13320). A feature they have dismissed, have already set up, or which is no longer new to them, isn't listed.
• The features the user hasn't seen yet are listed first, then the rest. Within each of those, the most recently released feature comes first, and features released in the same version keep their catalog order.
• Viewing the tab marks every feature it lists as seen.
• Each feature listed keeps its red dot for a few seconds after the tab is shown and then loses it, so the user can see which of the features were new to them. On a later visit, a feature already marked seen shows no dot.
  • The dot is shown for three seconds, and then briefly fades out.
• Marking a feature seen is also what starts it ageing out of the tab: it stays listed for a further 28 days.
• Each card in the list carries its dismiss (X) control (Build FeatureCard + EffortIndicator (Storybook) #13320). What that control does is covered by Add the dismiss-with-feedback menu #13357.
• Where there's nothing to list, the user sees an empty tab. This is a placeholder state: the CTA shown in the empty tab is covered by Add the "What's new?" empty state #13327.
• The tab matches the Figma design.

Implementation Brief

• Create assets/js/components/feature-discovery/whats-new/WhatsNewTab.tsx
  • Use whatsNewFeatures = select( CORE_FEATURE_DISCOVERY ).getWhatsNewFeatures() to get features to list.
  • Use state to track features: Feature[]|undefined.
  • In an effect, if features is undefined and whatsNewFeatures isn't, call setFeatures( [...whatsNewFeatures] ), to preserve the list with its initial sorting. Then call dispatch( CORE_FEATURE_DISCOVERY ).markFeaturesSeen() with the slugs of these features.
  • Render each features as a FeatureListItem (Build FeatureCard + EffortIndicator (Storybook) #13320), passing isDismissible and hideNewBadge.
  • Leave space to render an empty state if there are no features (Add the "What's new?" empty state #13327).
• In assets/js/components/feature-discovery/FeatureDiscoveryContent.tsx
  • Render <WhatsNewTab /> as the content for the What's New tab if it hasn't been already.
• Create assets/sass/components/feature-discovery/_googlesitekit-whats-new.scss
  • If necessary. Styles specific to this tab may not be needed yet, but styles for the empty state will go here (Add the "What's new?" empty state #13327).

Test Coverage

• Add coverage for WhatsNewTab, testing that listed features are marked as seen and that doing so doesn't reorder the list.
• Add stories for the page with features, with features including unread features, and with no features. Enable and commit VRT references for the stories with features. Leave the empty story VRT for Add the "What's new?" empty state #13327.

QA Brief

Each step below builds on the one before it, so work through them in order.

Setup

• Enable the featureDiscoveryHub feature flag via the Site Kit Tester plugin's feature flag controls. A new Add Features item appears in the Site Kit menu.

• On the Site Kit Tester settings screen, set Force initial Site Kit plugin version to 1.100.0. This controls which features count as "new": a feature qualifies when its released-in version is at or above one minor version below this. Without it the tab is empty on most installs, because most features predate your real install version.

• (optional). Clear any newness state left from earlier testing, so you start with everything unseen (swap 123 for your user ID or login):

  wp user meta delete 123 wp_googlesitekitpersistent_expirable_items

• Go to Site Kit → Add Features (/wp-admin/admin.php?page=googlesitekit-features). It opens on the What's new? tab.

Note: do not use the admin bar's Using Site Kit: x.x.x switcher — that installs a different build of the plugin and has nothing to do with newness. How many features you see depends on which modules you have connected, since anything already set up, or whose prerequisite modules aren't connected, is filtered out regardless of newness.

Step 1 — Everything unseen

You should see: every listed feature carrying a red dot, ordered most recently released first. After about three seconds, the dots fade out.

Step 2 — Everything seen

Do: reload the page.

You should see: the same features, in the same order, now with no dots. They stay listed because being seen starts a 28-day countdown rather than removing them.

Step 3 — A newly unseen feature (sorting)

Do: lower Force initial Site Kit plugin version to 1.84.0 and reload.

You should see: exactly one more feature — "Collaborate with other team members by sharing dashboard access" — now at the top of the list with a red dot, above all the features you have already seen. That is the unseen-first rule.

Do: reload again.

You should see: the same feature still listed, now without a dot, and moved to the bottom of the list, because it is the oldest of the seen group.

Step 4 — Ageing out

A seen feature drops off the tab 28 days later. To reach that state without waiting, re-stamp the listed features with a timer that expires in one second. Run this in the browser console on the Add Features page:

const { select, dispatch } = googlesitekit.data;
const slugs = select( 'core/feature-discovery' ).getWhatsNewFeatures().map( ( f ) => `feature-discovery-new-${ f.slug }` );
dispatch( 'core/user' ).setExpirableItemTimers( slugs.map( ( slug ) => ( { slug, expiresInSeconds: 1 } ) ) );

Do: wait two seconds, then reload.

You should see: every feature gone from the tab, leaving the empty state — a plain placeholder line for now. This writes through the real endpoint, so it survives refreshes.

Step 5 — Back to the start

Do: run the reset from setup step 3 again, then reload.

You should see: every feature back in the list, unseen, with dots — confirming the reset works and returning you to the Step 1 state.

Expected placeholders (not bugs)

• Each card's CTA reads <FeatureCTA /> — Build FeatureCTA with gating rules #13322.
• The dismiss (X) control renders but does nothing when clicked — Add the dismiss-with-feedback menu #13357.
• The empty tab shows placeholder text rather than an icon, copy and CTA — Add the "What's new?" empty state #13327.
• The notice above the list is not present — Surface the auto-updates CTA notice in the hub #13323.

Changelog entry

• Build the Feature Discovery Hub's "What's new?" tab.

[JakePT]

Ready for IBR, just flagging a couple of things:

• This assumes FeatureListItem is implemented by Build FeatureCard + EffortIndicator (Storybook) #13320, which is implied by the design doc, but I don't see anything about it in the IB for that issue.
• As per the design doc I'm handling the unread dot timeout here, but I think it might make more sense for the card to own that. This component could call markFeaturesSeen, but the card could own the dot by using an effect and internal state to keep the dot visible for a few seconds whenever isFeatureUnread() changes.

[techanvil]

Thanks @JakePT - both good points, and I've updated the IB for #13320 to address them.

We can assume FeatureListItem will exist for this issue, and the unread dot's hold/fade logic will be handled by FeatureCard.