Commit d1435578f64 for woocommerce
commit d1435578f6450a2d064264eb41581a8c100959cf
Author: verofasulo <98944206+verofasulo@users.noreply.github.com>
Date: Fri May 8 12:28:43 2026 +0200
Align product status options across select, tabs, and badge (#64707)
* Align product status options across select, tabs, and badge
Update the product status select to offer Published, Draft, and Pending
review (replacing "Active" with "Published" and adding Pending review).
Add a matching Pending review tab to the products list and rename the
Pending status badge to Pending review and the Active badge to
Published. Remove the descriptive helper text under the status select.
* Use informational intent for the Pending review badge
Switch the Pending review status badge from intent="none" to
intent="informational" so it reads as a distinct in-progress state
rather than an inactive one.
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
diff --git a/packages/js/experimental-products-app/changelog/update-status-options-and-labels b/packages/js/experimental-products-app/changelog/update-status-options-and-labels
new file mode 100644
index 00000000000..42235317729
--- /dev/null
+++ b/packages/js/experimental-products-app/changelog/update-status-options-and-labels
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Align product status labels (Published, Draft, Pending review) across the status select, tabs, and badge in the experimental products list. Remove the helper text under the status select.
diff --git a/packages/js/experimental-products-app/src/fields/components/product-status-badge.tsx b/packages/js/experimental-products-app/src/fields/components/product-status-badge.tsx
index 6ed56b9077b..9ff2ddceba8 100644
--- a/packages/js/experimental-products-app/src/fields/components/product-status-badge.tsx
+++ b/packages/js/experimental-products-app/src/fields/components/product-status-badge.tsx
@@ -16,7 +16,7 @@ const statuses = {
intent: 'draft',
},
publish: {
- label: __( 'Active', 'woocommerce' ),
+ label: __( 'Published', 'woocommerce' ),
intent: 'stable',
},
trash: {
@@ -32,8 +32,8 @@ const statuses = {
intent: 'none',
},
pending: {
- label: __( 'Pending', 'woocommerce' ),
- intent: 'none',
+ label: __( 'Pending review', 'woocommerce' ),
+ intent: 'informational',
},
private: {
label: __( 'Private', 'woocommerce' ),
diff --git a/packages/js/experimental-products-app/src/fields/product_status/field.tsx b/packages/js/experimental-products-app/src/fields/product_status/field.tsx
index 19a2afbf09a..3ca834a0a1a 100644
--- a/packages/js/experimental-products-app/src/fields/product_status/field.tsx
+++ b/packages/js/experimental-products-app/src/fields/product_status/field.tsx
@@ -13,7 +13,12 @@ import type { ProductEntityRecord } from '../types';
import { ProductStatusBadge } from '../components/product-status-badge';
function isValidStatus( value: string ) {
- return value === 'draft' || value === 'publish' || value === 'trash';
+ return (
+ value === 'draft' ||
+ value === 'pending' ||
+ value === 'publish' ||
+ value === 'trash'
+ );
}
const fieldDefinition = {
@@ -22,8 +27,9 @@ const fieldDefinition = {
enableSorting: false,
filterBy: false,
elements: [
+ { value: 'publish', label: __( 'Published', 'woocommerce' ) },
{ value: 'draft', label: __( 'Draft', 'woocommerce' ) },
- { value: 'publish', label: __( 'Active', 'woocommerce' ) },
+ { value: 'pending', label: __( 'Pending review', 'woocommerce' ) },
{ value: 'trash', label: __( 'Trash', 'woocommerce' ) },
],
} satisfies Partial< Field< ProductEntityRecord > >;
@@ -34,35 +40,21 @@ export const fieldExtensions: Partial< Field< ProductEntityRecord > > = {
render: ( { item }: { item: ProductEntityRecord } ) => (
<ProductStatusBadge status={ item.status } />
),
- Edit: ( { data, onChange, field } ) => {
- const description =
- data.status === 'publish'
- ? __(
- 'This product is live and visible on your store.',
- 'woocommerce'
- )
- : __(
- 'This product is not visible to customers.',
- 'woocommerce'
- );
-
- return (
- <SelectControl
- label={ field.label }
- help={ description }
- value={ data.status }
- options={ field.elements?.filter(
- ( element: { label: string; value: string } ) =>
- element.value !== 'trash'
- ) }
- onChange={ ( value ) => {
- if ( value && isValidStatus( value ) ) {
- onChange( {
- status: value,
- } );
- }
- } }
- />
- );
- },
+ Edit: ( { data, onChange, field } ) => (
+ <SelectControl
+ label={ field.label }
+ value={ data.status }
+ options={ field.elements?.filter(
+ ( element: { label: string; value: string } ) =>
+ element.value !== 'trash'
+ ) }
+ onChange={ ( value ) => {
+ if ( value && isValidStatus( value ) ) {
+ onChange( {
+ status: value,
+ } );
+ }
+ } }
+ />
+ ),
};
diff --git a/packages/js/experimental-products-app/src/product-list/constants.ts b/packages/js/experimental-products-app/src/product-list/constants.ts
index 0240ed80c1a..a87a430cee9 100644
--- a/packages/js/experimental-products-app/src/product-list/constants.ts
+++ b/packages/js/experimental-products-app/src/product-list/constants.ts
@@ -30,6 +30,7 @@ export const PRODUCT_LIST_TAB_VALUES = [
'all',
'publish',
'draft',
+ 'pending',
'trash',
] as const;
@@ -51,6 +52,10 @@ export const PRODUCT_LIST_TABS: Array< {
value: 'draft',
label: __( 'Draft', 'woocommerce' ),
},
+ {
+ value: 'pending',
+ label: __( 'Pending review', 'woocommerce' ),
+ },
{
value: 'trash',
label: __( 'Trash', 'woocommerce' ),
diff --git a/packages/js/experimental-products-app/src/product-list/utils.ts b/packages/js/experimental-products-app/src/product-list/utils.ts
index 065fbd7faa3..ad88eba0743 100644
--- a/packages/js/experimental-products-app/src/product-list/utils.ts
+++ b/packages/js/experimental-products-app/src/product-list/utils.ts
@@ -69,6 +69,7 @@ export function getStatusForProductListTab(
switch ( tab ) {
case 'publish':
case 'draft':
+ case 'pending':
case 'trash':
return tab;
default: