Commit 987312b07d5 for woocommerce
commit 987312b07d52952e631259f3b027e09c4ac4ca54
Author: Rubens Castro <rubens.castro@a8c.com>
Date: Tue Oct 6 11:21:43 2026 -0300
Standardize external links on the Payments settings page (#69269)
* Add Checkout block incompatibility badge to Payments settings
* Add changelog entry for Checkout block incompatibility badge
* Remove trailing slash from documentation link anchor
* Make Checkout block compatibility tests self-contained
* Changes copy, removes underscore from badge icon
* Update incompatibility tooltip copy to reference classic checkout
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Fix typo in incompatibility tooltip copy (Payments -> Payment)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Re-trigger CI (flaky PHP 7.4 composer bin install race)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Update plugins/woocommerce/src/Internal/Admin/Settings/PaymentsController.php
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/src/Internal/Admin/Settings/PaymentsController.php
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/src/Internal/Admin/Settings/PaymentsController.php
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/tests/php/src/Internal/Admin/Settings/PaymentsControllerTest.php
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/client/admin/client/settings-payments/components/payment-gateway-list-item/test/payment-gateway-list-item.test.tsx
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/changelog/62707-add-payment-gateway-checkout-compatibility-warning
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/client/admin/client/typings/global.d.ts
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/src/Internal/Admin/Settings/PaymentsController.php
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Update plugins/woocommerce/src/Internal/Admin/Settings/PaymentsController.php
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Remove unnecessary delete_option line
* Address payment gateway compatibility review feedback
* Fix payment gateway compatibility test formatting
* Fix prettier formatting in payment gateway list item
* Remove external link style override from status badge popover
* Use the design system Link in the compatibility badge popover
* Match the compatibility popover link to the page's Link pattern
* Use ExternalLink consistently on the Payments settings page
* Add changelog entry for external link consistency
* Replace ExternalLink with the design system Link
* Widen the incentive badge popover
* Move the compatibility badge link to the design system Link
* Remove the popover anchor styles the design system Link made redundant
* Update plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.tsx
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
* Reword the external links changelog entry
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
Co-authored-by: oaratovskyi <oleksandr.aratovskyi@automattic.com>
diff --git a/plugins/woocommerce/changelog/update-settings-payments-external-links b/plugins/woocommerce/changelog/update-settings-payments-external-links
new file mode 100644
index 00000000000..9f5dcba8ef4
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-settings-payments-external-links
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Use a consistent style for external links in the Payments settings incentive messages, badges, and "More payment options" link.
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-banner/incentive-banner.tsx b/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-banner/incentive-banner.tsx
index d3972742353..1c86fd46742 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-banner/incentive-banner.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-banner/incentive-banner.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react';
import { Button, Card, CardBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { createInterpolateElement, useState } from '@wordpress/element';
-import { Link } from '@woocommerce/components';
+import { Link } from '@wordpress/ui';
import {
PaymentsProviderIncentive,
PaymentsProvider,
@@ -185,9 +185,8 @@ export const IncentiveBanner = ( {
termsLink: (
<Link
href={ incentive.tc_url }
- target="_blank"
- rel="noreferrer"
- type="external"
+ rel="noopener noreferrer"
+ openInNewTab
>
{ __(
'Terms and Conditions',
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-modal/incentive-modal.tsx b/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-modal/incentive-modal.tsx
index f143cbc294a..fdf78f8db2b 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-modal/incentive-modal.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-modal/incentive-modal.tsx
@@ -11,7 +11,7 @@ import {
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { createInterpolateElement, useState } from '@wordpress/element';
-import { Link } from '@woocommerce/components';
+import { Link } from '@wordpress/ui';
import {
PaymentsProviderIncentive,
PaymentsProvider,
@@ -218,9 +218,8 @@ export const IncentiveModal = ( {
termsLink: (
<Link
href={ incentive.tc_url }
- target="_blank"
- rel="noreferrer"
- type="external"
+ rel="noopener noreferrer"
+ openInNewTab
>
{ __(
'Terms and Conditions',
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-status-badge/incentive-status-badge.tsx b/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-status-badge/incentive-status-badge.tsx
index 89e2a66c4bf..ce3f9ba2120 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-status-badge/incentive-status-badge.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/components/incentive-status-badge/incentive-status-badge.tsx
@@ -3,7 +3,7 @@
*/
import { createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { Link } from '@woocommerce/components';
+import { Link } from '@wordpress/ui';
import { PaymentsProviderIncentive } from '@woocommerce/data';
/**
@@ -49,9 +49,8 @@ export const IncentiveStatusBadge = ( {
termsLink: (
<Link
href={ incentive.tc_url }
- target="_blank"
- rel="noreferrer"
- type="external"
+ rel="noopener noreferrer"
+ openInNewTab
>
{ __(
'Terms and Conditions',
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/components/official-badge/official-badge.tsx b/plugins/woocommerce/client/admin/client/settings-payments/components/official-badge/official-badge.tsx
index ef5161ea30f..43e55f62679 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/components/official-badge/official-badge.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/components/official-badge/official-badge.tsx
@@ -3,7 +3,8 @@
*/
import { __ } from '@wordpress/i18n';
import { Popover } from '@wordpress/components';
-import { Link, Pill } from '@woocommerce/components';
+import { Pill } from '@woocommerce/components';
+import { Link } from '@wordpress/ui';
import { createInterpolateElement, useRef, useState } from '@wordpress/element';
/**
@@ -124,9 +125,8 @@ export const OfficialBadge = ( {
learnMoreLink: (
<Link
href="https://woocommerce.com/learn-more-about-official-partner-badging/"
- target="_blank"
- rel="noreferrer"
- type="external"
+ rel="noopener noreferrer"
+ openInNewTab
onClick={ () => {
// Record the event when the user clicks on the learn more link.
recordPaymentsEvent(
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/components/payment-gateway-list-item/payment-gateway-list-item.tsx b/plugins/woocommerce/client/admin/client/settings-payments/components/payment-gateway-list-item/payment-gateway-list-item.tsx
index 2316eee8fb1..5a734084046 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/components/payment-gateway-list-item/payment-gateway-list-item.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/components/payment-gateway-list-item/payment-gateway-list-item.tsx
@@ -7,7 +7,7 @@ import { decodeEntities } from '@wordpress/html-entities';
import { PaymentGatewayProvider } from '@woocommerce/data';
import { Tooltip } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
-import { Link } from '@woocommerce/components';
+import { Link } from '@wordpress/ui';
/**
* Internal dependencies
@@ -180,9 +180,8 @@ export const PaymentGatewayListItem = ( {
a: (
<Link
href="https://woocommerce.com/document/woocommerce-store-editing/customizing-cart-and-checkout/#incompatible-extensions"
- target="_blank"
- rel="noreferrer"
- type="external"
+ rel="noopener noreferrer"
+ openInNewTab
>
{ null }
</Link>
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss
index 36c84624fa7..06fe8289e3b 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss
+++ b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss
@@ -482,16 +482,6 @@ $payments-header-row-height: 38px;
}
}
- .more-payment-options-link {
- padding: 0;
- text-decoration: none;
-
- img {
- height: $grid-unit-20;
- margin-right: $grid-unit-05;
- }
- }
-
.more-payment-options {
padding: 25px 54px;
}
@@ -590,11 +580,6 @@ $payments-header-row-height: 38px;
border: 1px solid $gray-100;
box-shadow: none;
border-radius: 3px;
-
- a {
- outline: none;
- text-decoration: underline;
- }
}
.components-popover__content-container {
@@ -620,6 +605,11 @@ $payments-header-row-height: 38px;
}
}
+// The incentive popover is only identifiable by its content.
+.woocommerce-status-badge-popover .components-popover__content-container:has(.woocommerce-incentive-popover__title) {
+ width: 236px;
+}
+
.other-payment-gateways__content__title-popover {
.components-popover__content-container {
width: 256px;
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.tsx b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.tsx
index 7faf547d4d9..8b88171d654 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.tsx
@@ -18,7 +18,7 @@ import {
import React, { useState, useEffect } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import { getHistory, getNewPath } from '@woocommerce/navigation';
-import { Button } from '@wordpress/components';
+import { Link } from '@wordpress/ui';
/**
* Internal dependencies
@@ -48,7 +48,6 @@ import {
} from '~/settings-payments/utils';
import { WooPaymentsPostSandboxAccountSetupModal } from '~/settings-payments/components/modals';
import WooPaymentsModal from '~/settings-payments/onboarding/providers/woopayments';
-import { getAdminSetting } from '~/utils/admin-settings';
import { wooPaymentsOnboardingSessionEntrySettings } from '~/settings-payments/constants';
/**
@@ -81,8 +80,6 @@ export const SettingsPaymentsMain = () => {
const [ isOnboardingModalOpen, setIsOnboardingModalOpen ] =
useState( false );
- const assetUrl = getAdminSetting( 'wcAdminAssetUrl' );
-
useEffect( () => {
// Record the page view event.
recordPaymentsEvent( 'pageview' );
@@ -499,17 +496,14 @@ export const SettingsPaymentsMain = () => {
};
const morePaymentOptionsLink = (
- <Button
- variant={ 'link' }
- target="_blank"
- rel="noopener noreferrer"
+ <Link
href={ getMorePaymentOptionsUrl( businessCountry ) }
- className="more-payment-options-link"
onClick={ trackMorePaymentsOptionsClicked }
+ rel="noopener noreferrer"
+ openInNewTab
>
- <img src={ assetUrl + '/icons/external-link.svg' } alt="" />
{ __( 'More payment options', 'woocommerce' ) }
- </Button>
+ </Link>
);
return (
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/test/settings-payments-main.test.tsx b/plugins/woocommerce/client/admin/client/settings-payments/test/settings-payments-main.test.tsx
index a3619689232..d13a01deaf5 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/test/settings-payments-main.test.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/test/settings-payments-main.test.tsx
@@ -106,7 +106,9 @@ describe( 'SettingsPaymentsMain', () => {
);
expect(
- screen.getByRole( 'link', { name: 'More payment options' } )
+ screen.getByRole( 'link', {
+ name: 'More payment options (opens in a new tab)',
+ } )
).toHaveAttribute(
'href',
'https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?utm_source=payments_recommendations&country=BR'