Refactor: Use an alternative mini cart icon to fix the Mini Cart styling issues

assets/js/blocks/cart-checkout/mini-cart/block.tsx

@@ -37,7 +37,6 @@ import { blockName } from '../mini-cart-contents/attributes';
 
 interface Props {
 	isInitiallyOpen?: boolean;
-	transparentButton: boolean;
 	colorClassNames?: string;
 	style?: Record< string, Record< string, string > >;
 	contents: string;
@@ -209,11 +208,7 @@ const MiniCartBlock = ( {
 						{ taxLabel }
 					</small>
 				) }
-				<QuantityBadge
-					count={ cartItemsCount }
-					colorClassNames={ colorClassNames }
-					style={ colorStyle }
-				/>
+				<QuantityBadge count={ cartItemsCount } />
 			</button>
 			<Drawer
 				className={ classnames(

assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx

@@ -44,7 +44,6 @@ const renderMiniCartFrontend = () => {
 				contents:
 					el.querySelector( '.wc-block-mini-cart__template-part' )
 						?.innerHTML ?? '',
-				transparentButton: false,
 			};
 		},
 	} );

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

@@ -6,16 +6,14 @@ import {
 	BlockControls,
 	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, ExternalLink, ToggleControl } from '@wordpress/components';
+import { PanelBody, ExternalLink } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import { positionCenter, positionRight, positionLeft } from '@wordpress/icons';
-import classnames from 'classnames';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
@@ -26,7 +24,6 @@ import QuantityBadge from './quantity-badge';
 interface Attributes {
 	align: string;
 	isInitiallyOpen?: boolean;
-	transparentButton: boolean;
 	backgroundColor?: string;
 	textColor?: string;
 	style?: Record< string, Record< string, string > >;
@@ -41,44 +38,16 @@ const MiniCartBlock = ( {
 	attributes,
 	setAttributes,
 }: Props ): ReactElement => {
-	const {
-		transparentButton,
-		backgroundColor,
-		textColor,
-		style,
-		align,
-	} = attributes;
+	const { align } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( `wc-block-mini-cart align-${ align }`, {
-			'is-transparent': transparentButton,
-		} ),
+		className: `wc-block-mini-cart align-${ align }`,
 	} );
 
 	const templatePartEditUri = getSetting(
 		'templatePartEditUri',
 		''
 	) as string;
 
