My Jetpack: Render notices with the WordPress design system Notice by CGastrell · Pull Request #52290 · Automattic/jetpack

CGastrell · 2026-09-14T17:07:19Z

Proposed changes

Swaps the hand-rolled Notice component (@automattic/jetpack-components) for the @wordpress/ui Notice (Root/Title/Description/Actions/CloseIcon) in the three My Jetpack surfaces that use it:

GlobalNotice in my-jetpack-screen/index.jsx — the dashboard's shared notice banner, driven by use-notification-watcher's hooks (backup failure, Protect threats, expiring plans, plugins needing activation, connection errors, bad install, deprecated features).
SeoOptInCard — the SEO dashboard opt-in promo, shown on eligible self-hosted Jetpack-plugin sites.
The Jetpack AI product page's usage-limit notice (upgrade / renewal).

Behaviour kept as-is:

level/intent mapping is one-to-one (error, warning, info, success).
GlobalNotice's Tracks view-event mount effect is untouched — same deps array, no remount.
hideCloseButton/onClose overrides from watchers still show the close button and call onClose.
Action buttons (including the actions={ tierPlansEnabled ? [...] : {} } object-vs-array case on the AI page) render the same.

Also removed a handful of dead SCSS selectors in my-jetpack-screen/styles.module.scss (:global(.components-notice__content), :global(.components-notice__dismiss), :global(.components-notice__action), and an .icon-wrapper selector). These target @wordpress/components' old Notice markup — the @automattic/jetpack-components Notice already in place before this PR never rendered those classes, so the rules were already inert. Verified by reading projects/js-packages/components/components/notice/index.tsx's own (CSS-module-scoped) class names before removing them. :global(.is-link) stays — it targets the action buttons' own WP Button classes, unrelated to which Notice wraps them.

Visual differences (unavoidable with the design-system Notice)

No more colored left-accent bar — the WPDS Notice is a full bordered, rounded card with a tinted background matching the intent, replacing the old flat white card with a colored stripe.
The level icon is now the WPDS intent icon (outline caution triangle for warning/error) instead of the old filled circle icon.
Body/title text picks up the intent's tint color (e.g. a dark red for error) instead of plain foreground text.

These match the same trade-offs made in #52160 (Protect) and #52015 (Jetpack plugin), which migrated to the same component. All three migrated My Jetpack surfaces (GlobalNotice, SeoOptInCard, the AI product page) now render the same tinted, bordered WPDS card — GlobalNotice's old my-jetpack-screen/styles.module.scss rules for background-color, font-size, and line-height on .notice > div were unlayered and beat @layer wp-ui, which forced it back to a plain white card with mismatched text sizing; those overrides are removed here. The only remaining difference between GlobalNotice and the other two is its ActionButton-styled action row, which keeps its own .cta/.is-link styling.

The Root/Title/Description/Actions/CloseIcon composition is written out at each of the three call sites rather than behind a new shared wrapper (the pattern #52160 and #52015 both use for their own single call site) — the task scope for this change asked to keep the diff to the three existing files, with no new wrapper component or abstraction. A follow-up could extract one if a fourth call site shows up.

Changelog

packages/my-jetpack gets its own entry (always required for a projects/ change).
plugins/jetpack gets an entry — it's the only plugin that bundles the SEO package, so it's the only one that can reach SeoOptInCard; it also reaches GlobalNotice and the AI product page.
plugins/{boost,protect,search,social,videopress,backup,stats} each get an entry: My Jetpack is the shared dashboard hub every one of these bundles (Initializer::init() on init), so GlobalNotice (visible whenever any of its trigger conditions fire — e.g. a connection error, which isn't gated to a specific product) and the Jetpack AI product page (reachable via My Jetpack's own product catalog/upsell routing, not gated behind a specific plugin) are both directly user-facing for each of them.
plugins/starter-plugin is skipped per the AGENTS.md exception for scaffolding templates nobody installs.

Related product discussion/links

JETPACK-2616

Does this pull request change what data or activity we track or use?

No. The jetpack_myjetpack_global_notice_view Tracks event still fires once per notice id, from the same mount effect with the same dependency array.

Testing instructions

All steps below were run against a local Docker instance with a DB cloned from a connected jetpack_dev, at admin.php?page=my-jetpack.

Prerequisite: a localhost Docker site reports Jetpack Offline Mode (the localhost URL heuristic), which makes My_Jetpack::should_initialize() skip menu registration entirely and the page 403s. Force it off for local testing with an mu-plugin: add_filter( 'jetpack_offline_mode', '__return_false' );.

Automated:

pnpm jetpack test js packages/my-jetpack — 25 suites / 201 tests pass, including a new global-notice.test.jsx covering the view-event-fires-once behavior, the default hidden close button, and the watcher-overridden close button calling onClose.
pnpm typecheck (in packages/my-jetpack) — clean.
eslint/stylelint on every touched file — clean.

Manual, each state forced via routes/an init script (no data written to the site):

Backup failure notice — intercept the POST wp-json/my-jetpack/v1/red-bubble-notifications request and fulfill it with a backup_failure alert, open My Jetpack. Confirm the "Oops! We couldn't back up your site" notice renders with its two actions, and that clicking the close (Dismiss) button dismisses it.
SEO opt-in card — set window.myJetpackInitialState.seoOptIn.showCard = true before the app boots, open My Jetpack. Confirm "A fresh way to manage your SEO" renders with no close button.
Jetpack AI upgrade notice — patch the my-jetpack/v1/site/products response so jetpack-ai.ai-assistant-feature reports is-over-limit: true on the free tier, open #/jetpack-ai. Confirm "You've used all your free requests" renders with an "Upgrade now" button and a close button.
Jetpack AI renewal notice — same route, patched to a paid tier over its limit. Confirm "You've reached your request limit for this month" renders (warning intent) with a close button.

Also checked the backup failure notice at a 600px-wide viewport: text wraps normally, no overflow or clipping, and the action buttons stack cleanly under the wrapped copy.

State	Before	After
Backup failure notice
SEO opt-in card
Jetpack AI upgrade notice
Jetpack AI renewal notice

🤖 Generated with Claude Code

https://claude.ai/code/session_01HwoMPDxu6uEciqTGWdKJ3r

Swaps the hand-rolled Notice (@automattic/jetpack-components) for @wordpress/ui's Notice in GlobalNotice, SeoOptInCard, and the Jetpack AI product page's usage-limit notice. Level/intent, the close button override, and the Tracks view-event mount effect are unchanged. Also drops a handful of dead SCSS selectors that targeted @wordpress/components' old Notice markup, which the @automattic/jetpack-components Notice already in place never rendered.

github-actions · 2026-09-14T17:08:29Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the change/myjp-notice-wpui branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack change/myjp-notice-wpui

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2026-09-14T17:08:58Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly:
- Scheduled release: October 6, 2026