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'] ) : '',