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

Add Product Gallery Thumbnails block #10442

Merged
merged 46 commits into from
Aug 2, 2023

Conversation

danieldudzic
Copy link
Contributor

This is a replacement for #10247 which had to be revered due to an erroneous, accidental commit.


Fixes #9943

This PR adds an inner block Thumbnails to the parent block Product Gallery.

What is complete

  • Settings: Thumbnails (Position) - The thumbnails can be positioned to the left, to the right or at the bottom of the Large Image block.
    This utilizes the core Group block which gets updated from the Row to Stack modes as necessary to achieve the desired position/layout.

  • Settings: Number of Thumbnails - The minimum number of thumbnails is 2. The maximum number of thumbnails is 8.

  • Settings: Sharing of the settings between Product Gallery and Thumbnails. Both the parent and the inner block can manage Thumbnails settings.
    This utilizes the context sharing between Product Gallery and Thumbnails.

  • Add testing steps to this PR

  • Investigate focus jumping, when switching thumbnails position with Thumbnails block being in focus. Before merging, there needs be a low priority issue opened for this.

  • Review contexts set in block.json: usesContext for each block. Make sure they only set contexts they actually use.

  • E2E tests - Added via E2E: Product Gallery Thumbnails block tests #10370

  • Refactor the code in product-gallery/edit.tsx that's responsible for moving blocks around to achieve the desired Thumbnails position. Currently, the position is updated on every render (overriding potential non-standard user position changes).

What needs to be done as a part of the next roadmap step

  • Frontend interactivity - At this moment, the block will output the correct Group block configuration (based on the Thumbnails (Position) setting) and will set the correct number of thumbnails, but doesn't include any interactivity. This todo item has been designated as the next step on the Product Gallery roadmap and will be worked on once all base code for all Product Gallery blocks have been added.
  • Settings: Number of Thumbnails - If more than 8 images exist for the product, a View All button should appear in the last thumbnail.

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

Editor Page
Cursor_i_Single_Product_‹_Template_Part_‹_Editor_‹_productgallery_—_WordPress V-Neck_T-Shirt_–_productgallery

Testing

Automated Tests

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

User Facing Testing

  1. Using a block theme, go to Appearance > Editor.
  2. Go to Templates > Single Product.
  3. Make sure you are using the blockified template.
  4. Add the Product Gallery block.
  5. Verify that the Product Gallery Thumbnails block has been added correctly.
  6. Test the Thumbnails (position) setting to all available options: Off, Left, Bottom, Right.
  7. Test the above with first Product Gallery and then Thumbnails being in focus.
  8. Save and check on the frontend that the position of Thumbnails is reflected. Use a single product page of a product that does include multiple product images. In the sample product import file it's for example the product/v-neck-t-shirt/ product.
  9. Test the Number of thumbnails setting works correctly, and displays the correct number of thumbnails both in the editor and frontend.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

…nality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.
…ils bottom position styling on the frontend.
…mbnails above the large image and don't overwrite that automatically
…t conditional check when moving thumbnails up and down
@danieldudzic danieldudzic added skip-changelog PRs that you don't want to appear in the changelog. block: product gallery Issues related to the Product Gallery block. labels Aug 1, 2023
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team August 1, 2023 17:25
@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10442.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-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, 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-gallery.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-gallery-large-image.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-polyfill ⚠️
product-gallery-thumbnails.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
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-hooks, 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: 469
  • Total errors: 2240

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

assets/js/blocks/product-gallery/save.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2023

Size Change: +6.85 kB (+1%)

Total Size: 1.34 MB

