Commit d2d3525f61a for woocommerce
commit d2d3525f61ab05c4580b369b56eede0506d29916
Author: Cem Ünalan <raicem@users.noreply.github.com>
Date: Wed Sep 9 14:28:21 2026 +0300
Fix three small in-app Marketplace UI issues (#68411)
* WOOMKT-859: Send the Plugins > Add Plugin Marketplace tab to Discover
The "WooCommerce Marketplace" tab in Plugins > Add Plugin redirected to
the Extensions tab of the in-app marketplace. Drop the explicit
tab=extensions query arg so the redirect lands on the default Discover
tab instead.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* WOOMKT-850: Make the WooCommerce Marketplace title larger
The standard wc-admin page header is hidden on the Extensions page, so
the heading in the marketplace's own header is the only page title. At
14px it was smaller than the tab labels below it and hard to notice.
Size it like the Settings > Payments title (16px, weight 600) so it
reads as the page title.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* WOOMKT-848: Show the Sponsored label on compact marketplace cards
Sponsored products are marked with a coloured stripe on the card and a
"Sponsored" text label. The label lived inside the vendor line, which
compact cards never render, so on Discover the stripe showed with no
explanation and nothing for screen readers. Give the label its own
condition, tied to the same sponsored check as the stripe, so it renders
on compact cards too. Regular cards are unchanged.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* Collapse the three Marketplace changelog entries into one
* Drop Linear ticket references from the changelog entry
* Address CodeRabbit feedback on the sponsored label PR
- Restore the visible space between the 'By' prefix and the vendor name
with an explicit text node, keeping the 'By' string unchanged for
translations. textContent now reads 'By <vendor>' instead of
'By<vendor>'.
- Query the Sponsored label with React Testing Library text queries
instead of the CSS implementation class, per the repo's testing
guidelines.
* Trim redundant comments in marketplace header and product card
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
Co-authored-by: Herman <KokkieH@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/WOOMKT-848-850-859 b/plugins/woocommerce/changelog/WOOMKT-848-850-859
new file mode 100644
index 00000000000..f97e57764ea
--- /dev/null
+++ b/plugins/woocommerce/changelog/WOOMKT-848-850-859
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Three small Marketplace UI fixes: the Plugins > Add Plugin "WooCommerce Marketplace" tab lands on Discover, the Extensions page title matches other admin page titles, and compact product cards show the "Sponsored" label.
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/header/header.scss b/plugins/woocommerce/client/admin/client/marketplace/components/header/header.scss
index 4b0a27f4517..f89759f2476 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/header/header.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/header/header.scss
@@ -27,7 +27,8 @@
}
.woocommerce-marketplace__header-title {
- font-size: 14px;
+ // Must stay larger than the tab labels below it.
+ font-size: 16px;
font-weight: 600;
margin: 0;
padding: 10px 0 0;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
index 106b9049b47..57e881c4166 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
@@ -94,6 +94,9 @@ function ProductCard( props: ProductCardProps ): React.JSX.Element {
return SPONSORED_PRODUCT_LABEL === product.label;
}
+ const showSponsoredLabel = ! isLoading && isSponsored();
+ const showVendorDetails = showVendor || showSponsoredLabel;
+
/**
* Sponsored products with a primary_color set have that color applied as a dynamically-colored stripe at the top of the card.
* In an ideal world this could be set in a data- attribute and we'd use CSS calc() and attr() to get it, but
@@ -351,25 +354,27 @@ function ProductCard( props: ProductCardProps ): React.JSX.Element {
<span className="woocommerce-marketplace__product-card__vendor" />
</p>
) }
- { showVendor && (
+ { showVendorDetails && (
<p className="woocommerce-marketplace__product-card__vendor-details">
- { productVendor && (
+ { showVendor && productVendor && (
<span className="woocommerce-marketplace__product-card__vendor">
<span>
- { __( 'By ', 'woocommerce' ) }
- </span>
+ { __( 'By', 'woocommerce' ) }
+ </span>{ ' ' }
{ productVendor }
</span>
) }
- { productVendor && isSponsored() && (
- <span
- aria-hidden="true"
- className="woocommerce-marketplace__product-card__vendor-details__separator"
- >
- ·
- </span>
- ) }
- { isSponsored() && (
+ { showVendor &&
+ productVendor &&
+ showSponsoredLabel && (
+ <span
+ aria-hidden="true"
+ className="woocommerce-marketplace__product-card__vendor-details__separator"
+ >
+ ·
+ </span>
+ ) }
+ { showSponsoredLabel && (
<span className="woocommerce-marketplace__product-card__sponsored-label">
{ __( 'Sponsored', 'woocommerce' ) }
</span>
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx
index ce6bb4876b3..e7f02c2038c 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx
@@ -136,3 +136,85 @@ describe( 'ProductCard quality badge placement', () => {
expect( getBadge( container ) ).toBeNull();
} );
} );
+
+describe( 'ProductCard sponsored label', () => {
+ const sponsoredProduct: Product = {
+ ...product,
+ vendorName: 'Test vendor',
+ vendorUrl: 'https://example.com',
+ label: 'promoted',
+ primary_color: '#720eec',
+ };
+
+ function renderSponsoredCard(
+ cardType: ProductCardType,
+ overrides: Partial< Product > = {}
+ ) {
+ return render(
+ <MarketplaceContext.Provider value={ context }>
+ <ProductCard
+ type={ ProductType.extension }
+ product={ { ...sponsoredProduct, ...overrides } }
+ cardType={ cardType }
+ tracksData={ {} }
+ />
+ </MarketplaceContext.Provider>
+ );
+ }
+
+ function getSponsoredLabel( view: ReturnType< typeof render > ) {
+ return view.queryByText( 'Sponsored' );
+ }
+
+ // The vendor line renders "By <name>" across separate elements, and the
+ // vendor link carries screen-reader text of its own. Match the phrase at
+ // its shallowest element so ancestors and the link itself don't match.
+ const VENDOR_PHRASE = /^By Test vendor/;
+
+ function matchesVendorPhrase( content: string, element: Element | null ) {
+ return (
+ VENDOR_PHRASE.test( element?.textContent ?? '' ) &&
+ ! Array.from( element?.children ?? [] ).some( ( child ) =>
+ VENDOR_PHRASE.test( child.textContent ?? '' )
+ )
+ );
+ }
+
+ it( 'renders the label on compact cards, without the vendor', () => {
+ const view = renderSponsoredCard( ProductCardType.compact );
+
+ expect( view.getByText( 'Sponsored' ) ).toBeVisible();
+ expect( view.queryByText( matchesVendorPhrase ) ).toBeNull();
+ expect(
+ view.container.querySelector(
+ '.woocommerce-marketplace__product-card__vendor-details__separator'
+ )
+ ).toBeNull();
+ } );
+
+ it( 'renders the vendor, separator and label on regular cards', () => {
+ const view = renderSponsoredCard( ProductCardType.regular );
+
+ // The space in "By Test vendor" is the regression guarded against.
+ expect( view.getByText( matchesVendorPhrase ) ).toBeVisible();
+ expect(
+ view.container.querySelector(
+ '.woocommerce-marketplace__product-card__vendor-details__separator'
+ )
+ ).not.toBeNull();
+ expect( view.getByText( 'Sponsored' ) ).toBeVisible();
+ } );
+
+ it( 'renders no label or vendor line on compact cards that are not sponsored', () => {
+ const view = renderSponsoredCard( ProductCardType.compact, {
+ label: undefined,
+ } );
+
+ expect( getSponsoredLabel( view ) ).toBeNull();
+ expect(
+ view.container.querySelector(
+ '.woocommerce-marketplace__product-card__vendor-details'
+ )
+ ).toBeNull();
+ } );
+} );
diff --git a/plugins/woocommerce/src/Internal/Admin/Marketplace.php b/plugins/woocommerce/src/Internal/Admin/Marketplace.php
index a1f3c04eecb..25cf8e3f861 100644
--- a/plugins/woocommerce/src/Internal/Admin/Marketplace.php
+++ b/plugins/woocommerce/src/Internal/Admin/Marketplace.php
@@ -129,7 +129,6 @@ class Marketplace {
array(
'page' => 'wc-admin',
'path' => '/extensions',
- 'tab' => 'extensions',
'ref' => 'plugins',
),
admin_url( 'admin.php' )