Product Image Gallery block: Fix overflow when multiple images are used

[thealexandrelara]

Description

Fix a bug that was causing images to overflow when using the Product Image Gallery block.

Walkthrough

🤖 Generated by Copilot at 5d8c36a

• Fix product image responsiveness and overflow issue by changing CSS selector and width property (link)

Fixes #9944

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• 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.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before	After

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

User Facing Testing

1. Log in to your WordPress dashboard.
2. Navigate to the "Products" tab in the left-hand sidebar and click on "All Products."
3. Locate and select the product you want to edit from the list of existing products.
4. Scroll down to the "Product Image" section. If the product already has a primary image, you can replace it by clicking on the "Set product image" link. If there is no existing image, you will see an "Add product image" button instead.
5. You'll be presented with options to upload an image. Select an image with size 512 x 640 pixels. Click on the "Set product image" button to confirm.
6. To add additional images to the product gallery, scroll down further to the "Product Gallery" section. Click on the "Add product gallery images" link.
7. Follow Step 5 to upload or select the additional images for the product. You can use the same image used in step 5.
8. Click on the "Update" button to save your changes.
9. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
10. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
11. On the left-hand side menu, click on Templates. This will open the list of available templates.
12. Find and select the 'Single Product' template from the list.
13. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
14. On the top-right side, click on the Save button.
15. Visit the product that you edited the image and check that the Product Image Gallery block is being displayed correctly and without any overflow.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Add suggested changelog entry here.

[github-actions]

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added	Removed
wc-blocks.js	wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-edit-site, wp-element, wp-hooks, wp-i18n, wp-plugins, wp-polyfill, wp-primitives		⚠️
active-filters.js	wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
all-products.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
all-reviews.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives		⚠️
attribute-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
breadcrumbs.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
cart.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
catalog-sorting.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
checkout.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
customer-account.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
featured-category.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url		⚠️
featured-product.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url		⚠️
filter-wrapper.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
handpicked-products.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
legacy-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-notices, wp-polyfill, wp-primitives		⚠️
mini-cart.js	react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-dom, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives		⚠️
mini-cart-contents.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
store-notices.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
price-filter.js	react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
product-best-sellers.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-category.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-categories.js	wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render		⚠️
product-new.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-on-sale.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-query.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url		⚠️
product-results-count.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-search.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-tag.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-top-rated.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
products-by-attribute.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
rating-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
reviews-by-category.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
reviews-by-product.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
single-product.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
stock-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
product-collection.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url		⚠️
product-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-polyfill		⚠️

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

TypeScript Errors Report

• Files with errors: 461
• Total errors: 2229

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: +1.74 kB (0%)

Total Size: 1.17 MB

