Commit 3b7e7012e35 for woocommerce
commit 3b7e7012e35b50881fbc23e8c8e7a10cee133b4c
Author: verofasulo <98944206+verofasulo@users.noreply.github.com>
Date: Fri May 8 13:50:23 2026 +0200
Add Quick edit as a primary row action in the products list (#64702)
* Add Quick edit as a primary row action in the products list
Splits the product list row Edit action into two separate primary actions:
"Quick edit" (opens the side panel) and "Edit" (opens the full product
editor). Also removes the empty hierarchy column from the products table
by switching to text-based variation indentation.
* remove not necessary code
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
diff --git a/packages/js/experimental-products-app/changelog/add-quick-edit-row-action b/packages/js/experimental-products-app/changelog/add-quick-edit-row-action
new file mode 100644
index 00000000000..61f0f8e8a1e
--- /dev/null
+++ b/packages/js/experimental-products-app/changelog/add-quick-edit-row-action
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Quick edit as a primary row action; Edit now opens the full product editor.
diff --git a/packages/js/experimental-products-app/src/dataviews-actions/actions.test.tsx b/packages/js/experimental-products-app/src/dataviews-actions/actions.test.tsx
index f5cb1604a0d..1c16b585bd4 100644
--- a/packages/js/experimental-products-app/src/dataviews-actions/actions.test.tsx
+++ b/packages/js/experimental-products-app/src/dataviews-actions/actions.test.tsx
@@ -128,7 +128,25 @@ describe( 'product list actions', () => {
} );
} );
- it( 'opens quick edit when the Edit action is triggered', () => {
+ it( 'opens quick edit panel when the Quick edit action is triggered', () => {
+ const { result } = renderHook( () => useProductActions() );
+ const quickEditProductAction = result.current.find(
+ ( action ) => action.id === 'quick-edit-product'
+ );
+
+ expect( quickEditProductAction ).toBeDefined();
+
+ getCallbackAction( quickEditProductAction! ).callback( [ product ], {
+ onActionPerformed,
+ } );
+
+ expect( navigate ).toHaveBeenCalledWith(
+ '/products?activeView=draft&postId=12&quickEdit=true'
+ );
+ expect( onActionPerformed ).toHaveBeenCalledWith( [ product ] );
+ } );
+
+ it( 'opens product editor when the Edit action is triggered', () => {
const { result } = renderHook( () => useProductActions() );
const editProductAction = result.current.find(
( action ) => action.id === 'edit-product'
@@ -136,14 +154,23 @@ describe( 'product list actions', () => {
expect( editProductAction ).toBeDefined();
+ const originalLocation = window.location;
+ Object.defineProperty( window, 'location', {
+ writable: true,
+ value: { href: '' },
+ } );
+
getCallbackAction( editProductAction! ).callback( [ product ], {
onActionPerformed,
} );
- expect( navigate ).toHaveBeenCalledWith(
- '/products?activeView=draft&postId=12&quickEdit=true'
- );
+ expect( window.location.href ).toBe( 'post.php?post=12&action=edit' );
expect( onActionPerformed ).toHaveBeenCalledWith( [ product ] );
+
+ Object.defineProperty( window, 'location', {
+ writable: true,
+ value: originalLocation,
+ } );
} );
it( 'duplicates products through the WooCommerce duplicate endpoint', async () => {
diff --git a/packages/js/experimental-products-app/src/dataviews-actions/actions.tsx b/packages/js/experimental-products-app/src/dataviews-actions/actions.tsx
index ab604d7e020..9885092a5f1 100644
--- a/packages/js/experimental-products-app/src/dataviews-actions/actions.tsx
+++ b/packages/js/experimental-products-app/src/dataviews-actions/actions.tsx
@@ -118,13 +118,13 @@ function getNoticeFromSettledResults( {
};
}
-export const editAction = ( {
+export const quickEditAction = ( {
navigate,
path = '/',
query = {},
}: EditActionOptions ): Action< ProductEntityRecord > => ( {
- id: 'edit-product',
- label: __( 'Edit', 'woocommerce' ),
+ id: 'quick-edit-product',
+ label: __( 'Quick edit', 'woocommerce' ),
isPrimary: true,
icon: edit,
isEligible( product ) {
@@ -143,6 +143,31 @@ export const editAction = ( {
},
} );
+export const editAction = (): Action< ProductEntityRecord > => ( {
+ id: 'edit-product',
+ label: __( 'Edit', 'woocommerce' ),
+ isPrimary: true,
+ isEligible( product ) {
+ return product.status !== 'trash';
+ },
+ callback( items, { onActionPerformed } ) {
+ const product = items[ 0 ];
+
+ if ( product ) {
+ window.location.href = getAdminLink(
+ addQueryArgs( 'post.php', {
+ post: product.id,
+ action: 'edit',
+ } )
+ );
+ }
+
+ if ( onActionPerformed ) {
+ onActionPerformed( items );
+ }
+ },
+} );
+
export const viewAction = (): Action< ProductEntityRecord > => ( {
id: 'view-product',
label: _x( 'View', 'verb', 'woocommerce' ),
@@ -349,11 +374,12 @@ export const useProductActions = () => {
return useMemo(
() => [
- editAction( {
+ quickEditAction( {
navigate,
path,
query,
} ),
+ editAction(),
viewAction(),
duplicateProductAction(),
moveToTrashAction(),