Filename Size Change
build/active-filters.js 7.51 kB +10 B (0%)
build/all-products.js 41.3 kB -7 B (0%)
build/all-reviews.js 7.77 kB +6 B (0%)
build/attribute-filter.js 13.1 kB +6 B (0%)
build/breadcrumbs.js 2.15 kB +2 B (0%)
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B +1 B (+1%)
build/cart-blocks/cart-express-payment-style.js 137 B +1 B (+1%)
build/cart-blocks/cart-order-summary-style.js 319 B +1 B (0%)
build/cart-blocks/filled-cart-style.js 310 B +3 B (+1%)
build/cart-blocks/order-summary-discount-style.js 137 B +1 B (+1%)
build/cart-blocks/order-summary-fee-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-shipping-style.js 178 B +1 B (+1%)
build/cart-blocks/order-summary-subtotal-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-taxes-style.js 176 B -2 B (-1%)
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB +1 B (0%)
build/cart.js 44.9 kB -15 B (0%)
build/catalog-sorting.js 1.71 kB +3 B (0%)
build/checkout-blocks/actions--checkout-blocks/terms-style.js 485 B -2 B (0%)
build/checkout-blocks/contact-information-style.js 607 B +1 B (0%)
build/checkout-blocks/fields-style.js 249 B -1 B (0%)
build/checkout-blocks/order-summary-discount-style.js 136 B -1 B (-1%)
build/checkout-blocks/order-summary-style.js 318 B +1 B (0%)
build/checkout-blocks/order-summary-taxes-style.js 176 B -2 B (-1%)
build/checkout-blocks/pickup-options-style.js 442 B +1 B (0%)
build/checkout-blocks/shipping-method-style.js 1.35 kB +2 B (0%)
build/checkout-blocks/shipping-methods-style.js 417 B +2 B (0%)
build/checkout-blocks/terms-style.js 673 B +1 B (0%)
build/checkout.js 47.6 kB +1 B (0%)
build/customer-account.js 3.18 kB +2 B (0%)
build/featured-category.js 14.9 kB -3 B (0%)
build/featured-product.js 15.1 kB -6 B (0%)
build/filter-wrapper.js 2.39 kB +4 B (0%)
build/handpicked-products.js 7.97 kB +4 B (0%)
build/legacy-template.js 8.13 kB -10 B (0%)
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 248 B -1 B (0%)
build/mini-cart-contents-block/cart-button-style.js 384 B +1 B (0%)
build/mini-cart-contents-block/checkout-button-style.js 465 B -1 B (0%)
build/mini-cart-contents-block/filled-cart-style.js 268 B +1 B (0%)
build/mini-cart-contents-block/items-style.js 228 B -1 B (0%)
build/mini-cart-contents-block/products-table-style.js 5.31 kB -4 B (0%)
build/mini-cart-contents-block/shopping-button-style.js 397 B +1 B (0%)
build/mini-cart-contents-block/title-items-counter-style.js 302 B +1 B (0%)
build/mini-cart-contents-block/title-label-style.js 300 B -1 B (0%)
build/mini-cart-contents.js 17.6 kB +7 B (0%)
build/mini-cart.js 6.35 kB +2 B (0%)
build/price-filter.js 8.52 kB -2 B (0%)
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 272 B +1 B (0%)
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 150 B -1 B (-1%)
build/product-add-to-cart.js 8.54 kB -8 B (0%)
build/product-category.js 9.3 kB +3 B (0%)
build/product-collection.js 13.8 kB -2 B (0%)
build/product-gallery-large-image.js 2.03 kB +6 B (0%)
build/product-gallery.js 4.59 kB +2.28 kB (+99%) 🆘
build/product-image.js 1.51 kB +1 B (0%)
build/product-new.js 8.61 kB +5 B (0%)
build/product-on-sale.js 8.61 kB +1 B (0%)
build/product-query.js 12.8 kB -2 B (0%)
build/product-results-count.js 1.67 kB -1 B (0%)
build/product-search.js 2.63 kB -1 B (0%)
build/product-sku.js 523 B +1 B (0%)
build/product-summary.js 920 B +4 B (0%)
build/product-title.js 965 B +2 B (0%)
build/product-top-rated.js 8.88 kB -2 B (0%)
build/products-by-attribute.js 9.64 kB +7 B (0%)
build/rating-filter.js 6.89 kB -1 B (0%)
build/reviews-by-product.js 13.1 kB -3 B (0%)
build/single-product.js 11.2 kB +5 B (0%)
build/stock-filter.js 7.61 kB +10 B (0%)
build/store-notices.js 1.69 kB -4 B (0%)
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B +1 B (+1%)
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB -1 B (0%)
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB -1 B (0%)
build/wc-blocks-editor-style-rtl.css 6.37 kB +40 B (+1%)
build/wc-blocks-editor-style.css 6.38 kB +41 B (+1%)
build/wc-blocks-vendors.js 65.5 kB +9 B (0%)
build/wc-blocks.js 2.63 kB -3 B (0%)
build/product-gallery-thumbnails-rtl.css 272 B +272 B (new file) 🆕
build/product-gallery-thumbnails.css 271 B +271 B (new file) 🆕
build/product-gallery-thumbnails.js 3.91 kB +3.91 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 926 B
build/active-filters-wrapper-frontend.js 7.57 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/active-filters.css 1.99 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-products-frontend.js 9.94 kB
build/all-products-rtl.css 4.19 kB
build/all-products.css 4.19 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.01 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/attribute-filter.css 4.14 kB
build/blocks-checkout.js 35 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-cross-sells-frontend.js 249 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.88 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.72 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.11 kB
build/cart-blocks/cart-express-payment-frontend.js 712 B
build/cart-blocks/cart-items-frontend.js 286 B
build/cart-blocks/cart-items-style.js 219 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-line-items-style.js 137 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 289 B
build/cart-blocks/cart-totals-style.js 228 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/empty-cart-style.js 336 B
build/cart-blocks/filled-cart-frontend.js 650 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js 136 B
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-fee-frontend.js 270 B
build/cart-blocks/order-summary-heading-frontend.js 326 B
build/cart-blocks/order-summary-heading-style.js 326 B
build/cart-blocks/order-summary-shipping-frontend.js 12 kB
build/cart-blocks/order-summary-subtotal-frontend.js 270 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-frontend.js 29.7 kB
build/cart-rtl.css 9.48 kB
build/cart.css 9.46 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/checkout-blocks/actions-frontend.js 1.81 kB
build/checkout-blocks/actions-style.js 681 B
build/checkout-blocks/billing-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-style.js 532 B
build/checkout-blocks/contact-information-frontend.js 2.02 kB
build/checkout-blocks/express-payment-frontend.js 1.11 kB
build/checkout-blocks/fields-frontend.js 301 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.63 kB
build/checkout-blocks/order-summary-cart-items-style.js 137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.72 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.21 kB
build/checkout-blocks/order-summary-fee-frontend.js 273 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-subtotal-frontend.js 271 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 9.23 kB
build/checkout-blocks/payment-style.js 460 B
build/checkout-blocks/pickup-options-frontend.js 4.96 kB
build/checkout-blocks/shipping-address-frontend.js 4.21 kB
build/checkout-blocks/shipping-address-style.js 475 B
build/checkout-blocks/shipping-method-frontend.js 2.58 kB
build/checkout-blocks/shipping-methods-frontend.js 6.51 kB
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/totals-frontend.js 332 B
build/checkout-blocks/totals-style.js 275 B
build/checkout-frontend.js 31.6 kB
build/checkout-rtl.css 9.14 kB
build/checkout.css 9.13 kB
build/customer-account-rtl.css 388 B
build/customer-account.css 387 B
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/mini-cart-component-frontend.js 30.8 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.68 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.77 kB
build/mini-cart-contents-block/empty-cart-frontend.js 357 B
build/mini-cart-contents-block/empty-cart-style.js 355 B
build/mini-cart-contents-block/filled-cart-frontend.js 266 B
build/mini-cart-contents-block/footer-frontend.js 3.77 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer-style.js 2.35 kB
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 546 B
build/mini-cart-contents-block/products-table-rtl.css 2.12 kB
build/mini-cart-contents-block/products-table.css 2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js 488 B
build/mini-cart-contents-block/title-frontend.js 1.85 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.57 kB
build/mini-cart-contents-block/title-label-frontend.js 1.5 kB
build/mini-cart-contents-block/title-style.js 437 B
build/mini-cart-contents-rtl.css 2.66 kB
build/mini-cart-contents.css 2.65 kB
build/mini-cart-frontend.js 2.79 kB
build/mini-cart-rtl.css 2.56 kB
build/mini-cart.css 2.56 kB
build/packages-style-rtl.css 3.55 kB
build/packages-style.css 3.55 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-rtl.css 2.67 kB
build/price-filter-wrapper-frontend.js 8.57 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-format.js 1.15 kB
build/product-add-to-cart--product-image--product-title.js 319 B
build/product-add-to-cart-frontend.js 8.51 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 929 B
build/product-average-rating-frontend.js 1.7 kB
build/product-average-rating.js 400 B
build/product-best-sellers.js 8.33 kB
build/product-button-frontend.js 4.86 kB
build/product-button-rtl.css 864 B
build/product-button.css 863 B
build/product-button.js 3.88 kB
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-categories.js 2.72 kB
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-large-image-rtl.css 295 B
build/product-gallery-large-image.css 295 B
build/product-image-frontend.js 2.65 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 922 B
build/product-image.css 920 B
build/product-price-frontend.js 247 B
build/product-price-rtl.css 667 B
build/product-price.css 665 B
build/product-price.js 1.65 kB
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-rating-counter-frontend.js 2.01 kB
build/product-rating-counter.js 689 B
build/product-rating-frontend.js 2.35 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.24 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating-stars.js 939 B
build/product-rating.css 244 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge-rtl.css 369 B
build/product-sale-badge.css 370 B
build/product-sale-badge.js 671 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-sku-frontend.js 1.83 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-stock-indicator.js 709 B
build/product-summary-frontend.js 2.17 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-tag.js 8.78 kB
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-template.js 3.42 kB
build/product-title-frontend.js 2.21 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.62 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/rating-filter.css 4.19 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 12 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-frontend.js 7.06 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.82 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/stock-filter.css 4.01 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 605 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.29 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.55 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.1 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.22 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.86 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--product-add-to-cart-frontend.js 6.79 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 22 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-rtl.css 2.46 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 kB
build/wc-blocks.css 2.46 kB
build/wc-interactivity.js 10.4 kB
build/wc-payment-method-bacs.js 818 B
build/wc-payment-method-cheque.js 812 B
build/wc-payment-method-cod.js 911 B
build/wc-payment-method-paypal.js 840 B
build/wc-settings.js 2.58 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

