Refactor textAlign property of Product Button so it uses flex rather than text-align

Author: kmanijak

assets/js/atomic/blocks/product-elements/button/block.tsx

@@ -27,22 +27,10 @@ import type {
 	AddToCartButtonPlaceholderAttributes,
 } from './types';
 
-/**
- * Product Button Block Component.
- *
- * @param {Object} props             Incoming props.
- * @param {Object} [props.product]   Product.
- * @param {Object} [props.style]     Object contains CSS Styles.
- * @param {string} [props.className] String contains CSS class.
- * @param {Object} [props.textAlign] Text alignment.
- *
- * @return {*} The component.
- */
 const AddToCartButton = ( {
 	product,
 	className,
 	style,
-	textAlign,
 }: AddToCartButtonAttributes ): JSX.Element => {
 	const {
 		id,
@@ -117,9 +105,6 @@ const AddToCartButton = ( {
 				{
 					loading: addingToCart,
 					added: addedToCart,
-				},
-				{
-					[ `has-text-align-${ textAlign }` ]: textAlign,
 				}
 			) }
 			style={ style }
@@ -129,15 +114,6 @@ const AddToCartButton = ( {
 	);
 };
 
-/**
- * Product Button Block Component.
- *
- * @param {Object} props             Incoming props.
- * @param {Object} [props.style]     Object contains CSS Styles.
- * @param {string} [props.className] String contains CSS class.
- *
- * @return {*} The component.
- */
 const AddToCartButtonPlaceholder = ( {
 	className,
 	style,
@@ -158,14 +134,6 @@ const AddToCartButtonPlaceholder = ( {
 	);
 };
 
-/**
- * Product Button Block Component.
- *
- * @param {Object} props             Incoming props.
- * @param {string} [props.className] CSS Class name for the component.
- * @param {string} [props.textAlign] Text alignment.
- * @return {*} The component.
- */
 export const Block = ( props: BlockAttributes ): JSX.Element => {
 	const { className, textAlign } = props;
 	const styleProps = useStyleProps( props );
@@ -181,9 +149,7 @@ export const Block = ( props: BlockAttributes ): JSX.Element => {
 				{
 					[ `${ parentClassName }__product-add-to-cart` ]:
 						parentClassName,
-				},
-				{
-					[ `has-text-align-${ textAlign }` ]: textAlign,
+					[ `align-${ textAlign }` ]: textAlign,
 				}
 			) }
 		>

assets/js/atomic/blocks/product-elements/button/style.scss

@@ -55,6 +55,14 @@
 		}
 	}
 
+	&.align-left {
+		justify-content: left;
+	}
+
+	&.align-right {
+		justify-content: right;
+	}
+
 	.wc-block-components-product-button__button {
 		border-style: none;
 		display: inline-flex;

src/BlockTypes/ProductButton.php

@@ -84,15 +84,15 @@ protected function render( $attributes, $content, $block ) {
 				__( '%s in cart', 'woo-gutenberg-products-block' ),
 				$number_of_items_in_cart
 			) : $product->add_to_cart_text();
-			$cart_redirect_after_add       = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes';
-			$ajax_add_to_cart_enabled      = get_option( 'woocommerce_enable_ajax_add_to_cart' ) === 'yes';
-			$is_ajax_button                = $ajax_add_to_cart_enabled && ! $cart_redirect_after_add && $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock();
-			$html_element                  = $is_ajax_button ? 'button' : 'a';
-			$styles_and_classes            = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
-			$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
-			$classname                     = $attributes['className'] ?? '';
-			$custom_width_classes          = isset( $attributes['width'] ) ? 'has-custom-width wp-block-button__width-' . $attributes['width'] : '';
-			$html_classes                  = implode(
+			$cart_redirect_after_add  = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes';
+			$ajax_add_to_cart_enabled = get_option( 'woocommerce_enable_ajax_add_to_cart' ) === 'yes';
+			$is_ajax_button           = $ajax_add_to_cart_enabled && ! $cart_redirect_after_add && $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock();
+			$html_element             = $is_ajax_button ? 'button' : 'a';
+			$styles_and_classes       = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+			$classname                = $attributes['className'] ?? '';
+			$custom_width_classes     = isset( $attributes['width'] ) ? 'has-custom-width wp-block-button__width-' . $attributes['width'] : '';
+			$custom_align_classes     = isset( $attributes['textAlign'] ) ? 'align-' . $attributes['textAlign'] : '';
+			$html_classes             = implode(
 				' ',
 				array_filter(
 					array(
@@ -208,7 +208,7 @@ class="{button_classes}"
 				</div>',
 					array(
 						'{classes}'                => esc_attr( $text_align_styles_and_classes['class'] ?? '' ),
-						'{custom_classes}'         => esc_attr( $classname . ' ' . $custom_width_classes ),
+						'{custom_classes}'         => esc_attr( $classname . ' ' . $custom_width_classes . ' ' . $custom_align_classes ),
 						'{html_element}'           => $html_element,
 						'{add_to_cart_url}'        => esc_url( $product->add_to_cart_url() ),
 						'{button_classes}'         => isset( $args['class'] ) ? esc_attr( $args['class'] ) : '',