Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Product Gallery Thumbnails: Add support for cropping #11718

Merged
merged 12 commits into from Nov 24, 2023

Conversation

danieldudzic
Copy link
Contributor

@danieldudzic danieldudzic commented Nov 9, 2023

What

Fixes #11699

Why

This PR adds support for cropping to thumbnails.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

  1. With a block theme, open Appearance > Editor.
  2. Open Templates > Single Product.
  3. Select Convert to Blocks if you are using the Classic Templates.
  4. Add the Product Gallery block.
  5. Test with Crop images to fit enabled and disabled.
  6. Make sure the thumbnails on the frontend get correctly cropped (or not cropped).
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

With Cropping setting:

Disabled Enabled
Moto_Guzzi_v7_–_newproductgallery Moto_Guzzi_v7_–_newproductgallery

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Product Gallery Thumbnails: Add support for cropping.

Copy link
Contributor

github-actions bot commented Nov 9, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-11718.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 568
  • Total errors: 2359

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

Copy link
Contributor

github-actions bot commented Nov 9, 2023

Size Change: +8 B (0%)

Total Size: 1.61 MB

Filename Size Change
build/product-gallery-thumbnails.js 3.98 kB +7 B (0%)
build/product-gallery.js 9.67 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/3810-frontend.js 18.3 kB
build/4124-frontend.js 23.9 kB
build/8280-frontend.js 8.47 kB
build/active-filters-frontend.js 6.71 kB
build/active-filters-rtl.css 1.68 kB
build/active-filters-wrapper-frontend.js 6.91 kB
build/active-filters-wrapper-rtl.css 1.53 kB
build/active-filters-wrapper.css 1.53 kB
build/active-filters.css 1.68 kB
build/active-filters.js 6.06 kB
build/add-to-cart-form-rtl.css 444 B
build/add-to-cart-form.css 444 B
build/all-products-frontend.js 9.67 kB
build/all-products-rtl.css 4.54 kB
build/all-products.css 4.54 kB
build/all-products.js 39.7 kB
build/all-reviews-rtl.css 1.75 kB
build/all-reviews.css 1.75 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 19.9 kB
build/attribute-filter-rtl.css 4.03 kB
build/attribute-filter-wrapper-frontend.js 21.1 kB
build/attribute-filter-wrapper-rtl.css 3.89 kB
build/attribute-filter-wrapper.css 3.88 kB
build/attribute-filter.css 4.01 kB
build/attribute-filter.js 11.3 kB
build/blocks-checkout.js 33.9 kB
build/blocks-components.js 32.6 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 267 B
build/cart-blocks/cart-cross-sells-products-frontend.js 5.56 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.38 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 281 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 9.24 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-order-summary-frontend.js 20.6 kB
build/cart-blocks/cart-order-summary-style.js 339 B
build/cart-blocks/cart-totals-frontend.js 296 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 376 B
build/cart-blocks/empty-cart-style.js 375 B
build/cart-blocks/filled-cart-frontend.js 614 B
build/cart-blocks/filled-cart-style.js 332 B
build/cart-blocks/order-summary-coupon-form-frontend.js 21 kB
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-frontend.js 21 kB
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 347 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-frontend.js 20.6 kB
build/cart-blocks/order-summary-shipping-style.js 154 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 454 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.64 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29 kB
build/cart-rtl.css 9.27 kB
build/cart.css 9.25 kB
build/cart.js 39.7 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 8.14 kB
build/checkout-blocks/actions-style.js 1.02 kB
build/checkout-blocks/billing-address-frontend.js 9.86 kB
build/checkout-blocks/billing-address-style.js 574 B
build/checkout-blocks/contact-information-frontend.js 1.67 kB
build/checkout-blocks/contact-information-style.js 653 B
build/checkout-blocks/express-payment-frontend.js 5.81 kB
build/checkout-blocks/fields-frontend.js 375 B
build/checkout-blocks/fields-style.js 342 B
build/checkout-blocks/order-note-frontend.js 673 B
build/checkout-blocks/order-summary-cart-items-frontend.js 6.49 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 21 kB
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-frontend.js 21.1 kB
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-frontend.js 20.6 kB
build/checkout-blocks/order-summary-shipping-frontend.js 20.6 kB
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-style.js 341 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 455 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 14.5 kB
build/checkout-blocks/payment-style.js 500 B
build/checkout-blocks/pickup-options-frontend.js 11.2 kB
build/checkout-blocks/pickup-options-style.js 481 B
build/checkout-blocks/shipping-address-frontend.js 9.79 kB
build/checkout-blocks/shipping-address-style.js 517 B
build/checkout-blocks/shipping-method-frontend.js 1.97 kB
build/checkout-blocks/shipping-method-style.js 1.44 kB
build/checkout-blocks/shipping-methods-frontend.js 19 kB
build/checkout-blocks/shipping-methods-style.js 456 B
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/terms-style.js 1.03 kB
build/checkout-blocks/totals-frontend.js 338 B
build/checkout-blocks/totals-style.js 301 B
build/checkout-frontend.js 30.7 kB
build/checkout-rtl.css 8.39 kB
build/checkout.css 8.37 kB
build/checkout.js 42.5 kB
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.66 kB
build/collection-attribute-filter-frontend.js 496 B
build/collection-attribute-filter-rtl.css 2.68 kB
build/collection-attribute-filter.css 2.67 kB
build/collection-attribute-filter.js 7.14 kB
build/collection-filters.js 3.02 kB
build/collection-price-filter-frontend.js 600 B
build/collection-price-filter-rtl.css 1.07 kB
build/collection-price-filter.css 1.07 kB
build/collection-price-filter.js 2.15 kB
build/collection-stock-filter-frontend.js 396 B
build/collection-stock-filter-rtl.css 4.03 kB
build/collection-stock-filter.css 4.03 kB
build/collection-stock-filter.js 4.18 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.19 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-category.js 13.6 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 13.9 kB
build/filter-wrapper-frontend.js 14.6 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.38 kB
build/handpicked-products.js 7.34 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/legacy-template.js 7.85 kB
build/mini-cart-component-frontend.js 30.8 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.44 kB
build/mini-cart-contents-block/empty-cart-frontend.js 383 B
build/mini-cart-contents-block/empty-cart-style.js 387 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 287 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.96 kB
build/mini-cart-contents-block/items-frontend.js 246 B
build/mini-cart-contents-block/items-style.js 250 B
build/mini-cart-contents-block/products-table-frontend.js 8.59 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.23 kB
build/mini-cart-contents.css 3.22 kB
build/mini-cart-contents.js 16 kB
build/mini-cart-frontend.js 2.35 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.44 kB
build/mini-cart.js 6.09 kB
build/order-confirmation-additional-information-rtl.css 367 B
build/order-confirmation-additional-information.css 367 B
build/order-confirmation-additional-information.js 1.58 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.56 kB
build/order-confirmation-billing-wrapper.js 1.51 kB
build/order-confirmation-downloads-rtl.css 477 B
build/order-confirmation-downloads-wrapper.js 1.58 kB
build/order-confirmation-downloads.css 478 B
build/order-confirmation-downloads.js 1.91 kB
build/order-confirmation-shipping-address-rtl.css 399 B
build/order-confirmation-shipping-address.css 398 B
build/order-confirmation-shipping-address.js 1.56 kB
build/order-confirmation-shipping-wrapper.js 1.52 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.55 kB
build/order-confirmation-summary-rtl.css 460 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.76 kB
build/order-confirmation-totals-rtl.css 594 B
build/order-confirmation-totals-wrapper.js 1.8 kB
build/order-confirmation-totals.css 593 B
build/order-confirmation-totals.js 2.18 kB
build/packages-style-rtl.css 5.18 kB
build/packages-style.css 5.19 kB
build/page-content-wrapper.js 1.96 kB
build/price-filter-frontend.js 7.94 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 8.11 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-filter.js 7.53 kB
build/price-format.js 913 B
build/product-add-to-cart-frontend.js 8.12 kB
build/product-add-to-cart-rtl.css 1.37 kB
build/product-add-to-cart.css 1.38 kB
build/product-add-to-cart.js 8.36 kB
build/product-average-rating-frontend.js 1.88 kB
build/product-average-rating.js 1.4 kB
build/product-best-sellers.js 7.08 kB
build/product-button-frontend.js 4.94 kB
build/product-button-interactivity-frontend.js 8.29 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.66 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.6 kB
build/product-category.js 8.01 kB
build/product-collection-no-results.js 1.66 kB
build/product-collection.js 13.9 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 778 B
build/product-gallery-large-image-frontend.js 604 B
build/product-gallery-large-image-next-previous.js 4.27 kB
build/product-gallery-large-image.js 2.47 kB
build/product-gallery-pager.js 3.48 kB
build/product-gallery-rtl.css 1.55 kB
build/product-gallery.css 1.55 kB
build/product-image-frontend.js 2.89 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 996 B
build/product-image.css 994 B
build/product-image.js 2.57 kB
build/product-new.js 7.95 kB
build/product-on-sale.js 7.33 kB
build/product-price-frontend.js 2.82 kB
build/product-price-rtl.css 644 B
build/product-price.css 643 B
build/product-price.js 2.34 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-query.js 11.7 kB
build/product-rating-counter-frontend.js 2.19 kB
build/product-rating-counter.js 1.7 kB
build/product-rating-frontend.js 2.53 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.43 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.95 kB
build/product-rating.css 246 B
build/product-rating.js 2.04 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2.01 kB
build/product-sale-badge-rtl.css 437 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.52 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 2.02 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.53 kB
build/product-stock-indicator-frontend.js 2.2 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.71 kB
build/product-summary-frontend.js 2.36 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.88 kB
build/product-tag.js 7.53 kB
build/product-template-rtl.css 536 B
build/product-template.css 535 B
build/product-template.js 2.81 kB
build/product-title-frontend.js 2.31 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.05 kB
build/product-top-rated.js 7.61 kB
build/products-by-attribute.js 8.05 kB
build/rating-filter-frontend.js 18.8 kB
build/rating-filter-rtl.css 4.09 kB
build/rating-filter-wrapper-frontend.js 19.7 kB
build/rating-filter-wrapper-rtl.css 3.95 kB
build/rating-filter-wrapper.css 3.95 kB
build/rating-filter.css 4.08 kB
build/rating-filter.js 5.8 kB
build/reviews-by-category-rtl.css 1.75 kB
build/reviews-by-category.css 1.75 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product-rtl.css 1.75 kB
build/reviews-by-product.css 1.75 kB
build/reviews-by-product.js 12.7 kB
build/reviews-frontend.js 6.44 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 19 kB
build/stock-filter-rtl.css 3.88 kB
build/stock-filter-wrapper-frontend.js 20 kB
build/stock-filter-wrapper-rtl.css 3.75 kB
build/stock-filter-wrapper.css 3.74 kB
build/stock-filter.css 3.87 kB
build/stock-filter.js 6.44 kB
build/store-notices.js 1.68 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.19 kB
build/wc-blocks-data.js 19.7 kB
build/wc-blocks-editor-style-rtl.css 7.18 kB
build/wc-blocks-editor-style.css 7.17 kB
build/wc-blocks-google-analytics.js 1.13 kB
build/wc-blocks-jetpack-woocommerce-analytics.js 750 B
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.75 kB
build/wc-blocks-rtl.css 2.48 kB
build/wc-blocks-shared-context.js 860 B
build/wc-blocks-shared-hocs.js 1.41 kB
build/wc-blocks-vendors.js 61.8 kB
build/wc-blocks.css 2.48 kB
build/wc-blocks.js 9.21 kB
build/wc-interactivity-dropdown.js 453 B
build/wc-interactivity.js 12.7 kB
build/wc-payment-method-bacs.js 405 B
build/wc-payment-method-cheque.js 402 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 439 B
build/wc-settings.js 2.42 kB
build/wc-shipping-method-pickup-location.js 29.4 kB