Filename	Size	Change
build/active-filters-frontend.js	8.64 kB	+12 B (0%)
build/active-filters-wrapper-frontend.js	7.58 kB	+7 B (0%)
build/active-filters.js	7.49 kB	+5 B (0%)
build/all-products-frontend.js	12.2 kB	+1 B (0%)
build/all-products.js	40.3 kB	-1 B (0%)
build/all-reviews.js	7.87 kB	+3 B (0%)
build/attribute-filter-frontend.js	23 kB	+7 B (0%)
build/attribute-filter-wrapper-frontend.js	7.73 kB	+7 B (0%)
build/attribute-filter.js	13.3 kB	+4 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB	-2 B (0%)
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.92 kB	+2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js	3.78 kB	+5 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.16 kB	-5 B (0%)
build/cart-blocks/cart-express-payment-frontend.js	720 B	+1 B (0%)
build/cart-blocks/cart-items-frontend.js	301 B	-1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.48 kB	-98 B (-2%)
build/cart-blocks/cart-order-summary-frontend.js	1.28 kB	+2 B (0%)
build/cart-blocks/cart-totals-frontend.js	307 B	-1 B (0%)
build/cart-blocks/empty-cart-frontend.js	346 B	+1 B (0%)
build/cart-blocks/filled-cart-frontend.js	656 B	+1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB	+1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB	-2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js	272 B	-2 B (-1%)
build/cart-blocks/order-summary-heading-frontend.js	334 B	+1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js	17.1 kB	+3 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js	273 B	-1 B (0%)
build/cart-frontend.js	29.9 kB	-98 B (0%)
build/cart.js	45 kB	-269 B (-1%)
build/catalog-sorting.js	1.7 kB	+1 B (0%)
build/checkout-blocks/actions-frontend.js	1.88 kB	-1 B (0%)
build/checkout-blocks/billing-address-frontend.js	1.18 kB	-2 B (0%)
build/checkout-blocks/contact-information-frontend.js	2.04 kB	-7 B (0%)
build/checkout-blocks/express-payment-frontend.js	1.14 kB	-1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js	3.76 kB	+4 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB	-2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB	-1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js	275 B	-1 B (0%)
build/checkout-blocks/order-summary-frontend.js	1.28 kB	+1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js	17 kB	+4 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B	-1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js	435 B	-1 B (0%)
build/checkout-blocks/payment-frontend.js	9.27 kB	+976 B (+12%)	⚠️
build/checkout-blocks/shipping-address-frontend.js	1.17 kB	-1 B (0%)
build/checkout-blocks/shipping-method-frontend.js	2.63 kB	-4 B (0%)
build/checkout-blocks/shipping-methods-frontend.js	6.41 kB	-2 B (0%)
build/checkout-blocks/terms-frontend.js	1.56 kB	+2 B (0%)
build/checkout-blocks/totals-frontend.js	361 B	+1 B (0%)
build/checkout-frontend.js	31.8 kB	-101 B (0%)
build/checkout.js	47.6 kB	+983 B (+2%)
build/customer-account.js	3.19 kB	+1 B (0%)
build/featured-category.js	15.1 kB	+13 B (0%)
build/featured-product.js	15.3 kB	+9 B (0%)
build/filter-wrapper-frontend.js	14.3 kB	-27 B (0%)
build/filter-wrapper.js	2.4 kB	-1 B (0%)
build/handpicked-products.js	8.04 kB	-2 B (0%)
build/legacy-template.js	6.83 kB	+28 B (0%)
build/mini-cart-component-frontend.js	30.7 kB	-14 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js	1.73 kB	+1 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js	1.81 kB	+2 B (0%)
build/mini-cart-contents-block/products-table-frontend.js	587 B	-1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js	531 B	+1 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js	1.59 kB	+3 B (0%)
build/mini-cart-contents-block/title-label-frontend.js	1.53 kB	+3 B (0%)
build/mini-cart-contents.js	18.1 kB	-66 B (0%)
build/mini-cart-frontend.js	2.84 kB	-1 B (0%)
build/mini-cart.js	5.93 kB	+12 B (0%)
build/price-filter-frontend.js	14.7 kB	+25 B (0%)
build/price-filter-wrapper-frontend.js	6.79 kB	+17 B (0%)
build/price-filter.js	8.56 kB	+6 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	272 B	+22 B (+9%)	🔍
build/product-add-to-cart-frontend.js	6.52 kB	+2 B (0%)
build/product-add-to-cart.js	8.84 kB	-7 B (0%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	954 B	-1 B (0%)
build/product-button-frontend.js	2.67 kB	+16 B (+1%)
build/product-categories.js	2.72 kB	+12 B (0%)
build/product-category.js	9.37 kB	-3 B (0%)
build/product-image-frontend.js	2.63 kB	+19 B (+1%)
build/product-image.js	4.14 kB	-3 B (0%)
build/product-new.js	8.65 kB	-3 B (0%)
build/product-on-sale.js	8.65 kB	-3 B (0%)
build/product-price-frontend.js	231 B	+27 B (+13%)	⚠️
build/product-price.js	1.68 kB	+1 B (0%)
build/product-query.js	11.9 kB	+11 B (0%)
build/product-rating-frontend.js	2.35 kB	+10 B (0%)
build/product-rating.js	1.04 kB	-1 B (0%)
build/product-results-count.js	1.65 kB	-4 B (0%)
build/product-sale-badge-frontend.js	1.8 kB	+15 B (+1%)
build/product-sale-badge.js	665 B	-1 B (0%)
build/product-sku-frontend.js	1.85 kB	+18 B (+1%)
build/product-stock-indicator-frontend.js	2.04 kB	+12 B (+1%)
build/product-stock-indicator.js	730 B	-1 B (0%)
build/product-summary-frontend.js	2.26 kB	+16 B (+1%)
build/product-summary.js	1.01 kB	+4 B (0%)
build/product-tag.js	9.01 kB	-7 B (0%)
build/product-template.js	3.34 kB	-2 B (0%)
build/product-title-frontend.js	2.22 kB	+12 B (+1%)
build/product-title.js	3.66 kB	+1 B (0%)
build/product-top-rated.js	8.91 kB	+2 B (0%)
build/products-by-attribute.js	9.76 kB	+11 B (0%)
build/rating-filter-frontend.js	21.5 kB	+10 B (0%)
build/rating-filter-wrapper-frontend.js	6.25 kB	+18 B (0%)
build/rating-filter.js	6.94 kB	+6 B (0%)
build/reviews-by-category.js	12.1 kB	+4 B (0%)
build/reviews-by-product.js	13.3 kB	-2 B (0%)
build/reviews-frontend.js	7.17 kB	-1 B (0%)
build/single-product.js	11.1 kB	-1 B (0%)
build/stock-filter-frontend.js	21.7 kB	+4 B (0%)
build/stock-filter-wrapper-frontend.js	6.5 kB	+16 B (0%)
build/stock-filter.js	7.67 kB	+12 B (0%)
build/store-notices.js	1.69 kB	+5 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.83 kB	-3 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.2 kB	+2 B (0%)
build/vendors--attribute-filter-wrapper-frontend.js	5.11 kB	-2 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB	-1 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.57 kB	+1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.4 kB	-5 B (0%)
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js	8.25 kB	-1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js	12.4 kB	-5 B (0%)
build/vendors--price-filter-wrapper-frontend.js	2.2 kB	+1 B (0%)
build/vendors--product-add-to-cart-frontend.js	7.25 kB	-1 B (0%)
build/vendors--rating-filter-wrapper-frontend.js	5.11 kB	-2 B (0%)
build/vendors--stock-filter-wrapper-frontend.js	5.11 kB	-2 B (0%)
build/wc-blocks-data.js	22.4 kB	+37 B (0%)
build/wc-blocks-style-rtl.css	28 kB	+5 B (0%)
build/wc-blocks-style.css	28 kB	+6 B (0%)
build/wc-blocks-vendors.js	65.1 kB	+11 B (0%)
build/wc-blocks.js	3.71 kB	+11 B (0%)

ℹ️ View Unchanged

Filename	Size
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.13 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/order-summary-taxes-frontend.js	436 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.69 kB
build/checkout-blocks/fields-frontend.js	331 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/pickup-options-frontend.js	4.84 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	267 B
build/mini-cart-contents-block/footer-frontend.js	3.83 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/title-frontend.js	1.9 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-best-sellers.js	8.36 kB
build/product-button.js	3.97 kB
build/product-collection.js	12.3 kB
build/product-search.js	2.63 kB
build/product-sku.js	535 B
build/wc-blocks-editor-style-rtl.css	6.21 kB
build/wc-blocks-editor-style.css	6.21 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	934 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.1 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-interactivity.js	10.4 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB
build/wc-shipping-method-pickup-location.js	30.4 kB

_{compressed-size-action}

[danieldudzic]

The fix does address the issue but alters behavior for images that are smaller than the container width. The image gets stretched to match the container width and gets pixelated.

Before	After

I'm not sure we should be doing this. I'm happy to look into this further tomorrow :)

[thealexandrelara]

The fix does address the issue but alters behavior for images that are smaller than the container width. The image gets stretched to match the container width and gets pixelated.

I'm not sure we should be doing this. I'm happy to look into this further tomorrow :)

Interesting, it seems the image that you used is really small, and that is causing the image to stretch to occupy all the available space. I think it's going to take more time for me to investigate it, and test different scenarios, I'll continue tomorrow, Thank you for quickly reviewing this 🙌 .

[thealexandrelara]

Hey @danieldudzic,
I was looking at the implementation for the Product Image Gallery in WooCommerce and here is what I found:

• The width of the gallery is set to 48% of the parent component;
• The Product Image Gallery was designed to work inside the classic Single Product page, and the content width for that page is 1064px. If we get 48% of the page width, we get the maximum image gallery width size: 510,72px

Considering that, I came up with the following solution:

• The max-width for the Product Image Gallery block was set to 512px - this matches the Single Product template and allow images to have different sizes without breaking the layout and without the need to scale them to fit the whole space
• The default width for the column that wraps the Product Image Gallery block in the Single Product template was set to 512px - to match the width size of the gallery

Let me know what you think, or if you have a better solution than that. Right now, after testing multiple combinations of properties and values I couldn't figure out a simpler and better way to fix this

[gigitux]

LGTM