From 76d565b83fba4e6d3ce658275206eeb94cd15510 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Mon, 25 Oct 2021 16:31:22 +0100
Subject: [PATCH] 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 79d55de30edcfe36bbdfe7506df7a09460824f03.

* 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 <mike.jolley@me.com>
Co-authored-by: Raluca Stan <ralucastn@gmail.com>
---
 .../payment-method-icons/index.tsx             |  9 ++++-----
 .../cart/cart-line-items-table/index.tsx       |  9 ++++++++-
 .../block.tsx                                  |  3 ++-
 .../edit.tsx                                   | 10 ++++++++--
 .../cart-express-payment-block/block.tsx       | 10 ++++++++--
 .../cart-express-payment-block/edit.tsx        |  9 +++++++--
 .../inner-blocks/cart-items-block/edit.tsx     | 18 ++++++++----------
 .../inner-blocks/cart-items-block/frontend.tsx |  9 ++++++++-
 .../cart-line-items-block/block.tsx            |  3 ++-
 .../cart-line-items-block/edit.tsx             |  9 +++++++--
 .../cart-order-summary-block/block.tsx         |  6 ++++--
 .../cart-order-summary-block/edit.tsx          | 14 +++++++++-----
 .../inner-blocks/cart-totals-block/edit.tsx    | 18 ++++++++----------
 .../cart-totals-block/frontend.tsx             | 11 ++++++++++-
 .../inner-blocks/empty-cart-block/frontend.tsx |  4 +++-
 .../filled-cart-block/frontend.tsx             |  4 +++-
 .../proceed-to-checkout-block/block.tsx        |  5 ++++-
 .../proceed-to-checkout-block/edit.tsx         |  8 ++++++--
 18 files changed, 109 insertions(+), 50 deletions(-)

diff --git a/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx b/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx
index b2d65f9e223..a618bf3b889 100644
--- a/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx
+++ b/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 (
diff --git a/assets/js/blocks/cart-checkout/cart/cart-line-items-table/index.tsx b/assets/js/blocks/cart-checkout/cart/cart-line-items-table/index.tsx
index 9ac03da651b..986d36c3748 100644
--- a/assets/js/blocks/cart-checkout/cart/cart-line-items-table/index.tsx
+++ b/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">
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
index 46711e65077..fc9fcf49bf2 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
+++ b/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 ) }
 		/>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
index fdd0c54c204..90746a0fd52 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
+++ b/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>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx
index 21cce1ef7ec..a7f4116b874 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx
@@ -2,13 +2,14 @@
  * 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 ) {
@@ -16,7 +17,12 @@ const Block = (): JSX.Element | null => {
 	}
 
 	return (
-		<div className="wc-block-cart__payment-options">
+		<div
+			className={ classnames(
+				'wc-block-cart__payment-options',
+				className
+			) }
+		>
 			<CartExpressPayment />
 		</div>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx
index b7174eb9b58..66f2ba8ebb1 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx
@@ -47,7 +47,11 @@ 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( {
@@ -55,6 +59,7 @@ export const Edit = (): JSX.Element | null => {
 			'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 />
 			) }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/edit.tsx
index cf5396fc0a0..fc4df087b9d 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/edit.tsx
+++ b/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>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/frontend.tsx
index 51828621f0d..481bd9e5b54 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/frontend.tsx
+++ b/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;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.tsx
index fa9669009e8..8b4f38e1287 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.tsx
+++ b/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 }
 		/>
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/edit.tsx
index b66efd4944b..60f943aece8 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/edit.tsx
+++ b/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>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx
index 13209e2296e..ee41ba37b39 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx
+++ b/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>
 	);
 };
 
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
index 156e738dbe8..bf369735326 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -18,6 +18,7 @@ export const Edit = ( {
 	attributes: {
 		showRateAfterTaxName: boolean;
 		isShippingCalculatorEnabled: boolean;
+		className: string;
 		lock: {
 			move: boolean;
 			remove: boolean;
@@ -25,7 +26,11 @@ export const Edit = ( {
 	};
 	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>
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/edit.tsx
index 176b50d4b0c..615fc753539 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/edit.tsx
+++ b/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>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/frontend.tsx
index db443a385e1..8986a60a4fd 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/frontend.tsx
+++ b/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;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/frontend.tsx
index 94a16512c14..e92c59769a5 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/frontend.tsx
+++ b/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;
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/frontend.tsx
index 34f9bfef672..97a166a7b32 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/frontend.tsx
@@ -14,8 +14,10 @@ import { useCartBlockContext } from '../../context';
 
 const FrontendBlock = ( {
 	children,
+	className,
 }: {
 	children: JSX.Element | JSX.Element[];
+	className: string;
 } ): JSX.Element | null => {
 	const { cartItems, cartIsLoading, cartItemErrors } = useStoreCart();
 	const { hasDarkControls } = useCartBlockContext();
@@ -34,7 +36,7 @@ const FrontendBlock = ( {
 	if ( cartIsLoading || cartItems.length >= 1 ) {
 		return (
 			<SidebarLayout
-				className={ classnames( 'wc-block-cart', {
+				className={ classnames( 'wc-block-cart', className, {
 					'has-dark-controls': hasDarkControls,
 				} ) }
 			>
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.tsx
index b2c7332f917..49875f5804d 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 import { useState, useEffect } from '@wordpress/element';
 import Button from '@woocommerce/base-components/button';
 import { CHECKOUT_URL } from '@woocommerce/block-settings';
@@ -19,8 +20,10 @@ import './style.scss';
  */
 const Block = ( {
 	checkoutPageId,
+	className,
 }: {
 	checkoutPageId: number;
+	className: string;
 } ): JSX.Element => {
 	const link = getSetting( 'page-' + checkoutPageId, false );
 	const { isCalculating } = useCheckoutContext();
@@ -65,7 +68,7 @@ const Block = ( {
 	);
 
 	return (
-		<div className="wc-block-cart__submit">
+		<div className={ classnames( 'wc-block-cart__submit', className ) }>
 			{ positionReferenceElement }
 			{ /* The non-sticky container must always be visible because it gives height to its parent, which is required to calculate when it becomes visible in the viewport. */ }
 			<div className="wc-block-cart__submit-container">
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
index 749399ca26e..5d3e2a80b57 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
@@ -18,11 +18,12 @@ export const Edit = ( {
 }: {
 	attributes: {
 		checkoutPageId: number;
+		className: string;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const blockProps = useBlockProps();
-	const { checkoutPageId = 0 } = attributes;
+	const { checkoutPageId = 0, className } = attributes;
 	const { current: savedCheckoutPageId } = useRef( checkoutPageId );
 	const currentPostId = useSelect(
 		( select ) => {
@@ -60,7 +61,10 @@ export const Edit = ( {
 				) }
 			</InspectorControls>
 			<Disabled>
-				<Block checkoutPageId={ checkoutPageId } />
+				<Block
+					checkoutPageId={ checkoutPageId }
+					className={ className }
+				/>
 			</Disabled>
 		</div>
 	);