Update grid blocks preview to match width of products on the frontend (#489)

* Update grid blocks preview to match width of products on the front end

* Remove max-width from CSS, set it on the preview itself so we can use the dynamic theme width

* Override block thumbnail width for multiple column layouts

Previously larger thumbnails would cause multiple column layouts to break and wrap early. This enforces the column width for those cases

* Add the thumbnail size to images, to prevent larger images in multiple col layouts

* Update snapshot to new preview markup

Author: ryelle

assets/css/editor.scss

@@ -19,29 +19,31 @@
 	flex-wrap: wrap;
 	justify-content: flex-start;
 
+	&.components-placeholder {
+		padding: 2em 1em;
+	}
+
 	&.is-loading,
-	&.is-not-found,
-	&.cols-1 {
+	&.is-not-found {
 		display: block;
 	}
 
-	.wc-product-preview {
-		flex: 1;
-		padding: $gap/2;
+	&.cols-1 {
+		display: block;
+
+		.wc-product-preview {
+			margin-left: auto;
+			margin-right: auto;
+		}
 	}
 
 	@for $i from 2 to 7 {
 		&.cols-#{$i} .wc-product-preview {
-			max-width: calc(#{ 100% / $i });
-			min-width: calc(#{ 100% / $i });
-			flex: 1;
+			flex: 1 0 calc(#{ 100% / $i });
+			max-width: 100% / $i !important;
 		}
 	}
 
-	&.components-placeholder {
-		padding: 2em 1em;
-	}
-
 	// Styles for "resuable block" preview.
 	.editor-block-preview & {
 		min-width: 5em;

assets/js/components/product-preview/index.js

@@ -13,13 +13,29 @@ import './style.scss';
  * Display a preview for a given product.
  */
 const ProductPreview = ( { product } ) => {
-	const { placeholderImgSrc } = wc_product_block_data; /* eslint-disable-line camelcase */
+	const {
+		placeholderImgSrc,
+	} = wc_product_block_data; /* eslint-disable-line camelcase */
 
 	let image = null;
 	if ( product.images.length ) {
-		image = <img src={ product.images[ 0 ].src } alt="" />;
+		image = (
+			<img
+				className="wc-product-preview__image"
+				src={ product.images[ 0 ].src }
+				alt=""
+				style={ { width: `${ wc_product_block_data.thumbnail_size }px` } }
+			/>
+		);
 	} else {
-		image = <img src={ placeholderImgSrc } alt="" />;
+		image = (
+			<img
+				className="wc-product-preview__image"
+				src={ placeholderImgSrc }
+				alt=""
+				style={ { width: `${ wc_product_block_data.thumbnail_size }px` } }
+			/>
+		);
 	}
 
 	const rating = Number( product.average_rating );
@@ -29,7 +45,10 @@ const ProductPreview = ( { product } ) => {
 	}
 
 	return (
-		<div className="wc-product-preview">
+		<div
+			className="wc-product-preview"
+			style={ { maxWidth: `${ wc_product_block_data.thumbnail_size }px` } }
+		>
 			{ image }
 			<div
 				className="wc-product-preview__title"

assets/js/components/product-preview/style.scss

@@ -1,13 +1,19 @@
 .wc-product-preview {
-	text-align: center;
 	margin-bottom: $gap;
+	padding: $gap/2;
+	text-align: center;
 
 	.wc-product-preview__title,
 	.wc-product-preview__price,
 	.wc-product-preview__rating {
 		margin-top: $gap-smallest;
 	}
 
+	.wc-product-preview__image {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
 	.star-rating {
 		overflow: hidden;
 		position: relative;

assets/js/components/product-preview/test/__snapshots__/index.js.snap

@@ -3,10 +3,21 @@
 exports[`ProductPreview should render a single product preview with an image 1`] = `
 <div
   className="wc-product-preview"
+  style={
+    Object {
+      "maxWidth": "300px",
+    }
+  }
 >
   <img
     alt=""
+    className="wc-product-preview__image"
     src="https://example.local/product.jpg"
+    style={
+      Object {
+        "width": "300px",
+      }
+    }
   />
   <div
     className="wc-product-preview__title"
@@ -39,10 +50,21 @@ exports[`ProductPreview should render a single product preview with an image 1`]
 exports[`ProductPreview should render a single product preview without an image 1`] = `
 <div
   className="wc-product-preview"
+  style={
+    Object {
+      "maxWidth": "300px",
+    }
+  }
 >
   <img
     alt=""
+    className="wc-product-preview__image"
     src="placeholder.png"
+    style={
+      Object {
+        "width": "300px",
+      }
+    }
   />
   <div
     className="wc-product-preview__title"

assets/php/class-wgpb-block-library.php

@@ -274,6 +274,7 @@ public static function print_script_settings() {
 			'min_rows'          => wc_get_theme_support( 'product_blocks::min_rows', 1 ),
 			'max_rows'          => wc_get_theme_support( 'product_blocks::max_rows', 6 ),
 			'default_rows'      => wc_get_theme_support( 'product_blocks::default_rows', 1 ),
+			'thumbnail_size'    => wc_get_theme_support( 'thumbnail_image_width', 300 ),
 			'placeholderImgSrc' => wc_placeholder_img_src(),
 			'min_height'        => wc_get_theme_support( 'featured_block::min_height', 500 ),
 			'default_height'    => wc_get_theme_support( 'featured_block::default_height', 500 ),

tests/js/setup-globals.js

@@ -4,6 +4,7 @@ global.wp = {};
 // Set up our settings global.
 global.wc_product_block_data = {
 	placeholderImgSrc: 'placeholder.png',
+	thumbnail_size: '300',
 };
 
 // wcSettings is required by @woocommerce/* packages