My Jetpack: migrate Add License activation screen to @wordpress/ui buttons and links by CGastrell · Pull Request #50343 · Automattic/jetpack

CGastrell · 2026-07-08T22:31:09Z

Proposed changes

Migrates the license activation screen — js-packages/licensing's ActivationScreen, rendered at My Jetpack → Add license (admin.php?page=my-jetpack#/add-license) — off legacy @wordpress/components / custom-styled primitives and onto @wordpress/ui. This screen was skipped by the earlier My Jetpack modernization because its UI lives in the shared licensing package, not in My Jetpack itself.

Header	Header

Buttons

Activate button → @wordpress/ui Button using the built-in loading prop (replaces the manual <Spinner/>), and now disabled while activating so it can't be double-submitted.
Success-screen buttons ("View my plans" / "View scan results" / "Configure my site") → @wordpress/ui Button. These only navigate the current tab, so they use an onClick handler rather than render={<a>} — that keeps a native <button> whose ui styling renders untouched (a solid button rendered as an anchor would inherit wp-admin's global link color over its own label). The fetching placeholder uses the loading prop.
Custom black/white button styling removed; reduced to WPDS tokens (--wpds-typography-*, --wpds-dimension-padding-*). Hover/focus/disabled now come from @wordpress/ui.

Links — normalized all three to native @wordpress/ui Link:

Illustration "Contact us" — was a raw <a>; now a Link with openInNewTab.
Error notice "Get in touch" / "Follow these steps" — dropped the legacy green <a> color override.
Success-screen ProductLink ("View latest backup") — dropped the black underline !important override; kept the button's font (weight/size) so it reads as the button's pair.

Layout

Button↔link spacing moved from a per-button margin to a flex gap on the container.

Findings / notes for reviewers

Cascade layers matter here. @wordpress/ui injects its styles under @layer wp-ui (and some resets at runtime, unlayered, single-class specificity). Custom overrides in this package are unlayered, so they win — but a bare single-class selector ties the runtime reset and loses on source order. The button/link rules are therefore scoped under their container (specificity 0,2,0) to override reliably.
WPDS tokens resolve here because My Jetpack imports @wordpress/theme/design-tokens.css. js-packages/licensing is also consumed by the standalone Jetpack plugin's license page — if that context doesn't load the tokens, the token var()s would need fallbacks. Worth confirming before this leaves draft.
Padding uses --wpds-dimension-padding-3xl (32px) vs the old literal 45px inline — intentionally the WPDS-standard button padding, so buttons are a bit narrower than before.

Not in this pass (possible follow-ups)

AdminPage / Container / Col and JetpackLogo (@automattic/jetpack-components), the TextControl/SelectControl fields, and the golden-token Modal (@wordpress/components) are still on the old primitives.

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

No. Analytics events are unchanged.

Testing instructions

Go to My Jetpack → Add license (/wp-admin/admin.php?page=my-jetpack#/add-license).
Confirm the Activate button renders as a WPDS button; it's disabled until a key is entered, and shows a spinner (and is not clickable) while activating.
Enter an invalid key and activate — the error notice's "Get in touch" link should render as a standard link (no longer green).
On the right panel, the "Do you need help? Contact us" link should open in a new tab.
On the post-activation success screen, confirm the primary button and its paired link ("View latest backup" / "View my plans") share the same font, with proper spacing between them.

…ttons and links Migrate the license activation screen (js-packages/licensing ActivationScreen, rendered at My Jetpack -> Add license) off legacy @wordpress/components and custom-styled primitives onto @wordpress/ui: - Activate button: @wordpress/ui Button with the built-in `loading` prop (replaces the manual Spinner) and disabled while activating. - Success-screen buttons: @wordpress/ui Button navigating via onClick (native button, no anchor); loading state uses the `loading` prop. - Support/product links (x3): normalized to native @wordpress/ui Link, dropping the green and black/underline overrides and the raw <a>. - Button/link styling reduced to WPDS tokens; container spacing moved to a flex gap so the button and its paired link keep their spacing. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions · 2026-07-08T22:32:22Z

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 update/licensing-activation-screen-wpds-buttons branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/licensing-activation-screen-wpds-buttons

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-07-08T22:32:34Z

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!

jp-launch-control · 2026-07-08T22:45:02Z

Code Coverage Summary

Cannot generate coverage summary while tests are failing. 🤐

Please fix the tests, or re-run the Code coverage job if it was something being flaky.

Full summary · PHP report · JS report

simison · 2026-07-09T09:26:35Z

+		font-weight: var(--wpds-typography-font-weight-medium);
+		font-size: var(--wpds-typography-font-size-lg);
+		width: auto;
+		padding-inline: var(--wpds-dimension-padding-3xl);
+		padding-block: var(--wpds-dimension-padding-lg);


Do we need these style overrides? Ideally, we'd use the design system as-is without overrides, which are unwieldy to maintain.

Looks quite off without them, there is not variant for size. Good thing is they are all under a single class, we can easily remove them. Let me get screenshots before calling for some design advise.

Yah it might just need a design change/decision or keep as custom but good to make that decision intentionally rather than just leave be because that's how it was before. 🙂

simison · 2026-07-09T09:27:09Z

I think you could replace these styles with Notice component.

likely yes, I was doing a simple pass before deciding to go replacing more stuff. There are other obvious candidates for replacement (TextControl, SelectControl, Modal, etc)

Yah follow ups seems fine, just flagging. 🙂

Some parts done in #48188 might be useful for this btw.

simison · 2026-07-09T09:27:25Z

Seems good candidate for Text component.

simison · 2026-07-09T09:27:48Z

These margin styles seem like good to replace with Stack 's gap.

simison · 2026-07-09T09:28:14Z

Looks good to be replaced with Text and Stack.

simison · 2026-07-09T09:28:32Z

Could be replaced with Stack.

simison · 2026-07-09T09:28:45Z

Could be replaced with Text.

simison · 2026-07-09T09:29:48Z

+								<Link
+									openInNewTab
+									href={ getRedirectUrl( 'jetpack-support-license-activation' ) }
+									rel="noopener noreferrer"


You can remove rel here; it's not needed in modern browsers. We just removed it in ExternalLink, too.

simison · 2026-07-09T09:32:27Z

 			<Button
 				className="jp-license-activation-screen-success-info--button"
-				href={
+				onClick={ navigateTo(


Flagging the need for recently added LinkButton, which will be available in the next @wordpress/ui release.

simison · 2026-07-09T09:32:57Z

+			<Button
+				className="jp-license-activation-screen-success-info--button"
+				onClick={ navigateTo( redirectSource ) }


This can also be switched to LinkButton later.

simison · 2026-07-09T09:33:03Z

+			onClick={ navigateTo(
+				getRedirectUrl( 'license-activation-view-my-plans', { site: siteRawUrl } )
+			) }


This can also be switched to LinkButton later.

… error notice to @wordpress/ui Addresses review feedback (simison) and continues the @wordpress/ui migration: - Form controls: TextControl -> @wordpress/ui InputControl and SelectControl -> @wordpress/ui SelectControl (onValueChange; SelectControl items/value object). Drops the field styling that targeted @wordpress/components markup, including the red/green border feedback (the error notice still communicates it). - Error notice: replace the hand-rolled icon+div/info-box with @wordpress/ui Notice (intent-driven color/icon) + Stack + Text; delete its stylesheet. - Illustration "Contact us" link: drop `rel` (not needed; matches Gutenberg's ExternalLink change). - primary-link: add a TODO to switch the onClick-nav buttons to @wordpress/ui LinkButton once it ships (Gutenberg #77098). The Activate button's WPDS-token overrides are kept intentionally (prominent CTA). Golden-token Modal -> Dialog is deferred to a follow-up. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

The @wordpress/ui Notice sat flush against the input and Activate button, and its rich errorInfo (raw <p> from useGetErrorContent) inherited the parent's 16px p rule while the Notice message rendered at Text body-md (13px) — leaving the secondary help text larger than the primary message. Re-add a small stylesheet that margins the notice and matches the errorInfo text to the notice size. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Use the Notice component's own grid layout (Title + Description in the same column) instead of a hand-wrapped Stack, so the internal spacing/hierarchy come from the design system. Render the Description as a <div> since errorInfo is rich block content (<p>/<ol>/links). Keep a small external margin and normalize the errorInfo text to the notice body size. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…Text + Stack Replace the hand-rolled heading/paragraph and flex containers with @wordpress/ui primitives: the h1 and intro copy become Text (heading-2xl / body-lg), and the column layout becomes nested Stacks (outer space-between to pin the Activate button at the bottom; a logo+heading group; a main-content group). Removes the per-element margins/paddings and the flex CSS in favour of Stack gap. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…ror fixes - Manual-entry option uses a sentinel value so the SelectControl shows its label (not the empty-value placeholder) while the manual text input is displayed. - Two-column layout: give each column a determinate width (flex:1 + min-width:0) so a long SelectControl value truncates (built-in ellipsis) instead of reflowing the columns; drop the now-redundant field width:100%. - Clear the activation error when the license changes (select pick or manual input) so a stale invalid-key notice doesn't linger. - ProductLink companion link: add line-height so it doesn't look cramped on mobile. - Error notice: drop its external margin (the controls Stack gap owns spacing). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions Bot added [JS Package] Licensing [Status] In Progress RNA labels Jul 8, 2026

github-actions Bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jul 8, 2026

simison reviewed Jul 9, 2026

View reviewed changes

CGastrell self-assigned this Jul 9, 2026

CGastrell removed the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jul 9, 2026

CGastrell and others added 5 commits July 9, 2026 09:35

CGastrell mentioned this pull request Jul 10, 2026

Licensing: migrate the activation screen to @wordpress/ui #50348

Merged

CGastrell closed this Jul 14, 2026

github-actions Bot removed the [Status] In Progress label Jul 14, 2026

Conversation

CGastrell commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Findings / notes for reviewers

Not in this pass (possible follow-ups)

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

Testing instructions

Uh oh!

github-actions Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Jul 8, 2026

Code Coverage Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

CGastrell commented Jul 8, 2026 •

edited

Loading

github-actions Bot commented Jul 8, 2026 •

edited

Loading

github-actions Bot commented Jul 8, 2026 •

edited

Loading