Additional classes are visible on frontend page woocommerce/woocommerce-blocks#5881 (https://github.com/woocommerce/woocommerce-blocks/pull/5991)

Additional classes are visible on frontend page

plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss

@@ -69,7 +69,6 @@ $drawer-width-mobile: 100vw;
 	display: block;
 	height: 100%;
 	left: 100%;
-	overflow: auto;
 	position: fixed;
 	right: 0;
 	top: 0;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx

@@ -10,10 +10,12 @@ import { useEffect, useRef } from 'react';
 
 type EmptyMiniCartContentsBlockProps = {
 	children: JSX.Element | JSX.Element[];
+	className: string;
 };
 
 const EmptyMiniCartContentsBlock = ( {
 	children,
+	className,
 }: EmptyMiniCartContentsBlockProps ): JSX.Element | null => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 
@@ -30,11 +32,7 @@ const EmptyMiniCartContentsBlock = ( {
 	}
 
 	return (
-		<div
-			tabIndex={ -1 }
-			ref={ elementRef }
-			className="wp-block-woocommerce-empty-mini-cart-contents-block"
-		>
+		<div tabIndex={ -1 } ref={ elementRef } className={ className }>
 			{ children }
 		</div>
 	);

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

@@ -3,18 +3,22 @@
  */
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
+type FilledMiniCartContentsBlockProps = {
+	children: JSX.Element;
+	className: string;
+};
+
 const FilledMiniCartContentsBlock = ( {
 	children,
-}: {
-	children: JSX.Element | JSX.Element[];
-} ): JSX.Element | null => {
+	className,
+}: FilledMiniCartContentsBlockProps ): JSX.Element | null => {
 	const { cartItems } = useStoreCart();
 
 	if ( cartItems.length === 0 ) {
 		return null;
 	}
 
-	return <>{ children }</>;
+	return <div className={ className }>{ children }</div>;
 };
 
 export default FilledMiniCartContentsBlock;

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

@@ -14,6 +14,7 @@ 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';
+import classNames from 'classnames';
 
 const PaymentMethodIconsElement = (): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
@@ -27,16 +28,19 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 interface Props {
 	color?: string;
 	backgroundColor?: string;
+	className: string;
 }
 
-const Block = ( { color, backgroundColor }: Props ): JSX.Element => {
+const Block = ( { color, backgroundColor, className }: Props ): 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">
+		<div
+			className={ classNames( className, 'wc-block-mini-cart__footer' ) }
+		>
 			<TotalsItem
 				className="wc-block-mini-cart__footer-subtotal"
 				currency={ getCurrencyFromPriceResponse( cartTotals ) }

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx

@@ -1,5 +1,22 @@
-const Block = ( { children }: { children: JSX.Element } ): JSX.Element => {
-	return <div className="wc-block-mini-cart__items">{ children }</div>;
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+type MiniCartItemsBlockProps = {
+	children: JSX.Element;
+	className: string;
+};
+
+const Block = ( {
+	children,
+	className,
+}: MiniCartItemsBlockProps ): JSX.Element => {
+	return (
+		<div className={ classNames( className, 'wc-block-mini-cart__items' ) }>
+			{ children }
+		</div>
+	);
 };
 
 export default Block;

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

@@ -2,16 +2,26 @@
  * External dependencies
  */
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import CartLineItemsTable from '../../../cart/cart-line-items-table';
 
-const Block = (): JSX.Element => {
+type MiniCartContentsBlockProps = {
+	className: string;
+};
+
+const Block = ( { className }: MiniCartContentsBlockProps ): JSX.Element => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 	return (
-		<div className="wc-block-mini-cart__products-table">
+		<div
+			className={ classNames(
+				className,
+				'wc-block-mini-cart__products-table'
+			) }
+		>
 			<CartLineItemsTable
 				lineItems={ cartItems }
 				isLoading={ cartIsLoading }

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx

@@ -3,18 +3,30 @@
  */
 import { __ } from '@wordpress/i18n';
 import { SHOP_URL } from '@woocommerce/block-settings';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 
-const Block = (): JSX.Element | null => {
+type MiniCartShoppingButtonBlockProps = {
+	className: string;
+};
+
+const Block = ( {
+	className,
+}: MiniCartShoppingButtonBlockProps ): JSX.Element | null => {
 	if ( ! SHOP_URL ) {
 		return null;
 	}
 
 	return (
-		<div className="wc-block-mini-cart__shopping-button">
+		<div
+			className={ classNames(
+				className,
+				'wc-block-mini-cart__shopping-button'
+			) }
+		>
 			<a href={ SHOP_URL }>
 				{ __( 'Start shopping', 'woo-gutenberg-products-block' ) }
 			</a>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx

@@ -3,15 +3,20 @@
  */
 import { sprintf, _n, __ } from '@wordpress/i18n';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 
-const Block = (): JSX.Element => {
+type MiniCartTitleBlockProps = {
+	className: string;
+};
+
+const Block = ( { className }: MiniCartTitleBlockProps ): JSX.Element => {
 	const { cartItemsCount, cartIsLoading } = useStoreCart();
 	return (
-		<h2 className="wc-block-mini-cart__title">
+		<h2 className={ classNames( className, 'wc-block-mini-cart__title' ) }>
 			{ cartIsLoading
 				? __( 'Your cart', 'woo-gutenberg-products-block' )
 				: sprintf(

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss

@@ -77,13 +77,26 @@
 .wp-block-woocommerce-mini-cart-contents {
 	background: #fff;
 	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
 	height: 100vh;
 	padding: 0;
 	justify-content: center;
 }
 
+.wp-block-woocommerce-empty-mini-cart-contents-block,
+.wp-block-woocommerce-filled-mini-cart-contents-block {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.wp-block-woocommerce-empty-mini-cart-contents-block {
+	justify-content: center;
+}
+
+.wp-block-woocommerce-filled-mini-cart-contents-block {
+	justify-content: space-between;
+}
+
 .wp-block-woocommerce-empty-mini-cart-contents-block {
 	overflow-y: auto;
 	padding: $gap-largest $gap $gap;

plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php

@@ -326,6 +326,10 @@ class MiniCart extends AbstractBlock {
 			$wrapper_classes .= ' align-' . $attributes['align'];
 		}
 
+		if ( ! empty( $attributes['className'] ) ) {
+			$wrapper_classes .= ' ' . $attributes['className'];
+		}
+
 		if ( ! isset( $attributes['transparentButton'] ) || $attributes['transparentButton'] ) {
 			$wrapper_classes .= ' is-transparent';
 		}