Fix Mini Cart Block global styles #7379

Fix Mini Cart Block global styles
woocommerce · Oct 28, 2022 · 76a8193 · 76a8193
1 parent 7717169
commit 76a8193
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 16 deletions.
diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx
@@ -205,8 +205,6 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 		color: style?.color?.text,
 	};
 
-	const typographyProps = useTypographyProps( attributes );
-
 	return (
 		<>
 			<button
@@ -221,10 +219,7 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 				aria-label={ ariaLabel }
 			>
 				{ ! hasHiddenPrice && (
-					<span
-						className="wc-block-mini-cart__amount"
-						style={ typographyProps.style }
-					>
+					<span className="wc-block-mini-cart__amount">
 						{ formatPrice(
 							subTotal,
 							getCurrencyFromPriceResponse( cartTotals )

diff --git a/assets/js/blocks/mini-cart/edit.tsx b/assets/js/blocks/mini-cart/edit.tsx
@@ -127,10 +127,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 			<Noninteractive>
 				<button className="wc-block-mini-cart__button">
 					{ ! hasHiddenPrice && (
-						<span
-							className="wc-block-mini-cart__amount"
-							style={ typographyProps.style }
-						>
+						<span className="wc-block-mini-cart__amount">
 							{ formatPrice( productTotal ) }
 						</span>
 					) }

diff --git a/assets/js/blocks/mini-cart/index.tsx b/assets/js/blocks/mini-cart/index.tsx
@@ -39,7 +39,6 @@ const settings: BlockConfiguration = {
 			...( isFeaturePluginBuild() && {
 				__experimentalFontFamily: true,
 				__experimentalFontWeight: true,
-				__experimentalSkipSerialization: true,
 			} ),
 		},
 	},

diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
@@ -10,7 +10,7 @@
 	display: flex;
 	font-size: inherit;
 	font-family: inherit;
-	font-weight: 400;
+	font-weight: inherit;
 	padding: em($gap-small) em($gap-smaller);
 
 	&:hover:not([disabled]) {
@@ -19,6 +19,8 @@
 }
 
 .wc-block-mini-cart__amount {
+	font-size: inherit;
+	font-weight: inherit;
 	display: none;
 }
 
@@ -29,7 +31,7 @@
 @media screen and (min-width: 768px) {
 	.wc-block-mini-cart__amount {
 		display: initial;
-		font-weight: 600;
+		font-weight: inherit;
 		margin-right: $gap-smaller;
 	}
 }

diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
@@ -303,9 +303,7 @@ protected function get_cart_price_markup( $attributes ) {
 		$cart_controller     = $this->get_cart_controller();
 		$cart                = $cart_controller->get_cart_instance();
 		$cart_contents_total = $cart->get_subtotal();
-		$typography_styles   = isset( StyleAttributesUtils::get_font_weight_class_and_style( $attributes )['style'] ) ? StyleAttributesUtils::get_font_weight_class_and_style( $attributes )['style'] : null;
-
-		return '<span class="wc-block-mini-cart__amount" style="' . esc_attr( $typography_styles ) . '">' . esc_html( wp_strip_all_tags( wc_price( $cart_contents_total ) ) ) . '</span>
+		return '<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();
 	}