Mini Cart block: allow left, right and center alignment (https://github.com/woocommerce/woocommerce-blocks/pull/5171)

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

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import {
+	AlignmentControl,
+	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	getColorClassName,
@@ -9,8 +11,9 @@ import {
 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 { positionCenter, positionRight, positionLeft } from '@wordpress/icons';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import classnames from 'classnames';
 
 /**
@@ -19,6 +22,7 @@ import classnames from 'classnames';
 import QuantityBadge from './quantity-badge';
 
 interface Attributes {
+	align: string;
 	isInitiallyOpen?: boolean;
 	transparentButton: boolean;
 	backgroundColor?: string;
@@ -35,9 +39,15 @@ const MiniCartBlock = ( {
 	attributes,
 	setAttributes,
 }: Props ): ReactElement => {
-	const { transparentButton, backgroundColor, textColor, style } = attributes;
+	const {
+		transparentButton,
+		backgroundColor,
+		textColor,
+		style,
+		align,
+	} = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wc-block-mini-cart', {
+		className: classnames( `wc-block-mini-cart align-${ align }`, {
 			'is-transparent': transparentButton,
 		} ),
 	} );
@@ -67,6 +77,40 @@ const MiniCartBlock = ( {
 
 	return (
 		<div { ...blockProps }>
+			<BlockControls>
+				<AlignmentControl
+					value={ align }
+					alignmentControls={ [
+						{
+							icon: positionLeft,
+							title: __(
+								'Align button left',
+								'woo-gutenberg-products-block'
+							),
+							align: 'left',
+						},
+						{
+							icon: positionCenter,
+							title: __(
+								'Align button center',
+								'woo-gutenberg-products-block'
+							),
+							align: 'center',
+						},
+						{
+							icon: positionRight,
+							title: __(
+								'Align button right',
+								'woo-gutenberg-products-block'
+							),
+							align: 'right',
+						},
+					] }
+					onChange={ ( newAlign: string ) =>
+						setAttributes( { align: newAlign } )
+					}
+				/>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody
 					title={ __(

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

@@ -46,6 +46,10 @@ const settings = {
 		},
 	},
 	attributes: {
+		align: {
+			type: 'string',
+			default: 'right',
+		},
 		isPreview: {
 			type: 'boolean',
 			default: false,

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

@@ -1,8 +1,16 @@
-.wc-block-mini-cart.wp-block-woocommerce-mini-cart {
+.wc-block-mini-cart {
 	background-color: transparent !important;
 	display: flex;
 	justify-content: flex-end;
 
+	&.align-center {
+		justify-content: center;
+	}
+
+	&.align-left {
+		justify-content: flex-start;
+	}
+
 	&.is-transparent .wc-block-mini-cart__button {
 		background-color: transparent !important;
 	}

plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php

@@ -224,10 +224,14 @@ class MiniCart extends AbstractBlock {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$wrapper_classes = 'wc-block-mini-cart';
+		$wrapper_classes = 'wc-block-mini-cart  wp-block-woocommerce-mini-cart';
 		$classes         = '';
 		$style           = '';
 
+		if ( ! empty( $attributes['align'] ) ) {
+			$wrapper_classes .= ' align-' . $attributes['align'];
+		}
+
 		if ( ! isset( $attributes['transparentButton'] ) || $attributes['transparentButton'] ) {
 			$wrapper_classes .= ' is-transparent';
 		}