Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 1a6b1b3

Browse files
kmanijakoprdinhtungdu
authored
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]>
1 parent 4531790 commit 1a6b1b3

File tree

4 files changed

+53
-45
lines changed

4 files changed

+53
-45
lines changed

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

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,10 @@ import type {
2727
AddToCartButtonPlaceholderAttributes,
2828
} from './types';
2929

30-
/**
31-
* Product Button Block Component.
32-
*
33-
* @param {Object} props Incoming props.
34-
* @param {Object} [props.product] Product.
35-
* @param {Object} [props.style] Object contains CSS Styles.
36-
* @param {string} [props.className] String contains CSS class.
37-
* @param {Object} [props.textAlign] Text alignment.
38-
*
39-
* @return {*} The component.
40-
*/
4130
const AddToCartButton = ( {
4231
product,
4332
className,
4433
style,
45-
textAlign,
4634
}: AddToCartButtonAttributes ): JSX.Element => {
4735
const {
4836
id,
@@ -117,9 +105,6 @@ const AddToCartButton = ( {
117105
{
118106
loading: addingToCart,
119107
added: addedToCart,
120-
},
121-
{
122-
[ `has-text-align-${ textAlign }` ]: textAlign,
123108
}
124109
) }
125110
style={ style }
@@ -129,15 +114,6 @@ const AddToCartButton = ( {
129114
);
130115
};
131116

132-
/**
133-
* Product Button Block Component.
134-
*
135-
* @param {Object} props Incoming props.
136-
* @param {Object} [props.style] Object contains CSS Styles.
137-
* @param {string} [props.className] String contains CSS class.
138-
*
139-
* @return {*} The component.
140-
*/
141117
const AddToCartButtonPlaceholder = ( {
142118
className,
143119
style,
@@ -158,14 +134,6 @@ const AddToCartButtonPlaceholder = ( {
158134
);
159135
};
160136

161-
/**
162-
* Product Button Block Component.
163-
*
164-
* @param {Object} props Incoming props.
165-
* @param {string} [props.className] CSS Class name for the component.
166-
* @param {string} [props.textAlign] Text alignment.
167-
* @return {*} The component.
168-
*/
169137
export const Block = ( props: BlockAttributes ): JSX.Element => {
170138
const { className, textAlign } = props;
171139
const styleProps = useStyleProps( props );
@@ -181,9 +149,7 @@ export const Block = ( props: BlockAttributes ): JSX.Element => {
181149
{
182150
[ `${ parentClassName }__product-add-to-cart` ]:
183151
parentClassName,
184-
},
185-
{
186-
[ `has-text-align-${ textAlign }` ]: textAlign,
152+
[ `align-${ textAlign }` ]: textAlign,
187153
}
188154
) }
189155
>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,14 @@
5656
}
5757
}
5858

59+
&.align-left {
60+
align-items: flex-start;
61+
}
62+
63+
&.align-right {
64+
align-items: flex-end;
65+
}
66+
5967
.wc-block-components-product-button__button {
6068
border-style: none;
6169
display: inline-flex;

‎patterns/product-collection-full-grid.php‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?php
2+
/**
3+
* Title: Product Collection Full Grid
4+
* Slug: woocommerce-blocks/product-collection-full-grid
5+
* Categories: WooCommerce
6+
* Inserter: false
7+
*/
8+
?>
9+
10+
<!-- 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}} -->
11+
<div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
12+
<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
13+
14+
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"left","fontSize":"medium","style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1"}}} /-->
15+
16+
<!-- 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"} /-->
17+
18+
<!-- wp:woocommerce/product-button {"textAlign":"left","width":50,"isDescendentOfQueryLoop":true,"style":{"typography":{"fontSize":"0.8rem"}}} /-->
19+
<!-- /wp:woocommerce/product-template -->
20+
21+
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
22+
<!-- wp:query-pagination-previous /-->
23+
24+
<!-- wp:query-pagination-numbers /-->
25+
26+
<!-- wp:query-pagination-next /-->
27+
<!-- /wp:query-pagination -->
28+
29+
<!-- wp:query-no-results -->
30+
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
31+
<p></p>
32+
<!-- /wp:paragraph -->
33+
<!-- /wp:query-no-results --></div>
34+
<!-- /wp:woocommerce/product-collection -->

‎src/BlockTypes/ProductButton.php‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -83,15 +83,15 @@ protected function render( $attributes, $content, $block ) {
8383
__( '%s in cart', 'woo-gutenberg-products-block' ),
8484
$number_of_items_in_cart
8585
) : $product->add_to_cart_text();
86-
$cart_redirect_after_add = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes';
87-
$ajax_add_to_cart_enabled = get_option( 'woocommerce_enable_ajax_add_to_cart' ) === 'yes';
88-
$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();
89-
$html_element = $is_ajax_button ? 'button' : 'a';
90-
$styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
91-
$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
92-
$classname = $attributes['className'] ?? '';
93-
$custom_width_classes = isset( $attributes['width'] ) ? 'has-custom-width wp-block-button__width-' . $attributes['width'] : '';
94-
$html_classes = implode(
86+
$cart_redirect_after_add = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes';
87+
$ajax_add_to_cart_enabled = get_option( 'woocommerce_enable_ajax_add_to_cart' ) === 'yes';
88+
$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();
89+
$html_element = $is_ajax_button ? 'button' : 'a';
90+
$styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
91+
$classname = $attributes['className'] ?? '';
92+
$custom_width_classes = isset( $attributes['width'] ) ? 'has-custom-width wp-block-button__width-' . $attributes['width'] : '';
93+
$custom_align_classes = isset( $attributes['textAlign'] ) ? 'align-' . $attributes['textAlign'] : '';
94+
$html_classes = implode(
9595
' ',
9696
array_filter(
9797
array(
@@ -207,7 +207,7 @@ class="{button_classes}"
207207
</div>',
208208
array(
209209
'{classes}' => esc_attr( $text_align_styles_and_classes['class'] ?? '' ),
210-
'{custom_classes}' => esc_attr( $classname . ' ' . $custom_width_classes ),
210+
'{custom_classes}' => esc_attr( $classname . ' ' . $custom_width_classes . ' ' . $custom_align_classes ),
211211
'{html_element}' => $html_element,
212212
'{add_to_cart_url}' => esc_url( $product->add_to_cart_url() ),
213213
'{button_classes}' => isset( $args['class'] ) ? esc_attr( $args['class'] ) : '',

0 commit comments

Comments
 (0)