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

Product Image Gallery: Prevent image placeholder from going outside its wrapper #8901

Merged
merged 2 commits into from
Mar 31, 2023

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented Mar 29, 2023

When the users resize the window or access smaller screen sizes, the placeholder image is not resized to fit the wrapper component. This PR solves that by removing the fixed width of the placeholder and allowing it to adjust itself accordingly to its container.

Fixes #8742

Accessibility

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
image image

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. Go to Appearance > Themes, and select a block theme (for example: Twenty-twenty three);
  3. Go to Appearance < Site Editor (Beta);
  4. Go to Templates > Single Product;
  5. Click the Edit button;
  6. Click on the "+" icon to add a new block and search for "Product Image Gallery" block in the search bar;
  7. Click on the "Product Image Gallery" block, and add it to the editor;
  8. Resize the window and make sure that the placeholder image adjusts itself to the block wrapping it
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fix image placeholder for the Product Image Gallery block that was not fitting inside its wrapper component

@thealexandrelara thealexandrelara self-assigned this Mar 29, 2023
@thealexandrelara thealexandrelara marked this pull request as ready for review March 29, 2023 18:37
@woocommercebot woocommercebot requested review from a team and nefeline and removed request for a team March 29, 2023 18:37
@github-actions
Copy link
Contributor

github-actions bot commented Mar 30, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8901.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: 451
  • Total errors: 2213

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: +2 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/wc-blocks-editor-style-rtl.css 5.79 kB +1 B (0%)
build/wc-blocks-editor-style.css 5.79 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/all-products-frontend.js 11.8 kB
build/all-products.js 37.4 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 44 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 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.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.32 kB
build/cart-frontend.js 29.3 kB
build/cart.js 48.3 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 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.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.39 kB
build/checkout-blocks/pickup-options-frontend.js 4.11 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 309 B
build/checkout-frontend.js 30.9 kB
build/checkout.js 46 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.4 kB
build/filter-wrapper-frontend.js 14 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 7.92 kB
build/legacy-template.js 5.57 kB
build/mini-cart-component-frontend.js 28.3 kB
build/mini-cart-contents-block/cart-button-frontend.js 816 B
build/mini-cart-contents-block/checkout-button-frontend.js 818 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 705 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.4 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.96 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-button-frontend.js 1.91 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.25 kB
build/product-image-frontend.js 1.77 kB
build/product-image.js 178 B
build/product-new.js 8.26 kB
build/product-on-sale.js 8.59 kB
build/product-price-frontend.js 2.08 kB
build/product-query.js 11 kB
build/product-rating-frontend.js 1.34 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 977 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-summary-frontend.js 1.29 kB
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 178 B
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.58 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/rating-filter.js 6.98 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.11 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 5.82 kB
build/stock-filter.js 7.7 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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.73 kB
build/wc-blocks-style-rtl.css 27.1 kB
build/wc-blocks-style.css 27.1 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 64.2 kB
build/wc-blocks.js 2.63 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 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

LGTM 🎉 !

Test Results

Click on the "Product Image Gallery" block, and add it to the editor;
Resize the window and make sure that the placeholder image adjusts itself to the block wrapping it

✅ Confirmed the product image gallery block is resizing as expected.

@thealexandrelara thealexandrelara merged commit 9e704f8 into trunk Mar 31, 2023
@thealexandrelara thealexandrelara deleted the fix/product-image-gallery-block-placeholder branch March 31, 2023 17:36
@opr opr added this to the 10.0.0 milestone Apr 10, 2023
@opr opr added type: bug The issue/PR concerns a confirmed bug. focus: blocks Specific work involving or impacting how blocks behave. block: product image gallery Issues related to the Product Image Gallery block. labels Apr 10, 2023
@opr
Copy link
Contributor

opr commented Apr 10, 2023

@thealexandrelara I added the correct labels for your PR.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product image gallery Issues related to the Product Image Gallery block. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Image Gallery: placeholder goes outside the block selection
3 participants