diff --git a/packages/js/product-editor/changelog/update-41965_reorder_grouped_products b/packages/js/product-editor/changelog/update-41965_reorder_grouped_products
new file mode 100644
index 00000000000..a9b93f27ac4
--- /dev/null
+++ b/packages/js/product-editor/changelog/update-41965_reorder_grouped_products
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update products list field to add re-order option.
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx
index b6585cec9ca..1ee25a89aab 100644
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx
@@ -24,6 +24,7 @@ import classNames from 'classnames';
import {
AddProductsModal,
getProductImageStyle,
+ ReorderProductsModal,
} from '../../../components/add-products-modal';
import { ProductEditorBlockEditProps } from '../../../types';
import { Shirt, Pants, Glasses } from './images';
@@ -40,6 +41,8 @@ export function Edit( {
const { property } = attributes;
const blockProps = useWooBlockProps( attributes );
const [ openAddProductsModal, setOpenAddProductsModal ] = useState( false );
+ const [ openReorderProductsModal, setOpenReorderProductsModal ] =
+ useState( false );
const [ isLoading, setIsLoading ] = useState( false );
const [ preventFetch, setPreventFetch ] = useState( false );
const [ groupedProductIds, setGroupedProductIds ] = useEntityProp<
@@ -72,6 +75,10 @@ export function Edit( {
setOpenAddProductsModal( true );
}
+ function handleReorderProductsButtonClick() {
+ setOpenReorderProductsModal( true );
+ }
+
function handleAddProductsModalSubmit( value: Product[] ) {
const newGroupedProducts = [ ...groupedProducts, ...value ];
setPreventFetch( true );
@@ -82,10 +89,20 @@ export function Edit( {
setOpenAddProductsModal( false );
}
+ function handleReorderProductsModalSubmit( value: Product[] ) {
+ setGroupedProducts( value );
+ setGroupedProductIds( value.map( ( product ) => product.id ) );
+ setOpenReorderProductsModal( false );
+ }
+
function handleAddProductsModalClose() {
setOpenAddProductsModal( false );
}
+ function handleReorderProductsModalClose() {
+ setOpenReorderProductsModal( false );
+ }
+
function removeProductHandler( product: Product ) {
return function handleRemoveClick() {
const newGroupedProducts = groupedProducts.filter(
@@ -104,6 +121,14 @@ export function Edit( {
return (
+ { ! isLoading && groupedProducts.length > 0 && (
+
+ ) }
) }
+ { openReorderProductsModal && (
+
+ ) }
);
}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/editor.scss b/packages/js/product-editor/src/blocks/product-fields/product-list/editor.scss
index 26bbbf38a54..d3b5e024890 100644
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/editor.scss
+++ b/packages/js/product-editor/src/blocks/product-fields/product-list/editor.scss
@@ -7,6 +7,7 @@
display: flex;
align-items: center;
justify-content: end;
+ gap: $gap-smaller;
}
&__empty-state {
diff --git a/packages/js/product-editor/src/components/add-products-modal/add-products-modal.tsx b/packages/js/product-editor/src/components/add-products-modal/add-products-modal.tsx
index 1b9abae1557..6e4f9d68907 100644
--- a/packages/js/product-editor/src/components/add-products-modal/add-products-modal.tsx
+++ b/packages/js/product-editor/src/components/add-products-modal/add-products-modal.tsx
@@ -12,7 +12,7 @@ import {
useState,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { closeSmall, dragHandle } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
import {
__experimentalSelectControl as SelectControl,
__experimentalSelectControlMenu as Menu,
@@ -21,13 +21,11 @@ import {
} from '@woocommerce/components';
import { CurrencyContext } from '@woocommerce/currency';
import { PRODUCTS_STORE_NAME, Product } from '@woocommerce/data';
-import classNames from 'classnames';
/**
* Internal dependencies
*/
import { AddProductsModalProps } from './types';
-import { useDraggable } from '../../hooks/use-draggable';
export function getProductImageStyle( product: Product ) {
return product.images.length > 0
@@ -103,10 +101,6 @@ export function AddProductsModal( {
};
}
- const { container, draggable, handler } = useDraggable( {
- onSort: setSelectedProducts,
- } );
-
return (
{ Boolean( selectedProducts.length ) && (
-
+
{ selectedProducts.map( ( item ) => (
-
-
( [
+ ...products,
+ ] );
+
+ function handleSubmit( event: FormEvent< HTMLFormElement > ) {
+ event.preventDefault();
+
+ onSubmit( [ ...selectedProducts ] );
+ }
+
+ function handleCancelClick() {
+ onClose();
+ }
+
+ const { container, draggable, handler } = useDraggable( {
+ onSort: setSelectedProducts,
+ } );
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/js/product-editor/src/components/add-products-modal/style.scss b/packages/js/product-editor/src/components/add-products-modal/style.scss
index fedf2960b61..d4f484044a9 100644
--- a/packages/js/product-editor/src/components/add-products-modal/style.scss
+++ b/packages/js/product-editor/src/components/add-products-modal/style.scss
@@ -1,4 +1,5 @@
-.woocommerce-add-products-modal {
+.woocommerce-add-products-modal,
+.woocommerce-reorder-products-modal {
@include breakpoint(">600px") {
width: calc(100% - 32px);
}
diff --git a/packages/js/product-editor/src/components/add-products-modal/types.ts b/packages/js/product-editor/src/components/add-products-modal/types.ts
index b06784c97d4..77bb8c25d1c 100644
--- a/packages/js/product-editor/src/components/add-products-modal/types.ts
+++ b/packages/js/product-editor/src/components/add-products-modal/types.ts
@@ -1,10 +1,16 @@
/**
* External dependencies
*/
-import { Product } from '@woocommerce/data';
+import type { Product } from '@woocommerce/data';
export type AddProductsModalProps = {
initialValue: Product[];
onSubmit( value: Product[] ): void;
onClose(): void;
};
+
+export type ReorderProductsModalProps = {
+ products: Product[];
+ onSubmit( value: Product[] ): void;
+ onClose(): void;
+};