From 05ab886fd1e7a0b3c75906e3cd9e695866dceff1 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 14 Sep 2026 14:06:17 -0300 Subject: [PATCH 1/2] My Jetpack: Render notices with the WordPress design system Notice 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. --- .../components/my-jetpack-screen/index.jsx | 33 ++++++----- .../my-jetpack-screen/styles.module.scss | 59 ------------------- .../test/global-notice.test.jsx | 52 ++++++++++++++++ .../jetpack-ai/product-page.jsx | 43 ++++++-------- .../_inc/components/seo-opt-in-card/index.tsx | 24 ++++---- .../my-jetpack/changelog/myjp-notice-wpui | 4 ++ .../plugins/backup/changelog/myjp-notice-wpui | 4 ++ .../plugins/boost/changelog/myjp-notice-wpui | 4 ++ .../jetpack/changelog/myjp-notice-wpui | 4 ++ .../protect/changelog/myjp-notice-wpui | 4 ++ .../plugins/search/changelog/myjp-notice-wpui | 4 ++ .../plugins/social/changelog/myjp-notice-wpui | 4 ++ .../plugins/stats/changelog/myjp-notice-wpui | 4 ++ .../videopress/changelog/myjp-notice-wpui | 4 ++ 14 files changed, 137 insertions(+), 110 deletions(-) create mode 100644 projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx create mode 100644 projects/packages/my-jetpack/changelog/myjp-notice-wpui create mode 100644 projects/plugins/backup/changelog/myjp-notice-wpui create mode 100644 projects/plugins/boost/changelog/myjp-notice-wpui create mode 100644 projects/plugins/jetpack/changelog/myjp-notice-wpui create mode 100644 projects/plugins/protect/changelog/myjp-notice-wpui create mode 100644 projects/plugins/search/changelog/myjp-notice-wpui create mode 100644 projects/plugins/social/changelog/myjp-notice-wpui create mode 100644 projects/plugins/stats/changelog/myjp-notice-wpui create mode 100644 projects/plugins/videopress/changelog/myjp-notice-wpui diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx index 0f936abb580b..2d5ba23615cd 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx @@ -7,12 +7,10 @@ import { Col, Container, GlobalNotices, - Notice, } from '@automattic/jetpack-components'; import { isSimpleSite } from '@automattic/jetpack-script-data'; -import { useViewportMatch } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import clsx from 'clsx'; +import { Notice } from '@wordpress/ui'; import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { useParams } from 'react-router'; /* @@ -39,7 +37,9 @@ import OnboardingTour from '../onboarding-tour'; import buildOptionalMenuItems from './build-optional-menu-items'; import styles from './styles.module.scss'; -const GlobalNotice = ( { message, title, options } ) => { +// Named export for testability: it has its own mount effect (Tracks view event) worth +// covering without mounting the whole screen. +export const GlobalNotice = ( { message, title, options } ) => { const { recordEvent } = useAnalytics(); useEffect( () => { const tracksArgs = options?.tracksArgs || {}; @@ -50,23 +50,28 @@ const GlobalNotice = ( { message, title, options } ) => { } ); }, [ options.id, recordEvent, options?.tracksArgs ] ); - const isBiggerThanMedium = useViewportMatch( 'large' ); - const actionButtons = options.actions?.map( action => { return ( ); } ); + // Watchers pass `hideCloseButton: false` plus `onClose` to override this default. + const hideCloseButton = options.hideCloseButton ?? true; + return ( -
- -
{ message }
- +
+ + { title && { title } } + { /* `render={
}`: `message` can carry block content, but Description defaults to a `span`. */ } + }> + { message } + + { actionButtons && actionButtons.length > 0 && ( + { actionButtons } + ) } + { ! hideCloseButton && } +
); }; diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss index 6f978dd0d552..cb8dc36aaac9 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss @@ -39,19 +39,6 @@ line-height: 24px; background-color: var(--jp-white); - // notice content - :global(.components-notice__content) { - display: flex; - margin: 0; - padding: 12px 4px; - flex-direction: column; - align-items: flex-start; - - @media screen and ( min-width: 960px ) { - gap: 6rem; - } - } - // action button :global(.is-link) { color: var(--jp-black); @@ -61,55 +48,9 @@ white-space: nowrap; } - // X close button - :global(.components-notice__dismiss) { - align-self: center; - } - - :global(.components-notice__action) { - color: var(--jp-white); - font-weight: 600; - font-size: 16px; - line-height: 24px; - letter-spacing: -0.01em; - text-decoration: none; - cursor: pointer; - justify-content: center; - align-items: center; - padding: 8px 24px; - margin-left: 0; - margin-top: 24px; - background: #000; - border-radius: var(--jp-border-radius); - height: auto; - - @media screen and ( min-width: 960px ) { - margin-left: calc(var(--spacing-base) * 2 + 24px); // 40px - } - } - - &.bigger-than-medium { - - :global(.components-notice__action) { - margin-left: 0; - margin-top: 0; - white-space: nowrap; - } - - :global(.components-notice__content) { - flex-direction: row; - align-items: center; - } - } - @media screen and ( max-width: 600px ) { padding-top: 24px; - // this is the selector for `.icon-wrapper` in the .notice component - > div:has(svg) { - position: initial; - } - :global(.components-button) { white-space: normal; } diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx new file mode 100644 index 000000000000..64be5bbadad1 --- /dev/null +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx @@ -0,0 +1,52 @@ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import useAnalytics from '../../../hooks/use-analytics'; +import { GlobalNotice } from '../index'; + +jest.mock( '../../../hooks/use-analytics' ); + +const mockUseAnalytics = useAnalytics; +const recordEvent = jest.fn(); + +describe( 'GlobalNotice', () => { + beforeEach( () => { + jest.clearAllMocks(); + mockUseAnalytics.mockReturnValue( { recordEvent } ); + } ); + + it( 'records the view event once on mount', () => { + const { rerender } = render( + + ); + + expect( recordEvent ).toHaveBeenCalledTimes( 1 ); + expect( recordEvent ).toHaveBeenCalledWith( 'jetpack_myjetpack_global_notice_view', { + notice_id: 'backup-failure', + } ); + + // Regression: a remount (e.g. from wrapping the Notice differently) fires it again. + rerender( ); + expect( recordEvent ).toHaveBeenCalledTimes( 1 ); + } ); + + it( 'hides the close button by default', () => { + render( ); + + expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument(); + } ); + + it( 'shows the close button and calls onClose when a watcher overrides it', async () => { + const onClose = jest.fn(); + render( + + ); + + await userEvent.click( screen.getByRole( 'button' ) ); + expect( onClose ).toHaveBeenCalledTimes( 1 ); + } ); +} ); diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx index daec15b3c51f..22204b336ecd 100644 --- a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx @@ -1,19 +1,12 @@ /** * External dependencies */ -import { - AdminPage, - Col, - Container, - AiIcon, - getRedirectUrl, - Notice, -} from '@automattic/jetpack-components'; +import { AdminPage, Col, Container, AiIcon, getRedirectUrl } from '@automattic/jetpack-components'; import { Button, Card } from '@wordpress/components'; import { createInterpolateElement } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { Icon, plus, help, check } from '@wordpress/icons'; -import { Link } from '@wordpress/ui'; +import { Link, Notice } from '@wordpress/ui'; import clsx from 'clsx'; import debugFactory from 'debug'; import { useCallback, useState, useEffect } from 'react'; @@ -311,22 +304,22 @@ export default function () {
{ showNotice && (
- - { showRenewalNotice ? renewalNoticeCta : upgradeNoticeCta } - , - ] - : {} - } - onClose={ onNoticeClose } - level={ showRenewalNotice ? 'warning' : 'error' } - title={ showRenewalNotice ? renewalNoticeTitle : upgradeNoticeTitle } - > - { showRenewalNotice ? renewalNoticeBody : upgradeNoticeBody } - + + + { showRenewalNotice ? renewalNoticeTitle : upgradeNoticeTitle } + + + { showRenewalNotice ? renewalNoticeBody : upgradeNoticeBody } + + { tierPlansEnabled && ( + + + + ) } + +
) }

