From d9b0d9da82dd09384fc8b8e61ad630f7c094c41a Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 4 May 2026 12:15:06 -0300 Subject: [PATCH 1/2] My Jetpack: migrate interstitial Buttons to @wordpress/ui MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to #48414. Replaces the `Button` imports in the product interstitial / pricing-interstitial / more-requests screens with the new `Button` from `@wordpress/ui`. Affects: - `pricing-interstitial.jsx`: free/paid/bundle tier CTAs (`isLoading` → `loading`, `variant="secondary"` → `variant="outline"`, `fullWidth` → small `tier-cta` width:100% class) and the actions-slot "Use license key" CTA. - `product-interstitial.jsx`: the actions-slot "Use license key" CTA. - `jetpack-ai/more-requests.jsx`: the "Contact Us" + "Back" buttons. `href` cases use base-ui's `render={}` (with `nativeButton={false}`). `@wordpress/ui` Button styles live in `@layer wp-ui-components`, which loses to wp-admin's un-layered `a { color }` rule when rendered as an anchor; a single non-layered rule in `_inc/style.module.scss` re-asserts the button foreground color so anchor-rendered Buttons get the right text color. Also fixes invalid ` - - - + diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx index 0bb2577320bf..30ce78a7c1b5 100644 --- a/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx @@ -3,7 +3,6 @@ */ import { AdminPage, - Button, Col, Container, PricingTable, @@ -14,8 +13,9 @@ import { } from '@automattic/jetpack-components'; import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection'; import { getScriptData, getMyJetpackUrl } from '@automattic/jetpack-script-data'; -import { Button as WPButton, Spinner } from '@wordpress/components'; +import { Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { Button } from '@wordpress/ui'; import { useCallback, useEffect, useMemo, useState } from 'react'; /** * Internal dependencies @@ -388,14 +388,15 @@ export default function PricingInterstitial( { slug } ) { /> } actions={ - } onClick={ handleLicenseActivationClick } > { __( 'Use license key', 'jetpack-my-jetpack' ) } - + } > ) : null } > diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss index 54d0f42fa8af..3d103d5e0c9b 100644 --- a/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss +++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss @@ -49,6 +49,11 @@ } } +.tier-cta { + width: 100%; + justify-content: center; +} + .not-strong { font-weight: 400 !important; } diff --git a/projects/packages/my-jetpack/_inc/style.module.scss b/projects/packages/my-jetpack/_inc/style.module.scss index 4460bbb2d413..db1efd7aa14d 100644 --- a/projects/packages/my-jetpack/_inc/style.module.scss +++ b/projects/packages/my-jetpack/_inc/style.module.scss @@ -1,5 +1,14 @@ :global { + // @wordpress/ui Button styles live inside `@layer wp-ui-components`, which + // loses to wp-admin's un-layered `a { color: ... }` rule when the Button is + // rendered via base-ui's `render={}` prop. Re-assert the button's own + // foreground color outside of any layer so the `` variant renders with + // the correct text color. + body.jetpack_page_my-jetpack a[class*="__button"][class*="__is-"] { + color: var(--wp-ui-button-foreground-color); + } + // Hello Dolly compatibility fix body.jetpack_page_my-jetpack p#dolly { position: absolute; diff --git a/projects/packages/my-jetpack/changelog/feat-interstitial-buttons-wp-ui b/projects/packages/my-jetpack/changelog/feat-interstitial-buttons-wp-ui new file mode 100644 index 000000000000..3004ed0af555 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/feat-interstitial-buttons-wp-ui @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Migrate interstitial Buttons from `@automattic/jetpack-components` and `@wordpress/components` to `@wordpress/ui`. From 1590000ce183ca1299199cd7a2a76fc400fc4326 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 5 May 2026 11:13:07 -0300 Subject: [PATCH 2/2] My Jetpack: drop unneeded wp-ui Button anchor color override MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The non-layered `a[class*="__button"][class*="__is-"] { color: ... }` override existed to neutralize wp-admin's un-layered `a { color }` rule beating wp-ui's layered button color when a Button is rendered as an anchor (`render={}`). Auditing the actually-reachable interstitials: - Tier CTAs in pricing-interstitial render as native `