Add font-weight option to Mini Cart block text (#6760)

* Add font-weight option to Mini Cart button text.

Need to repeat steps for icon SVG and cart item count.

* Add font-weight controls to mini-cart item count.

* Add better error handling to PHP style output.

Ensure style value is set for style item in the
get_font_weight_class_and_style attributes array before rendering it to
the output.

* Revert font-weight option for quantity badge.

Per conversation with @vivialice, it looks better for now to keep the
font weight adjustment capabilities to just the price and leave the cart
icon and count as-is.

* Move $typography_styles variable into markup fn.

To resolve merge conflicts and get everything in it's proper place, this
commit will move the $typography_styles variable into the
get_cart_price_markup() function from #6796.

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

@@ -34,6 +34,7 @@ import QuantityBadge from './quantity-badge';
 import { MiniCartContentsBlock } from './mini-cart-contents/block';
 import './style.scss';
 import { blockName } from './mini-cart-contents/attributes';
+import { useTypographyProps } from '../../hooks/style-attributes';
 
 interface Props {
 	isInitiallyOpen?: boolean;
@@ -44,14 +45,16 @@ interface Props {
 	hasHiddenPrice: boolean;
 }
 
-const MiniCartBlock = ( {
-	isInitiallyOpen = false,
-	colorClassNames,
-	style,
-	contents = '',
-	addToCartBehaviour = 'none',
-	hasHiddenPrice = false,
-}: Props ): JSX.Element => {
+const MiniCartBlock = ( attributes: Props ): JSX.Element => {
+	const {
+		isInitiallyOpen = false,
+		colorClassNames,
+		style,
+		contents = '',
+		addToCartBehaviour = 'none',
+		hasHiddenPrice = false,
+	} = attributes;
+
 	const {
 		cartItemsCount: cartItemsCountFromApi,
 		cartIsLoading,
@@ -201,6 +204,8 @@ const MiniCartBlock = ( {
 		color: style?.color?.text,
 	};
 
+	const typographyProps = useTypographyProps( attributes );
+
 	return (
 		<>
 			<button
@@ -215,7 +220,10 @@ const MiniCartBlock = ( {
 				aria-label={ ariaLabel }
 			>
 				{ ! hasHiddenPrice && (
-					<span className="wc-block-mini-cart__amount">
+					<span
+						className="wc-block-mini-cart__amount"
+						style={ typographyProps.style }
+					>
 						{ formatPrice(
 							subTotal,
 							getCurrencyFromPriceResponse( cartTotals )

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

@@ -18,6 +18,7 @@ import Noninteractive from '@woocommerce/base-components/noninteractive';
  * Internal dependencies
  */
 import QuantityBadge from './quantity-badge';
+import { useTypographyProps } from '../../hooks/style-attributes';
 
 interface Attributes {
 	addToCartBehaviour: string;
@@ -43,6 +44,8 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 	const productCount = 0;
 	const productTotal = 0;
 
+	const typographyProps = useTypographyProps( attributes );
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
@@ -124,7 +127,10 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 			<Noninteractive>
 				<button className="wc-block-mini-cart__button">
 					{ ! hasHiddenPrice && (
-						<span className="wc-block-mini-cart__amount">
+						<span
+							className="wc-block-mini-cart__amount"
+							style={ typographyProps.style }
+						>
 							{ formatPrice( productTotal ) }
 						</span>
 					) }

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

@@ -38,6 +38,8 @@ const settings: BlockConfiguration = {
 			fontSize: true,
 			...( isFeaturePluginBuild() && {
 				__experimentalFontFamily: true,
+				__experimentalFontWeight: true,
+				__experimentalSkipSerialization: true,
 			} ),
 		},
 	},

src/BlockTypes/MiniCart.php

@@ -303,8 +303,9 @@ 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">' . esc_html( wp_strip_all_tags( wc_price( $cart_contents_total ) ) ) . '</span>
+		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>
 		' . $this->get_include_tax_label_markup();
 	}
 

src/Utils/StyleAttributesUtils.php

@@ -37,6 +37,27 @@ public static function get_font_size_class_and_style( $attributes ) {
 		return null;
 	}
 
+	/**
+	 * Get class and style for font-weight from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return (array | null)
+	 */
+	public static function get_font_weight_class_and_style( $attributes ) {
+
+		$custom_font_weight = $attributes['style']['typography']['fontWeight'] ?? '';
+
+		if ( '' !== $custom_font_weight ) {
+			return array(
+				'class' => null,
+				'style' => sprintf( 'font-weight: %s;', $custom_font_weight ),
+			);
+		}
+		return null;
+	}
+
+
 	/**
 	 * Get class and style for font-family from attributes.
 	 *
@@ -340,6 +361,7 @@ public static function get_classes_and_styles_by_attributes( $attributes, $prope
 			'text_color'       => self::get_text_color_class_and_style( $attributes ),
 			'font_size'        => self::get_font_size_class_and_style( $attributes ),
 			'font_family'      => self::get_font_family_class_and_style( $attributes ),
+			'font_weight'      => self::get_font_weight_class_and_style( $attributes ),
 			'link_color'       => self::get_link_color_class_and_style( $attributes ),
 			'background_color' => self::get_background_color_class_and_style( $attributes ),
 			'border_color'     => self::get_border_color_class_and_style( $attributes ),