-	/**
-	 * @todo Replace `getColorClassName` and manual style manipulation with
-	 * `useColorProps` once the hook is no longer experimental.
-	 */
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
-	const textColorClass = getColorClassName( 'color', textColor );
-
-	const colorStyle = {
-		backgroundColor: style?.color?.background,
-		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;
 
@@ -119,25 +88,6 @@ const MiniCartBlock = ( {
 				/>
 			</BlockControls>
 			<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>
 				{ templatePartEditUri && (
 					<PanelBody
 						title={ __(
@@ -155,21 +105,11 @@ const MiniCartBlock = ( {
 				) }
 			</InspectorControls>
 			<Noninteractive>
-				<button
-					className={ classnames(
-						'wc-block-mini-cart__button',
-						colorClassNames
-					) }
-					style={ colorStyle }
-				>
+				<button className="wc-block-mini-cart__button">
 					<span className="wc-block-mini-cart__amount">
 						{ formatPrice( productTotal ) }
 					</span>
-					<QuantityBadge
-						count={ productCount }
-						colorClassNames={ colorClassNames }
-						style={ colorStyle }
-					/>
+					<QuantityBadge count={ productCount } />
 				</button>
 			</Noninteractive>
 			<CartCheckoutCompatibilityNotice blockName="mini-cart" />

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

@@ -32,19 +32,8 @@ const settings = {
 		html: false,
 		multiple: false,
 		color: {
-			/**
-			 * Because we don't target the wrapper element, we don't need
-			 * to add color classes and style to the wrapper.
-			 */
-			__experimentalSkipSerialization: true,
-			background: true,
+			background: false,
 		},
-		/**
-		 * 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',
 	},
 	example: {
 		attributes: {
@@ -61,10 +50,6 @@ const settings = {
 			default: false,
 			save: false,
 		},
-		transparentButton: {
-			type: 'boolean',
-			default: true,
-		},
 	},
 
 	edit,

assets/js/blocks/cart-checkout/mini-cart/quantity-badge/style.scss

@@ -5,7 +5,7 @@
 
 .wc-block-mini-cart__badge {
 	align-items: center;
-	background: #fff;
+	background: transparent;
 	border: 0.15em solid;
 	border-radius: 1em;
 	box-sizing: border-box;
@@ -27,5 +27,4 @@
 	display: block;
 	height: em(24px);
 	width: em(24px);
-	stroke: currentColor;
 }

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

@@ -10,14 +10,11 @@
 	&.align-left {
 		justify-content: flex-start;
 	}
-
-	&.is-transparent .wc-block-mini-cart__button {
-		background-color: transparent !important;
-	}
 }
 
 .wc-block-mini-cart__button {
 	align-items: center;
+	background-color: transparent;
 	border: none;
 	color: inherit;
 	display: flex;

assets/js/icons/library/mini-cart.tsx

@@ -5,31 +5,24 @@ import { SVG } from '@wordpress/primitives';
 
 const miniCart = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
-		<g clipPath="url(#clip0)">
-			<path
-				d="M7.50008 18.3332C7.96032 18.3332 8.33341 17.9601 8.33341 17.4998C8.33341 17.0396 7.96032 16.6665 7.50008 16.6665C7.03984 16.6665 6.66675 17.0396 6.66675 17.4998C6.66675 17.9601 7.03984 18.3332 7.50008 18.3332Z"
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-			<path
-				d="M16.6666 18.3332C17.1268 18.3332 17.4999 17.9601 17.4999 17.4998C17.4999 17.0396 17.1268 16.6665 16.6666 16.6665C16.2063 16.6665 15.8333 17.0396 15.8333 17.4998C15.8333 17.9601 16.2063 18.3332 16.6666 18.3332Z"
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-			<path
-				d="M0.833252 0.833496H4.16658L6.39992 11.9918C6.47612 12.3755 6.68484 12.7201 6.98954 12.9654C7.29424 13.2107 7.6755 13.341 8.06658 13.3335H16.1666C16.5577 13.341 16.9389 13.2107 17.2436 12.9654C17.5483 12.7201 17.757 12.3755 17.8333 11.9918L19.1666 5.00016H4.99992"
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-		</g>
-		<defs>
-			<clipPath id="clip0">
-				<rect width="20" height="20" fill="white" />
-			</clipPath>
-		</defs>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M7.84614 18.2769C7.89712 18.2769 7.93845 18.2356 7.93845 18.1846C7.93845 18.1336 7.89712 18.0923 7.84614 18.0923C7.79516 18.0923 7.75384 18.1336 7.75384 18.1846C7.75384 18.2356 7.79516 18.2769 7.84614 18.2769ZM6.03076 18.1846C6.03076 17.182 6.84353 16.3692 7.84614 16.3692C8.84875 16.3692 9.66152 17.182 9.66152 18.1846C9.66152 19.1872 8.84875 20 7.84614 20C6.84353 20 6.03076 19.1872 6.03076 18.1846Z"
+			fill="currentColor"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M17.3231 18.2769C17.3741 18.2769 17.4154 18.2356 17.4154 18.1846C17.4154 18.1336 17.3741 18.0923 17.3231 18.0923C17.2721 18.0923 17.2308 18.1336 17.2308 18.1846C17.2308 18.2356 17.2721 18.2769 17.3231 18.2769ZM15.5077 18.1846C15.5077 17.182 16.3205 16.3692 17.3231 16.3692C18.3257 16.3692 19.1385 17.182 19.1385 18.1846C19.1385 19.1872 18.3257 20 17.3231 20C16.3205 20 15.5077 19.1872 15.5077 18.1846Z"
+			fill="currentColor"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M20.0631 9.53835L19.4662 12.6685L19.4648 12.6757L19.4648 12.6757C19.3424 13.2919 19.0072 13.8454 18.5178 14.2394C18.031 14.6312 17.4226 14.8404 16.798 14.8308H8.44017C7.81556 14.8404 7.20714 14.6312 6.72038 14.2394C6.2312 13.8456 5.89605 13.2924 5.77352 12.6765L5.77335 12.6757L4.33477 5.48814C4.3286 5.46282 4.32345 5.43711 4.31934 5.41104L3.61815 1.90768H0.953842C0.42705 1.90768 0 1.48063 0 0.953842C0 0.42705 0.42705 0 0.953842 0H4.4C4.85462 0 5.24607 0.320858 5.33529 0.766644L6.04403 4.30769H12.785C13.0114 4.99157 13.3319 5.63258 13.7312 6.21538H6.42585L7.64421 12.3026L7.64449 12.304C7.67966 12.4811 7.77599 12.6402 7.91662 12.7534C8.05725 12.8666 8.23322 12.9267 8.41372 12.9233L8.432 12.9231H16.8062L16.8244 12.9233C17.0049 12.9267 17.1809 12.8666 17.3215 12.7534C17.4614 12.6408 17.5575 12.4828 17.5931 12.3068L17.5937 12.304L18.1649 9.30867C18.762 9.45873 19.387 9.53842 20.0307 9.53842C20.0415 9.53842 20.0523 9.5384 20.0631 9.53835Z"
+			fill="currentColor"
+		/>
 	</SVG>
 );
 

src/BlockTypes/MiniCart.php

@@ -326,10 +326,6 @@ protected function get_markup( $attributes ) {
 			$wrapper_classes .= ' align-' . $attributes['align'];
 		}
 
-		if ( ! isset( $attributes['transparentButton'] ) || $attributes['transparentButton'] ) {
-			$wrapper_classes .= ' is-transparent';
-		}
-
 		$aria_label = sprintf(
 		/* translators: %1$d is the number of products in the cart. %2$s is the cart total */
 			_n(
@@ -341,33 +337,16 @@ protected function get_markup( $attributes ) {
 			$cart_contents_count,
 			wp_strip_all_tags( wc_price( $cart_contents_total ) )
 		);
-		$title = sprintf(
-		/* translators: %d is the count of items in the cart. */
-			_n(
-				'Your cart (%d item)',
-				'Your cart (%d items)',
-				$cart_contents_count,
-				'woo-gutenberg-products-block'
-			),
-			$cart_contents_count
-		);
 		$icon        = '<svg class="wc-block-mini-cart__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<g clip-path="url(#clip0)">
-				<path d="M7.50008 18.3332C7.96032 18.3332 8.33341 17.9601 8.33341 17.4998C8.33341 17.0396 7.96032 16.6665 7.50008 16.6665C7.03984 16.6665 6.66675 17.0396 6.66675 17.4998C6.66675 17.9601 7.03984 18.3332 7.50008 18.3332Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-				<path d="M16.6666 18.3332C17.1268 18.3332 17.4999 17.9601 17.4999 17.4998C17.4999 17.0396 17.1268 16.6665 16.6666 16.6665C16.2063 16.6665 15.8333 17.0396 15.8333 17.4998C15.8333 17.9601 16.2063 18.3332 16.6666 18.3332Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-				<path d="M0.833252 0.833496H4.16658L6.39992 11.9918C6.47612 12.3755 6.68484 12.7201 6.98954 12.9654C7.29424 13.2107 7.6755 13.341 8.06658 13.3335H16.1666C16.5577 13.341 16.9389 13.2107 17.2436 12.9654C17.5483 12.7201 17.757 12.3755 17.8333 11.9918L19.1666 5.00016H4.99992" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-			</g>
-			<defs>
-				<clipPath id="clip0">
-					<rect width="20" height="20" fill="white"/>
-				</clipPath>
-			</defs>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M7.84614 18.2769C7.89712 18.2769 7.93845 18.2356 7.93845 18.1846C7.93845 18.1336 7.89712 18.0923 7.84614 18.0923C7.79516 18.0923 7.75384 18.1336 7.75384 18.1846C7.75384 18.2356 7.79516 18.2769 7.84614 18.2769ZM6.03076 18.1846C6.03076 17.182 6.84353 16.3692 7.84614 16.3692C8.84875 16.3692 9.66152 17.182 9.66152 18.1846C9.66152 19.1872 8.84875 20 7.84614 20C6.84353 20 6.03076 19.1872 6.03076 18.1846Z" fill="currentColor"/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3231 18.2769C17.3741 18.2769 17.4154 18.2356 17.4154 18.1846C17.4154 18.1336 17.3741 18.0923 17.3231 18.0923C17.2721 18.0923 17.2308 18.1336 17.2308 18.1846C17.2308 18.2356 17.2721 18.2769 17.3231 18.2769ZM15.5077 18.1846C15.5077 17.182 16.3205 16.3692 17.3231 16.3692C18.3257 16.3692 19.1385 17.182 19.1385 18.1846C19.1385 19.1872 18.3257 20 17.3231 20C16.3205 20 15.5077 19.1872 15.5077 18.1846Z" fill="currentColor"/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0631 9.53835L19.4662 12.6685L19.4648 12.6757L19.4648 12.6757C19.3424 13.2919 19.0072 13.8454 18.5178 14.2394C18.031 14.6312 17.4226 14.8404 16.798 14.8308H8.44017C7.81556 14.8404 7.20714 14.6312 6.72038 14.2394C6.2312 13.8456 5.89605 13.2924 5.77352 12.6765L5.77335 12.6757L4.33477 5.48814C4.3286 5.46282 4.32345 5.43711 4.31934 5.41104L3.61815 1.90768H0.953842C0.42705 1.90768 0 1.48063 0 0.953842C0 0.42705 0.42705 0 0.953842 0H4.4C4.85462 0 5.24607 0.320858 5.33529 0.766644L6.04403 4.30769H12.785C13.0114 4.99157 13.3319 5.63258 13.7312 6.21538H6.42585L7.64421 12.3026L7.64449 12.304C7.67966 12.4811 7.77599 12.6402 7.91662 12.7534C8.05725 12.8666 8.23322 12.9267 8.41372 12.9233L8.432 12.9231H16.8062L16.8244 12.9233C17.0049 12.9267 17.1809 12.8666 17.3215 12.7534C17.4614 12.6408 17.5575 12.4828 17.5931 12.3068L17.5937 12.304L18.1649 9.30867C18.762 9.45873 19.387 9.53842 20.0307 9.53842C20.0415 9.53842 20.0523 9.5384 20.0631 9.53835Z" fill="currentColor"/>
 		</svg>';
 		$button_html = '<span class="wc-block-mini-cart__amount">' . esc_html( wp_strip_all_tags( wc_price( $cart_contents_total ) ) ) . '</span>
 		' . $this->get_include_tax_label_markup() . '
 		<span class="wc-block-mini-cart__quantity-badge">
 			' . $icon . '
-			<span class="wc-block-mini-cart__badge ' . $classes . '" style="' . $style . '">' . $cart_contents_count . '</span>
+			<span class="wc-block-mini-cart__badge">' . $cart_contents_count . '</span>
 		</span>';
 
 		if ( is_cart() || is_checkout() ) {
@@ -468,17 +447,4 @@ protected function get_tax_label() {
 	protected function get_cart_payload() {
 		return WC()->api->get_endpoint_data( '/wc/store/cart' );
 	}
-
-
-	/**
-	 * Get the supports array for this block type.
-	 *
-	 * @see $this->register_block_type()
-	 * @return string;
-	 */
-	protected function get_block_type_supports() {
-		return [
-			'__experimentalSelector' => '.wc-block-mini-cart__button, .wc-block-mini-cart__badge',
-		];
-	}
 }