Merge pull request #65 from woocommerce/fix/bugs

Fix product preview bugs
woocommerce · Mar 12, 2018 · db9535a · db9535a
2 parents 793fa61 + 856bc75
commit db9535a
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 23 deletions.
diff --git a/assets/css/gutenberg-products-block-rtl.css b/assets/css/gutenberg-products-block-rtl.css
diff --git a/assets/css/gutenberg-products-block.css b/assets/css/gutenberg-products-block.css
diff --git a/assets/css/gutenberg-products-block.scss b/assets/css/gutenberg-products-block.scss
@@ -31,6 +31,10 @@ $color__alt-background: #fdfdfd;
 			&:nth-of-type(2n) {
 				margin-right: 0;
 			}
+
+			&:nth-of-type(2n+1) {
+				clear: both;
+			}
 		}
 
 		&.cols-3 .product-preview {
@@ -39,6 +43,10 @@ $color__alt-background: #fdfdfd;
 			&:nth-of-type(3n) {
 				margin-right: 0;
 			}
+
+			&:nth-of-type(3n+1) {
+				clear: both;
+			}
 		}
 
 		&.cols-4 .product-preview {
@@ -47,6 +55,10 @@ $color__alt-background: #fdfdfd;
 			&:nth-of-type(4n) {
 				margin-right: 0;
 			}
+
+			&:nth-of-type(4n+1) {
+				clear: both;
+			}
 		}
 
 		&.cols-5 .product-preview {
@@ -55,6 +67,30 @@ $color__alt-background: #fdfdfd;
 			&: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;
+			}
 		}
 	}
 
@@ -72,12 +108,15 @@ $color__alt-background: #fdfdfd;
 	}
 
 	.product-add-to-cart {
-		background: gray;
-		border-radius: 10px;
-		color: white;
+		display: inline-block;
+		background: #ababab;
+		border-radius: 1.5em;
+		color: #ffffff;
 		cursor: pointer;
-		padding: .5em 1em;
-		line-height: 3em;
+		padding: .75em 1.25em;
+		line-height: 1.2em;
+		margin-top: .5em;
+		margin-bottom: 1em;
 	}
 }
 

diff --git a/assets/js/products-block.js b/assets/js/products-block.js
@@ -538,11 +538,7 @@ var ProductPreview = function (_React$Component4) {
 					{ className: 'product-title' },
 					product.name
 				),
-				wp.element.createElement(
-					'div',
-					{ className: 'product-price' },
-					product.price
-				),
+				wp.element.createElement('div', { className: 'product-price', dangerouslySetInnerHTML: { __html: product.price_html } }),
 				wp.element.createElement(
 					'span',
 					{ className: 'product-add-to-cart' },
@@ -670,7 +666,7 @@ registerBlockType('woocommerce/products', {
    */
 		columns: {
 			type: 'number',
-			default: 3
+			default: wc_product_block_data.default_columns
 		},
 
 		/**
@@ -739,8 +735,8 @@ registerBlockType('woocommerce/products', {
 					onChange: function onChange(value) {
 						return setAttributes({ columns: value });
 					},
-					min: 1,
-					max: 6
+					min: wc_product_block_data.min_columns,
+					max: wc_product_block_data.max_columns
 				});
 			}
 
@@ -771,6 +767,7 @@ registerBlockType('woocommerce/products', {
    * @return Component
    */
 		function getToolbarControls() {
+
 			var layoutControls = [{
 				icon: 'list-view',
 				title: __('List View'),
@@ -787,10 +784,13 @@ registerBlockType('woocommerce/products', {
 				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;
+
 			var editButton = [{
 				icon: 'edit',
 				title: __('Edit'),
-				onClick: function onClick() {
+				onClick: shouldDisableEditButton ? function () {} : function () {
 					return setAttributes({ edit_mode: !edit_mode });
 				},
 				isActive: edit_mode
@@ -799,7 +799,7 @@ registerBlockType('woocommerce/products', {
 			return wp.element.createElement(
 				BlockControls,
 				{ key: 'controls' },
-				wp.element.createElement(Toolbar, { controls: layoutControls }),
+				wp.element.createElement(Toolbar, { controls: edit_mode ? [] : layoutControls }),
 				wp.element.createElement(Toolbar, { controls: editButton })
 			);
 		}

diff --git a/assets/js/products-block.jsx b/assets/js/products-block.jsx
@@ -319,7 +319,7 @@ class ProductPreview extends React.Component {
 			<div className="product-preview">
 				{ image }
 				<div className="product-title">{ product.name }</div>
-				<div className="product-price">{ product.price }</div>
+				<div className="product-price" dangerouslySetInnerHTML={ { __html: product.price_html } } />
 				<span className="product-add-to-cart">{ __( 'Add to cart' ) }</span>
 			</div>
 		);
@@ -411,7 +411,7 @@ registerBlockType( 'woocommerce/products', {
 		 */
 		columns: {
 			type: 'number',
-			default: 3,
+			default: wc_product_block_data.default_columns,
 		},
 
 		/**
@@ -469,8 +469,8 @@ registerBlockType( 'woocommerce/products', {
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) => setAttributes( { columns: value } ) }
-						min={ 1 }
-						max={ 6 }
+						min={ wc_product_block_data.min_columns }
+						max={ wc_product_block_data.max_columns }
 					/>
 				);					
 			}
@@ -496,6 +496,7 @@ registerBlockType( 'woocommerce/products', {
 		 * @return Component
 		 */
 		function getToolbarControls() {
+
 			const layoutControls = [
 				{
 					icon: 'list-view',
@@ -511,18 +512,21 @@ registerBlockType( 'woocommerce/products', {
 				},
 			];
 
+			// Edit button should not do anything if valid product selection has not been made.
+			const shouldDisableEditButton = ['', 'specific', 'category', 'attribute'].includes( display ) && ! display_setting.length;
+
 			const editButton = [
 				{
 					icon: 'edit',
 					title: __( 'Edit' ),
-					onClick: () => setAttributes( { edit_mode: ! edit_mode } ),
+					onClick: shouldDisableEditButton ? function(){} : () => setAttributes( { edit_mode: ! edit_mode } ),
 					isActive: edit_mode,
 				},
 			];
 
 			return (
 				<BlockControls key="controls">
-					<Toolbar controls={ layoutControls } />
+					<Toolbar controls={ edit_mode ? [] : layoutControls } />
 					<Toolbar controls={ editButton } />
 				</BlockControls>
 			);

diff --git a/woocommerce-gutenberg-products-block.php b/woocommerce-gutenberg-products-block.php
@@ -33,6 +33,13 @@ function wgpb_register_products_block() {
 		rand() // @todo Change this to WC_VERSION when merged into WooCommerce.
 	);
 
+	$product_block_data = array(
+		'min_columns' => wc_get_theme_support( 'product_grid::min_columns', 1 ),
+		'max_columns' => wc_get_theme_support( 'product_grid::max_columns', 6 ),
+		'default_columns' => wc_get_default_products_per_row(),
+	);
+	wp_localize_script( 'woocommerce-products-block-editor', 'wc_product_block_data', $product_block_data );
+
 	wp_register_style(
 		'woocommerce-products-block-editor',
 		plugins_url( 'assets/css/gutenberg-products-block.css', __FILE__ ),