Add custom className support to Cart Inner Blocks (#4985)

* move empty cart

* remove Cart and rename Cart i2 to Cart

* graduate blocks

* setup template migration from Cart i1 to Cart i2

* back to js so we have a good diff

* add migration

* fix bug in empty cart template

* add useForceLayout hook to edit

* migrate from old block to new block

* migrate styles

* respect align

* add tests

* Include latest cart line item improvements from cart-i1

* Missing changes from cart-i1

* Line items table should be disabled

* Fix e2e tests for cart i2

* update tests to adapt for inner blocks

* update select to resolveSelect to remove warning checker

* rename test/block to test/index

* move blocks to their own file

* undo rename to keep diff clean

* remove .tsx and update jest config

* Revert "update select to resolveSelect to remove warning checker"

This reverts commit 79d55de.

* revert resolveControl

* Fix empty cart editor E2E test by scrolling to the view switch

* parse attributes for order summary block

* migrate attributes when resaving

* Update documentation

Automatic update after running npm run build:docs

* add classname support to accepted payment methods block

* add classname support to express payment methods block

* add classname support to cart items  block

* add classname support to cart line items block

* add classname support to order summary block

* add classname support to totals block

* add classname support to empty cart  block

* add classname support to filled cart block

* add classname support to proceed to checkout block

* type edit

Co-authored-by: Mike Jolley <[email protected]>
Co-authored-by: Raluca Stan <[email protected]>

assets/js/base/components/cart-checkout/payment-method-icons/index.tsx

@@ -15,18 +15,16 @@ import './style.scss';
 interface PaymentMethodIconsProps {
 	icons: PaymentMethodIconsType;
 	align?: 'left' | 'right' | 'center';
+	className?: string;
 }
 /**
  * For a given list of icons, render each as a list item, using common icons
  * where available.
- *
- * @param {Object} props       Component props.
- * @param {Array}  props.icons Array of icons object configs or ids as strings.
- * @param {string} props.align How to align the icon.
  */
 export const PaymentMethodIcons = ( {
 	icons = [],
 	align = 'center',
+	className,
 }: PaymentMethodIconsProps ): JSX.Element | null => {
 	const iconConfigs = normalizeIconConfig( icons );
 
@@ -41,7 +39,8 @@ export const PaymentMethodIcons = ( {
 				align === 'left',
 			'wc-block-components-payment-method-icons--align-right':
 				align === 'right',
-		}
+		},
+		className
 	);
 
 	return (

assets/js/blocks/cart-checkout/cart/cart-line-items-table/index.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { CartResponseItem } from '@woocommerce/type-defs/cart-response';
 import { createRef, useEffect, useRef } from '@wordpress/element';
@@ -18,6 +19,7 @@ const placeholderRows = [ ...Array( 3 ) ].map( ( _x, i ) => (
 interface CartLineItemsTableProps {
 	lineItems: CartResponseItem[];
 	isLoading: boolean;
+	className: string;
 }
 
 const setRefs = ( lineItems: CartResponseItem[] ) => {
@@ -31,6 +33,7 @@ const setRefs = ( lineItems: CartResponseItem[] ) => {
 const CartLineItemsTable = ( {
 	lineItems = [],
 	isLoading = false,
+	className,
 }: CartLineItemsTableProps ): JSX.Element => {
 	const tableRef = useRef< HTMLTableElement | null >( null );
 	const rowRefs = useRef( setRefs( lineItems ) );
@@ -67,7 +70,11 @@ const CartLineItemsTable = ( {
 		  } );
 
 	return (
-		<table className="wc-block-cart-items" ref={ tableRef } tabIndex={ -1 }>
+		<table
+			className={ classnames( 'wc-block-cart-items', className ) }
+			ref={ tableRef }
+			tabIndex={ -1 }
+		>
 			<thead>
 				<tr className="wc-block-cart-items__header">
 					<th className="wc-block-cart-items__header-image">

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx

@@ -19,11 +19,12 @@ const getIconsFromPaymentMethods = (
 	}, [] as PaymentMethodIconsType );
 };
 
-const Block = (): JSX.Element => {
+const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
 
 	return (
 		<PaymentMethodIcons
+			className={ className }
 			icons={ getIconsFromPaymentMethods( paymentMethods ) }
 		/>
 	);

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx

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

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx

@@ -2,21 +2,27 @@
  * External dependencies
  */
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { CartExpressPayment } from '../../../payment-methods';
 
-const Block = (): JSX.Element | null => {
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const { cartNeedsPayment } = useStoreCart();
 
 	if ( ! cartNeedsPayment ) {
 		return null;
 	}
 
 	return (
-		<div className="wc-block-cart__payment-options">
+		<div
+			className={ classnames(
+				'wc-block-cart__payment-options',
+				className
+			) }
+		>
 			<CartExpressPayment />
 		</div>
 	);

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx

@@ -47,14 +47,19 @@ const NoExpressPaymentMethodsPlaceholder = () => {
 	);
 };
 
-export const Edit = (): JSX.Element | null => {
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: { className: string };
+} ): JSX.Element | null => {
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			'wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods': hasExpressPaymentMethods,
 		} ),
 	} );
+	const { className } = attributes;
 
 	if ( ! isInitialized ) {
 		return null;
@@ -63,7 +68,7 @@ export const Edit = (): JSX.Element | null => {
 	return (
 		<div { ...blockProps }>
 			{ hasExpressPaymentMethods ? (
-				<Block />
+				<Block className={ className } />
 			) : (
 				<NoExpressPaymentMethodsPlaceholder />
 			) }

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

@@ -11,7 +11,7 @@ import type { TemplateArray } from '@wordpress/blocks';
 import { useForcedLayout, getAllowedBlocks } from '../../../shared';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { className: 'wc-block-cart__main' } );
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_ITEMS );
 	const defaultTemplate = [
 		[ 'woocommerce/cart-line-items-block', {}, [] ],
@@ -23,15 +23,13 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 		defaultTemplate,
 	} );
 	return (
-		<Main className="wc-block-cart__main">
-			<div { ...blockProps }>
-				<InnerBlocks
-					allowedBlocks={ allowedBlocks }
-					template={ defaultTemplate }
-					templateLock={ false }
-					renderAppender={ InnerBlocks.ButtonBlockAppender }
-				/>
-			</div>
+		<Main { ...blockProps }>
+			<InnerBlocks
+				allowedBlocks={ allowedBlocks }
+				template={ defaultTemplate }
+				templateLock={ false }
+				renderAppender={ InnerBlocks.ButtonBlockAppender }
+			/>
 		</Main>
 	);
 };

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/frontend.tsx

@@ -2,13 +2,20 @@
  * External dependencies
  */
 import { Main } from '@woocommerce/base-components/sidebar-layout';
+import classnames from 'classnames';
 
 const FrontendBlock = ( {
 	children,
+	className,
 }: {
 	children: JSX.Element;
+	className: string;
 } ): JSX.Element => {
-	return <Main className="wc-block-cart__main">{ children }</Main>;
+	return (
+		<Main className={ classnames( 'wc-block-cart__main', className ) }>
+			{ children }
+		</Main>
+	);
 };
 
 export default FrontendBlock;

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.tsx

@@ -7,10 +7,11 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
  */
 import CartLineItemsTable from '../../cart-line-items-table';
 
-const Block = (): JSX.Element => {
+const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 	return (
 		<CartLineItemsTable
+			className={ className }
 			lineItems={ cartItems }
 			isLoading={ cartIsLoading }
 		/>

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

@@ -9,13 +9,18 @@ import { Disabled } from '@wordpress/components';
  */
 import Block from './block';
 
-export const Edit = (): JSX.Element => {
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: { className: string };
+} ): JSX.Element => {
+	const { className } = attributes;
 	const blockProps = useBlockProps();
 
 	return (
 		<div { ...blockProps }>
 			<Disabled>
-				<Block />
+				<Block className={ className } />
 			</Disabled>
 		</div>
 	);

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx

@@ -29,9 +29,11 @@ import Title from '@woocommerce/base-components/title';
  */
 
 const Block = ( {
+	className,
 	showRateAfterTaxName = false,
 	isShippingCalculatorEnabled = true,
 }: {
+	className: string;
 	showRateAfterTaxName: boolean;
 	isShippingCalculatorEnabled: boolean;
 } ): JSX.Element => {
@@ -62,7 +64,7 @@ const Block = ( {
 	};
 
 	return (
-		<>
+		<div className={ className }>
 			<Title headingLevel="2" className="wc-block-cart__totals-title">
 				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
 			</Title>
@@ -114,7 +116,7 @@ const Block = ( {
 			</TotalsWrapper>
 
 			<ExperimentalOrderMeta.Slot { ...slotFillProps } />
-		</>
+		</div>
 	);
 };
 

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx

@@ -18,14 +18,19 @@ export const Edit = ( {
 	attributes: {
 		showRateAfterTaxName: boolean;
 		isShippingCalculatorEnabled: boolean;
+		className: string;
 		lock: {
 			move: boolean;
 			remove: boolean;
 		};
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const { showRateAfterTaxName, isShippingCalculatorEnabled } = attributes;
+	const {
+		showRateAfterTaxName,
+		isShippingCalculatorEnabled,
+		className,
+	} = attributes;
 	const blockProps = useBlockProps();
 	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
 	const displayItemizedTaxes = getSetting(
@@ -94,10 +99,9 @@ export const Edit = ( {
 			</InspectorControls>
 			<Disabled>
 				<Block
-					showRateAfterTaxName={ attributes.showRateAfterTaxName }
-					isShippingCalculatorEnabled={
-						attributes.isShippingCalculatorEnabled
-					}
+					className={ className }
+					showRateAfterTaxName={ showRateAfterTaxName }
+					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
 				/>
 			</Disabled>
 		</div>

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/edit.tsx

@@ -13,7 +13,7 @@ import './style.scss';
 import { useForcedLayout, getAllowedBlocks } from '../../../shared';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { className: 'wc-block-cart__sidebar' } );
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_TOTALS );
 	const defaultTemplate = [
 		[ 'woocommerce/cart-order-summary-block', {}, [] ],
@@ -29,15 +29,13 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	} );
 
 	return (
-		<Sidebar className="wc-block-cart__sidebar">
-			<div { ...blockProps }>
-				<InnerBlocks
-					allowedBlocks={ allowedBlocks }
-					template={ defaultTemplate }
-					templateLock={ false }
-					renderAppender={ InnerBlocks.ButtonBlockAppender }
-				/>
-			</div>
+		<Sidebar { ...blockProps }>
+			<InnerBlocks
+				allowedBlocks={ allowedBlocks }
+				template={ defaultTemplate }
+				templateLock={ false }
+				renderAppender={ InnerBlocks.ButtonBlockAppender }
+			/>
 		</Sidebar>
 	);
 };

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/frontend.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
 
 /**
@@ -10,10 +11,18 @@ import './style.scss';
 
 const FrontendBlock = ( {
 	children,
+	className,
 }: {
 	children: JSX.Element | JSX.Element[];
+	className: string;
 } ): JSX.Element => {
-	return <Sidebar className="wc-block-cart__sidebar">{ children }</Sidebar>;
+	return (
+		<Sidebar
+			className={ classnames( 'wc-block-cart__sidebar', className ) }
+		>
+			{ children }
+		</Sidebar>
+	);
 };
 
 export default FrontendBlock;

assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/frontend.tsx

@@ -12,8 +12,10 @@ import './style.scss';
 
 const FrontendBlock = ( {
 	children,
+	className,
 }: {
 	children: JSX.Element;
+	className: string;
 } ): JSX.Element | null => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 	useEffect( () => {
@@ -24,7 +26,7 @@ const FrontendBlock = ( {
 		} );
 	}, [] );
 	if ( ! cartIsLoading && cartItems.length === 0 ) {
-		return <>{ children }</>;
+		return <div className={ className }>{ children }</div>;
 	}
 	return null;
 };