From 1a6b1b34e0f3bb00f25b4cbcc6f260e33b5d7dc4 Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Mon, 28 Aug 2023 12:28:17 +0200 Subject: [PATCH] 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 <5656702+opr@users.noreply.github.com> Co-authored-by: Tung Du --- .../blocks/product-elements/button/block.tsx | 36 +------------------ .../blocks/product-elements/button/style.scss | 8 +++++ patterns/product-collection-full-grid.php | 34 ++++++++++++++++++ src/BlockTypes/ProductButton.php | 20 +++++------ 4 files changed, 53 insertions(+), 45 deletions(-) create mode 100644 patterns/product-collection-full-grid.php diff --git a/assets/js/atomic/blocks/product-elements/button/block.tsx b/assets/js/atomic/blocks/product-elements/button/block.tsx index c3ed224b08f..2199c1e3613 100644 --- 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 index 4df68af32ab..ae7792cca37 100644 --- 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 new file mode 100644 index 00000000000..a30d5649c83 --- /dev/null +++ b/patterns/product-collection-full-grid.php @@ -0,0 +1,34 @@ + + + +
+ + + + + + + + + + + + + + + + + + + +

+ +
+ diff --git a/src/BlockTypes/ProductButton.php b/src/BlockTypes/ProductButton.php index 16a5123938e..507d4355c00 100644 --- 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}" ', 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'] ) : '',