Approving this PR since it is working as expected. Great work and thank you for fixing the previous PR so quickly! 🚀

@danieldudzic danieldudzic enabled auto-merge (squash) August 1, 2023 21:15
@danieldudzic danieldudzic merged commit 5413109 into trunk Aug 2, 2023
@danieldudzic danieldudzic deleted the add/9943-add-product-gallery-thumbnails-block branch August 2, 2023 07:09
thealexandrelara pushed a commit that referenced this pull request Aug 7, 2023
* WIP Product Gallery: Add the Thumbnails block

* Product Gallery Thumbnails: Add block settings

* Add template for the Product Gallery block

* Add template for the Product Gallery block. Add the rest of the files.

* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.

* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.

* Product Gallery Thumbnails: Move the static template ouside of the component

* Make sure the context is set before accesing the array values

* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc

* Product Gallery Thumbnails: Fix TS error

* Product Gallery Thumbnails: Remove unused stylesheet

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.

* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically

* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down

* Product Gallery Thumbnails: Fix the eslint dependency error

* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file

* Product Gallery Thumbnails: Update the utils file

* Product Gallery Thumbnails: Update the utils file. Fix comment indentation

* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set

* Product Gallery: Rename clientId to productGalleryClientId

* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies

* Product Gallery Thumbnails: Combine all useEffect code together