compressed-size-action

@danieldudzic danieldudzic added block: product gallery Issues related to the Product Gallery block. type: bug The issue/PR concerns a confirmed bug. labels Nov 16, 2023
@danieldudzic danieldudzic added this to the 11.6.0 milestone Nov 16, 2023
@danieldudzic danieldudzic changed the title Fix/11699 product gallery thumbnails cropping Product Gallery Thumbnails: Add support for cropping Nov 16, 2023
@danieldudzic danieldudzic marked this pull request as ready for review November 16, 2023 16:26
@woocommercebot woocommercebot requested review from a team and sunyatasattva and removed request for a team November 16, 2023 16:26
@danieldudzic danieldudzic modified the milestones: 11.6.0, 11.7.0 Nov 20, 2023
Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm going to pre-approve not to block you, but there is a small change request 🙏

src/BlockTypes/ProductGalleryThumbnails.php Outdated Show resolved Hide resolved
@@ -133,7 +133,9 @@ protected function render( $attributes, $content, $block ) {

if ( $product ) {
$post_thumbnail_id = $product->get_image_id();
$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'thumbnail', array(), 'wc-block-product-gallery-thumbnails__thumbnail' );
$crop_images = $block->context['cropImages'] ?? '';
$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail', $crop_images );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you mind explaining why the image size went from thumbnail to full when we're dealing with thumbnails?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The thumbnail setting for wp_get_attachment_image() outputs cropped square images with max 150px/150px dimensions.

We need to support larger images for wide layouts and preserve the aspect ratio (for the cropping disabled setting).

Moto_Guzzi_v7_–_newproductgallery

@danieldudzic danieldudzic merged commit dcc3837 into trunk Nov 24, 2023
32 checks passed
@danieldudzic danieldudzic deleted the fix/11699-product-gallery-thumbnails-cropping branch November 24, 2023 22:49
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product gallery Issues related to the Product Gallery block. team: Kirigami & Origami type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Gallery Thumbnails: Fix thumbnails cropping
3 participants