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

Remove list view woocommerce/woocommerce-blocks#70

This commit is contained in:
claudiulodro 2018-04-02 11:46:57 -07:00
parent c72b5a01f3
commit bc8e85006c
5 changed files with 102 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-blocks/assets/css/gutenberg-products-block-rtl.css
View File

File diff suppressed because one or more lines are too long

2
plugins/woocommerce-blocks/assets/css/gutenberg-products-block.css
View File

File diff suppressed because one or more lines are too long

15
plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss
View File

@ -11,7 +11,6 @@ $color__alt-background: #fdfdfd;
*/
.wc-products-block-preview {
&.grid {
overflow: hidden;
.product-preview {
@ -92,20 +91,6 @@ $color__alt-background: #fdfdfd;
font-size: .75em;
}
}
}
&.list {
.product-preview {
overflow: hidden;
}
img {
float: left;
width: 50%;
margin-right: 2em;
margin-bottom: 2em;
}
}
.product-add-to-cart {
display: inline-block;

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

@ -560,12 +560,11 @@ var ProductsBlockPreview = withAPIData(function (_ref) {
rows = attributes.rows,
display = attributes.display,
display_setting = attributes.display_setting,
orderby = attributes.orderby,
block_layout = attributes.block_layout;
orderby = attributes.orderby;
var query = {
per_page: 'list' === block_layout ? rows : rows * columns
per_page: rows * columns
};
if ('specific' === display) {
@ -636,7 +635,7 @@ var ProductsBlockPreview = withAPIData(function (_ref) {
return __('No products found');
}
var classes = "wc-products-block-preview " + attributes.block_layout + " cols-" + attributes.columns;
var classes = "wc-products-block-preview cols-" + attributes.columns;
return wp.element.createElement(
'div',
@ -657,14 +656,6 @@ registerBlockType('woocommerce/products', {
attributes: {
/**
* Layout to use. 'grid' or 'list'.
*/
block_layout: {
type: 'string',
default: 'grid'
},
/**
* Number of columns.
*/
@ -723,8 +714,7 @@ registerBlockType('woocommerce/products', {
focus = props.focus,
setAttributes = props.setAttributes,
setFocus = props.setFocus;
var block_layout = attributes.block_layout,
rows = attributes.rows,
var rows = attributes.rows,
columns = attributes.columns,
display = attributes.display,
display_setting = attributes.display_setting,
@ -739,10 +729,7 @@ registerBlockType('woocommerce/products', {
function getInspectorControls() {
// Column controls don't make sense in a list layout.
var columnControl = null;
if ('list' !== block_layout) {
columnControl = wp.element.createElement(RangeControl, {
var columnControl = wp.element.createElement(RangeControl, {
label: __('Columns'),
value: columns,
onChange: function onChange(value) {
@ -751,7 +738,6 @@ registerBlockType('woocommerce/products', {
min: wc_product_block_data.min_columns,
max: wc_product_block_data.max_columns
});
}
// Orderby settings don't make sense for specific-selected products display.
var orderControl = null;
@ -814,22 +800,6 @@ registerBlockType('woocommerce/products', {
*/
function getToolbarControls() {
var layoutControls = [{
icon: 'list-view',
title: __('List View'),
onClick: function onClick() {
return setAttributes({ block_layout: 'list' });
},
isActive: 'list' === block_layout
}, {
icon: 'grid-view',
title: __('Grid View'),
onClick: function onClick() {
return setAttributes({ block_layout: 'grid' });
},
isActive: 'grid' === block_layout
}];
// Edit button should not do anything if valid product selection has not been made.
var shouldDisableEditButton = ['', 'specific', 'category', 'attribute'].includes(display) && !display_setting.length;
@ -845,7 +815,6 @@ registerBlockType('woocommerce/products', {
return wp.element.createElement(
BlockControls,
{ key: 'controls' },
wp.element.createElement(Toolbar, { controls: edit_mode ? [] : layoutControls }),
wp.element.createElement(Toolbar, { controls: editButton })
);
}
@ -899,7 +868,6 @@ registerBlockType('woocommerce/products', {
*/
save: function save(props) {
var _props$attributes = props.attributes,
block_layout = _props$attributes.block_layout,
rows = _props$attributes.rows,
columns = _props$attributes.columns,
display = _props$attributes.display,
@ -908,15 +876,8 @@ registerBlockType('woocommerce/products', {
var shortcode_atts = new Map();
shortcode_atts.set('limit', 'grid' === block_layout ? rows * columns : rows);
if ('list' === block_layout) {
shortcode_atts.set('class', 'list-layout');
}
if ('grid' === block_layout) {
shortcode_atts.set('limit', rows * columns);
shortcode_atts.set('columns', columns);
}
if ('specific' === display) {
shortcode_atts.set('ids', display_setting.join(','));

49
plugins/woocommerce-blocks/assets/js/products-block.jsx
View File

@ -329,10 +329,10 @@ class ProductPreview extends React.Component {
*/
const ProductsBlockPreview = withAPIData( ( { attributes } ) => {
const { columns, rows, display, display_setting, orderby, block_layout } = attributes;
const { columns, rows, display, display_setting, orderby } = attributes;
let query = {
per_page: ( 'list' === block_layout ) ? rows : rows * columns,
per_page: rows * columns,
};
if ( 'specific' === display ) {
@ -380,7 +380,7 @@ const ProductsBlockPreview = withAPIData( ( { attributes } ) => {
return __( 'No products found' );
}
const classes = "wc-products-block-preview " + attributes.block_layout + " cols-" + attributes.columns;
const classes = "wc-products-block-preview cols-" + attributes.columns;
return (
<div className={ classes }>
@ -401,14 +401,6 @@ registerBlockType( 'woocommerce/products', {
attributes: {
/**
* Layout to use. 'grid' or 'list'.
*/
block_layout: {
type: 'string',
default: 'grid',
},
/**
* Number of columns.
*/
@ -463,7 +455,7 @@ registerBlockType( 'woocommerce/products', {
*/
edit( props ) {
const { attributes, className, focus, setAttributes, setFocus } = props;
const { block_layout, rows, columns, display, display_setting, orderby, edit_mode } = attributes;
const { rows, columns, display, display_setting, orderby, edit_mode } = attributes;
/**
* Get the components for the sidebar settings area that is rendered while focused on a Products block.
@ -472,10 +464,7 @@ registerBlockType( 'woocommerce/products', {
*/
function getInspectorControls() {
// Column controls don't make sense in a list layout.
let columnControl = null;
if ( 'list' !== block_layout ) {
columnControl = (
let columnControl = (
<RangeControl
label={ __( 'Columns' ) }
value={ columns }
@ -484,7 +473,6 @@ registerBlockType( 'woocommerce/products', {
max={ wc_product_block_data.max_columns }
/>
);
}
// Orderby settings don't make sense for specific-selected products display.
let orderControl = null;
@ -548,21 +536,6 @@ registerBlockType( 'woocommerce/products', {
*/
function getToolbarControls() {
const layoutControls = [
{
icon: 'list-view',
title: __( 'List View' ),
onClick: () => setAttributes( { block_layout: 'list' } ),
isActive: 'list' === block_layout,
},
{
icon: 'grid-view',
title: __( 'Grid View' ),
onClick: () => setAttributes( { block_layout: 'grid' } ),
isActive: 'grid' === block_layout,
},
];
// Edit button should not do anything if valid product selection has not been made.
const shouldDisableEditButton = ['', 'specific', 'category', 'attribute'].includes( display ) && ! display_setting.length;
@ -577,7 +550,6 @@ registerBlockType( 'woocommerce/products', {
return (
<BlockControls key="controls">
<Toolbar controls={ edit_mode ? [] : layoutControls } />
<Toolbar controls={ editButton } />
</BlockControls>
);
@ -632,18 +604,11 @@ registerBlockType( 'woocommerce/products', {
* @return string
*/
save( props ) {
const { block_layout, rows, columns, display, display_setting, orderby } = props.attributes;
const { rows, columns, display, display_setting, orderby } = props.attributes;
let shortcode_atts = new Map();
shortcode_atts.set( 'limit', 'grid' === block_layout ? rows * columns : rows );
if ( 'list' === block_layout ) {
shortcode_atts.set( 'class', 'list-layout' );
}
if ( 'grid' === block_layout ) {
shortcode_atts.set( 'limit', rows * columns );
shortcode_atts.set( 'columns', columns );
}
if ( 'specific' === display ) {
shortcode_atts.set( 'ids', display_setting.join( ',' ) );