Fix: Mini Cart block: divide contents into three inner blocks (#5386)

Co-authored-by: Albert Juhé Lluveras <[email protected]>

assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx

@@ -16,6 +16,7 @@ import type { TemplateArray } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { useViewSwitcher, useForcedLayout } from '../shared';
+import './editor.scss';
 
 // Array of allowed block names.
 const ALLOWED_BLOCKS = [

assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss

@@ -0,0 +1,16 @@
+.wp-block-woocommerce-mini-cart-contents {
+	max-width: 480px;
+	margin: 0 auto;
+}
+
+.wp-block-woocommerce-filled-mini-cart-contents-block {
+	.block-editor-block-list__layout {
+		display: flex;
+		flex-direction: column;
+		min-height: calc(100vh - 2 * $gap-largest);
+	}
+}
+
+.wp-block-woocommerce-mini-cart-products-table-block {
+	margin-bottom: auto;
+}

assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx

@@ -36,6 +36,9 @@ const settings = {
 		reusable: false,
 		inserter: false,
 		__experimentalExposeControlsToChildren: true,
+		color: {
+			text: false,
+		},
 	},
 	attributes: {
 		isPreview: {

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx

@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import type { TemplateArray } from '@wordpress/blocks';
-import { useEditorContext } from '@woocommerce/base-context';
+import { EditorProvider, useEditorContext } from '@woocommerce/base-context';
+import { previewCart } from '@woocommerce/resource-previews';
 
 /**
  * Internal dependencies
@@ -18,16 +18,9 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const { currentView } = useEditorContext();
 
 	const defaultTemplate = ( [
-		[
-			'core/heading',
-			{
-				content: __(
-					'Filled mini cart content',
-					'woo-gutenberg-products-block'
-				),
-				level: 2,
-			},
-		],
+		[ 'woocommerce/mini-cart-title-block', {} ],
+		[ 'woocommerce/mini-cart-products-table-block', {} ],
+		[ 'woocommerce/mini-cart-footer-block', {} ],
 	].filter( Boolean ) as unknown ) as TemplateArray;
 
 	useForcedLayout( {
@@ -43,10 +36,16 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 				currentView !== 'woocommerce/filled-mini-cart-contents-block'
 			}
 		>
-			<InnerBlocks
-				allowedBlocks={ allowedBlocks }
-				templateLock="insert"
-			/>
+			<EditorProvider
+				currentView={ currentView }
+				previewData={ { previewCart } }
+			>
+				<InnerBlocks
+					template={ defaultTemplate }
+					allowedBlocks={ allowedBlocks }
+					templateLock="insert"
+				/>
+			</EditorProvider>
 		</div>
 	);
 };

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx

@@ -1,91 +1,20 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import {
-	usePaymentMethods,
-	useStoreCart,
-} from '@woocommerce/base-context/hooks';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
-import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings';
-import Button from '@woocommerce/base-components/button';
-import { PaymentMethodDataProvider } from '@woocommerce/base-context';
-import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
-import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
-import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { getSetting } from '@woocommerce/settings';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-/**
- * Internal dependencies
- */
-import CartLineItemsTable from '../../../cart/cart-line-items-table';
-
-const PaymentMethodIconsElement = (): JSX.Element => {
-	const { paymentMethods } = usePaymentMethods();
-	return (
-		<PaymentMethodIcons
-			icons={ getIconsFromPaymentMethods( paymentMethods ) }
-		/>
-	);
-};
-
-type FilledMiniCartContentsBlockProps = {
+const FilledMiniCartContentsBlock = ( {
+	children,
+}: {
 	children: JSX.Element | JSX.Element[];
-};
-
-const FilledMiniCartContentsBlock = ( {}: FilledMiniCartContentsBlockProps ): JSX.Element | null => {
-	const { cartItems, cartIsLoading, cartTotals } = useStoreCart();
-	const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
-		? parseInt( cartTotals.total_items, 10 ) +
-		  parseInt( cartTotals.total_items_tax, 10 )
-		: parseInt( cartTotals.total_items, 10 );
+} ): JSX.Element | null => {
+	const { cartItems } = useStoreCart();
 
-	if ( cartIsLoading || cartItems.length === 0 ) {
+	if ( cartItems.length === 0 ) {
 		return null;
 	}
 
-	return (
-		<>
-			<div className="wc-block-mini-cart__items">
-				<CartLineItemsTable
-					lineItems={ cartItems }
-					isLoading={ cartIsLoading }
-				/>
-			</div>
-			<div className="wc-block-mini-cart__footer">
-				<TotalsItem
-					className="wc-block-mini-cart__footer-subtotal"
-					currency={ getCurrencyFromPriceResponse( cartTotals ) }
-					label={ __( 'Subtotal', 'woo-gutenberg-products-block' ) }
-					value={ subTotal }
-					description={ __(
-						'Shipping, taxes, and discounts calculated at checkout.',
-						'woo-gutenberg-products-block'
-					) }
-				/>
-				<div className="wc-block-mini-cart__footer-actions">
-					<Button
-						className="wc-block-mini-cart__footer-cart"
-						href={ CART_URL }
-					>
-						{ __( 'View my cart', 'woo-gutenberg-products-block' ) }
-					</Button>
-					<Button
-						className="wc-block-mini-cart__footer-checkout"
-						href={ CHECKOUT_URL }
-					>
-						{ __(
-							'Go to checkout',
-							'woo-gutenberg-products-block'
-						) }
-					</Button>
-				</div>
-				<PaymentMethodDataProvider>
-					<PaymentMethodIconsElement />
-				</PaymentMethodDataProvider>
-			</div>
-		</>
-	);
+	return <>{ children }</>;
 };
 
 export default FilledMiniCartContentsBlock;

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/index.tsx

@@ -3,3 +3,6 @@
  */
 import './empty-mini-cart-contents-block';
 import './filled-mini-cart-contents-block';
+import './mini-cart-title-block';
+import './mini-cart-products-table-block';
+import './mini-cart-footer-block';

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/mini-cart-footer-block",
+	"version": "1.0.0",
+	"title": "Mini Cart Footer",
+	"description": "Block that displays the footer of the Mini Cart block.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/filled-mini-cart-contents-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TotalsItem } from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import {
+	usePaymentMethods,
+	useStoreCart,
+} from '@woocommerce/base-context/hooks';
+import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
+import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
+import { getSetting } from '@woocommerce/settings';
+import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings';
+import Button from '@woocommerce/base-components/button';
+import { PaymentMethodDataProvider } from '@woocommerce/base-context';
+
+const PaymentMethodIconsElement = (): JSX.Element => {
+	const { paymentMethods } = usePaymentMethods();
+	return (
+		<PaymentMethodIcons
+			icons={ getIconsFromPaymentMethods( paymentMethods ) }
+		/>
+	);
+};
+
+const Block = (): JSX.Element => {
+	const { cartTotals } = useStoreCart();
+	const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
+		? parseInt( cartTotals.total_items, 10 ) +
+		  parseInt( cartTotals.total_items_tax, 10 )
+		: parseInt( cartTotals.total_items, 10 );
+	return (
+		<div className="wc-block-mini-cart__footer">
+			<TotalsItem
+				className="wc-block-mini-cart__footer-subtotal"
+				currency={ getCurrencyFromPriceResponse( cartTotals ) }
+				label={ __( 'Subtotal', 'woo-gutenberg-products-block' ) }
+				value={ subTotal }
+				description={ __(
+					'Shipping, taxes, and discounts calculated at checkout.',
+					'woo-gutenberg-products-block'
+				) }
+			/>
+			<div className="wc-block-mini-cart__footer-actions">
+				{ CART_URL && (
+					<Button
+						className="wc-block-mini-cart__footer-cart"
+						href={ CART_URL }
+					>
+						{ __( 'View my cart', 'woo-gutenberg-products-block' ) }
+					</Button>
+				) }
+				{ CHECKOUT_URL && (
+					<Button
+						className="wc-block-mini-cart__footer-checkout"
+						href={ CHECKOUT_URL }
+					>
+						{ __(
+							'Go to checkout',
+							'woo-gutenberg-products-block'
+						) }
+					</Button>
+				) }
+			</div>
+			<PaymentMethodDataProvider>
+				<PaymentMethodIconsElement />
+			</PaymentMethodDataProvider>
+		</div>
+	);
+};
+
+export default Block;

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = (): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block />
+			</Noninteractive>
+		</div>
+	);
+};

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx

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

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/mini-cart-products-table-block",
+	"version": "1.0.0",
+	"title": "Mini Cart Products Table",
+	"description": "Block that displays the products table of the Mini Cart block.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/filled-mini-cart-contents-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import CartLineItemsTable from '../../../cart/cart-line-items-table';
+
+const Block = (): JSX.Element => {
+	const { cartItems, cartIsLoading } = useStoreCart();
+	return (
+		<div className="wc-block-mini-cart__items">
+			<CartLineItemsTable
+				lineItems={ cartItems }
+				isLoading={ cartIsLoading }
+			/>
+		</div>
+	);
+};
+
+export default Block;