Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add button alignment option to product grid blocks (https://github.com/woocommerce/woocommerce-blocks/pull/606) 

* Add alignButtons handling and styling to grid-base

* Add ToggleControl and alignButtons attribute to handpicked products

* Pass alignButtons to the blocks with sharedattributes

* Add alignButtons to shared-attributes.js

* Add alignButtons to products-by-attributes block

* Add alignButtons to attributes on the PHP side

* Add alignButtons control to grid-layout-control

* Remove alignButtons from deprecated definitions

* has-aligned-buttons

* Update comment

* package lock
This commit is contained in:
Mike Jolley 2019-06-27 12:13:02 +01:00 committed by GitHub
parent 6a2867ae19
commit 0c1ad3e995
14 changed files with 95 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
plugins/woocommerce-blocks/assets/css/style.scss
View File

@ -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 {

19
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js
View File

@ -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 (
<InspectorControls key="inspector">
@ -48,6 +49,22 @@ class ProductsBlock extends Component {
min={ wc_product_block_data.min_columns }
max={ wc_product_block_data.max_columns }
/>
<ToggleControl
label={ __( 'Align Add to Cart buttons', 'woo-gutenberg-products-block' ) }
help={
alignButtons ?
__(
'Buttons are aligned vertically.',
'woo-gutenberg-products-block'
) :
__(
'Buttons follow content.',
'woo-gutenberg-products-block'
)
}
checked={ alignButtons }
onChange={ () => setAttributes( { alignButtons: ! alignButtons } ) }
/>
</PanelBody>
<PanelBody
title={ __( 'Content', 'woo-gutenberg-products-block' ) }

8
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js
View File

@ -79,6 +79,14 @@ registerBlockType( 'woocommerce/handpicked-products', {
type: 'array',
default: [],
},
/**
* How to align cart buttons.
*/
alignButtons: {
type: 'boolean',
default: false,
},
},
deprecated: [

2
plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js
View File

@ -26,6 +26,7 @@ class ProductBestSellersBlock extends Component {
columns,
contentVisibility,
rows,
alignButtons,
} = attributes;
return (
@ -37,6 +38,7 @@ class ProductBestSellersBlock extends Component {
<GridLayoutControl
columns={ columns }
rows={ rows }
alignButtons={ alignButtons }
setAttributes={ setAttributes }
/>
</PanelBody>

2
plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js
View File

@ -39,6 +39,7 @@ class ProductByCategoryBlock extends Component {
editMode,
orderby,
rows,
alignButtons,
} = attributes;
return (
@ -66,6 +67,7 @@ class ProductByCategoryBlock extends Component {
<GridLayoutControl
columns={ columns }
rows={ rows }
alignButtons={ alignButtons }
setAttributes={ setAttributes }
/>
</PanelBody>

2
plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js
View File

@ -26,6 +26,7 @@ class ProductNewestBlock extends Component {
columns,
contentVisibility,
rows,
alignButtons,
} = attributes;
return (
@ -37,6 +38,7 @@ class ProductNewestBlock extends Component {
<GridLayoutControl
columns={ columns }
rows={ rows }
alignButtons={ alignButtons }
setAttributes={ setAttributes }
/>
</PanelBody>

2
plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js
View File

@ -28,6 +28,7 @@ class ProductOnSaleBlock extends Component {
contentVisibility,
rows,
orderby,
alignButtons,
} = attributes;
return (
@ -39,6 +40,7 @@ class ProductOnSaleBlock extends Component {
<GridLayoutControl
columns={ columns }
rows={ rows }
alignButtons={ alignButtons }
setAttributes={ setAttributes }
/>
</PanelBody>

2
plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js
View File

@ -27,6 +27,7 @@ class ProductTopRatedBlock extends Component {
columns,
contentVisibility,
rows,
alignButtons,
} = attributes;
return (
@ -38,6 +39,7 @@ class ProductTopRatedBlock extends Component {
<GridLayoutControl
columns={ columns }
rows={ rows }
alignButtons={ alignButtons }
setAttributes={ setAttributes }
/>
</PanelBody>

2
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js
View File

@ -40,6 +40,7 @@ class ProductsByAttributeBlock extends Component {
contentVisibility,
orderby,
rows,
alignButtons,
} = this.props.attributes;
return (
@ -51,6 +52,7 @@ class ProductsByAttributeBlock extends Component {
<GridLayoutControl
columns={ columns }
rows={ rows }
alignButtons={ alignButtons }
setAttributes={ setAttributes }
/>
</PanelBody>

8
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js
View File

@ -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: [

24
plugins/woocommerce-blocks/assets/js/components/grid-layout-control/index.js
View File

@ -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 (
<Fragment>
<RangeControl
@ -41,6 +41,22 @@ const GridLayoutControl = ( { columns, rows, setAttributes } ) => {
min={ wc_product_block_data.min_rows }
max={ wc_product_block_data.max_rows }
/>
<ToggleControl
label={ __( 'Align Add to Cart buttons', 'woo-gutenberg-products-block' ) }
help={
alignButtons ?
__(
'Buttons are aligned vertically.',
'woo-gutenberg-products-block'
) :
__(
'Buttons follow content.',
'woo-gutenberg-products-block'
)
}
checked={ alignButtons }
onChange={ () => setAttributes( { alignButtons: ! alignButtons } ) }
/>
</Fragment>
);
};
@ -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.
*/

8
plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js
View File

@ -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.
*/

5
plugins/woocommerce-blocks/assets/php/class-wgpb-block-grid-base.php
View File

@ -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 );
}

3
plugins/woocommerce-blocks/assets/php/class-wgpb-block-library.php
View File

@ -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 ),
);
}