From 3fae9046435dba55d237828f37b75986d8f6d1e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Tue, 23 Jun 2020 14:25:28 +0200 Subject: [PATCH] Use WooCommerce thumbnail images in Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2755) * Remove legacy files * Use thumbnail product image for Cart, Checkout and Reviews blocks * Add option to toggle between full size and cropped image to the Atomic Product image block --- .../atomic/blocks/product/image/attributes.js | 4 ++ .../js/atomic/blocks/product/image/block.js | 32 +++++++---- .../js/atomic/blocks/product/image/edit.js | 53 ++++++++++++++++++- .../cart-checkout/product-image/index.js | 8 +-- .../reviews/review-list-item/index.js | 8 +-- .../reviews/review-list-item/style.scss | 13 +++-- .../cart/full-cart/product-image.js | 21 -------- .../cart/full-cart/product-low-stock-badge.js | 25 --------- .../cart/full-cart/product-variation-data.js | 29 ---------- 9 files changed, 90 insertions(+), 103 deletions(-) delete mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-image.js delete mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-low-stock-badge.js delete mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-variation-data.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js index eda4dc80d02..c1190c99448 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js @@ -11,6 +11,10 @@ export const blockAttributes = { type: 'string', default: 'right', }, + imageSizing: { + type: 'string', + default: 'full-size', + }, }; export default blockAttributes; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js index 68b3f50c099..46fb1631e8a 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js @@ -30,6 +30,7 @@ import './style.scss'; */ const Block = ( { className, + imageSizing = 'full-size', productLink = true, showSaleBadge, saleBadgeAlign = 'right', @@ -78,6 +79,7 @@ const Block = ( { image={ image } onLoad={ () => setImageLoaded( true ) } loaded={ imageLoaded } + showFullSize={ imageSizing !== 'cropped' } /> ) : ( @@ -92,6 +94,7 @@ const Block = ( { image={ image } onLoad={ () => setImageLoaded( true ) } loaded={ imageLoaded } + showFullSize={ imageSizing !== 'cropped' } /> ) } @@ -103,19 +106,28 @@ const ImagePlaceholder = () => { return ; }; -const Image = ( { image, onLoad, loaded } ) => { - const { thumbnail, srcset, sizes, alt } = image || {}; +const Image = ( { image, onLoad, loaded, showFullSize } ) => { + const { thumbnail, src, srcset, sizes, alt } = image || {}; + + let imageProps = { + alt, + onLoad, + hidden: ! loaded, + src: thumbnail, + }; + if ( showFullSize ) { + imageProps = { + ...imageProps, + src, + srcSet: srcset, + sizes, + }; + } return ( <> - + { /* eslint-disable-next-line jsx-a11y/alt-text */ } + { ! loaded && } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js index 8a3d0716290..228aec31776 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js @@ -4,7 +4,9 @@ import { __ } from '@wordpress/i18n'; import { Disabled, PanelBody, ToggleControl } from '@wordpress/components'; import { InspectorControls } from '@wordpress/block-editor'; +import { __experimentalCreateInterpolateElement } from 'wordpress-element'; import ToggleButtonControl from '@woocommerce/block-components/toggle-button-control'; +import { getAdminLink } from '@woocommerce/settings'; /** * Internal dependencies @@ -12,7 +14,12 @@ import ToggleButtonControl from '@woocommerce/block-components/toggle-button-con import Block from './block'; export default ( { attributes, setAttributes } ) => { - const { productLink, showSaleBadge, saleBadgeAlign } = attributes; + const { + productLink, + imageSizing, + showSaleBadge, + saleBadgeAlign, + } = attributes; return ( <> @@ -87,6 +94,50 @@ export default ( { attributes, setAttributes } ) => { } /> ) } + Customizer.', + 'woo-gutenberg-products-block' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) } + value={ imageSizing } + options={ [ + { + label: __( + 'Full Size', + 'woo-gutenberg-products-block' + ), + value: 'full-size', + }, + { + label: __( + 'Cropped', + 'woo-gutenberg-products-block' + ), + value: 'cropped', + }, + ] } + onChange={ ( value ) => + setAttributes( { imageSizing: value } ) + } + /> diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js index ade270a415c..e7a99d4c749 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.js @@ -10,10 +10,8 @@ import PropTypes from 'prop-types'; */ const ProductImage = ( { image = {} } ) => { const imageProps = { - src: image.src || PLACEHOLDER_IMG_SRC, + src: image.thumbnail || PLACEHOLDER_IMG_SRC, alt: decodeEntities( image.alt ) || '', - srcSet: image.srcset || '', - sizes: image.sizes || '', }; return {; @@ -22,9 +20,7 @@ const ProductImage = ( { image = {} } ) => { ProductImage.propTypes = { image: PropTypes.shape( { alt: PropTypes.string, - src: PropTypes.string, - srcsizes: PropTypes.string, - srcset: PropTypes.string, + thumbnail: PropTypes.string, } ), }; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js index dafedda87b1..d5a402ae8ae 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js @@ -28,10 +28,7 @@ function getReviewImage( review, imageType, isLoading ) { ) : ( ) } { review.verified && ( diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/style.scss index 81407e4dc3e..15cc21e3841 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/style.scss @@ -67,16 +67,21 @@ } .wc-block-components-review-list-item__image { + align-items: center; + display: flex; height: 48px; grid-column: 1; grid-row: 1 / 3; - width: 48px; + justify-content: center; position: relative; + width: 48px; - img { - width: 100%; - height: 100%; + > img { display: block; + height: auto; + max-height: 100%; + max-width: 100%; + width: auto; } } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-image.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-image.js deleted file mode 100644 index b7f2ec9fdfa..00000000000 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-image.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * External dependencies - */ -import { decodeEntities } from '@wordpress/html-entities'; -import { PLACEHOLDER_IMG_SRC } from '@woocommerce/block-settings'; - -/** - * Formats and returns an image element. - */ -const ProductImage = ( { image = {} } ) => { - const imageProps = { - src: image.src || PLACEHOLDER_IMG_SRC, - alt: decodeEntities( image.alt ) || '', - srcSet: image.srcset || '', - sizes: image.sizes || '', - }; - - return {; -}; - -export default ProductImage; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-low-stock-badge.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-low-stock-badge.js deleted file mode 100644 index 6bb68ee79ed..00000000000 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-low-stock-badge.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * External dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; - -/** - * Returns a low stock badge for a line item. - */ -const ProductLowStockBadge = ( { lowStockRemaining } ) => { - if ( ! lowStockRemaining ) { - return null; - } - - return ( -
- { sprintf( - /* translators: %s stock amount (number of items in stock for product) */ - __( '%s left in stock', 'woo-gutenberg-products-block' ), - lowStockRemaining - ) } -
- ); -}; - -export default ProductLowStockBadge; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-variation-data.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-variation-data.js deleted file mode 100644 index 5810ec2a870..00000000000 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/product-variation-data.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * External dependencies - */ -import { decodeEntities } from '@wordpress/html-entities'; - -/** - * Returns a formatted element containing variation details. - */ -const ProductVariationData = ( { variation } ) => { - const variationsText = variation - .map( ( v ) => { - if ( v.attribute ) { - return `${ decodeEntities( v.attribute ) }: ${ decodeEntities( - v.value - ) }`; - } - // Support for product attributes with no name/key - return `${ decodeEntities( v.value ) }`; - } ) - .join( ' / ' ); - - return ( -
- { variationsText } -
- ); -}; - -export default ProductVariationData;