Add Product Collection Full Grid pattern (#10665)

* Add initial look of Full Grid Product Collection pattern * Refactor textAlign property of Product Button so it uses flex rather than text-align * Update Product Button text align after the fix * Remove debug log (#10719) * Add Product Collection Grid pattern (#10660) * Dispatch the `wc-blocks_render_blocks_frontend` event when rendering the empty cart block (#10619) * E2E: Refactor Mini Cart to be ready for fully parallel (#10704) * Revert dequeue add-to-cart-variation script which is needed to properly handle variable products in single product page (#10723) * Update alignment options to new setting --------- Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Tung Du <[email protected]>
woocommerce · Aug 28, 2023 · 1a6b1b3 · 1a6b1b3
1 parent 4531790
commit 1a6b1b3
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 45 deletions.
diff --git a/assets/js/atomic/blocks/product-elements/button/block.tsx b/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,
 				}
 			) }
 		>

diff --git a/assets/js/atomic/blocks/product-elements/button/style.scss b/assets/js/atomic/blocks/product-elements/button/style.scss
@@ -56,6 +56,14 @@
 		}
 	}
 
+	&.align-left {
+		align-items: flex-start;
+	}
+
+	&.align-right {
+		align-items: flex-end;
+	}
+
 	.wc-block-components-product-button__button {
 		border-style: none;
 		display: inline-flex;

diff --git a/patterns/product-collection-full-grid.php b/patterns/product-collection-full-grid.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Title: Product Collection Full Grid
+ * Slug: woocommerce-blocks/product-collection-full-grid
+ * Categories: WooCommerce
+ * Inserter: false
+ */
+?>
+
+<!-- wp:woocommerce/product-collection {"queryId":0,"query":{"perPage":3,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{},"parents":[],"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3}} -->
+<div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
+<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
+
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"left","fontSize":"medium","style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1"}}} /-->
+
+<!-- wp:post-title {"textAlign":"left","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}},"typography":{"lineHeight":"1"}},"fontSize":"small","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
+
+<!-- wp:woocommerce/product-button {"textAlign":"left","width":50,"isDescendentOfQueryLoop":true,"style":{"typography":{"fontSize":"0.8rem"}}} /-->
+<!-- /wp:woocommerce/product-template -->
+
+<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p></p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results --></div>
+<!-- /wp:woocommerce/product-collection -->
diff --git a/src/BlockTypes/ProductButton.php b/src/BlockTypes/ProductButton.php
@@ -83,15 +83,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(
@@ -207,7 +207,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'] ) : '',