Fix Mini Cart Block global styles #7379 (#7515)

* Fix Mini Cart Block global styles #7379 Fix Mini Cart Block global styles * add font_size
woocommerce · Oct 31, 2022 · 938c7c2 · 938c7c2
1 parent f601de4
commit 938c7c2
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 21 deletions.
diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx
@@ -4,7 +4,6 @@
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 import Drawer from '@woocommerce/base-components/drawer';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { useTypographyProps } from '@woocommerce/base-hooks';
 import { translateJQueryEventToNative } from '@woocommerce/base-utils';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import {
@@ -205,8 +204,6 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 		color: style?.color?.text,
 	};
 
-	const typographyProps = useTypographyProps( attributes );
-
 	return (
 		<>
 			<button
@@ -221,10 +218,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
@@ -13,7 +13,6 @@ import {
 import { getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
-import { useTypographyProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -44,8 +43,6 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 	const productCount = 0;
 	const productTotal = 0;
 
-	const typographyProps = useTypographyProps( attributes );
-
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
@@ -127,10 +124,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]) {
@@ -29,7 +29,8 @@
 @media screen and (min-width: 768px) {
 	.wc-block-mini-cart__amount {
 		display: initial;
-		font-weight: 600;
+		font-size: inherit;
+		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();
 	}
 
@@ -358,7 +356,7 @@ protected function get_markup( $attributes ) {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$classes_styles  = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'text_color', 'background_color', 'font_size', 'font_family' ) );
+		$classes_styles  = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'text_color', 'background_color', 'font_size', 'font_weight', 'font_family' ) );
 		$wrapper_classes = sprintf( 'wc-block-mini-cart wp-block-woocommerce-mini-cart %s', $classes_styles['classes'] );
 		if ( ! empty( $attributes['className'] ) ) {
 			$wrapper_classes .= ' ' . $attributes['className'];