Add cross sells products to preview cart

.markdownlint.json

@@ -1,5 +1,3 @@
-
-
 {
 	"default": true,
 	"MD003": { "style": "atx" },
@@ -9,7 +7,7 @@
 	"MD025": false,
 	"MD029": false,
 	"MD033": false,
-	"MD046": {"style": "fenced"},
+	"MD046": { "style": "fenced" },
 	"no-hard-tabs": false,
 	"whitespace": false
 }

assets/js/base/context/tsconfig.json

@@ -8,7 +8,7 @@
 		"../../settings/blocks/index.ts",
 		"../../base/hooks/index.js",
 		"../../base/utils/",
-	  	"../../utils",
+		"../../utils",
 		"../../data/",
 		"../../types/",
 		"../components",

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

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/cart-cross-sells-block",
+	"version": "1.0.0",
+	"title": "Cart Cross-Sells block",
+	"description": "Shows the Cross-Sells block.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"parent": [ "woocommerce/cart-items-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

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

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import type { TemplateArray } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+export const Edit = (): JSX.Element => {
+	const blockProps = useBlockProps( {
+		className: 'wc-block-cart__cross-sells',
+	} );
+
+	const defaultTemplate = [
+		[
+			'core/heading',
+			{
+				content: __(
+					'You may be interested in…',
+					'woo-gutenberg-products-block'
+				),
+				level: 3,
+			},
+			,
+			[],
+		],
+		[ 'woocommerce/cart-cross-sells-products-block', {}, [] ],
+	] as TemplateArray;
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks template={ defaultTemplate } templateLock={ false } />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, column } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ column }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );

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

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/cart-cross-sells-products-block",
+	"version": "1.0.0",
+	"title": "Cart Cross-Sells products",
+	"description": "Shows the Cross-Sells products.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"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

@@ -0,0 +1,10 @@
+const Block = (): JSX.Element => {
+	const divStyle = {
+		border: '1px solid',
+		padding: '5px 10px',
+		textAlign: 'center',
+	};
+	return <div style={ divStyle }>CROSS SELLS PRODUCTS</div>;
+};
+
+export default Block;

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

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: { className: string };
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Block className={ className } />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, column } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ column }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );

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

@@ -18,6 +18,7 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_ITEMS );
 	const defaultTemplate = [
 		[ 'woocommerce/cart-line-items-block', {}, [] ],
+		[ 'woocommerce/cart-cross-sells-block', {}, [] ],
 	] as TemplateArray;
 
 	useForcedLayout( {

assets/js/blocks/cart/inner-blocks/index.tsx

@@ -4,6 +4,8 @@
 import './filled-cart-block';
 import './cart-items-block';
 import './cart-line-items-block';
+import './cart-cross-sells-block';
+import './cart-cross-sells-products';
 import './cart-totals-block';
 import './cart-express-payment-block';
 import './proceed-to-checkout-block';

assets/js/blocks/cart/style.scss

@@ -21,7 +21,7 @@ table.wc-block-cart-items td {
 	background: none !important;
 	// Remove borders on default themes.
 	border: 0;
-	margin: 0;
+	margin: 0 0 2em;
 }
 
 .editor-styles-wrapper table.wc-block-cart-items,