From 088bd914b8567ebafc4742ae776a58f8fe093f4d Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 29 Oct 2021 13:58:43 +0700
Subject: [PATCH 01/14] initial color support

---
 .../blocks/cart-checkout/mini-cart/edit.tsx   |  2 +-
 .../blocks/cart-checkout/mini-cart/index.tsx  |  3 ++
 .../blocks/cart-checkout/mini-cart/style.scss |  1 +
 src/BlockTypes/MiniCart.php                   | 30 ++++++++++++++++---
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index eeaffcf8866..a330e2684bd 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -13,7 +13,7 @@ import QuantityBadge from './quantity-badge';
 
 const MiniCartBlock = (): ReactElement => {
 	const blockProps = useBlockProps( {
-		className: 'wc-block-mini-cart',
+		className: 'wc-block-mini-cart wp-block-woocommerce-mini-cart',
 	} );
 
 	const productCount = 0;
diff --git a/assets/js/blocks/cart-checkout/mini-cart/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
index b07203f29f0..840a7dd6395 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/index.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
@@ -26,6 +26,9 @@ const settings = {
 	supports: {
 		html: false,
 		multiple: false,
+		color: {
+			background: false,
+		},
 	},
 	example: {
 		attributes: {
diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss
index 1bcb9c01273..3b63ecaaed7 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -7,6 +7,7 @@
 	align-items: center;
 	background: transparent;
 	border: none;
+	color: inherit;
 	display: flex;
 	font-weight: 400;
 	padding: em($gap-small) em($gap-smaller);
diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index a875d64c885..204c90512d0 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -161,6 +161,11 @@ protected function get_script_from_handle( $handle ) {
 	 */
 	protected function append_script_and_deps_src( $script ) {
 		$wp_scripts = wp_scripts();
+
+		if ( ! $script ) {
+			return;
+		}
+
 		// This script and its dependencies have already been appended.
 		if ( array_key_exists( $script->handle, $this->scripts_to_lazy_load ) ) {
 			return;
@@ -195,15 +200,17 @@ protected function append_script_and_deps_src( $script ) {
 	 * @return string Rendered block type output.
 	 */
 	protected function render( $attributes, $content ) {
-		return $content . $this->get_markup();
+		return $content . $this->get_markup( $attributes );
 	}
 
 	/**
 	 * Render the markup for the Mini Cart block.
 	 *
+	 * @param array $attributes Block attributes.
+	 *
 	 * @return string The HTML markup.
 	 */
-	protected function get_markup() {
+	protected function get_markup( $attributes ) {
 		if ( is_admin() || WC()->is_rest_api_request() ) {
 			// In the editor we will display the placeholder, so no need to load
 			// real cart data and to print the markup.
@@ -219,6 +226,21 @@ protected function get_markup() {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
+		$classes = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
+
+		if ( ! empty( $attributes['textColor'] ) ) {
+			$classes .= sprintf(
+				' has-%s-color',
+				esc_attr( $attributes['textColor'] )
+			);
+		}
+
+		if ( ! empty( $attributes['style']['color']['text'] ) ) {
+			$style = 'color: ' . esc_attr( $attributes['style']['color']['text'] );
+		} else {
+			$style = '';
+		}
+
 		$aria_label = sprintf(
 			/* translators: %1$d is the number of products in the cart. %2$s is the cart total */
 			_n(
@@ -259,12 +281,12 @@ protected function get_markup() {
 		</span>';
 
 		if ( is_cart() || is_checkout() ) {
-			return '<div class="wc-block-mini-cart">
+			return '<div class="' . $classes . '" style="' . $style . '">
 				<button class="wc-block-mini-cart__button" aria-label="' . $aria_label . '" disabled>' . $button_html . '</button>
 			</div>';
 		}
 
-		return '<div class="wc-block-mini-cart">
+		return '<div class="' . $classes . '" style="' . $style . '">
 			<button class="wc-block-mini-cart__button" aria-label="' . $aria_label . '">' . $button_html . '</button>
 			<div class="wc-block-mini-cart__drawer is-loading is-mobile wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--is-hidden" aria-hidden="true">
 				<div class="components-modal__frame wc-block-components-drawer">

From 6bbe4ae8c3ba95c794d2c3433a75338dc672e684 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Mon, 8 Nov 2021 19:54:54 +0700
Subject: [PATCH 02/14] fix drawer content height issue

---
 assets/js/blocks/cart-checkout/mini-cart/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss
index 3b63ecaaed7..4b4888edccc 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -8,6 +8,7 @@
 	background: transparent;
 	border: none;
 	color: inherit;
+	cursor: pointer;
 	display: flex;
 	font-weight: 400;
 	padding: em($gap-small) em($gap-smaller);
@@ -39,6 +40,7 @@
 	font-size: 1rem;
 
 	.components-modal__content {
+		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
 		height: 100%;

From 4bbb63a81647b9f104c1f0fe8c801d37b5a31f34 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 9 Nov 2021 12:45:07 +0700
Subject: [PATCH 03/14] add background support

---
 .../blocks/cart-checkout/mini-cart/block.tsx  | 16 +++--
 .../mini-cart/component-frontend.tsx          |  2 +
 .../blocks/cart-checkout/mini-cart/edit.tsx   | 66 +++++++++++++++++--
 .../cart-checkout/mini-cart/editor.scss       |  3 +
 .../blocks/cart-checkout/mini-cart/index.tsx  |  8 ++-
 .../mini-cart/quantity-badge/index.tsx        | 63 +++++++++++++++---
 .../mini-cart/quantity-badge/style.scss       |  5 ++
 .../blocks/cart-checkout/mini-cart/style.scss |  3 +-
 .../blocks/cart-checkout/mini-cart/types.ts   |  6 ++
 src/BlockTypes/MiniCart.php                   | 29 +++++---
 10 files changed, 168 insertions(+), 33 deletions(-)
 create mode 100644 assets/js/blocks/cart-checkout/mini-cart/editor.scss
 create mode 100644 assets/js/blocks/cart-checkout/mini-cart/types.ts

diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
index eb754c23bd1..691957955ad 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
@@ -29,12 +29,9 @@ import { PaymentMethodDataProvider } from '@woocommerce/base-context';
  */
 import CartLineItemsTable from '../cart/cart-line-items-table';
 import QuantityBadge from './quantity-badge';
+import { Attributes } from './types';
 import './style.scss';
 
-interface MiniCartBlockProps {
-	isInitiallyOpen?: boolean;
-}
-
 const PaymentMethodIconsElement = (): JSX.Element => {
 	const { paymentMethods } = usePaymentMethods();
 	return (
@@ -46,7 +43,9 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 
 const MiniCartBlock = ( {
 	isInitiallyOpen = false,
-}: MiniCartBlockProps ): JSX.Element => {
+	backgroundColor,
+	style,
+}: Attributes ): JSX.Element => {
 	const {
 		cartItems,
 		cartItemsCount,
@@ -191,7 +190,12 @@ const MiniCartBlock = ( {
 						getCurrencyFromPriceResponse( cartTotals )
 					) }
 				</span>
-				<QuantityBadge count={ cartItemsCount } />
+				<QuantityBadge
+					count={ cartItemsCount }
+					backgroundColor={
+						backgroundColor || style?.color?.background
+					}
+				/>
 			</button>
 			<Drawer
 				className={ classNames(
diff --git a/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx b/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx
index 13742be7d03..09283f66e53 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx
@@ -31,6 +31,8 @@ const renderMiniCartFrontend = () => {
 		getProps: ( el: HTMLElement ) => ( {
 			isDataOutdated: el.dataset.isDataOutdated,
 			isInitiallyOpen: el.dataset.isInitiallyOpen === 'true',
+			backgroundColor: el.dataset.backgroundColor,
+			style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
 		} ),
 	} );
 
diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index a330e2684bd..9f404869995 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -1,31 +1,89 @@
 /**
  * External dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	getColorClassName,
+} from '@wordpress/block-editor';
 import type { ReactElement } from 'react';
 import { formatPrice } from '@woocommerce/price-format';
 import { CartCheckoutCompatibilityNotice } from '@woocommerce/editor-components/compatibility-notices';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import QuantityBadge from './quantity-badge';
+import { Attributes } from './types';
+export interface Props {
+	attributes: Attributes;
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+}
 
-const MiniCartBlock = (): ReactElement => {
+const MiniCartBlock = ( {
+	attributes,
+	setAttributes,
+}: Props ): ReactElement => {
+	const { transparentButton, backgroundColor, style } = attributes;
 	const blockProps = useBlockProps( {
 		className: 'wc-block-mini-cart wp-block-woocommerce-mini-cart',
 	} );
 
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
+
 	const productCount = 0;
 	const productTotal = 0;
 
 	return (
 		<div { ...blockProps }>
-			<button className="wc-block-mini-cart__button">
+			{ backgroundClass || style?.color?.background ? (
+				<InspectorControls>
+					<PanelBody
+						title={ __(
+							'Button style',
+							'woo-gutenberg-products-block'
+						) }
+					>
+						<ToggleControl
+							label={ __(
+								'Use transparent button',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ transparentButton }
+							onChange={ () =>
+								setAttributes( {
+									transparentButton: ! transparentButton,
+								} )
+							}
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) : null }
+			<button
+				className={ classnames( 'wc-block-mini-cart__button', {
+					[ backgroundClass ]: backgroundClass && ! transparentButton,
+				} ) }
+				style={ {
+					backgroundColor: transparentButton
+						? undefined
+						: style?.color?.background,
+				} }
+			>
 				<span className="wc-block-mini-cart__amount">
 					{ formatPrice( productTotal ) }
 				</span>
-				<QuantityBadge count={ productCount } />
+				<QuantityBadge
+					count={ productCount }
+					backgroundColor={
+						backgroundColor || style?.color?.background
+					}
+				/>
 			</button>
 			<CartCheckoutCompatibilityNotice blockName="mini-cart" />
 		</div>
diff --git a/assets/js/blocks/cart-checkout/mini-cart/editor.scss b/assets/js/blocks/cart-checkout/mini-cart/editor.scss
new file mode 100644
index 00000000000..d84bfcc4ae7
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/mini-cart/editor.scss
@@ -0,0 +1,3 @@
+.editor-styles-wrapper .wp-block-woocommerce-mini-cart.wc-block-mini-cart {
+	background-color: transparent !important;
+}
diff --git a/assets/js/blocks/cart-checkout/mini-cart/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
index 840a7dd6395..158a3021ae2 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/index.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
@@ -26,9 +26,7 @@ const settings = {
 	supports: {
 		html: false,
 		multiple: false,
-		color: {
-			background: false,
-		},
+		color: true,
 	},
 	example: {
 		attributes: {
@@ -41,6 +39,10 @@ const settings = {
 			default: false,
 			save: false,
 		},
+		transparentButton: {
+			type: 'boolean',
+			default: true,
+		},
 	},
 
 	edit,
diff --git a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
index 4cd1825fea6..c55384813df 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
@@ -2,21 +2,64 @@
  * External dependencies
  */
 import { Icon, miniCart } from '@woocommerce/icons';
+import classnames from 'classnames';
+import { getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-const QuantityBadge = ( { count }: { count: number } ): JSX.Element => (
-	<span className="wc-block-mini-cart__quantity-badge">
-		<Icon
-			className="wc-block-mini-cart__icon"
-			size={ 20 }
-			srcElement={ miniCart }
-		/>
-		<span className="wc-block-mini-cart__badge">{ count }</span>
-	</span>
-);
+interface Props {
+	count: number;
+	backgroundColor?: string;
+	textColor?: string;
+}
+
+const isColorValue = ( color?: string ) => {
+	if ( ! color ) return false;
+	return (
+		color.startsWith( 'rgb(' ) ||
+		color.startsWith( 'rgba(' ) ||
+		color.startsWith( '#' ) ||
+		color.startsWith( 'hsl(' )
+	);
+};
+
+const QuantityBadge = ( {
+	count,
+	backgroundColor,
+	textColor,
+}: Props ): JSX.Element => {
+	const colorClass = getColorClassName( 'color', textColor );
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
+	return (
+		<span className="wc-block-mini-cart__quantity-badge">
+			<Icon
+				className="wc-block-mini-cart__icon"
+				size={ 20 }
+				srcElement={ miniCart }
+			/>
+			<span
+				className={ classnames( 'wc-block-mini-cart__badge', {
+					[ colorClass ]: colorClass,
+					[ backgroundClass ]: backgroundClass,
+					'has-background': backgroundClass,
+				} ) }
+				style={ {
+					backgroundColor: isColorValue( backgroundColor )
+						? backgroundColor
+						: undefined,
+					color: isColorValue( textColor ) ? textColor : undefined,
+				} }
+			>
+				{ count }
+			</span>
+		</span>
+	);
+};
 
 export default QuantityBadge;
diff --git a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
index 19654e0ea35..912ac4828e3 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
@@ -30,3 +30,8 @@
 	width: em(24px);
 	stroke: currentColor;
 }
+
+.wc-block-mini-cart__badge.has-background {
+	box-shadow: none;
+	color: inherit;
+}
diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss
index 4b4888edccc..e647db2d513 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -1,4 +1,5 @@
-.wc-block-mini-cart {
+.wc-block-mini-cart.wp-block-woocommerce-mini-cart {
+	background-color: transparent !important;
 	display: flex;
 	justify-content: flex-end;
 }
diff --git a/assets/js/blocks/cart-checkout/mini-cart/types.ts b/assets/js/blocks/cart-checkout/mini-cart/types.ts
new file mode 100644
index 00000000000..75fecceef97
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/mini-cart/types.ts
@@ -0,0 +1,6 @@
+export interface Attributes {
+	isInitiallyOpen?: boolean;
+	transparentButton: boolean;
+	backgroundColor?: string;
+	style?: Record< string, Record< string, string > >;
+}
diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index 204c90512d0..cb12efdfc9c 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -226,19 +226,30 @@ protected function get_markup( $attributes ) {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$classes = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
+		$classes    = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
+		$style      = '';
+		$bg_classes = '';
+		$bg_style   = '';
 
 		if ( ! empty( $attributes['textColor'] ) ) {
 			$classes .= sprintf(
-				' has-%s-color',
+				' has-%s-color has-text-color',
 				esc_attr( $attributes['textColor'] )
 			);
+		} elseif ( ! empty( $attributes['style']['color']['text'] ) ) {
+			$style   .= 'color: ' . esc_attr( $attributes['style']['color']['text'] ) . ';';
+			$classes .= ' has-text-color';
 		}
 
-		if ( ! empty( $attributes['style']['color']['text'] ) ) {
-			$style = 'color: ' . esc_attr( $attributes['style']['color']['text'] );
-		} else {
-			$style = '';
+		if ( ! empty( $attributes['backgroundColor'] ) ) {
+			$classes    .= ' has-background';
+			$bg_classes .= sprintf(
+				' has-%s-background-color has-background',
+				esc_attr( $attributes['backgroundColor'] )
+			);
+		} elseif ( ! empty( $attributes['style']['color']['background'] ) ) {
+			$bg_style   .= 'background-color: ' . esc_attr( $attributes['style']['color']['background'] ) . ';';
+			$bg_classes .= ' has-background';
 		}
 
 		$aria_label = sprintf(
@@ -277,17 +288,17 @@ protected function get_markup( $attributes ) {
 		$button_html = '<span class="wc-block-mini-cart__amount">' . wp_strip_all_tags( wc_price( $cart_contents_total ) ) . '</span>
 		<span class="wc-block-mini-cart__quantity-badge">
 			' . $icon . '
-			<span class="wc-block-mini-cart__badge">' . $cart_contents_count . '</span>
+			<span class="wc-block-mini-cart__badge ' . $bg_classes . '" style="' . $bg_style . '">' . $cart_contents_count . '</span>
 		</span>';
 
 		if ( is_cart() || is_checkout() ) {
 			return '<div class="' . $classes . '" style="' . $style . '">
-				<button class="wc-block-mini-cart__button" aria-label="' . $aria_label . '" disabled>' . $button_html . '</button>
+				<button class="wc-block-mini-cart__button ' . $bg_classes . '" aria-label="' . $aria_label . '" style="' . $bg_style . '" disabled>' . $button_html . '</button>
 			</div>';
 		}
 
 		return '<div class="' . $classes . '" style="' . $style . '">
-			<button class="wc-block-mini-cart__button" aria-label="' . $aria_label . '">' . $button_html . '</button>
+			<button class="wc-block-mini-cart__button ' . $bg_classes . '" aria-label="' . $aria_label . '" style="' . $bg_style . '">' . $button_html . '</button>
 			<div class="wc-block-mini-cart__drawer is-loading is-mobile wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--is-hidden" aria-hidden="true">
 				<div class="components-modal__frame wc-block-components-drawer">
 					<div class="components-modal__content">

From 2659c9f61bf56770be2ae94d163618776693e553 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Nov 2021 14:06:07 +0700
Subject: [PATCH 04/14] support transparent button

---
 src/BlockTypes/MiniCart.php | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index cb12efdfc9c..5112d8c99ac 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -226,10 +226,12 @@ protected function get_markup( $attributes ) {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$classes    = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
-		$style      = '';
-		$bg_classes = '';
-		$bg_style   = '';
+		$classes        = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
+		$style          = '';
+		$badge_classes  = '';
+		$badge_style    = '';
+		$button_classes = '';
+		$button_style   = '';
 
 		if ( ! empty( $attributes['textColor'] ) ) {
 			$classes .= sprintf(
@@ -242,14 +244,18 @@ protected function get_markup( $attributes ) {
 		}
 
 		if ( ! empty( $attributes['backgroundColor'] ) ) {
-			$classes    .= ' has-background';
-			$bg_classes .= sprintf(
+			$badge_classes .= sprintf(
 				' has-%s-background-color has-background',
 				esc_attr( $attributes['backgroundColor'] )
 			);
 		} elseif ( ! empty( $attributes['style']['color']['background'] ) ) {
-			$bg_style   .= 'background-color: ' . esc_attr( $attributes['style']['color']['background'] ) . ';';
-			$bg_classes .= ' has-background';
+			$badge_style   .= 'background-color: ' . esc_attr( $attributes['style']['color']['background'] ) . ';';
+			$badge_classes .= ' has-background';
+		}
+
+		if ( isset( $attributes['transparentButton'] ) && ! $attributes['transparentButton'] ) {
+			$button_classes = $badge_classes;
+			$button_style   = $badge_style;
 		}
 
 		$aria_label = sprintf(
@@ -288,17 +294,17 @@ protected function get_markup( $attributes ) {
 		$button_html = '<span class="wc-block-mini-cart__amount">' . wp_strip_all_tags( wc_price( $cart_contents_total ) ) . '</span>
 		<span class="wc-block-mini-cart__quantity-badge">
 			' . $icon . '
-			<span class="wc-block-mini-cart__badge ' . $bg_classes . '" style="' . $bg_style . '">' . $cart_contents_count . '</span>
+			<span class="wc-block-mini-cart__badge ' . $badge_classes . '" style="' . $badge_style . '">' . $cart_contents_count . '</span>
 		</span>';
 
 		if ( is_cart() || is_checkout() ) {
 			return '<div class="' . $classes . '" style="' . $style . '">
-				<button class="wc-block-mini-cart__button ' . $bg_classes . '" aria-label="' . $aria_label . '" style="' . $bg_style . '" disabled>' . $button_html . '</button>
+				<button class="wc-block-mini-cart__button ' . $button_classes . '" aria-label="' . $aria_label . '" style="' . $button_style . '" disabled>' . $button_html . '</button>
 			</div>';
 		}
 
 		return '<div class="' . $classes . '" style="' . $style . '">
-			<button class="wc-block-mini-cart__button ' . $bg_classes . '" aria-label="' . $aria_label . '" style="' . $bg_style . '">' . $button_html . '</button>
+			<button class="wc-block-mini-cart__button ' . $button_classes . '" aria-label="' . $aria_label . '" style="' . $button_style . '">' . $button_html . '</button>
 			<div class="wc-block-mini-cart__drawer is-loading is-mobile wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--is-hidden" aria-hidden="true">
 				<div class="components-modal__frame wc-block-components-drawer">
 					<div class="components-modal__content">

From ee7772cf98895d5836ef4fe8da4fbdcfd96f0106 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Nov 2021 14:20:44 +0700
Subject: [PATCH 05/14] use relative unit

---
 .../blocks/cart-checkout/mini-cart/quantity-badge/style.scss  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
index 912ac4828e3..6eb4443a834 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
@@ -6,9 +6,9 @@
 .wc-block-mini-cart__badge {
 	align-items: center;
 	background: #fff;
-	border: 2px solid;
+	border: 0.1em solid;
 	border-radius: 1em;
-	box-shadow: 0 0 0 2px #fff;
+	box-shadow: 0 0 0 0.1em #fff;
 	box-sizing: border-box;
 	color: #000;
 	display: flex;

From 003c6328b88f9f12503a7a09ffb49a9f44a2dd3b Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Nov 2021 15:27:30 +0700
Subject: [PATCH 06/14] try: support global background style

---
 .../blocks/cart-checkout/mini-cart/block.tsx  | 22 ++++++-
 .../blocks/cart-checkout/mini-cart/edit.tsx   | 59 ++++++++++---------
 .../blocks/cart-checkout/mini-cart/index.tsx  |  2 +
 .../mini-cart/quantity-badge/style.scss       |  8 +--
 .../blocks/cart-checkout/mini-cart/style.scss |  4 ++
 .../blocks/cart-checkout/mini-cart/types.ts   |  1 +
 src/BlockTypes/MiniCart.php                   | 50 ++++++++++------
 7 files changed, 91 insertions(+), 55 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
index 691957955ad..e2a84986ded 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import classnames from 'classnames';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import {
@@ -23,6 +23,7 @@ import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payme
 import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import { PaymentMethodDataProvider } from '@woocommerce/base-context';
+import { getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -44,6 +45,7 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 const MiniCartBlock = ( {
 	isInitiallyOpen = false,
 	backgroundColor,
+	textColor,
 	style,
 }: Attributes ): JSX.Element => {
 	const {
@@ -172,10 +174,23 @@ const MiniCartBlock = ( {
 			</>
 		);
 
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
+	const textColorClass = getColorClassName( 'color', textColor );
+
 	return (
 		<>
 			<button
-				className="wc-block-mini-cart__button"
+				className={ classnames( 'wc-block-mini-cart__button', {
+					[ backgroundClass ]: backgroundClass,
+					[ textColorClass ]: textColorClass,
+				} ) }
+				style={ {
+					backgroundColor: style?.color?.background,
+					color: style?.color?.text,
+				} }
 				onClick={ () => {
 					if ( ! isOpen ) {
 						setIsOpen( true );
@@ -195,10 +210,11 @@ const MiniCartBlock = ( {
 					backgroundColor={
 						backgroundColor || style?.color?.background
 					}
+					textColor={ textColor || style?.color?.text }
 				/>
 			</button>
 			<Drawer
-				className={ classNames(
+				className={ classnames(
 					'wc-block-mini-cart__drawer',
 					'is-mobile',
 					{
diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index 9f404869995..1d3ea202596 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -27,52 +27,56 @@ const MiniCartBlock = ( {
 	attributes,
 	setAttributes,
 }: Props ): ReactElement => {
-	const { transparentButton, backgroundColor, style } = attributes;
+	const { transparentButton, backgroundColor, textColor, style } = attributes;
 	const blockProps = useBlockProps( {
-		className: 'wc-block-mini-cart wp-block-woocommerce-mini-cart',
+		className: classnames(
+			'wc-block-mini-cart wp-block-woocommerce-mini-cart',
+			{
+				'transparent-button': transparentButton,
+			}
+		),
 	} );
 
 	const backgroundClass = getColorClassName(
 		'background-color',
 		backgroundColor
 	);
+	const textColorClass = getColorClassName( 'color', textColor );
 
 	const productCount = 0;
 	const productTotal = 0;
 
 	return (
 		<div { ...blockProps }>
-			{ backgroundClass || style?.color?.background ? (
-				<InspectorControls>
-					<PanelBody
-						title={ __(
-							'Button style',
+			<InspectorControls>
+				<PanelBody
+					title={ __(
+						'Button style',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					<ToggleControl
+						label={ __(
+							'Use transparent button',
 							'woo-gutenberg-products-block'
 						) }
-					>
-						<ToggleControl
-							label={ __(
-								'Use transparent button',
-								'woo-gutenberg-products-block'
-							) }
-							checked={ transparentButton }
-							onChange={ () =>
-								setAttributes( {
-									transparentButton: ! transparentButton,
-								} )
-							}
-						/>
-					</PanelBody>
-				</InspectorControls>
-			) : null }
+						checked={ transparentButton }
+						onChange={ () =>
+							setAttributes( {
+								transparentButton: ! transparentButton,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<button
 				className={ classnames( 'wc-block-mini-cart__button', {
-					[ backgroundClass ]: backgroundClass && ! transparentButton,
+					[ backgroundClass ]: backgroundClass,
+					[ textColorClass ]: textColorClass,
 				} ) }
 				style={ {
-					backgroundColor: transparentButton
-						? undefined
-						: style?.color?.background,
+					backgroundColor: style?.color?.background,
+					color: style?.color?.text,
 				} }
 			>
 				<span className="wc-block-mini-cart__amount">
@@ -83,6 +87,7 @@ const MiniCartBlock = ( {
 					backgroundColor={
 						backgroundColor || style?.color?.background
 					}
+					textColor={ textColor || style?.color?.text }
 				/>
 			</button>
 			<CartCheckoutCompatibilityNotice blockName="mini-cart" />
diff --git a/assets/js/blocks/cart-checkout/mini-cart/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
index 158a3021ae2..5d696210fdc 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/index.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
@@ -27,6 +27,8 @@ const settings = {
 		html: false,
 		multiple: false,
 		color: true,
+		__experimentalSelector:
+			'.wc-block-mini-cart__button, .wc-block-mini-cart__badge',
 	},
 	example: {
 		attributes: {
diff --git a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
index 6eb4443a834..eea3915ad0e 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss
@@ -6,9 +6,8 @@
 .wc-block-mini-cart__badge {
 	align-items: center;
 	background: #fff;
-	border: 0.1em solid;
+	border: 0.15em solid;
 	border-radius: 1em;
-	box-shadow: 0 0 0 0.1em #fff;
 	box-sizing: border-box;
 	color: #000;
 	display: flex;
@@ -30,8 +29,3 @@
 	width: em(24px);
 	stroke: currentColor;
 }
-
-.wc-block-mini-cart__badge.has-background {
-	box-shadow: none;
-	color: inherit;
-}
diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss
index e647db2d513..0b6414b61b2 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -2,6 +2,10 @@
 	background-color: transparent !important;
 	display: flex;
 	justify-content: flex-end;
+
+	&.transparent-button .wc-block-mini-cart__button {
+		background: transparent !important;
+	}
 }
 
 .wc-block-mini-cart__button {
diff --git a/assets/js/blocks/cart-checkout/mini-cart/types.ts b/assets/js/blocks/cart-checkout/mini-cart/types.ts
index 75fecceef97..ddd4834c3e1 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/types.ts
+++ b/assets/js/blocks/cart-checkout/mini-cart/types.ts
@@ -2,5 +2,6 @@ export interface Attributes {
 	isInitiallyOpen?: boolean;
 	transparentButton: boolean;
 	backgroundColor?: string;
+	textColor?: string;
 	style?: Record< string, Record< string, string > >;
 }
diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index 5112d8c99ac..ac2f1c7bc2f 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -226,12 +226,13 @@ protected function get_markup( $attributes ) {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$classes        = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
-		$style          = '';
-		$badge_classes  = '';
-		$badge_style    = '';
-		$button_classes = '';
-		$button_style   = '';
+		$wrapper_classes = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
+		$classes         = '';
+		$style           = '';
+
+		if ( ! isset( $attributes['transparentButton'] ) || $attributes['transparentButton'] ) {
+			$wrapper_classes .= ' transparent-button';
+		}
 
 		if ( ! empty( $attributes['textColor'] ) ) {
 			$classes .= sprintf(
@@ -244,18 +245,13 @@ protected function get_markup( $attributes ) {
 		}
 
 		if ( ! empty( $attributes['backgroundColor'] ) ) {
-			$badge_classes .= sprintf(
+			$classes .= sprintf(
 				' has-%s-background-color has-background',
 				esc_attr( $attributes['backgroundColor'] )
 			);
 		} elseif ( ! empty( $attributes['style']['color']['background'] ) ) {
-			$badge_style   .= 'background-color: ' . esc_attr( $attributes['style']['color']['background'] ) . ';';
-			$badge_classes .= ' has-background';
-		}
-
-		if ( isset( $attributes['transparentButton'] ) && ! $attributes['transparentButton'] ) {
-			$button_classes = $badge_classes;
-			$button_style   = $badge_style;
+			$style   .= 'background-color: ' . esc_attr( $attributes['style']['color']['background'] ) . ';';
+			$classes .= ' has-background';
 		}
 
 		$aria_label = sprintf(
@@ -294,17 +290,17 @@ protected function get_markup( $attributes ) {
 		$button_html = '<span class="wc-block-mini-cart__amount">' . wp_strip_all_tags( wc_price( $cart_contents_total ) ) . '</span>
 		<span class="wc-block-mini-cart__quantity-badge">
 			' . $icon . '
-			<span class="wc-block-mini-cart__badge ' . $badge_classes . '" style="' . $badge_style . '">' . $cart_contents_count . '</span>
+			<span class="wc-block-mini-cart__badge ' . $classes . '" style="' . $style . '">' . $cart_contents_count . '</span>
 		</span>';
 
 		if ( is_cart() || is_checkout() ) {
 			return '<div class="' . $classes . '" style="' . $style . '">
-				<button class="wc-block-mini-cart__button ' . $button_classes . '" aria-label="' . $aria_label . '" style="' . $button_style . '" disabled>' . $button_html . '</button>
+				<button class="wc-block-mini-cart__button ' . $classes . '" aria-label="' . $aria_label . '" style="' . $style . '" disabled>' . $button_html . '</button>
 			</div>';
 		}
 
-		return '<div class="' . $classes . '" style="' . $style . '">
-			<button class="wc-block-mini-cart__button ' . $button_classes . '" aria-label="' . $aria_label . '" style="' . $button_style . '">' . $button_html . '</button>
+		return '<div class="' . $wrapper_classes . '">
+			<button class="wc-block-mini-cart__button ' . $classes . '" aria-label="' . $aria_label . '" style="' . $style . '">' . $button_html . '</button>
 			<div class="wc-block-mini-cart__drawer is-loading is-mobile wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--is-hidden" aria-hidden="true">
 				<div class="components-modal__frame wc-block-components-drawer">
 					<div class="components-modal__content">
@@ -371,4 +367,22 @@ protected function get_cart_item_markup() {
 			</td>
 		</tr>';
 	}
+
+	/**
+	 * Get the supports array for this block type.
+	 *
+	 * @see $this->register_block_type()
+	 * @return string;
+	 */
+	protected function get_block_type_supports() {
+		return array_merge(
+			parent::get_block_type_supports(),
+			array(
+				'html'                   => false,
+				'multiple'               => false,
+				'color'                  => true,
+				'__experimentalSelector' => '.wc-block-mini-cart__button, .wc-block-mini-cart__badge',
+			)
+		);
+	}
 }

From 8fff470384a04abc4ec2aa175fc27e8a88233a36 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Nov 2021 08:59:08 +0700
Subject: [PATCH 07/14] address code review

---
 assets/js/blocks/cart-checkout/mini-cart/edit.tsx    | 2 +-
 assets/js/blocks/cart-checkout/mini-cart/editor.scss | 3 ---
 assets/js/blocks/cart-checkout/mini-cart/style.scss  | 5 +----
 src/BlockTypes/MiniCart.php                          | 2 +-
 4 files changed, 3 insertions(+), 9 deletions(-)
 delete mode 100644 assets/js/blocks/cart-checkout/mini-cart/editor.scss

diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index 1d3ea202596..6ed5940869c 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -32,7 +32,7 @@ const MiniCartBlock = ( {
 		className: classnames(
 			'wc-block-mini-cart wp-block-woocommerce-mini-cart',
 			{
-				'transparent-button': transparentButton,
+				'is-transparent': transparentButton,
 			}
 		),
 	} );
diff --git a/assets/js/blocks/cart-checkout/mini-cart/editor.scss b/assets/js/blocks/cart-checkout/mini-cart/editor.scss
deleted file mode 100644
index d84bfcc4ae7..00000000000
--- a/assets/js/blocks/cart-checkout/mini-cart/editor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.editor-styles-wrapper .wp-block-woocommerce-mini-cart.wc-block-mini-cart {
-	background-color: transparent !important;
-}
diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss
index 0b6414b61b2..fbf38244eee 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -3,23 +3,20 @@
 	display: flex;
 	justify-content: flex-end;
 
-	&.transparent-button .wc-block-mini-cart__button {
+	&.is-transparent .wc-block-mini-cart__button {
 		background: transparent !important;
 	}
 }
 
 .wc-block-mini-cart__button {
 	align-items: center;
-	background: transparent;
 	border: none;
 	color: inherit;
-	cursor: pointer;
 	display: flex;
 	font-weight: 400;
 	padding: em($gap-small) em($gap-smaller);
 
 	&:hover {
-		background: transparent;
 		opacity: 0.6;
 	}
 }
diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index ac2f1c7bc2f..209cef3d312 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -231,7 +231,7 @@ protected function get_markup( $attributes ) {
 		$style           = '';
 
 		if ( ! isset( $attributes['transparentButton'] ) || $attributes['transparentButton'] ) {
-			$wrapper_classes .= ' transparent-button';
+			$wrapper_classes .= ' is-transparent';
 		}
 
 		if ( ! empty( $attributes['textColor'] ) ) {

From 226a04af75b62cd392aa1c1534bc349e3430c62d Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Fri, 12 Nov 2021 10:46:10 +0700
Subject: [PATCH 08/14] avoid using block-editor on front end

---
 .../blocks/cart-checkout/mini-cart/block.tsx  | 30 ++++++---------
 .../mini-cart/component-frontend.tsx          | 21 ++++++++---
 .../blocks/cart-checkout/mini-cart/edit.tsx   | 23 +++++++++---
 .../cart-checkout/mini-cart/editor.scss       |  5 +++
 .../mini-cart/quantity-badge/index.tsx        | 37 ++++---------------
 .../blocks/cart-checkout/mini-cart/types.ts   |  7 ----
 6 files changed, 55 insertions(+), 68 deletions(-)
 create mode 100644 assets/js/blocks/cart-checkout/mini-cart/editor.scss
 delete mode 100644 assets/js/blocks/cart-checkout/mini-cart/types.ts

diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
index e2a84986ded..885c38d6edf 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
@@ -23,14 +23,12 @@ import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payme
 import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
 import { PaymentMethodDataProvider } from '@woocommerce/base-context';
-import { getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import CartLineItemsTable from '../cart/cart-line-items-table';
 import QuantityBadge from './quantity-badge';
-import { Attributes } from './types';
 import './style.scss';
 
 const PaymentMethodIconsElement = (): JSX.Element => {
@@ -42,12 +40,18 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 	);
 };
 
+interface Props {
+	isInitiallyOpen?: boolean;
+	transparentButton: boolean;
+	colorClassNames?: string;
+	style?: Record< string, Record< string, string > >;
+}
+
 const MiniCartBlock = ( {
 	isInitiallyOpen = false,
-	backgroundColor,
-	textColor,
+	colorClassNames,
 	style,
-}: Attributes ): JSX.Element => {
+}: Props ): JSX.Element => {
 	const {
 		cartItems,
 		cartItemsCount,
@@ -174,19 +178,10 @@ const MiniCartBlock = ( {
 			</>
 		);
 
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
-	const textColorClass = getColorClassName( 'color', textColor );
-
 	return (
 		<>
 			<button
-				className={ classnames( 'wc-block-mini-cart__button', {
-					[ backgroundClass ]: backgroundClass,
-					[ textColorClass ]: textColorClass,
-				} ) }
+				className={ `wc-block-mini-cart__button ${ colorClassNames }` }
 				style={ {
 					backgroundColor: style?.color?.background,
 					color: style?.color?.text,
@@ -207,10 +202,7 @@ const MiniCartBlock = ( {
 				</span>
 				<QuantityBadge
 					count={ cartItemsCount }
-					backgroundColor={
-						backgroundColor || style?.color?.background
-					}
-					textColor={ textColor || style?.color?.text }
+					{ ...{ colorClassNames, style } }
 				/>
 			</button>
 			<Drawer
diff --git a/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx b/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx
index 09283f66e53..72921714086 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx
@@ -28,12 +28,21 @@ const renderMiniCartFrontend = () => {
 	renderFrontend( {
 		selector: '.wc-block-mini-cart',
 		Block: MiniCartBlock,
-		getProps: ( el: HTMLElement ) => ( {
-			isDataOutdated: el.dataset.isDataOutdated,
-			isInitiallyOpen: el.dataset.isInitiallyOpen === 'true',
-			backgroundColor: el.dataset.backgroundColor,
-			style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
-		} ),
+		getProps: ( el: HTMLElement ) => {
+			let colorClassNames = '';
+			const button = el.querySelector( '.wc-block-mini-cart__button' );
+			if ( button !== null ) {
+				colorClassNames = button.classList
+					.toString()
+					.replace( 'wc-block-mini-cart__button', '' );
+			}
+			return {
+				isDataOutdated: el.dataset.isDataOutdated,
+				isInitiallyOpen: el.dataset.isInitiallyOpen === 'true',
+				colorClassNames,
+				style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
+			};
+		},
 	} );
 
 	// Refocus previously focused button if drawer is not open.
diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index 6ed5940869c..bfd35c097f2 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -17,8 +17,15 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import QuantityBadge from './quantity-badge';
-import { Attributes } from './types';
-export interface Props {
+
+interface Attributes {
+	isInitiallyOpen?: boolean;
+	transparentButton: boolean;
+	colorClassNames?: string;
+	style?: Record< string, Record< string, string > >;
+}
+
+interface Props {
 	attributes: Attributes;
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 }
@@ -84,10 +91,14 @@ const MiniCartBlock = ( {
 				</span>
 				<QuantityBadge
 					count={ productCount }
-					backgroundColor={
-						backgroundColor || style?.color?.background
-					}
-					textColor={ textColor || style?.color?.text }
+					colorClassNames={ classnames( {
+						[ backgroundClass ]: backgroundClass,
+						[ textColorClass ]: textColorClass,
+						'has-background':
+							backgroundClass || style?.color?.background,
+						'has-text-color': textColorClass || style?.color?.text,
+					} ) }
+					style={ style }
 				/>
 			</button>
 			<CartCheckoutCompatibilityNotice blockName="mini-cart" />
diff --git a/assets/js/blocks/cart-checkout/mini-cart/editor.scss b/assets/js/blocks/cart-checkout/mini-cart/editor.scss
new file mode 100644
index 00000000000..37e1789a09b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/mini-cart/editor.scss
@@ -0,0 +1,5 @@
+// We need this style because the preset color classes in the block editor
+// comes with !important suffix that overrides our styling.
+.editor-styles-wrapper .wp-block-woocommerce-mini-cart.wc-block-mini-cart {
+	background-color: transparent !important;
+}
diff --git a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
index c55384813df..6f3102f4e5e 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
@@ -2,8 +2,6 @@
  * External dependencies
  */
 import { Icon, miniCart } from '@woocommerce/icons';
-import classnames from 'classnames';
-import { getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -12,30 +10,15 @@ import './style.scss';
 
 interface Props {
 	count: number;
-	backgroundColor?: string;
-	textColor?: string;
+	colorClassNames?: string;
+	style?: Record< string, Record< string, string > >;
 }
 
-const isColorValue = ( color?: string ) => {
-	if ( ! color ) return false;
-	return (
-		color.startsWith( 'rgb(' ) ||
-		color.startsWith( 'rgba(' ) ||
-		color.startsWith( '#' ) ||
-		color.startsWith( 'hsl(' )
-	);
-};
-
 const QuantityBadge = ( {
 	count,
-	backgroundColor,
-	textColor,
+	colorClassNames,
+	style,
 }: Props ): JSX.Element => {
-	const colorClass = getColorClassName( 'color', textColor );
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
 	return (
 		<span className="wc-block-mini-cart__quantity-badge">
 			<Icon
@@ -44,16 +27,10 @@ const QuantityBadge = ( {
 				srcElement={ miniCart }
 			/>
 			<span
-				className={ classnames( 'wc-block-mini-cart__badge', {
-					[ colorClass ]: colorClass,
-					[ backgroundClass ]: backgroundClass,
-					'has-background': backgroundClass,
-				} ) }
+				className={ `wc-block-mini-cart__badge ${ colorClassNames }` }
 				style={ {
-					backgroundColor: isColorValue( backgroundColor )
-						? backgroundColor
-						: undefined,
-					color: isColorValue( textColor ) ? textColor : undefined,
+					color: style?.color?.text,
+					backgroundColor: style?.color?.background,
 				} }
 			>
 				{ count }
diff --git a/assets/js/blocks/cart-checkout/mini-cart/types.ts b/assets/js/blocks/cart-checkout/mini-cart/types.ts
deleted file mode 100644
index ddd4834c3e1..00000000000
--- a/assets/js/blocks/cart-checkout/mini-cart/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface Attributes {
-	isInitiallyOpen?: boolean;
-	transparentButton: boolean;
-	backgroundColor?: string;
-	textColor?: string;
-	style?: Record< string, Record< string, string > >;
-}

From cd853d4f080a42799f272e72c48d514a3d7d01e0 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 16 Nov 2021 07:09:58 +0700
Subject: [PATCH 09/14] address code review

---
 .../js/blocks/cart-checkout/mini-cart/edit.tsx   | 16 +++++++++-------
 .../js/blocks/cart-checkout/mini-cart/style.scss |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index bfd35c097f2..0d08fdd18b0 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -21,7 +21,8 @@ import QuantityBadge from './quantity-badge';
 interface Attributes {
 	isInitiallyOpen?: boolean;
 	transparentButton: boolean;
-	colorClassNames?: string;
+	backgroundColor?: string;
+	textColor?: string;
 	style?: Record< string, Record< string, string > >;
 }
 
@@ -36,14 +37,15 @@ const MiniCartBlock = ( {
 }: Props ): ReactElement => {
 	const { transparentButton, backgroundColor, textColor, style } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames(
-			'wc-block-mini-cart wp-block-woocommerce-mini-cart',
-			{
-				'is-transparent': transparentButton,
-			}
-		),
+		className: classnames( 'wc-block-mini-cart', {
+			'is-transparent': transparentButton,
+		} ),
 	} );
 
+	/**
+	 * @todo Replace `getColorClassName` and manual style manipulation with
+	 * `useColorProps` once the hook is no longer experimental.
+	 */
 	const backgroundClass = getColorClassName(
 		'background-color',
 		backgroundColor
diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss
index fbf38244eee..e183ce70b0f 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -4,7 +4,7 @@
 	justify-content: flex-end;
 
 	&.is-transparent .wc-block-mini-cart__button {
-		background: transparent !important;
+		background-color: transparent !important;
 	}
 }
 

From 27a2584e1ba0b2a88581cd13453b65ee12694dc2 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Tue, 16 Nov 2021 07:26:21 +0700
Subject: [PATCH 10/14] add __experimentalSkipSerialization, remove editor
 style

---
 assets/js/blocks/cart-checkout/mini-cart/editor.scss |  5 -----
 assets/js/blocks/cart-checkout/mini-cart/index.tsx   | 12 +++++++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)
 delete mode 100644 assets/js/blocks/cart-checkout/mini-cart/editor.scss

diff --git a/assets/js/blocks/cart-checkout/mini-cart/editor.scss b/assets/js/blocks/cart-checkout/mini-cart/editor.scss
deleted file mode 100644
index 37e1789a09b..00000000000
--- a/assets/js/blocks/cart-checkout/mini-cart/editor.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// We need this style because the preset color classes in the block editor
-// comes with !important suffix that overrides our styling.
-.editor-styles-wrapper .wp-block-woocommerce-mini-cart.wc-block-mini-cart {
-	background-color: transparent !important;
-}
diff --git a/assets/js/blocks/cart-checkout/mini-cart/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
index 5d696210fdc..c452add3db6 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/index.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
@@ -26,7 +26,17 @@ const settings = {
 	supports: {
 		html: false,
 		multiple: false,
-		color: true,
+		color: {
+			/**
+			 * Because we don't target the wrapper element, we don't need
+			 * to add color classes and style to the wrapper.
+			 */
+			__experimentalSkipSerialization: true,
+		},
+		/**
+		 * We need this experimental flag because we don't want to style the
+		 * wrapper but inner elements.
+		 */
 		__experimentalSelector:
 			'.wc-block-mini-cart__button, .wc-block-mini-cart__badge',
 	},

From 980bde38645cf1d0f2386da3cacbb5069be735d3 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 17 Nov 2021 17:57:29 +0700
Subject: [PATCH 11/14] refactor quantity badge style data structure

---
 .../blocks/cart-checkout/mini-cart/block.tsx  | 13 +++++++-----
 .../blocks/cart-checkout/mini-cart/edit.tsx   | 20 ++++++++++---------
 .../mini-cart/quantity-badge/index.tsx        |  7 ++-----
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
index 885c38d6edf..31086d5eba8 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
@@ -120,6 +120,11 @@ const MiniCartBlock = ( {
 		formatPrice( subTotal, getCurrencyFromPriceResponse( cartTotals ) )
 	);
 
+	const colorStyle = {
+		backgroundColor: style?.color?.background,
+		color: style?.color?.text,
+	};
+
 	const contents =
 		! cartIsLoading && cartItems.length === 0 ? (
 			<div
@@ -182,10 +187,7 @@ const MiniCartBlock = ( {
 		<>
 			<button
 				className={ `wc-block-mini-cart__button ${ colorClassNames }` }
-				style={ {
-					backgroundColor: style?.color?.background,
-					color: style?.color?.text,
-				} }
+				style={ colorStyle }
 				onClick={ () => {
 					if ( ! isOpen ) {
 						setIsOpen( true );
@@ -202,7 +204,8 @@ const MiniCartBlock = ( {
 				</span>
 				<QuantityBadge
 					count={ cartItemsCount }
-					{ ...{ colorClassNames, style } }
+					colorClassNames={ colorClassNames }
+					style={ colorStyle }
 				/>
 			</button>
 			<Drawer
diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index 0d08fdd18b0..a99dee8faee 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -52,6 +52,11 @@ const MiniCartBlock = ( {
 	);
 	const textColorClass = getColorClassName( 'color', textColor );
 
+	const colorStyle = {
+		backgroundColor: style?.color?.background,
+		color: style?.color?.text,
+	};
+
 	const productCount = 0;
 	const productTotal = 0;
 
@@ -80,13 +85,10 @@ const MiniCartBlock = ( {
 			</InspectorControls>
 			<button
 				className={ classnames( 'wc-block-mini-cart__button', {
-					[ backgroundClass ]: backgroundClass,
-					[ textColorClass ]: textColorClass,
+					backgroundClass,
+					textColorClass,
 				} ) }
-				style={ {
-					backgroundColor: style?.color?.background,
-					color: style?.color?.text,
-				} }
+				style={ colorStyle }
 			>
 				<span className="wc-block-mini-cart__amount">
 					{ formatPrice( productTotal ) }
@@ -94,13 +96,13 @@ const MiniCartBlock = ( {
 				<QuantityBadge
 					count={ productCount }
 					colorClassNames={ classnames( {
-						[ backgroundClass ]: backgroundClass,
-						[ textColorClass ]: textColorClass,
+						backgroundClass,
+						textColorClass,
 						'has-background':
 							backgroundClass || style?.color?.background,
 						'has-text-color': textColorClass || style?.color?.text,
 					} ) }
-					style={ style }
+					style={ colorStyle }
 				/>
 			</button>
 			<CartCheckoutCompatibilityNotice blockName="mini-cart" />
diff --git a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
index 6f3102f4e5e..ac7bfc65c27 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/quantity-badge/index.tsx
@@ -11,7 +11,7 @@ import './style.scss';
 interface Props {
 	count: number;
 	colorClassNames?: string;
-	style?: Record< string, Record< string, string > >;
+	style?: Record< string, string | undefined >;
 }
 
 const QuantityBadge = ( {
@@ -28,10 +28,7 @@ const QuantityBadge = ( {
 			/>
 			<span
 				className={ `wc-block-mini-cart__badge ${ colorClassNames }` }
-				style={ {
-					color: style?.color?.text,
-					backgroundColor: style?.color?.background,
-				} }
+				style={ style }
 			>
 				{ count }
 			</span>

From c5fe9f4866bc88eebc93dea86a36afba5388d162 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 17 Nov 2021 18:02:14 +0700
Subject: [PATCH 12/14] add: todo

---
 src/BlockTypes/MiniCart.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index 209cef3d312..ceae6fab331 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -234,6 +234,9 @@ protected function get_markup( $attributes ) {
 			$wrapper_classes .= ' is-transparent';
 		}
 
+		/**
+		 * @todo refactor the logic of color class and style using StyleAttributesUtils.
+		 */
 		if ( ! empty( $attributes['textColor'] ) ) {
 			$classes .= sprintf(
 				' has-%s-color has-text-color',

From a6c5b348a8ce1b62f69bae2f45d659c564122099 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 17 Nov 2021 21:02:37 +0700
Subject: [PATCH 13/14] remove unused class

---
 src/BlockTypes/MiniCart.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index ec15bf92162..6a3b4d3a9f0 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -224,7 +224,7 @@ protected function get_markup( $attributes ) {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$wrapper_classes = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
+		$wrapper_classes = 'wc-block-mini-cart';
 		$classes         = '';
 		$style           = '';
 

From 04cca3c28e33903d000375bf3b334cba41aae46f Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 17 Nov 2021 22:22:12 +0700
Subject: [PATCH 14/14] fix: classnames in edit component

---
 .../blocks/cart-checkout/mini-cart/edit.tsx   | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
index a99dee8faee..46bc4b56ec3 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -57,6 +57,11 @@ const MiniCartBlock = ( {
 		color: style?.color?.text,
 	};
 
+	const colorClassNames = classnames( backgroundClass, textColorClass, {
+		'has-background': backgroundClass || style?.color?.background,
+		'has-text-color': textColorClass || style?.color?.text,
+	} );
+
 	const productCount = 0;
 	const productTotal = 0;
 
@@ -84,10 +89,10 @@ const MiniCartBlock = ( {
 				</PanelBody>
 			</InspectorControls>
 			<button
-				className={ classnames( 'wc-block-mini-cart__button', {
-					backgroundClass,
-					textColorClass,
-				} ) }
+				className={ classnames(
+					'wc-block-mini-cart__button',
+					colorClassNames
+				) }
 				style={ colorStyle }
 			>
 				<span className="wc-block-mini-cart__amount">
@@ -95,13 +100,7 @@ const MiniCartBlock = ( {
 				</span>
 				<QuantityBadge
 					count={ productCount }
-					colorClassNames={ classnames( {
-						backgroundClass,
-						textColorClass,
-						'has-background':
-							backgroundClass || style?.color?.background,
-						'has-text-color': textColorClass || style?.color?.text,
-					} ) }
+					colorClassNames={ colorClassNames }
 					style={ colorStyle }
 				/>
 			</button>