Add to Cart: Add support for the alignment setting (#7816)

* Add to Cart: Add support for the alignment setting * Add to Cart button: Hide alignment setting for the All Products block
woocommerce · Dec 2, 2022 · a6eb352 · a6eb352
1 parent e64a5ce
commit a6eb352
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 15 deletions.
diff --git a/assets/js/atomic/blocks/product-elements/button/attributes.js b/assets/js/atomic/blocks/product-elements/button/attributes.js
@@ -7,6 +7,10 @@ export const blockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	textAlign: {
+		type: 'string',
+		default: '',
+	},
 };
 
 export default blockAttributes;
diff --git a/assets/js/atomic/blocks/product-elements/button/block.js b/assets/js/atomic/blocks/product-elements/button/block.js
@@ -33,17 +33,18 @@ import './style.scss';
  *
  * @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 ) => {
 	const { className } = props;
-
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const colorProps = useColorProps( props );
 	const borderProps = useBorderProps( props );
 	const typographyProps = useTypographyProps( props );
 	const spacingProps = useSpacingProps( props );
+	const { textAlign } = props;
 
 	return (
 		<div
@@ -54,6 +55,9 @@ export const Block = ( props ) => {
 				{
 					[ `${ parentClassName }__product-add-to-cart` ]:
 						parentClassName,
+				},
+				{
+					[ `has-text-align-${ textAlign }` ]: textAlign,
 				}
 			) }
 		>
@@ -86,6 +90,7 @@ export const Block = ( props ) => {
  * @param {Object} [props.borderStyles]     Object contains CSS class and CSS style for border.
  * @param {Object} [props.typographyStyles] Object contains CSS class and CSS style for typography.
  * @param {Object} [props.spacingStyles]    Object contains CSS style for spacing.
+ * @param {Object} [props.textAlign]        Text alignment.
  *
  * @return {*} The component.
  */
@@ -95,6 +100,7 @@ const AddToCartButton = ( {
 	borderStyles,
 	typographyStyles,
 	spacingStyles,
+	textAlign,
 } ) => {
 	const {
 		id,
@@ -170,6 +176,9 @@ const AddToCartButton = ( {
 				{
 					loading: addingToCart,
 					added: addedToCart,
+				},
+				{
+					[ `has-text-align-${ textAlign }` ]: textAlign,
 				}
 			) }
 			style={ {

diff --git a/assets/js/atomic/blocks/product-elements/button/edit.js b/assets/js/atomic/blocks/product-elements/button/edit.js
@@ -2,7 +2,11 @@
  * External dependencies
  */
 import { Disabled } from '@wordpress/components';
-import { useBlockProps } from '@wordpress/block-editor';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -19,11 +23,23 @@ const Edit = ( { attributes, setAttributes, context } ) => {
 		[ setAttributes, isDescendentOfQueryLoop ]
 	);
 	return (
-		<div { ...blockProps }>
-			<Disabled>
-				<Block { ...{ ...attributes, ...context } } />
-			</Disabled>
-		</div>
+		<>
+			<BlockControls>
+				{ isDescendentOfQueryLoop && (
+					<AlignmentToolbar
+						value={ attributes.textAlign }
+						onChange={ ( newAlign ) => {
+							setAttributes( { textAlign: newAlign || '' } );
+						} }
+					/>
+				) }
+			</BlockControls>
+			<div { ...blockProps }>
+				<Disabled>
+					<Block { ...{ ...attributes, ...context } } />
+				</Disabled>
+			</div>
+		</>
 	);
 };
 

diff --git a/assets/js/atomic/blocks/product-elements/button/style.scss b/assets/js/atomic/blocks/product-elements/button/style.scss
@@ -37,6 +37,3 @@
 	}
 }
 
-.wp-block-button.wc-block-components-product-button[data-is-descendent-of-query-loop="true"] {
-	text-align: center;
-}
diff --git a/src/BlockTypes/ProductButton.php b/src/BlockTypes/ProductButton.php
@@ -86,16 +86,18 @@ protected function render( $attributes, $content, $block ) {
 		$product = wc_get_product( $post_id );
 
 		if ( $product ) {
-			$cart_redirect_after_add = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes';
-			$html_element            = ( ! $product->has_options() && $product->is_purchasable() && $product->is_in_stock() && ! $cart_redirect_after_add ) ? 'button' : 'a';
-			$styles_and_classes      = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'border_radius', 'font_size', 'text_color' ) );
+			$cart_redirect_after_add       = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes';
+			$html_element                  = ( ! $product->has_options() && $product->is_purchasable() && $product->is_in_stock() && ! $cart_redirect_after_add ) ? 'button' : 'a';
+			$styles_and_classes            = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'border_radius', 'font_size', 'text_color' ) );
+			$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
 
 			return apply_filters(
 				'woocommerce_loop_add_to_cart_link',
 				sprintf(
-					'<div class="wp-block-button wc-block-components-product-button wc-block-grid__product-add-to-cart">
-					<%s href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="wp-block-button__link %s wc-block-components-product-button__button product_type_%s %s" style="%s">%s</%s>
+					'<div class="wp-block-button wc-block-components-product-button wc-block-grid__product-add-to-cart %1$s">
+					<%2$s href="%3$s" rel="nofollow" data-product_id="%4$s" data-product_sku="%5$s" class="wp-block-button__link %6$s wc-block-components-product-button__button product_type_%7$s %8$s" style="%9$s">%10$s</%11$s>
 				</div>',
+					esc_attr( $text_align_styles_and_classes['class'] ?? '' ),
 					$html_element,
 					esc_url( $product->add_to_cart_url() ),
 					esc_attr( $product->get_id() ),
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,3 @@ @@
     	}
     }
-    .wp-block-button.wc-block-components-product-button[data-is-descendent-of-query-loop="true"] {
-    	text-align: center;
-    }