Commit 60fe95a813c for woocommerce
commit 60fe95a813c5bab172af036fd06b09adf565b14a
Author: verofasulo <98944206+verofasulo@users.noreply.github.com>
Date: Wed May 20 12:40:35 2026 +0200
Add Beta feedback badge next to the Products page title (#65163)
* Add Beta feedback badge next to the Products page title
* fix lint issue
* update label
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
diff --git a/packages/js/experimental-products-app/changelog/add-products-app-beta-feedback-badge b/packages/js/experimental-products-app/changelog/add-products-app-beta-feedback-badge
new file mode 100644
index 00000000000..cde72195c2c
--- /dev/null
+++ b/packages/js/experimental-products-app/changelog/add-products-app-beta-feedback-badge
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add a "Beta · Share feedback" badge next to the Products page title in the experimental products app, linking to the user feedback form.
diff --git a/packages/js/experimental-products-app/src/product-list/page/index.tsx b/packages/js/experimental-products-app/src/product-list/page/index.tsx
index 1d47652b9be..5360b5974b1 100644
--- a/packages/js/experimental-products-app/src/product-list/page/index.tsx
+++ b/packages/js/experimental-products-app/src/product-list/page/index.tsx
@@ -2,7 +2,10 @@
* External dependencies
*/
import { Page } from '@wordpress/admin-ui';
-import { Stack } from '@wordpress/ui';
+import { Badge, Stack } from '@wordpress/ui';
+import { __ } from '@wordpress/i18n';
+
+const FEEDBACK_URL = 'https://usabi.li/do/mqc0hscbzp2i/yejxei';
type ProductListPageProps = {
ariaLabel: string;
@@ -42,6 +45,19 @@ export function ProductListPageHeader( {
<h2 className="woocommerce-product-list-page__header-title">
{ title }
</h2>
+ <a
+ className="woocommerce-product-list-page__feedback-link"
+ href={ FEEDBACK_URL }
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <Badge intent="none">
+ { __(
+ 'Experimental · Share feedback',
+ 'woocommerce'
+ ) }
+ </Badge>
+ </a>
</Stack>
<Stack
direction="row"
diff --git a/packages/js/experimental-products-app/src/style.scss b/packages/js/experimental-products-app/src/style.scss
index 8c9336fbece..2304b94d054 100644
--- a/packages/js/experimental-products-app/src/style.scss
+++ b/packages/js/experimental-products-app/src/style.scss
@@ -90,6 +90,19 @@
flex-shrink: 0;
}
+// Wrap the Beta feedback Badge in a link without inheriting the default
+// underlined anchor styling — the Badge already provides its own affordance.
+.woocommerce-product-list-page__feedback-link {
+ display: inline-flex;
+ text-decoration: none;
+ color: inherit;
+
+ &:hover,
+ &:focus-visible {
+ text-decoration: none;
+ }
+}
+
.woocommerce-product-list-page__header-subtitle {
margin: 0;
color: var(--wpds-color-fg-content-neutral-weak, #707070);