From acf65ad74c53f6b51ffe8ecc0c852837d9497b33 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 May 2026 17:14:20 -0300
Subject: [PATCH 1/2] My Jetpack: migrate link-variant Buttons to @wordpress/ui
 Link

---
 .../_inc/components/plans-section/index.tsx   | 32 ++++++-------------
 .../product-interstitial-modal.tsx            |  8 ++---
 .../update-link-variant-buttons-to-wp-ui-link |  4 +++
 3 files changed, 18 insertions(+), 26 deletions(-)
 create mode 100644 projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link

diff --git a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx
index 3277569d2883..a37a2dd8ae25 100644
--- a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx
+++ b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx
@@ -1,5 +1,3 @@
-// TODO: migrate Button usages to @wordpress/ui Link (handled in a separate PR — all Buttons here use variant="link" + href + isExternalLink + weight="regular", which @wordpress/ui Button does not support).
-import { Button } from '@automattic/jetpack-components';
 import { getUserConnectionUrl } from '@automattic/jetpack-connection';
 import { getMyJetpackUrl } from '@automattic/jetpack-script-data';
 import { dateI18n, getDate } from '@wordpress/date';
@@ -110,16 +108,16 @@ const PlanExpiry: FC< PlanSectionProps > = ( { purchase } ) => {
 
 		if ( isExpiringSoon ) {
 			return (
-				<Button href={ renewUrl } isExternalLink={ true } variant="link" weight="regular">
+				<Link href={ renewUrl } openInNewTab>
 					{ __( 'Renew subscription', 'jetpack-my-jetpack' ) }
-				</Button>
+				</Link>
 			);
 		}
 
 		return (
-			<Button href={ managePurchaseUrl } isExternalLink={ true } variant="link" weight="regular">
+			<Link href={ managePurchaseUrl } openInNewTab>
 				{ __( 'Resume subscription', 'jetpack-my-jetpack' ) }
-			</Button>
+			</Link>
 		);
 	}, [ isExpiringPurchase, isExpiringSoon, managePurchaseUrl, renewUrl ] );
 
@@ -243,39 +241,29 @@ const PlanSectionFooter: FC< PlanSectionHeaderAndFooterProps > = ( { numberOfPur
 			) }
 			{ numberOfPurchases > 0 && (
 				<li className={ styles[ 'actions-list-item' ] }>
-					<Button
+					<Link
 						onClick={ viewIncludedFeaturesClickHandler }
 						href={ getMyJetpackUrl( '#/products?filter=included' ) }
-						variant="link"
-						weight="regular"
 					>
 						{ __( 'View included features', 'jetpack-my-jetpack' ) }
-					</Button>
+					</Link>
 				</li>
 			) }
 			{ ! hasComplete && (
 				<li className={ styles[ 'actions-list-item' ] }>
-					<Button
-						onClick={ planPurchaseClickHandler }
-						href={ getPurchasePlanUrl() }
-						weight="regular"
-						variant="link"
-						isExternalLink={ true }
-					>
+					<Link onClick={ planPurchaseClickHandler } href={ getPurchasePlanUrl() } openInNewTab>
 						{ planPurchaseDescription }
-					</Button>
+					</Link>
 				</li>
 			) }
 			{ ! hasComplete && loadAddLicenseScreen && (
 				<li className={ styles[ 'actions-list-item' ] }>
-					<Button
+					<Link
 						onClick={ activateLicenseClickHandler }
 						href={ isUserConnected ? getMyJetpackUrl( '#/add-license' ) : getUserConnectionUrl() }
-						variant="link"
-						weight="regular"
 					>
 						{ activateLicenceDescription }
-					</Button>
+					</Link>
 				</li>
 			) }
 		</ul>
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx
index 095124878578..a465aa4476fb 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx
@@ -1,6 +1,7 @@
 import { Text, Button, ThemeProvider, Col, Container } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useState, cloneElement } from 'react';
 import LoadingBlock from '../loading-block';
@@ -234,13 +235,12 @@ const ProductInterstitialModal: FC< ProductInterstitialModalProps > = props => {
 								</div>
 								<div className={ styles[ 'primary-footer' ] }>
 									{ PrimaryButton }
-									<Button
-										variant="link"
-										isExternalLink={ secondaryButtonHasExternalLink }
+									<Link
+										openInNewTab={ secondaryButtonHasExternalLink }
 										href={ secondaryButtonHref }
 									>
 										{ __( 'Learn more', 'jetpack-my-jetpack' ) }
-									</Button>
+									</Link>
 								</div>
 							</Col>
 							{
diff --git a/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link b/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link
new file mode 100644
index 000000000000..be9fb492b797
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+My Jetpack: migrate link-variant Buttons in Plans section and product interstitial modal to @wordpress/ui Link.

From 07d39f8c855cc4d3ce5763158836373b3301efbe Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 25 May 2026 10:10:55 -0300
Subject: [PATCH 2/2] My Jetpack: center-align primary-footer items after Link
 migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The .primary-footer flex container previously relied on its <button>
children sharing intrinsic heights for visual centering. Migrating the
secondary "Learn more" from jetpack-components Button(variant=link) to
@wordpress/ui Link (a plain <a>) broke that implicit centering — the
Link text dropped to baseline alongside the primary Upgrade button.

Adds an explicit `align-items: center` so the cross-axis alignment is
no longer dependent on child element type.
---
 .../_inc/components/product-interstitial-modal/style.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss
index 9c4ba3981f94..bcddfbcbaef6 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss
@@ -70,6 +70,7 @@ $interstitial-modal-padding: 40px;
 .primary-footer {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 	gap: 8px 24px;
 }