* Product Gallery Thumbnails: Add a ThumbnailsPosition enum

* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Add missing dependency

* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block

* Product Gallery: Add crop, zoom and full-screen settings

* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error

* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error

* Product Gallery Thumbnails: Revert back to ts-ignore

* Revert "Product Gallery: Add crop, zoom and full-screen settings"

This reverts commit 7de1f0f.
thealexandrelara added a commit that referenced this pull request Aug 22, 2023
* Add block foundation

* Add block styles

* Add Dots Pager

* Move icons to the block folder

* Add block settings

* Add Pager to Product Gallery template

* Add setting to change Pager display mode

* Change the block description

* Fix the block icon color when selected

* Fix php cs errors

* Fix php cs errors

* Fix css lint errors

* Fix eslint error

* Move enum to its own file

* Remove unnused call to request context

* Add block template

* Fix php cs errors

* fix php cs errors

* improve docs

* Remove duplicate HTML element and added classnames for single product block (#10374)

* Show only products with rating (#10434)

* Add Product Gallery Thumbnails block (#10442)

* WIP Product Gallery: Add the Thumbnails block

* Product Gallery Thumbnails: Add block settings

* Add template for the Product Gallery block

* Add template for the Product Gallery block. Add the rest of the files.

* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.

* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.

* Product Gallery Thumbnails: Move the static template ouside of the component

* Make sure the context is set before accesing the array values

* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc

* Product Gallery Thumbnails: Fix TS error

* Product Gallery Thumbnails: Remove unused stylesheet

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.

* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically

* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down

* Product Gallery Thumbnails: Fix the eslint dependency error

* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file

* Product Gallery Thumbnails: Update the utils file

* Product Gallery Thumbnails: Update the utils file. Fix comment indentation

* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set

* Product Gallery: Rename clientId to productGalleryClientId

* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies

* Product Gallery Thumbnails: Combine all useEffect code together

* Product Gallery Thumbnails: Add a ThumbnailsPosition enum

* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Add missing dependency

* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block

* Product Gallery: Add crop, zoom and full-screen settings

* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error

* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error

* Product Gallery Thumbnails: Revert back to ts-ignore

* Revert "Product Gallery: Add crop, zoom and full-screen settings"

This reverts commit 7de1f0f.

* Remove propTypes (#10432)

* Fix badge wrong spacing on the newest arrivals pattern (#10446)

* Product Gallery: Add Crop, Zoom and Full-screen settings (#10445)

* WIP Product Gallery: Add the Thumbnails block

* Product Gallery Thumbnails: Add block settings

* Add template for the Product Gallery block

* Add template for the Product Gallery block. Add the rest of the files.

* Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block.

* Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.

* Product Gallery Thumbnails: Move the static template ouside of the component

* Make sure the context is set before accesing the array values

* Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc

* Product Gallery Thumbnails: Fix TS error

* Product Gallery Thumbnails: Remove unused stylesheet

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend.

* Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically

* Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down

* Product Gallery Thumbnails: Fix the eslint dependency error

* Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file

* Product Gallery Thumbnails: Update the utils file

* Product Gallery Thumbnails: Update the utils file. Fix comment indentation

* Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set

* Product Gallery: Rename clientId to productGalleryClientId

* Product Gallery Thumbnails: Combine the useEffect code having the same dependencies

* Product Gallery Thumbnails: Combine all useEffect code together

* Product Gallery Thumbnails: Add a ThumbnailsPosition enum

* Product Gallery Thumbnails: Update the thumbnailsPosition to an enum

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Fix TS errors

* Product Gallery Thumbnails: Add missing dependency

* Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block

* Product Gallery: Add crop, zoom and full-screen settings

* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error

* Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error

* Product Gallery Thumbnails: Revert back to ts-ignore

* Revert "Product Gallery: Add crop, zoom and full-screen settings"

This reverts commit 7de1f0f.

* Product Gallery: Add crop, zoom and full-screen settings

* Product Gallery: Remove the redundant React Fragment

* Remove nested filled and empty cart blocks in cart template (#10447)

* improve migration to blockified templates (#10415)

* fix compatibility with WP 6.2 (#10449)

* Add Product Gallery Pager to template

* Add Pager settings to Product Gallery block

* Remove save function and rename icon

* Use nullish coalescing operator for the block context

---------

Co-authored-by: Roy Ho <[email protected]>
Co-authored-by: Alba Rincón <[email protected]>
Co-authored-by: Daniel Dudzic <[email protected]>
Co-authored-by: Thomas Roberts <[email protected]>
Co-authored-by: Luigi Teschio <[email protected]>
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. skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Gallery block: Add Thumbnails block
2 participants