Make number of Cross-Sells products adjustable

assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx

@@ -18,20 +18,20 @@ import { Block as ProductSaleBadge } from '../../../atomic/blocks/product-elemen
 import { Block as ProductPrice } from '../../../atomic/blocks/product-elements/price/block';
 import { AddToCartButton } from '../../../atomic/blocks/product-elements/add-to-cart/shared';
 
-interface CrossSellsProducProps {
+interface CrossSellsProductProps {
 	crossSellsProduct: ProductResponseItem;
 	isLoading: boolean;
 }
 
 const CartCrossSellsProduct = ( {
 	crossSellsProduct,
 	isLoading,
-}: CrossSellsProducProps ): JSX.Element => {
+}: CrossSellsProductProps ): JSX.Element => {
 	const { product } = useProductDataContext();
 	const { permalink } = product;
 
 	return (
-		<div>
+		<div className="cross-sells-product">
 			<InnerBlockLayoutContextProvider
 				parentName={ 'woocommerce/cart-cross-sells-block' }
 				parentClassName={ 'wp-block-cart-cross-sells-product' }
@@ -44,7 +44,7 @@ const CartCrossSellsProduct = ( {
 						<ProductImage />
 						<ProductName />
 						<ProductRating />
-						<ProductSaleBadge product={ product } />
+						<ProductSaleBadge />
 						<ProductPrice />
 					</a>
 					<AddToCartButton />

assets/js/blocks/cart/cart-cross-sells-product-list/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { ProductResponseItem } from '@woocommerce/type-defs/product-response';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
@@ -16,15 +17,19 @@ interface CrossSellsProducListProps {
 	crossSellsProducts: ProductResponseItem[];
 	isLoading: boolean;
 	className?: string;
+	columns: number;
 }
 
 const CartCrossSellsProductList = ( {
 	crossSellsProducts,
 	isLoading = false,
+	columns,
 }: CrossSellsProducListProps ): JSX.Element => {
 	const products = isLoading
 		? placeholderRows
-		: crossSellsProducts.map( ( crossSellsProduct ) => {
+		: crossSellsProducts.map( ( crossSellsProduct, i ) => {
+				if ( i >= columns ) return null;
+
 				return (
 					<CartCrossSellsProduct
 						crossSellsProduct={ crossSellsProduct }
@@ -34,7 +39,7 @@ const CartCrossSellsProductList = ( {
 				);
 		  } );
 
-	return <>{ products }</>;
+	return <Noninteractive>{ products }</Noninteractive>;
 };
 
 export default CartCrossSellsProductList;

assets/js/blocks/cart/inner-blocks/cart-cross-sells-block/edit.tsx

@@ -1,18 +1,14 @@
 /**
  * External dependencies
  */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import type { TemplateArray } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
 export const Edit = (): JSX.Element => {
 	const blockProps = useBlockProps( {
 		className: 'wc-block-cart__cross-sells',
 	} );
-
 	const defaultTemplate = [
 		[
 			'core/heading',

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/block.json

@@ -11,6 +11,12 @@
 		"reusable": false,
 		"inserter": false
 	},
+	"attributes": {
+		"columns": {
+			"type": "number",
+			"default": 3
+		}
+	},
 	"parent": [ "woocommerce/cart-cross-sells-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/block.tsx

@@ -8,12 +8,19 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
  */
 import CartCrossSellsProductList from '../../cart-cross-sells-product-list';
 
-const Block = ( { className }: { className: string } ): JSX.Element => {
+interface BlockProps {
+	className?: string;
+	columns: number;
+}
+
+const Block = ( { className, columns }: BlockProps ): JSX.Element => {
 	const { crossSellsProducts, cartIsLoading } = useStoreCart();
+
 	return (
 		<CartCrossSellsProductList
-			crossSellsProducts={ crossSellsProducts }
 			className={ className }
+			columns={ columns }
+			crossSellsProducts={ crossSellsProducts }
 			isLoading={ cartIsLoading }
 		/>
 	);

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/edit.tsx

@@ -1,25 +1,52 @@
 /**
  * External dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { PanelBody, RangeControl } from '@wordpress/components';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { getSetting } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
 import './editor.scss';
 
-export const Edit = ( {
-	attributes,
-}: {
-	attributes: { className: string };
-} ): JSX.Element => {
-	const { className } = attributes;
+interface Attributes {
+	className?: string;
+	columns: number;
+}
+
+interface Props {
+	attributes: Attributes;
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+}
+
+export const Edit = ( { attributes, setAttributes }: Props ): JSX.Element => {
+	const { className, columns } = attributes;
 	const blockProps = useBlockProps();
 
 	return (
 		<div { ...blockProps }>
-			<Block className={ className } />
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
+				>
+					<RangeControl
+						label={ __(
+							'Cross-Sells products to show',
+							'woo-gutenberg-products-block'
+						) }
+						value={ columns }
+						onChange={ ( value ) =>
+							setAttributes( { columns: value } )
+						}
+						min={ getSetting( 'min_columns', 1 ) }
+						max={ getSetting( 'max_columns', 6 ) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<Block columns={ columns } className={ className } />
 		</div>
 	);
 };

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/editor.scss

@@ -1,12 +1,12 @@
 .wp-block-woocommerce-cart-cross-sells-products-block {
-	display: flex;
-	flex-wrap: wrap;
 
-	>div {
-		flex: 0 0 30%;
-		list-style: none;
+	.cross-sells-product {
+		display: inline-block;
+		margin-bottom: 2em;
 		padding-right: 5%;
 		text-align: center;
+		vertical-align: top;
+		width: 30%;
 
 		&:nth-child(3n + 3) {
 			padding-right: 0%;

assets/js/blocks/cart/inner-blocks/cart-items-block/edit.tsx

@@ -13,7 +13,11 @@ import {
 	getAllowedBlocks,
 } from '../../../cart-checkout-shared';
 
-export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
+interface Props {
+	clientId: string;
+}
+
+export const Edit = ( { clientId }: Props ): JSX.Element => {
 	const blockProps = useBlockProps( { className: 'wc-block-cart__main' } );
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_ITEMS );
 	const defaultTemplate = [

assets/js/previews/cart.ts

@@ -174,7 +174,6 @@ export const previewCart: CartResponse = {
 	],
 	cross_sells: [
 		{
-			key: '1',
 			id: 1,
 			name: __( 'Polo', 'woo-gutenberg-products-block' ),
 			permalink: 'https://example.org',
@@ -210,7 +209,6 @@ export const previewCart: CartResponse = {
 			average_rating: 4.5,
 		},
 		{
-			key: '2',
 			id: 2,
 			name: __( 'Long Sleeve Tee', 'woo-gutenberg-products-block' ),
 			permalink: 'https://example.org',
@@ -247,7 +245,6 @@ export const previewCart: CartResponse = {
 			average_rating: 4,
 		},
 		{
-			key: '3',
 			id: 3,
 			name: __( 'Hoodie with Zipper', 'woo-gutenberg-products-block' ),
 			permalink: 'https://example.org',
@@ -285,6 +282,117 @@ export const previewCart: CartResponse = {
 			],
 			average_rating: 1,
 		},
+		{
+			id: 4,
+			name: __( 'Hoodie with Logo', 'woo-gutenberg-products-block' ),
+			permalink: 'https://example.org',
+			on_sale: false,
+			prices: {
+				currency_code: 'USD',
+				currency_symbol: '$',
+				currency_minor_unit: 2,
+				currency_decimal_separator: '.',
+				currency_thousand_separator: ',',
+				currency_prefix: '$',
+				currency_suffix: '',
+				price: displayWithTax ? '4500' : '4250',
+				regular_price: displayWithTax ? '4500' : '4250',
+				sale_price: displayWithTax ? '4500' : '4250',
+				raw_prices: {
+					precision: 6,
+					price: displayWithTax ? '45000000' : '42500000',
+					regular_price: displayWithTax ? '45000000' : '42500000',
+					sale_price: displayWithTax ? '45000000' : '42500000',
+				},
+			},
+			images: [
+				{
+					id: 17,
+					src: WC_BLOCKS_IMAGE_URL + 'previews/hoodie-with-logo.jpg',
+					thumbnail:
+						WC_BLOCKS_IMAGE_URL + 'previews/hoodie-with-logo.jpg',
+					srcset: '',
+					sizes: '',
+					name: '',
+					alt: '',
+				},
+			],
+			average_rating: 5,
+		},
+		{
+			id: 5,
+			name: __( 'Hoodie with Pocket', 'woo-gutenberg-products-block' ),
+			permalink: 'https://example.org',
+			on_sale: true,
+			prices: {
+				currency_code: 'USD',
+				currency_symbol: '$',
+				currency_minor_unit: 2,
+				currency_decimal_separator: '.',
+				currency_thousand_separator: ',',
+				currency_prefix: '$',
+				currency_suffix: '',
+				price: displayWithTax ? '3500' : '3250',
+				regular_price: displayWithTax ? '4500' : '4250',
+				sale_price: displayWithTax ? '3500' : '3250',
+				raw_prices: {
+					precision: 6,
+					price: displayWithTax ? '35000000' : '32500000',
+					regular_price: displayWithTax ? '45000000' : '42500000',
+					sale_price: displayWithTax ? '35000000' : '32500000',
+				},
+			},
+			images: [
+				{
+					id: 17,
+					src:
+						WC_BLOCKS_IMAGE_URL + 'previews/hoodie-with-pocket.jpg',
+					thumbnail:
+						WC_BLOCKS_IMAGE_URL + 'previews/hoodie-with-pocket.jpg',
+					srcset: '',
+					sizes: '',
+					name: '',
+					alt: '',
+				},
+			],
+			average_rating: 3.75,
+		},
+		{
+			id: 6,
+			name: __( 'T-Shirt', 'woo-gutenberg-products-block' ),
+			permalink: 'https://example.org',
+			on_sale: false,
+			prices: {
+				currency_code: 'USD',
+				currency_symbol: '$',
+				currency_minor_unit: 2,
+				currency_decimal_separator: '.',
+				currency_thousand_separator: ',',
+				currency_prefix: '$',
+				currency_suffix: '',
+				price: displayWithTax ? '1800' : '1500',
+				regular_price: displayWithTax ? '1800' : '1500',
+				sale_price: displayWithTax ? '1800' : '1500',
+				raw_prices: {
+					precision: 6,
+					price: displayWithTax ? '1800000' : '1500000',
+					regular_price: displayWithTax ? '1800000' : '1500000',
+					sale_price: displayWithTax ? '1800000' : '1500000',
+				},
+			},
+			images: [
+				{
+					id: 17,
+					src: WC_BLOCKS_IMAGE_URL + 'previews/tshirt.jpg',
+					thumbnail: WC_BLOCKS_IMAGE_URL + 'previews/tshirt.jpg',
+					srcset: '',
+					sizes: '',
+					name: '',
+					alt: '',
+				},
+			],
+			average_rating: 3,
+		},
 	],
 	fees: [
 		{

assets/js/types/type-defs/hooks.ts

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { ProductResponseItem } from '@woocommerce/type-defs/product-response';
+
 /**
  * Internal dependencies
  */
@@ -34,7 +39,7 @@ export interface StoreCartCoupon {
 export interface StoreCart {
 	cartCoupons: CartResponseCoupons;
 	cartItems: Array< CartResponseItem >;
-	crossSellsItems: Array< CartResponseItem >;
+	crossSellsProducts: Array< ProductResponseItem >;
 	cartFees: Array< CartResponseFeeItem >;
 	cartItemsCount: number;
 	cartItemsWeight: number;

composer.json

@@ -2,7 +2,8 @@
 	"name": "woocommerce/woocommerce-blocks",
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://woocommerce.com/",
-	"type": "wordpress-plugin",
+	"type":"wordpress-plugin",
+	"version": "7.9.0-dev",
 	"keywords": [
 		"gutenberg",
 		"woocommerce",