Update grid blocks preview to match width of products on the frontend (https://github.com/woocommerce/woocommerce-blocks/pull/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
This commit is contained in:
Kelly Dwan
GitHub
parent
4aa4ba25b5
commit
d2f1aa6c44
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.wc-product-preview {
|
||||
text-align: center;
|
||||
margin-bottom: $gap;
|
||||
padding: $gap/2;
|
||||
text-align: center;
|
||||
|
||||
.wc-product-preview__title,
|
||||
.wc-product-preview__price,
|
||||
|
|
@ -8,6 +9,11 @@
|
|||
margin-top: $gap-smallest;
|
||||
}
|
||||
|
||||
.wc-product-preview__image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -274,6 +274,7 @@ class WGPB_Block_Library {
|
|||
'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 ),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue