Product Image Gallery block: Fix magnifying glass appearing outside the block content area #9594

thealexandrelara · 2023-05-24T20:18:48Z

Description

This PR fixes the Product Image Gallery block that was displaying the magnifying glass icon (that contains the zoom functionality) outside the content area of the block.

Walkthrough

`🤖 Generated by Copilot at 1f58de7`

👨‍💻 Enhanced by @thealexandrelara

Fix layout issue with product image gallery by changing width from 100% to auto (link)

Fixes #9402

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

Log in to your WordPress dashboard.
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.
On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
On the left-hand side menu, click on Templates. This will open the list of available templates.
Find and select the Single Product template from the list.
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.
Inside the Site editor, click on the List View button, usually found at the top left of the editing space, to see the list of blocks added to the editor area.
In the list of blocks, move the Product Image Gallery block to be above the Breadcrumbs block;
Once the Product Image Gallery block is displayed on top of the Breadcrumbs block in the Editor area, on the top-right side click on the Save button;
Visit the product page and make sure that the magnifying glass is correctly displayed on the top right corner of the image

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Changelog

Product Image Gallery block: Fix magnifying glass appearing outside the block content area

github-actions · 2023-05-24T20:20:43Z

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9594.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
`reviews-frontend.js`	`wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.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-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`cart-frontend.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-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `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`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `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`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `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-style-engine`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wc-price-format`, `wp-i18n`, `wp-polyfill`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `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`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `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-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

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

TypeScript Errors Report

Files with errors: 472
Total errors: 2264

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

github-actions · 2023-05-24T20:24:20Z

Size Change: +6 B (0%)

Total Size: 1.09 MB

Filename	Size	Change
`build/wc-blocks-style-rtl.css`	27.8 kB	+3 B (0%)
`build/wc-blocks-style.css`	27.8 kB	+3 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	8.57 kB
`build/active-filters-wrapper-frontend.js`	7.62 kB
`build/active-filters.js`	7.47 kB
`build/all-products-frontend.js`	11.9 kB
`build/all-products.js`	39.9 kB
`build/all-reviews.js`	7.77 kB
`build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js`	4.04 kB
`build/attribute-filter-wrapper-frontend.js`	4.28 kB
`build/attribute-filter.js`	13.1 kB
`build/blocks-checkout.js`	35.1 kB
`build/breadcrumbs.js`	2.04 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.39 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products--product-price-frontend.js`	2.94 kB
`build/cart-blocks/cart-cross-sells-products-frontend.js`	3.73 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.17 kB
`build/cart-blocks/cart-express-payment-frontend.js`	718 B
`build/cart-blocks/cart-items-frontend.js`	301 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.51 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.06 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.28 kB
`build/cart-blocks/cart-totals-frontend.js`	308 B
`build/cart-blocks/empty-cart-frontend.js`	346 B
`build/cart-blocks/filled-cart-frontend.js`	656 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	1.63 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.13 kB
`build/cart-blocks/order-summary-fee-frontend.js`	272 B
`build/cart-blocks/order-summary-heading-frontend.js`	333 B
`build/cart-blocks/order-summary-shipping-frontend.js`	17 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	273 B
`build/cart-blocks/order-summary-taxes-frontend.js`	434 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.38 kB
`build/cart-frontend.js`	29.7 kB
`build/cart.js`	45 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.7 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 kB
`build/checkout-blocks/contact-information-frontend.js`	2.05 kB
`build/checkout-blocks/express-payment-frontend.js`	1.13 kB
`build/checkout-blocks/fields-frontend.js`	330 B
`build/checkout-blocks/order-note-frontend.js`	1.14 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.69 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	1.79 kB
`build/checkout-blocks/order-summary-discount-frontend.js`	2.29 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	275 B
`build/checkout-blocks/order-summary-frontend.js`	1.28 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	17 kB
`build/checkout-blocks/order-summary-subtotal-frontend.js`	273 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	435 B
`build/checkout-blocks/payment-frontend.js`	8.29 kB
`build/checkout-blocks/pickup-options-frontend.js`	4.8 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.17 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.59 kB
`build/checkout-blocks/shipping-methods-frontend.js`	6.35 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	312 B
`build/checkout-frontend.js`	31.3 kB
`build/checkout.js`	46.3 kB
`build/customer-account.js`	3.18 kB
`build/featured-category.js`	15 kB
`build/featured-product.js`	15.2 kB
`build/filter-wrapper-frontend.js`	14.2 kB
`build/filter-wrapper.js`	2.39 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 kB
`build/handpicked-products.js`	8 kB
`build/legacy-template.js`	6.45 kB
`build/mini-cart-component-frontend.js`	28.4 kB
`build/mini-cart-contents-block/cart-button-frontend.js`	1.73 kB
`build/mini-cart-contents-block/checkout-button-frontend.js`	1.74 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`	4.1 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	592 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	528 B
`build/mini-cart-contents-block/title-frontend.js`	1.91 kB
`build/mini-cart-contents-block/title-items-counter-frontend.js`	1.6 kB
`build/mini-cart-contents-block/title-label-frontend.js`	1.54 kB
`build/mini-cart-contents.js`	18 kB
`build/mini-cart-frontend.js`	2.66 kB
`build/mini-cart.js`	4.35 kB
`build/price-filter-wrapper-frontend.js`	6.75 kB
`build/price-filter.js`	8.47 kB
`build/price-format.js`	1.19 kB
`build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js`	251 B
`build/product-add-to-cart--product-button--product-image--product-rating--product-title.js`	151 B
`build/product-add-to-cart-frontend.js`	6.51 kB
`build/product-add-to-cart.js`	8.87 kB
`build/product-best-sellers.js`	8.34 kB
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js`	963 B
`build/product-button-frontend.js`	2.65 kB
`build/product-button.js`	4.01 kB
`build/product-categories.js`	2.37 kB
`build/product-category.js`	9.35 kB
`build/product-collection.js`	3.39 kB
`build/product-image-frontend.js`	2.63 kB
`build/product-image.js`	4.18 kB
`build/product-new.js`	8.34 kB
`build/product-on-sale.js`	8.68 kB
`build/product-price-frontend.js`	203 B
`build/product-price.js`	1.68 kB
`build/product-query.js`	11.7 kB
`build/product-rating-frontend.js`	2.31 kB
`build/product-rating.js`	999 B
`build/product-results-count.js`	1.66 kB
`build/product-sale-badge-frontend.js`	1.8 kB
`build/product-sale-badge.js`	666 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	1.84 kB
`build/product-sku.js`	535 B
`build/product-stock-indicator-frontend.js`	2.02 kB
`build/product-stock-indicator.js`	731 B
`build/product-summary-frontend.js`	2.19 kB
`build/product-summary.js`	904 B
`build/product-tag.js`	8.97 kB
`build/product-template.js`	3.27 kB
`build/product-title-frontend.js`	2.22 kB
`build/product-title.js`	3.69 kB
`build/product-top-rated.js`	8.58 kB
`build/products-by-attribute.js`	9.7 kB
`build/rating-filter-frontend.js`	21.3 kB
`build/rating-filter-wrapper-frontend.js`	6.21 kB
`build/rating-filter.js`	6.89 kB
`build/reviews-by-category.js`	12.1 kB
`build/reviews-by-product.js`	13.2 kB
`build/reviews-frontend.js`	7.11 kB
`build/single-product.js`	11.1 kB
`build/stock-filter-wrapper-frontend.js`	2.98 kB
`build/stock-filter.js`	7.61 kB
`build/store-notices.js`	1.69 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js`	6.82 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js`	4.21 kB
`build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js`	5.11 kB
`build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js`	5.26 kB
`build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js`	3.57 kB
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js`	19.4 kB
`build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js`	8.25 kB
`build/vendors--checkout-blocks/shipping-method-frontend.js`	12.5 kB
`build/vendors--price-filter-wrapper-frontend.js`	2.2 kB
`build/vendors--product-add-to-cart-frontend.js`	7.26 kB
`build/vendors--rating-filter-wrapper-frontend.js`	5.11 kB
`build/wc-blocks-data.js`	22.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.96 kB
`build/wc-blocks-editor-style.css`	5.96 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	933 B
`build/wc-blocks-registry.js`	3.15 kB
`build/wc-blocks-shared-context.js`	1.52 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-blocks-vendors.js`	65 kB
`build/wc-blocks.js`	3.7 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.3 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

gigitux

This change restore a bug that I fixed https://github.com/woocommerce/woocommerce-blocks/pull/9299/files

thealexandrelara · 2023-05-25T18:57:12Z

This change restore a bug that I fixed https://github.com/woocommerce/woocommerce-blocks/pull/9299/files

I cannot reproduce the bug that you mentioned, for me when resizing the window it is working as expected, am I missing something?

resizing-window.mov

gigitux

Sorry for the confusion. I didn't able to replicate it anymore. Maybe I switched to the wrong branch 😅.

LGTM

Fix magnifying glass appearing outside the product image gallery

1f58de7

thealexandrelara self-assigned this May 24, 2023

thealexandrelara added type: bug The issue/PR concerns a confirmed bug. block: product image gallery Issues related to the Product Image Gallery block. labels May 24, 2023

thealexandrelara marked this pull request as ready for review May 24, 2023 20:51

woocommercebot requested review from a team and danieldudzic and removed request for a team May 24, 2023 20:52

gigitux suggested changes May 25, 2023

View reviewed changes

thealexandrelara requested a review from gigitux May 25, 2023 18:57

gigitux approved these changes May 26, 2023

View reviewed changes

github-actions bot added this to the 10.4.0 milestone May 26, 2023

github-actions bot added the status: ready to merge label May 26, 2023

thealexandrelara merged commit 37c518c into trunk May 26, 2023

thealexandrelara deleted the fix/9573-magnifiying-glass-appearing-outside-product-image-gallery branch May 26, 2023 14:23

github-actions bot removed the status: ready to merge label May 26, 2023

tarunvijwani mentioned this pull request Jun 8, 2023

Update WooCommerce blocks package to 10.4.2 woocommerce/woocommerce#38656

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product Image Gallery block: Fix magnifying glass appearing outside the block content area #9594

Product Image Gallery block: Fix magnifying glass appearing outside the block content area #9594

thealexandrelara commented May 24, 2023 •

edited by tarunvijwani

Loading

github-actions bot commented May 24, 2023 •

edited

Loading

github-actions bot commented May 24, 2023

gigitux left a comment

thealexandrelara commented May 25, 2023

gigitux left a comment

Product Image Gallery block: Fix magnifying glass appearing outside the block content area #9594

Product Image Gallery block: Fix magnifying glass appearing outside the block content area #9594

Conversation

thealexandrelara commented May 24, 2023 • edited by tarunvijwani Loading

Description

Walkthrough

🤖 Generated by Copilot at 1f58de7

Accessibility

Other Checks

Screenshots

Testing

Automated Tests

User Facing Testing

WooCommerce Visibility

Changelog

github-actions bot commented May 24, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented May 24, 2023

gigitux left a comment

Choose a reason for hiding this comment

thealexandrelara commented May 25, 2023

gigitux left a comment

Choose a reason for hiding this comment

thealexandrelara commented May 24, 2023 •

edited by tarunvijwani

Loading

`🤖 Generated by Copilot at 1f58de7`

github-actions bot commented May 24, 2023 •

edited

Loading