Product Gallery Thumbnails block: Add foundation for the block

[thealexandrelara]

Fixes #9943

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

• 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-10063.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
product-gallery-thumbnails.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-polyfill		⚠️

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

TypeScript Errors Report

• Files with errors: 465
• Total errors: 2238

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/index.tsx

_{comments-aggregator}

[github-actions]

Size Change: +1.36 kB (0%)

Total Size: 1.36 MB

Filename	Size	Change
build/active-filters.js	7.59 kB	-2 B (0%)
build/all-products.js	41.1 kB	-3 B (0%)
build/all-reviews.js	7.87 kB	+2 B (0%)
build/attribute-filter.js	13.3 kB	-4 B (0%)
build/breadcrumbs.js	2.14 kB	-4 B (0%)
build/cart-blocks/cart-items-style.js	228 B	-1 B (0%)
build/cart-blocks/cart-order-summary-style.js	319 B	+1 B (0%)
build/cart-blocks/cart-totals-style.js	238 B	-1 B (0%)
build/cart-blocks/order-summary-coupon-form-style.js	137 B	+1 B (+1%)
build/cart-blocks/order-summary-subtotal-style.js	137 B	-1 B (-1%)
build/cart.js	45.4 kB	-4 B (0%)
build/checkout-blocks/actions-style.js	686 B	+1 B (0%)
build/checkout-blocks/billing-address-style.js	531 B	+1 B (0%)
build/checkout-blocks/contact-information-style.js	608 B	-1 B (0%)
build/checkout-blocks/fields-style.js	260 B	-1 B (0%)
build/checkout-blocks/order-summary-cart-items-style.js	137 B	-1 B (-1%)
build/checkout-blocks/order-summary-subtotal-style.js	137 B	+1 B (+1%)
build/checkout-blocks/payment-style.js	460 B	-1 B (0%)
build/checkout-blocks/pickup-options-style.js	442 B	-1 B (0%)
build/checkout-blocks/shipping-methods-style.js	416 B	-2 B (0%)
build/checkout-blocks/terms-style.js	676 B	+1 B (0%)
build/checkout-blocks/totals-style.js	285 B	+1 B (0%)
build/checkout.js	48 kB	-5 B (0%)
build/customer-account.js	3.19 kB	-1 B (0%)
build/featured-product.js	15.3 kB	+5 B (0%)
build/filter-wrapper.js	2.4 kB	+1 B (0%)
build/handpicked-products.js	8.09 kB	+3 B (0%)
build/legacy-template.js	8.92 kB	-3 B (0%)
build/mini-cart-contents-block/cart-button-style.js	387 B	+1 B (0%)
build/mini-cart-contents-block/checkout-button-style.js	469 B	+1 B (0%)
build/mini-cart-contents-block/empty-cart-style.js	358 B	-4 B (-1%)
build/mini-cart-contents-block/footer-style.js	2.4 kB	-2 B (0%)
build/mini-cart-contents-block/products-table-style.js	5.1 kB	-2 B (0%)
build/mini-cart-contents-block/shopping-button-style.js	394 B	+2 B (+1%)
build/mini-cart-contents.js	18.1 kB	-1 B (0%)
build/mini-cart.js	5.93 kB	-3 B (0%)
build/price-filter.js	8.66 kB	+2 B (0%)
build/product-add-to-cart.js	8.84 kB	-1 B (0%)
build/product-button--product-image--product-price--product-rating--product-rating-stars--product-sale-ba--4e6a8b3c.js	955 B	+1 B (0%)
build/product-category.js	9.44 kB	+3 B (0%)
build/product-gallery-large-image.js	2 kB	-3 B (0%)
build/product-gallery.js	2.31 kB	+13 B (+1%)
build/product-on-sale.js	8.73 kB	-1 B (0%)
build/product-query.js	12 kB	+1 B (0%)
build/product-search.js	2.63 kB	+1 B (0%)
build/product-stock-indicator.js	730 B	-1 B (0%)
build/product-tag.js	8.92 kB	+1 B (0%)
build/product-template.js	3.35 kB	-3 B (0%)
build/product-title.js	3.66 kB	+3 B (0%)
build/product-top-rated.js	8.98 kB	+2 B (0%)
build/products-by-attribute.js	9.77 kB	+2 B (0%)
build/rating-filter.js	6.99 kB	+1 B (0%)
build/reviews-by-category.js	12.2 kB	+3 B (0%)
build/reviews-by-product.js	13.3 kB	-1 B (0%)
build/single-product.js	11.2 kB	+2 B (0%)
build/stock-filter.js	7.73 kB	-1 B (0%)
build/store-notices.js	1.69 kB	+3 B (0%)
build/vendors--checkout-blocks/shipping-method-style.js	11.7 kB	-1 B (0%)
build/wc-blocks-vendors.js	65.3 kB	-6 B (0%)
build/product-gallery-thumbnails.js	1.36 kB	+1.36 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.7 kB
build/active-filters-rtl.css	2.02 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--3d5b804b-style.js	958 B
build/active-filters-wrapper-frontend.js	7.64 kB
build/active-filters-wrapper-rtl.css	1.88 kB
build/active-filters-wrapper.css	1.88 kB
build/active-filters.css	2.02 kB
build/all-products-frontend.js	12.2 kB
build/all-products-rtl.css	4.18 kB
build/all-products.css	4.18 kB
build/all-reviews-rtl.css	1.84 kB
build/all-reviews.css	1.84 kB
build/attribute-filter-frontend.js	23.1 kB
build/attribute-filter-rtl.css	4.19 kB
build/attribute-filter-wrapper-frontend.js	7.79 kB
build/attribute-filter-wrapper-rtl.css	4.06 kB
build/attribute-filter-wrapper.css	4.06 kB
build/attribute-filter.css	4.19 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs-rtl.css	253 B
build/breadcrumbs.css	253 B
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB
build/cart-blocks/cart-accepted-payment-methods-style.js	137 B
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.91 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	3.83 kB
build/cart-blocks/cart-cross-sells-products-style.js	137 B
build/cart-blocks/cart-cross-sells-style.js	253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.16 kB
build/cart-blocks/cart-express-payment-frontend.js	721 B
build/cart-blocks/cart-express-payment-style.js	137 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.47 kB
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-line-items-style.js	137 B
build/cart-blocks/cart-order-summary-frontend.js	1.28 kB
build/cart-blocks/cart-totals-frontend.js	307 B
build/cart-blocks/empty-cart-frontend.js	346 B
build/cart-blocks/empty-cart-style.js	340 B
build/cart-blocks/filled-cart-frontend.js	657 B
build/cart-blocks/filled-cart-style.js	312 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-discount-style.js	137 B
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-fee-style.js	138 B
build/cart-blocks/order-summary-heading-frontend.js	334 B
build/cart-blocks/order-summary-heading-style.js	335 B
build/cart-blocks/order-summary-shipping-frontend.js	17 kB
build/cart-blocks/order-summary-shipping-style.js	178 B
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	435 B
build/cart-blocks/order-summary-taxes-style.js	177 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.43 kB
build/cart-blocks/proceed-to-checkout-style.js	1.09 kB
build/cart-frontend.js	29.9 kB
build/cart-rtl.css	9.6 kB
build/cart.css	9.59 kB
build/catalog-sorting-rtl.css	277 B
build/catalog-sorting.css	276 B
build/catalog-sorting.js	1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js	487 B
build/checkout-blocks/actions-frontend.js	1.88 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.04 kB
build/checkout-blocks/express-payment-frontend.js	1.14 kB
build/checkout-blocks/fields-frontend.js	318 B
build/checkout-blocks/order-note-frontend.js	1.12 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.76 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-coupon-form-style.js	137 B
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-discount-style.js	137 B
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-fee-style.js	137 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-shipping-style.js	137 B
build/checkout-blocks/order-summary-style.js	319 B
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/order-summary-taxes-style.js	177 B
build/checkout-blocks/payment-frontend.js	9.28 kB
build/checkout-blocks/pickup-options-frontend.js	4.84 kB
build/checkout-blocks/shipping-address-frontend.js	1.17 kB
build/checkout-blocks/shipping-address-style.js	476 B
build/checkout-blocks/shipping-method-frontend.js	2.62 kB
build/checkout-blocks/shipping-method-style.js	1.37 kB
build/checkout-blocks/shipping-methods-frontend.js	6.4 kB
build/checkout-blocks/terms-frontend.js	1.55 kB
build/checkout-blocks/totals-frontend.js	348 B
build/checkout-frontend.js	31.8 kB
build/checkout-rtl.css	9.23 kB
build/checkout.css	9.22 kB
build/customer-account-rtl.css	406 B
build/customer-account.css	406 B
build/featured-category-rtl.css	986 B
build/featured-category.css	987 B
build/featured-category.js	15.1 kB
build/featured-product-rtl.css	1.03 kB
build/featured-product.css	1.03 kB
build/filter-wrapper-frontend.js	14.2 kB
build/filter-wrapper-rtl.css	399 B
build/filter-wrapper.css	397 B
build/legacy-template-rtl.css	258 B
build/legacy-template.css	257 B
build/mini-cart-component-frontend.js	30.8 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js	293 B
build/mini-cart-contents-block/cart-button-frontend.js	1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js	1.81 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/filled-cart-style.js	268 B
build/mini-cart-contents-block/footer-frontend.js	3.83 kB
build/mini-cart-contents-block/footer-rtl.css	419 B
build/mini-cart-contents-block/footer.css	418 B
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/items-style.js	237 B
build/mini-cart-contents-block/products-table--product-summary-style.js	737 B
build/mini-cart-contents-block/products-table-frontend.js	588 B
build/mini-cart-contents-block/products-table-rtl.css	2.19 kB
build/mini-cart-contents-block/products-table.css	2.18 kB
build/mini-cart-contents-block/shopping-button-frontend.js	531 B
build/mini-cart-contents-block/title-frontend.js	1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.59 kB
build/mini-cart-contents-block/title-items-counter-style.js	300 B
build/mini-cart-contents-block/title-label-frontend.js	1.53 kB
build/mini-cart-contents-block/title-label-style.js	301 B
build/mini-cart-contents-block/title-style.js	443 B
build/mini-cart-contents-rtl.css	2.73 kB
build/mini-cart-contents.css	2.73 kB
build/mini-cart-frontend.js	2.84 kB
build/mini-cart-rtl.css	2.61 kB
build/mini-cart.css	2.61 kB
build/packages-style-rtl.css	3.59 kB
build/packages-style.css	3.59 kB
build/price-filter-frontend.js	14.7 kB
build/price-filter-rtl.css	2.71 kB
build/price-filter-wrapper-frontend.js	6.85 kB
build/price-filter-wrapper-rtl.css	2.56 kB
build/price-filter-wrapper.css	2.56 kB
build/price-filter.css	2.71 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-rating-s--92e2d51d.js	272 B
build/product-add-to-cart--product-button--product-image--product-rating--product-rating-stars--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.53 kB
build/product-add-to-cart-rtl.css	1.39 kB
build/product-add-to-cart.css	1.4 kB
build/product-best-sellers.js	8.43 kB
build/product-button-frontend.js	2.67 kB
build/product-button-rtl.css	889 B
build/product-button.css	891 B
build/product-button.js	3.97 kB
build/product-categories-rtl.css	671 B
build/product-categories.css	670 B
build/product-categories.js	2.71 kB
build/product-collection.js	12.9 kB
build/product-details-rtl.css	413 B
build/product-details.css	410 B
build/product-gallery-large-image-rtl.css	314 B
build/product-gallery-large-image.css	313 B
build/product-image-frontend.js	2.71 kB
build/product-image-gallery-rtl.css	322 B
build/product-image-gallery.css	322 B
build/product-image-rtl.css	948 B
build/product-image.css	946 B
build/product-image.js	4.21 kB
build/product-new.js	8.72 kB
build/product-price-frontend.js	231 B
build/product-price-rtl.css	696 B
build/product-price.css	695 B
build/product-price.js	1.67 kB
build/product-query-rtl.css	367 B
build/product-query.css	365 B
build/product-rating-frontend.js	2.35 kB
build/product-rating-rtl.css	262 B
build/product-rating-stars-frontend.js	2.24 kB
build/product-rating-stars-rtl.css	904 B
build/product-rating-stars.css	906 B
build/product-rating-stars.js	939 B
build/product-rating.css	262 B
build/product-rating.js	1.04 kB
build/product-results-count-rtl.css	248 B
build/product-results-count.css	247 B
build/product-results-count.js	1.66 kB
build/product-reviews-rtl.css	474 B
build/product-reviews.css	473 B
build/product-sale-badge-frontend.js	1.8 kB
build/product-sale-badge-rtl.css	392 B
build/product-sale-badge.css	389 B
build/product-sale-badge.js	667 B
build/product-search-rtl.css	435 B
build/product-search.css	434 B
build/product-sku-frontend.js	1.85 kB
build/product-sku-rtl.css	258 B
build/product-sku.css	258 B
build/product-sku.js	535 B
build/product-stock-indicator-frontend.js	2.04 kB
build/product-stock-indicator-rtl.css	250 B
build/product-stock-indicator.css	250 B
build/product-summary-frontend.js	2.26 kB
build/product-summary-rtl.css	571 B
build/product-summary.css	572 B
build/product-summary.js	1 kB
build/product-template-rtl.css	439 B
build/product-template.css	437 B
build/product-title-frontend.js	2.22 kB
build/product-title-rtl.css	718 B
build/product-title.css	719 B
build/rating-filter-frontend.js	21.5 kB
build/rating-filter-rtl.css	4.24 kB
build/rating-filter-wrapper-frontend.js	6.3 kB
build/rating-filter-wrapper-rtl.css	4.11 kB
build/rating-filter-wrapper.css	4.11 kB
build/rating-filter.css	4.24 kB
build/reviews-by-category-rtl.css	1.84 kB
build/reviews-by-category.css	1.84 kB
build/reviews-by-product-rtl.css	1.84 kB
build/reviews-by-product.css	1.84 kB
build/reviews-frontend.js	7.17 kB
build/single-product-rtl.css	399 B
build/single-product.css	397 B
build/stock-filter-frontend.js	21.7 kB
build/stock-filter-rtl.css	4.06 kB
build/stock-filter-wrapper-frontend.js	6.55 kB
build/stock-filter-wrapper-rtl.css	3.93 kB
build/stock-filter-wrapper.css	3.93 kB
build/stock-filter.css	4.06 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--6436fd83-style.js	605 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.83 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.2 kB
build/vendors--attribute-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--cart-blocks/proceed-to-checkout-style.js	179 B
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js	8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.4 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js	5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js	3.16 kB
build/vendors--price-filter-wrapper-frontend.js	2.19 kB
build/vendors--product-add-to-cart-frontend.js	7.25 kB
build/vendors--rating-filter-wrapper-frontend.js	5.11 kB
build/vendors--stock-filter-wrapper-frontend.js	5.11 kB
build/wc-blocks-data.js	22.4 kB
build/wc-blocks-editor-style-rtl.css	6.17 kB
build/wc-blocks-editor-style.css	6.17 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-rtl.css	2.54 kB
build/wc-blocks-shared-context.js	1.1 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks.css	2.54 kB
build/wc-blocks.js	3.75 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}

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[thealexandrelara]

I'm closing this PR in favor of #10247