diff --git a/plugins/woocommerce-blocks/assets/css/style.scss b/plugins/woocommerce-blocks/assets/css/style.scss index 02fcfe3879e..2c67088b5d4 100644 --- a/plugins/woocommerce-blocks/assets/css/style.scss +++ b/plugins/woocommerce-blocks/assets/css/style.scss @@ -17,6 +17,7 @@ .wc-block-grid__product-link { text-decoration: none; + border: 0; } .wc-block-grid__product-image { @@ -149,6 +150,16 @@ } } + &.has-aligned-buttons { + .wc-block-grid__product { + display: flex; + flex-direction: column; + } + .wc-block-grid__product-add-to-cart { + margin-top: auto !important; + } + } + &.has-1-columns { .wc-block-grid__products { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js index 98a73b7a1b1..f2ba0ae690b 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js @@ -15,6 +15,7 @@ import { RangeControl, Toolbar, withSpokenMessages, + ToggleControl, } from '@wordpress/components'; import { Component, Fragment } from '@wordpress/element'; import PropTypes from 'prop-types'; @@ -33,7 +34,7 @@ import ProductOrderbyControl from '../../components/product-orderby-control'; class ProductsBlock extends Component { getInspectorControls() { const { attributes, setAttributes } = this.props; - const { columns, contentVisibility, orderby } = attributes; + const { columns, contentVisibility, orderby, alignButtons } = attributes; return ( @@ -48,6 +49,22 @@ class ProductsBlock extends Component { min={ wc_product_block_data.min_columns } max={ wc_product_block_data.max_columns } /> + setAttributes( { alignButtons: ! alignButtons } ) } + /> diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js index 9a0a2876e8e..e943a884402 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js @@ -39,6 +39,7 @@ class ProductByCategoryBlock extends Component { editMode, orderby, rows, + alignButtons, } = attributes; return ( @@ -66,6 +67,7 @@ class ProductByCategoryBlock extends Component { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js index f65307acd81..12628c4d1ce 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js @@ -26,6 +26,7 @@ class ProductNewestBlock extends Component { columns, contentVisibility, rows, + alignButtons, } = attributes; return ( @@ -37,6 +38,7 @@ class ProductNewestBlock extends Component { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js index d09c8677554..e117bf8ac05 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js @@ -28,6 +28,7 @@ class ProductOnSaleBlock extends Component { contentVisibility, rows, orderby, + alignButtons, } = attributes; return ( @@ -39,6 +40,7 @@ class ProductOnSaleBlock extends Component { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js index 5ac0a82e9ea..90d018ecefe 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js @@ -27,6 +27,7 @@ class ProductTopRatedBlock extends Component { columns, contentVisibility, rows, + alignButtons, } = attributes; return ( @@ -38,6 +39,7 @@ class ProductTopRatedBlock extends Component { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js index d4f020c1f48..6def9283e7f 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js @@ -40,6 +40,7 @@ class ProductsByAttributeBlock extends Component { contentVisibility, orderby, rows, + alignButtons, } = this.props.attributes; return ( @@ -51,6 +52,7 @@ class ProductsByAttributeBlock extends Component { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js index dde277b5a9f..3e73a186367 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js @@ -90,6 +90,14 @@ registerBlockType( blockTypeName, { type: 'number', default: wc_product_block_data.default_rows, }, + + /** + * How to align cart buttons. + */ + alignButtons: { + type: 'boolean', + default: false, + }, }, deprecated: [ diff --git a/plugins/woocommerce-blocks/assets/js/components/grid-layout-control/index.js b/plugins/woocommerce-blocks/assets/js/components/grid-layout-control/index.js index fede113bfb1..0e91c5933a9 100644 --- a/plugins/woocommerce-blocks/assets/js/components/grid-layout-control/index.js +++ b/plugins/woocommerce-blocks/assets/js/components/grid-layout-control/index.js @@ -5,12 +5,12 @@ import { __ } from '@wordpress/i18n'; import { clamp, isNaN } from 'lodash'; import { Fragment } from '@wordpress/element'; import PropTypes from 'prop-types'; -import { RangeControl } from '@wordpress/components'; +import { RangeControl, ToggleControl } from '@wordpress/components'; /** * A combination of range controls for product grid layout settings. */ -const GridLayoutControl = ( { columns, rows, setAttributes } ) => { +const GridLayoutControl = ( { columns, rows, setAttributes, alignButtons } ) => { return ( { min={ wc_product_block_data.min_rows } max={ wc_product_block_data.max_rows } /> + setAttributes( { alignButtons: ! alignButtons } ) } + /> ); }; @@ -54,6 +70,10 @@ GridLayoutControl.propTypes = { * The current rows count. */ rows: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ).isRequired, + /** + * Whether or not buttons are aligned horizontally across items. + */ + alignButtons: PropTypes.bool.isRequired, /** * Callback to update the layout settings. */ diff --git a/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js b/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js index 79160a61eb8..cddf7b0d960 100644 --- a/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js +++ b/plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js @@ -24,6 +24,14 @@ export default { default: wc_product_block_data.default_rows, }, + /** + * How to align cart buttons. + */ + alignButtons: { + type: 'boolean', + default: false, + }, + /** * Product category, used to display only products in the given categories. */ diff --git a/plugins/woocommerce-blocks/assets/php/class-wgpb-block-grid-base.php b/plugins/woocommerce-blocks/assets/php/class-wgpb-block-grid-base.php index 99fefbee47b..ba0c054cbb8 100644 --- a/plugins/woocommerce-blocks/assets/php/class-wgpb-block-grid-base.php +++ b/plugins/woocommerce-blocks/assets/php/class-wgpb-block-grid-base.php @@ -57,6 +57,7 @@ abstract class WGPB_Block_Grid_Base { $defaults = array( 'columns' => wc_get_theme_support( 'product_blocks::default_columns', 3 ), 'rows' => wc_get_theme_support( 'product_blocks::default_rows', 1 ), + 'alignButtons' => false, 'categories' => array(), 'catOperator' => 'any', 'contentVisibility' => array( @@ -224,6 +225,10 @@ abstract class WGPB_Block_Grid_Base { $classes[] = "align{$this->attributes['align']}"; } + if ( ! empty( $this->attributes['alignButtons'] ) ) { + $classes[] = 'has-aligned-buttons'; + } + return implode( ' ', $classes ); } diff --git a/plugins/woocommerce-blocks/assets/php/class-wgpb-block-library.php b/plugins/woocommerce-blocks/assets/php/class-wgpb-block-library.php index 37c20f346de..4d42da54967 100644 --- a/plugins/woocommerce-blocks/assets/php/class-wgpb-block-library.php +++ b/plugins/woocommerce-blocks/assets/php/class-wgpb-block-library.php @@ -243,6 +243,7 @@ class WGPB_Block_Library { 'style' => 'wc-block-style', 'attributes' => array( 'align' => self::get_schema_align(), + 'alignButtons' => self::get_schema_boolean( false ), 'columns' => self::get_schema_number( wc_get_theme_support( 'product_blocks::default_columns', 3 ) ), 'editMode' => self::get_schema_boolean( true ), 'orderby' => self::get_schema_orderby(), @@ -321,6 +322,7 @@ class WGPB_Block_Library { 'style' => 'wc-block-style', 'attributes' => array( 'align' => self::get_schema_align(), + 'alignButtons' => self::get_schema_boolean( false ), 'attributes' => array( 'type' => 'array', 'items' => array( @@ -467,6 +469,7 @@ class WGPB_Block_Library { ), 'contentVisibility' => self::get_schema_content_visibility(), 'align' => self::get_schema_align(), + 'alignButtons' => self::get_schema_boolean( false ), ); }