diff --git a/projects/packages/my-jetpack/_inc/components/seo-opt-in-card/index.tsx b/projects/packages/my-jetpack/_inc/components/seo-opt-in-card/index.tsx index 4a001405fc7b..5f75db6c94c5 100644 --- a/projects/packages/my-jetpack/_inc/components/seo-opt-in-card/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/seo-opt-in-card/index.tsx @@ -1,5 +1,6 @@ -import { Button, Notice } from '@automattic/jetpack-components'; +import { Button } from '@automattic/jetpack-components'; import { __ } from '@wordpress/i18n'; +import { Notice } from '@wordpress/ui'; import { useCallback, useEffect } from 'react'; import useSeoOptIn from '../../data/use-seo-opt-in'; import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state'; @@ -54,16 +55,15 @@ export default function SeoOptInCard() { ]; return ( - - { __( - 'Jetpack SEO now has a dedicated dashboard to manage sitemaps, search-engine visibility, social previews, and site verification — all in one place. Switch over whenever you like; your existing settings come with you.', - 'jetpack-my-jetpack' - ) } - + + { __( 'A fresh way to manage your SEO', 'jetpack-my-jetpack' ) } + + { __( + 'Jetpack SEO now has a dedicated dashboard to manage sitemaps, search-engine visibility, social previews, and site verification — all in one place. Switch over whenever you like; your existing settings come with you.', + 'jetpack-my-jetpack' + ) } + + { actions } + ); } diff --git a/projects/packages/my-jetpack/changelog/myjp-notice-wpui b/projects/packages/my-jetpack/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..fd0ad71e3092 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Notices: Restyle My Jetpack dashboard notices to match the WordPress design system. diff --git a/projects/plugins/backup/changelog/myjp-notice-wpui b/projects/plugins/backup/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..d2a1583e6d95 --- /dev/null +++ b/projects/plugins/backup/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/boost/changelog/myjp-notice-wpui b/projects/plugins/boost/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..d2a1583e6d95 --- /dev/null +++ b/projects/plugins/boost/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/jetpack/changelog/myjp-notice-wpui b/projects/plugins/jetpack/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..dcd9593aab74 --- /dev/null +++ b/projects/plugins/jetpack/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/protect/changelog/myjp-notice-wpui b/projects/plugins/protect/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..d2a1583e6d95 --- /dev/null +++ b/projects/plugins/protect/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/search/changelog/myjp-notice-wpui b/projects/plugins/search/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..d2a1583e6d95 --- /dev/null +++ b/projects/plugins/search/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/social/changelog/myjp-notice-wpui b/projects/plugins/social/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..d2a1583e6d95 --- /dev/null +++ b/projects/plugins/social/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/stats/changelog/myjp-notice-wpui b/projects/plugins/stats/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..d2a1583e6d95 --- /dev/null +++ b/projects/plugins/stats/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/videopress/changelog/myjp-notice-wpui b/projects/plugins/videopress/changelog/myjp-notice-wpui new file mode 100644 index 000000000000..d2a1583e6d95 --- /dev/null +++ b/projects/plugins/videopress/changelog/myjp-notice-wpui @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +My Jetpack: Restyle dashboard notices to match the WordPress design system. From e937f367db00a844e766f0aa71a4b7cd6b13a4ff Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 14 Sep 2026 14:13:18 -0300 Subject: [PATCH 2/2] My Jetpack: Fix GlobalNotice card styling and changelog significance GlobalNotice's own SCSS still set background-color/font-size/line-height on the card, unlayered so it always beat @wordpress/ui's @layer wp-ui rules. That forced a plain white card with mismatched text sizing instead of the tinted WPDS card the other two migrated notices already show. Drop the overrides (and the now-pointless <=600px padding-top), and switch .message's margin-right to the logical margin-inline-end. Also correct the changelog significance from minor to patch (a restyle, no new capability) and reword a test comment that overclaimed rerender coverage of a remount. --- .../_inc/components/my-jetpack-screen/styles.module.scss | 6 +----- .../my-jetpack-screen/test/global-notice.test.jsx | 2 +- projects/packages/my-jetpack/changelog/myjp-notice-wpui | 2 +- projects/plugins/backup/changelog/myjp-notice-wpui | 2 +- projects/plugins/boost/changelog/myjp-notice-wpui | 2 +- projects/plugins/jetpack/changelog/myjp-notice-wpui | 2 +- projects/plugins/protect/changelog/myjp-notice-wpui | 2 +- projects/plugins/search/changelog/myjp-notice-wpui | 2 +- projects/plugins/social/changelog/myjp-notice-wpui | 2 +- projects/plugins/stats/changelog/myjp-notice-wpui | 2 +- projects/plugins/videopress/changelog/myjp-notice-wpui | 2 +- 11 files changed, 11 insertions(+), 15 deletions(-) diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss index cb8dc36aaac9..3b513a21f59a 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss @@ -35,9 +35,6 @@ > div { position: relative; margin: 0; - font-size: 16px; - line-height: 24px; - background-color: var(--jp-white); // action button :global(.is-link) { @@ -49,7 +46,6 @@ } @media screen and ( max-width: 600px ) { - padding-top: 24px; :global(.components-button) { white-space: normal; @@ -64,7 +60,7 @@ .message { - margin-right: var(--spacing-base); // 8px + margin-inline-end: var(--spacing-base); // 8px flex-grow: 1; display: flex; diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx index 64be5bbadad1..702f5f61c67a 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/test/global-notice.test.jsx @@ -25,7 +25,7 @@ describe( 'GlobalNotice', () => { notice_id: 'backup-failure', } ); - // Regression: a remount (e.g. from wrapping the Notice differently) fires it again. + // A re-render with the same notice id must not re-fire the view event. rerender( ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); } ); diff --git a/projects/packages/my-jetpack/changelog/myjp-notice-wpui b/projects/packages/my-jetpack/changelog/myjp-notice-wpui index fd0ad71e3092..8626b4d68a37 100644 --- a/projects/packages/my-jetpack/changelog/myjp-notice-wpui +++ b/projects/packages/my-jetpack/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed Notices: Restyle My Jetpack dashboard notices to match the WordPress design system. diff --git a/projects/plugins/backup/changelog/myjp-notice-wpui b/projects/plugins/backup/changelog/myjp-notice-wpui index d2a1583e6d95..7033dbbd678b 100644 --- a/projects/plugins/backup/changelog/myjp-notice-wpui +++ b/projects/plugins/backup/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/boost/changelog/myjp-notice-wpui b/projects/plugins/boost/changelog/myjp-notice-wpui index d2a1583e6d95..7033dbbd678b 100644 --- a/projects/plugins/boost/changelog/myjp-notice-wpui +++ b/projects/plugins/boost/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/jetpack/changelog/myjp-notice-wpui b/projects/plugins/jetpack/changelog/myjp-notice-wpui index dcd9593aab74..62a42ff0d7a8 100644 --- a/projects/plugins/jetpack/changelog/myjp-notice-wpui +++ b/projects/plugins/jetpack/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: enhancement My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/protect/changelog/myjp-notice-wpui b/projects/plugins/protect/changelog/myjp-notice-wpui index d2a1583e6d95..7033dbbd678b 100644 --- a/projects/plugins/protect/changelog/myjp-notice-wpui +++ b/projects/plugins/protect/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/search/changelog/myjp-notice-wpui b/projects/plugins/search/changelog/myjp-notice-wpui index d2a1583e6d95..7033dbbd678b 100644 --- a/projects/plugins/search/changelog/myjp-notice-wpui +++ b/projects/plugins/search/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/social/changelog/myjp-notice-wpui b/projects/plugins/social/changelog/myjp-notice-wpui index d2a1583e6d95..7033dbbd678b 100644 --- a/projects/plugins/social/changelog/myjp-notice-wpui +++ b/projects/plugins/social/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/stats/changelog/myjp-notice-wpui b/projects/plugins/stats/changelog/myjp-notice-wpui index d2a1583e6d95..7033dbbd678b 100644 --- a/projects/plugins/stats/changelog/myjp-notice-wpui +++ b/projects/plugins/stats/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed My Jetpack: Restyle dashboard notices to match the WordPress design system. diff --git a/projects/plugins/videopress/changelog/myjp-notice-wpui b/projects/plugins/videopress/changelog/myjp-notice-wpui index d2a1583e6d95..7033dbbd678b 100644 --- a/projects/plugins/videopress/changelog/myjp-notice-wpui +++ b/projects/plugins/videopress/changelog/myjp-notice-wpui @@ -1,4 +1,4 @@ -Significance: minor +Significance: patch Type: changed My Jetpack: Restyle dashboard notices to match the WordPress design system.