Remove list view woocommerce/woocommerce-blocks#70
This commit is contained in:
claudiulodro
parent
c72b5a01f3
commit
bc8e85006c
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,99 +11,84 @@ $color__alt-background: #fdfdfd;
|
|||
*/
|
||||
|
||||
.wc-products-block-preview {
|
||||
&.grid {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
.product-preview {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
.product-preview {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
|
||||
&.cols-1 .product-preview {
|
||||
float: none;
|
||||
&.cols-1 .product-preview {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.cols-2 .product-preview {
|
||||
width: 48%;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.cols-2 .product-preview {
|
||||
width: 48%;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-3 .product-preview {
|
||||
width: 30.75%;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-4 .product-preview {
|
||||
width: 22.05%;
|
||||
|
||||
&:nth-of-type(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-5 .product-preview {
|
||||
width: 16.9%;
|
||||
|
||||
&:nth-of-type(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(5n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-add-to-cart {
|
||||
font-size: .75em;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-6 .product-preview {
|
||||
width: 13.5%;
|
||||
|
||||
&:nth-of-type(6n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(6n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-add-to-cart {
|
||||
font-size: .75em;
|
||||
}
|
||||
&:nth-of-type(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&.list {
|
||||
.product-preview {
|
||||
overflow: hidden;
|
||||
&.cols-3 .product-preview {
|
||||
width: 30.75%;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-right: 2em;
|
||||
margin-bottom: 2em;
|
||||
&:nth-of-type(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-4 .product-preview {
|
||||
width: 22.05%;
|
||||
|
||||
&:nth-of-type(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-5 .product-preview {
|
||||
width: 16.9%;
|
||||
|
||||
&:nth-of-type(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(5n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-add-to-cart {
|
||||
font-size: .75em;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-6 .product-preview {
|
||||
width: 13.5%;
|
||||
|
||||
&:nth-of-type(6n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(6n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-add-to-cart {
|
||||
font-size: .75em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,19 +729,15 @@ 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, {
|
||||
label: __('Columns'),
|
||||
value: columns,
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({ columns: value });
|
||||
},
|
||||
min: wc_product_block_data.min_columns,
|
||||
max: wc_product_block_data.max_columns
|
||||
});
|
||||
}
|
||||
var columnControl = wp.element.createElement(RangeControl, {
|
||||
label: __('Columns'),
|
||||
value: columns,
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({ columns: value });
|
||||
},
|
||||
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('columns', columns);
|
||||
}
|
||||
shortcode_atts.set('limit', rows * columns);
|
||||
shortcode_atts.set('columns', columns);
|
||||
|
||||
if ('specific' === display) {
|
||||
shortcode_atts.set('ids', display_setting.join(','));
|
||||
|
|
|
|||
|
|
@ -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,20 +464,16 @@ registerBlockType( 'woocommerce/products', {
|
|||
*/
|
||||
function getInspectorControls() {
|
||||
|
||||
// Column controls don't make sense in a list layout.
|
||||
let columnControl = null;
|
||||
if ( 'list' !== block_layout ) {
|
||||
columnControl = (
|
||||
<RangeControl
|
||||
label={ __( 'Columns' ) }
|
||||
value={ columns }
|
||||
onChange={ ( value ) => setAttributes( { columns: value } ) }
|
||||
min={ wc_product_block_data.min_columns }
|
||||
max={ wc_product_block_data.max_columns }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let columnControl = (
|
||||
<RangeControl
|
||||
label={ __( 'Columns' ) }
|
||||
value={ columns }
|
||||
onChange={ ( value ) => setAttributes( { columns: value } ) }
|
||||
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.
|
||||
let orderControl = null;
|
||||
if ( 'specific' !== display ) {
|
||||
|
|
@ -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( 'columns', columns );
|
||||
}
|
||||
shortcode_atts.set( 'limit', rows * columns );
|
||||
shortcode_atts.set( 'columns', columns );
|
||||
|
||||
if ( 'specific' === display ) {
|
||||
shortcode_atts.set( 'ids', display_setting.join( ',' ) );
|
||||
|
|
|
|||
Loading…
Reference in New Issue