Remove list view woocommerce/woocommerce-blocks#70

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

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

plugins/woocommerce-blocks/assets/js/products-block.js

@@ -560,12 +560,11 @@ var ProductsBlockPreview = withAPIData(function (_ref) {
 	    rows = attributes.rows,
 	    display = attributes.display,
 	    display_setting = attributes.display_setting,
-	    orderby = attributes.orderby,
+	    orderby = attributes.orderby;
-	    block_layout = attributes.block_layout;
 
 
 	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,
+		var rows = attributes.rows,
-		    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 = wp.element.createElement(RangeControl, {
-			var columnControl = null;
-			if ('list' !== block_layout) {
-				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);
+		shortcode_atts.set('limit', rows * columns);
-
-		if ('list' === block_layout) {
-			shortcode_atts.set('class', 'list-layout');
-		}
-
-		if ('grid' === block_layout) {
 		shortcode_atts.set('columns', columns);
-		}
 
 		if ('specific' === display) {
 			shortcode_atts.set('ids', display_setting.join(','));

plugins/woocommerce-blocks/assets/js/products-block.jsx

@@ -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 = (
-			let columnControl = null;
-			if ( 'list' !== block_layout ) {
-				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 );
+		shortcode_atts.set( 'limit', rows * columns );
-
-		if ( 'list' === block_layout ) {
-			shortcode_atts.set( 'class', 'list-layout' );
-		}
-
-		if ( 'grid' === block_layout ) {
 		shortcode_atts.set( 'columns', columns );
-		}
 
 		if ( 'specific' === display ) {
 			shortcode_atts.set( 'ids', display_setting.join( ',' ) );