Enable Product Collection as a core feature

[kmanijak]

• Enable Product Collection as a Core feature
• Add "(Beta)" to block title
• Prevent duplicated Product Title and Product Summary blocks in the inserter (Fix: disable product query title and summary variations from inserter in favour of Product Collection ones #10548)

Fixes #10430

Testing

Automated Tests

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

Product Collection has E2E and PHP Unit Tests covering some parts of the functionalities.

User Facing Testing

This PR enables a block that's been developed for a couple of months. Product Collection includes many functionalities and each of the changes at the moment of merging the particular functionalities. I don't think we should test ALL of them again, especially since the testing steps would be unreadable. However, I believe the major paths should be re-tested.

In some cases, I linked PRs. In that case, please refer to the testing scenarios from respective PR:

Major scenarios

Inserting

0. This PR should be tested in production build, so use npm run build:deploy if you test locally. Ignore this step when testing plugin as a whole.
1. Go to Editor
2. Type "Product Collection" and "Products (Beta)"
3. In both cases Product Collection (Beta) should appear in the inserter
4. Try to insert it
5. It should appear correctly in the Editor
6. Save and make sure it displays correctly in the Frontend

Inherit from query template

1. Product Collection - Editor settings: Inherit query from template #9358

Filters

1. Add Product Collection and Products (Beta) block side by side
2. Disable "Inherit query from template" in both
3. Set of filters should appear in the Inspector Controls
4. Play around with the filters setting up the same conditions in both cases (be aware Product Collection offers more filters than Products (Beta), so you may not be able to recreate all of the scenarios in Products (Beta) block)
5. Treat Products (Beta) block as a reference - the results in product grid should be the same in both cases. We look for discrepancies between blocks. Keep in mind in some scenarios filters may be mutually exclusive or there may be some existing bugs. If they occur in both blocks, feel free to report it but it's not a blocker to release Product Collection.

Here is the list of filters for reference if you prefer to follow some specific scenarios:

• Product Collection - Filters: On Sale #9361
• Product Collection - Filters: Stock Status #9362
• Product Collection - Filters: Attributes #9363
• Product Collection - Filters: Taxonomies #9364
• Product Collection - Filters: Keyword #9365
• Product Collection - Filters: Handpicked Products #9722

Global Styles

1. Add Product Collection and Products (Beta) block side by side
2. Play around with the Global Styles of Product Collection/Products, Product Template and particular Product Elements.
3. As in case of Filters we look for discrepancies between blocks. If there's bug that occur in both blocks, feel free to report it but it's not a blocker to release Product Collection.

Product Elements

1. Make sure you're able to add all of the following blocks in Product Template of Products Collection

• Product Image
• Product Title
• Product Price
• Product SKU
• Product Summary
• Product Rating
• Product Stock Indicator
• On sale badge
• Add to Cart Button

Others - play with it

1. Play with Product Collection as you would as a merchant. Test it, try to break it. Think of stuff we didn't think of and try it out!

• Do not include in the Testing Notes
• Should be tested by the development team exclusively

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Enable Product Collection block

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10524.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-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-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-pager.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
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	react, 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-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-polyfill		⚠️
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		⚠️

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

TypeScript Errors Report

• Files with errors: 474
• Total errors: 2251

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: -487 B (0%)

Total Size: 1.43 MB

Filename	Size	Change
build/active-filters.js	7.5 kB	-2 B (0%)
build/all-products.js	41.3 kB	+9 B (0%)
build/all-reviews.js	7.76 kB	-1 B (0%)
build/attribute-filter.js	13.1 kB	-4 B (0%)
build/breadcrumbs.js	2.27 kB	+3 B (0%)
build/cart-blocks/cart-accepted-payment-methods-style.js	137 B	+1 B (+1%)
build/cart-blocks/cart-cross-sells-products-style.js	138 B	+1 B (+1%)
build/cart-blocks/cart-cross-sells-style.js	251 B	+1 B (0%)
build/cart-blocks/cart-order-summary-style.js	318 B	-1 B (0%)
build/cart-blocks/order-summary-discount-style.js	136 B	-1 B (-1%)
build/cart-blocks/order-summary-fee-style.js	137 B	+1 B (+1%)
build/cart-blocks/order-summary-shipping-style.js	178 B	+1 B (+1%)
build/cart-blocks/order-summary-taxes-style.js	177 B	-1 B (-1%)
build/cart-blocks/proceed-to-checkout-style.js	1.09 kB	-1 B (0%)
build/catalog-sorting.js	1.71 kB	+1 B (0%)
build/checkout-blocks/actions-style.js	682 B	+2 B (0%)
build/checkout-blocks/billing-address-style.js	533 B	+1 B (0%)
build/checkout-blocks/contact-information-style.js	605 B	-1 B (0%)
build/checkout-blocks/fields-style.js	250 B	+1 B (0%)
build/checkout-blocks/order-summary-coupon-form-style.js	138 B	+1 B (+1%)
build/checkout-blocks/order-summary-discount-style.js	136 B	-2 B (-1%)
build/checkout-blocks/order-summary-shipping-style.js	138 B	+1 B (+1%)
build/checkout-blocks/order-summary-taxes-style.js	177 B	-1 B (-1%)
build/checkout-blocks/payment-style.js	460 B	-1 B (0%)
build/checkout-blocks/pickup-options-style.js	439 B	-1 B (0%)
build/checkout-blocks/shipping-address-style.js	476 B	+1 B (0%)
build/checkout-blocks/shipping-method-style.js	1.35 kB	-2 B (0%)
build/featured-category.js	14.9 kB	+4 B (0%)
build/featured-product.js	15.1 kB	+1 B (0%)
build/filter-wrapper.js	2.39 kB	+1 B (0%)
build/handpicked-products.js	7.97 kB	+4 B (0%)
build/legacy-template.js	8.14 kB	+4 B (0%)
build/mini-cart-contents-block/checkout-button-style.js	466 B	+1 B (0%)
build/mini-cart-contents-block/footer-style.js	2.35 kB	-1 B (0%)
build/mini-cart-contents-block/products-table-style.js	5.32 kB	-3 B (0%)
build/mini-cart-contents-block/shopping-button-style.js	396 B	-2 B (-1%)
build/mini-cart-contents-block/title-label-style.js	301 B	+1 B (0%)
build/mini-cart-contents-block/title-style.js	438 B	+1 B (0%)
build/mini-cart-contents.js	17.6 kB	+4 B (0%)
build/mini-cart.js	6.35 kB	+2 B (0%)
build/price-filter.js	8.53 kB	-1 B (0%)
build/product-add-to-cart.js	8.55 kB	-3 B (0%)
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js	933 B	+1 B (0%)
build/product-best-sellers.js	8.32 kB	+3 B (0%)
build/product-categories.js	2.72 kB	-3 B (0%)
build/product-category.js	9.29 kB	+2 B (0%)
build/product-collection.js	14.9 kB	+19 B (0%)
build/product-gallery-pager.js	3.5 kB	-1 B (0%)
build/product-gallery-thumbnails.js	3.91 kB	+1 B (0%)
build/product-gallery.js	7.51 kB	+3 B (0%)
build/product-image.js	1.51 kB	-1 B (0%)
build/product-new.js	8.6 kB	+3 B (0%)
build/product-on-sale.js	8.61 kB	+4 B (0%)
build/product-price.js	1.65 kB	-2 B (0%)
build/product-query.js	13.1 kB	+15 B (0%)
build/product-rating-counter.js	688 B	-1 B (0%)
build/product-summary.js	917 B	+1 B (0%)
build/product-tag.js	8.61 kB	-3 B (0%)
build/product-template.js	2.87 kB	-565 B (-16%)	👏
build/product-title.js	963 B	-1 B (0%)
build/product-top-rated.js	8.86 kB	+2 B (0%)
build/products-by-attribute.js	9.63 kB	+4 B (0%)
build/rating-filter.js	6.88 kB	+3 B (0%)
build/reviews-by-category.js	12 kB	+3 B (0%)
build/reviews-by-product.js	13.1 kB	+4 B (0%)
build/single-product.js	11.2 kB	+1 B (0%)
build/stock-filter.js	7.6 kB	-1 B (0%)
build/store-notices.js	1.69 kB	+1 B (0%)
build/vendors--cart-blocks/proceed-to-checkout-style.js	178 B	-1 B (-1%)
build/vendors--checkout-blocks/shipping-method-style.js	11.7 kB	-1 B (0%)
build/wc-blocks-editor-style-rtl.css	6.44 kB	+2 B (0%)
build/wc-blocks-editor-style.css	6.44 kB	+2 B (0%)
build/wc-blocks-vendors.js	65.5 kB	-1 B (0%)
build/wc-blocks.js	2.62 kB	+1 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.57 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	929 B
build/active-filters-wrapper-frontend.js	7.58 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.95 kB
build/all-products-rtl.css	4.4 kB
build/all-products.css	4.39 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.1 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	250 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.89 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 kB
build/cart-blocks/cart-express-payment-frontend.js	711 B
build/cart-blocks/cart-express-payment-style.js	137 B
build/cart-blocks/cart-items-frontend.js	284 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	136 B
build/cart-blocks/cart-order-summary-frontend.js	1.24 kB
build/cart-blocks/cart-totals-frontend.js	287 B
build/cart-blocks/cart-totals-style.js	228 B
build/cart-blocks/empty-cart-frontend.js	352 B
build/cart-blocks/empty-cart-style.js	345 B
build/cart-blocks/filled-cart-frontend.js	652 B
build/cart-blocks/filled-cart-style.js	310 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js	137 B
build/cart-blocks/order-summary-discount-frontend.js	2.04 kB
build/cart-blocks/order-summary-fee-frontend.js	271 B
build/cart-blocks/order-summary-heading-frontend.js	325 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	271 B
build/cart-blocks/order-summary-subtotal-style.js	136 B
build/cart-blocks/order-summary-taxes-frontend.js	433 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.41 kB
build/cart-frontend.js	29.7 kB
build/cart-rtl.css	9.71 kB
build/cart.css	9.7 kB
build/cart.js	45 kB
build/catalog-sorting-rtl.css	256 B
build/catalog-sorting.css	256 B
build/checkout-blocks/actions--checkout-blocks/terms-style.js	487 B
build/checkout-blocks/actions-frontend.js	1.81 kB
build/checkout-blocks/billing-address-frontend.js	4.3 kB
build/checkout-blocks/contact-information-frontend.js	2.03 kB
build/checkout-blocks/express-payment-frontend.js	1.12 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.64 kB
build/checkout-blocks/order-summary-cart-items-style.js	137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.73 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.22 kB
build/checkout-blocks/order-summary-fee-frontend.js	274 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-style.js	318 B
build/checkout-blocks/order-summary-subtotal-frontend.js	272 B
build/checkout-blocks/order-summary-subtotal-style.js	137 B
build/checkout-blocks/order-summary-taxes-frontend.js	433 B
build/checkout-blocks/payment-frontend.js	9.13 kB
build/checkout-blocks/pickup-options-frontend.js	4.13 kB
build/checkout-blocks/shipping-address-frontend.js	4.28 kB
build/checkout-blocks/shipping-method-frontend.js	2.59 kB
build/checkout-blocks/shipping-methods-frontend.js	5.68 kB
build/checkout-blocks/shipping-methods-style.js	416 B
build/checkout-blocks/terms-frontend.js	1.51 kB
build/checkout-blocks/terms-style.js	672 B
build/checkout-blocks/totals-frontend.js	333 B
build/checkout-blocks/totals-style.js	275 B
build/checkout-frontend.js	31.6 kB
build/checkout-rtl.css	9.08 kB
build/checkout.css	9.07 kB
build/checkout.js	47.7 kB
build/combobox-control-style-rtl.css	585 B
build/combobox-control-style.css	585 B
build/custom-select-control-style-rtl.css	479 B
build/custom-select-control-style.css	479 B
build/customer-account-rtl.css	388 B
build/customer-account.css	387 B
build/customer-account.js	3.18 kB
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/form-token-field-style-rtl.css	1.23 kB
build/form-token-field-style.css	1.22 kB
build/legacy-template-rtl.css	238 B
build/legacy-template.css	238 B
build/mini-cart-component-frontend.js	30.7 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js	248 B
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---a5b7fa58-style.js	930 B
build/mini-cart-contents-block/cart-button-frontend.js	1.69 kB
build/mini-cart-contents-block/cart-button-style.js	384 B
build/mini-cart-contents-block/checkout-button-frontend.js	1.77 kB
build/mini-cart-contents-block/empty-cart-frontend.js	358 B
build/mini-cart-contents-block/empty-cart-style.js	355 B
build/mini-cart-contents-block/filled-cart-frontend.js	267 B
build/mini-cart-contents-block/filled-cart-style.js	267 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.css	400 B
build/mini-cart-contents-block/items-frontend.js	228 B
build/mini-cart-contents-block/items-style.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	549 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	487 B
build/mini-cart-contents-block/title-frontend.js	1.86 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.58 kB
build/mini-cart-contents-block/title-items-counter-style.js	301 B
build/mini-cart-contents-block/title-label-frontend.js	1.51 kB
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-average-rating--product-button--product-image--product-price--product---1d132d69.js	273 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js	150 B
build/product-add-to-cart--product-image--product-title.js	319 B
build/product-add-to-cart-frontend.js	8.5 kB
build/product-add-to-cart-rtl.css	1.35 kB
build/product-add-to-cart.css	1.36 kB
build/product-average-rating-frontend.js	1.71 kB
build/product-average-rating.js	400 B
build/product-button-frontend.js	4.87 kB
build/product-button-interactivity-frontend.js	9.51 kB
build/product-button-rtl.css	1.12 kB
build/product-button.css	1.11 kB
build/product-button.js	3.88 kB
build/product-categories-rtl.css	651 B
build/product-categories.css	649 B
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-gallery-large-image.js	2.03 kB
build/product-gallery-pager-rtl.css	289 B
build/product-gallery-pager.css	289 B
build/product-gallery-rtl.css	464 B
build/product-gallery-thumbnails-rtl.css	272 B
build/product-gallery-thumbnails.css	271 B
build/product-gallery.css	462 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-query-rtl.css	347 B
build/product-query.css	347 B
build/product-rating-counter-frontend.js	2.01 kB
build/product-rating-frontend.js	2.35 kB
build/product-rating-rtl.css	244 B
build/product-rating-stars-frontend.js	2.25 kB
build/product-rating-stars-rtl.css	895 B
build/product-rating-stars.css	897 B
build/product-rating-stars.js	938 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-results-count.js	1.66 kB
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-search.js	2.63 kB
build/product-sku-frontend.js	1.84 kB
build/product-sku-rtl.css	237 B
build/product-sku.css	237 B
build/product-sku.js	521 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	707 B
build/product-summary-frontend.js	2.18 kB
build/product-summary-rtl.css	546 B
build/product-summary.css	546 B
build/product-template-rtl.css	418 B
build/product-template.css	418 B
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.4 kB
build/rating-filter-rtl.css	4.2 kB
build/rating-filter-wrapper-frontend.js	6.63 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-product-rtl.css	1.79 kB
build/reviews-by-product.css	1.79 kB
build/reviews-frontend.js	7.07 kB
build/single-product-rtl.css	375 B
build/single-product.css	375 B
build/snackbar-notice-style-rtl.css	672 B
build/snackbar-notice-style.css	671 B
build/stock-filter-frontend.js	21.6 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	606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.84 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.28 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	19.4 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	5.6 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--product-add-to-cart-frontend.js	7.52 kB
build/wc-all-blocks-style-rtl.css	29.2 kB
build/wc-all-blocks-style.css	29.2 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	21.9 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-vendors-style-rtl.css	1.95 kB
build/wc-blocks-vendors-style.css	1.95 kB
build/wc-blocks.css	2.46 kB
build/wc-interactivity.js	10.7 kB
build/wc-payment-method-bacs.js	817 B
build/wc-payment-method-cheque.js	813 B
build/wc-payment-method-cod.js	914 B
build/wc-payment-method-paypal.js	852 B
build/wc-settings.js	2.68 kB
build/wc-shipping-method-pickup-location.js	30.4 kB

_{compressed-size-action}

[nefeline]

Excellent work here @kmanijak and @imanish003 🎉 !

I've flagged one problem and left a few questions/suggestions.

Test Results

1. Inserting ( ✅ All tests pass - 1 question)

Type "Product Collection" and "Products (Beta)"
In both cases Product Collection (Beta) should appear in the inserter

❓ Question: When typing "Products (Beta)", both the Products (Beta) and the Product Collection (Beta) blocks are displayed: is that expected?

Try to insert it
It should appear correctly in the Editor
Save and make sure it displays correctly in the Frontend

✅ Confirmed the Product Collection (Beta) block can be inserted in the editor.
✅ Confirmed the Product Collection (Beta) block is correctly displayed on the front end.

2. Inherit from query template (✅ 3 success, ❌ 1 failure, 1 Suggestion)

1. Product Collection - Editor settings: Inherit query from template #9358
   (instructions copied from 9358)

I would recommend porting over the instructions from 9358 to this issue to facilitate/expedite the work for reviewers.

Testing with Product Archive templates
Open the Editor and navigate to the "Product Search Results"
Replace the existing 'Classic Template' block with the 'Product Collection' block.
After the 'Product Collection' block is successfully inserted, ensure that the 'Inherit query from template' option is enabled by default.

✅ Confirmed the 'Inherit query from template' option is enabled by default:

Save the changes.
Navigate to the frontend of your website. You can emulate a search for "shirt" by visiting the URL "/shop?s=shirt". Confirm that the search query shirt effectively displays related products.

✅ Confirmed the search results are returned correctly:

Head back to the Editor.
In the 'Product Collection' block, deactivate the 'Inherit query from template' option.
Subsequently, you should observe various settings and filters available in the inspector controls. Modify these filters and settings as required and validate immediately that the changes are visible within the Editor.

✅ Confirmed the settings are working as expected, and changes are visible in the editor.

Screen.Recording.2023-08-17.at.20.56.40.mov

Save your modifications and return to the frontend of your website.
Ensure that the adjustments made to the 'Product Collection' block within the Editor are accurately displayed on the frontend of your website.

❌ When Inherit query from template is disabled in the editor, the search for products doesn't work anymore:

Screen.Recording.2023-08-17.at.21.04.43.mov

Testing in Post
Create a new post
Add Product Collection block to the post
With the 'Product Collection' block selected, open the Inspector Controls (located in the right sidebar). Confirm that the option inherit query from template does not appear in the list of options. This is because it's relevant only for Product Archive pages and should not be visible in this context.

✅ Confirmed the inherit query from template option is not displayed when inserting the block in the post editor:

3. Filters ( ✅ Pass )

1. Add Product Collection and Products (Beta) block side by side
2. Disable "Inherit query from template" in both
3. Set of filters should appear in the Inspector Controls
4. Play around with the filters setting up the same conditions in both cases (be aware Product Collection offers more filters than Products (Beta), so you may not be able to recreate all of the scenarios in Products (Beta) block)
5. Treat Products (Beta) block as a reference - the results in product grid should be the same in both cases.

✅ Confirmed filters are working as expected.

4. Global Styles ( ✅ Pass, 1 Suggestion )

1. Add Product Collection and Products (Beta) block side by side
2. Play around with the Global Styles of Product Collection/Products, Product Template and particular Product Elements.
3. As in case of Filters we look for discrepancies between blocks. If there's bug that occur in both blocks, feel free to report it but it's not a blocker to release Product Collection.

✅ Confirmed styles are correctly applied. Tested with different global style variations and block level changes to color and typography.

Suggestion: can we add a few more details to the testing instructions for other folks going through this test step? While for us as a team, "Play around with the Global Styles" is very intuitive, I'm not sure if all folks on Global Step or anyone else testing have the same level of understanding.

5. Product Elements ( ✅ Pass, 1 Question )

1. Make sure you're able to add all of the following blocks in Product Template of Products Collection

• Product Image
• Product Title
• Product Price
• Product SKU
• Product Summary
• Product Rating
• Product Stock Indicator
• On sale badge
• Add to Cart Button

❓ Question: The "Product Summary" block is not available anywhere: did we intentionally remove this block, or is this a regression?

6. Others - play with it ✅

1. Play with Product Collection as you would as a merchant. Test it, try to break it. Think of stuff we didn't think of and try it out!

✅ I did a few extra tests, such as checking mobile view and rearranging blocks within the Product Collection block and confirmed things are working as expected.

[kmanijak]

@nefeline thanks for a great review!

1. Inserting

Question: When typing "Products (Beta)", both the Products (Beta) and the Product Collection (Beta) blocks are displayed: is that expected?

Yes, it was added in: #10112 considering that eventually Products (Beta) block will be hidden from the inserter, hence I think it makes sense to display Product Collection (Beta) as an alternative already. But if you think it's confusing we can revert that change and add it only when hiding Products (Beta) from inserter. What's your opinion on that?

2. Inherit from query template

I would recommend porting over the instructions from 9358 to this issue to facilitate/expedite the work for reviewers.

Yeah, good suggestion, will do!

❌ When Inherit query from template is disabled in the editor, the search for products doesn't work anymore:

I think that's expected. When you disable the "Inherit query from template" Product Collection becomes a static product grid fully controlled by the merchant. It displays whatever you configure in Editor and only if the "Inherit query from template" option is enabled Product Collection will adapt to the context, in this case displaying search results. The same behavior can be reproduced with Products (Beta) or Query Loop (from which the behavior was adapted) blocks.

Please let me know if that makes sense.

Also, I glanced through the testing instructions checking if there was some misleading point but didn't find it. Do you recall if there's a point that made the impression it should work as you described? 🙏

5. Product Elements

❓ Question: The "Product Summary" block is not available anywhere: did we intentionally remove this block, or is this a regression?

That's unexpected. The worst part being I cannot reproduce it:

Products (Beta)	Product Collection

Are there any specific conditions under which you faced that issue? Was it a post or template editor? 🤔

[nefeline]

Yes, it was added in: #10112 considering that eventually Products (Beta) block will be hidden from the inserter, hence I think it makes sense to display Product Collection (Beta) as an alternative already. But if you think it's confusing we can revert that change and add it only when hiding Products (Beta) from inserter. What's your opinion on that?

If hiding the Products (Beta) block from the inserter is something that we are planning to do sooner than later, then I think it's ok to keep it as is 👍 . In the long term, it can be confusing having the user look at two different options to insert products in their posts/templates, with the first one on the list being the one we are planning to retire Products (Beta) instead of the new one introduced here Product Collection (Beta).

Yeah, good suggestion, will do!

🙌

I think that's expected. When you disable the "Inherit query from template" Product Collection becomes a static product grid fully controlled by the merchant. It displays whatever you configure in Editor and only if the "Inherit query from template" option is enabled Product Collection will adapt to the context, in this case displaying search results. The same behavior can be reproduced with Products (Beta) or Query Loop (from which the behavior was adapted) blocks.

Please let me know if that makes sense.

Also, I glanced through the testing instructions checking if there was some misleading point but didn't find it. Do you recall if there's a point that made the impression it should work as you described? 🙏

IMO basically all arguments we used for making the filters contextual (which is now being addressed by @roykho and @dinhtungdu as part of woocommerce/woocommerce#42255 ) are also applicable here. If the store owner decided to display only products in stock in their store, users on their site should still be able to search for these products. At a minimum, in this first moment, I'd recommend not allowing disabling the "Inherit query from template" option when the Product Collection (Beta) block is inserted within the Product Search Results template, otherwise, this is the experience users will have:

Screen.Recording.2023-08-18.at.14.39.51.mov

That's unexpected. The worst part being I cannot reproduce it:

I can't reproduce what you are seeing 🤔 . As another example, here's a direct comparison between the Single Product block and the Product Collection (Beta) block when attempting to insert the Product Summary to them:

Screen.Recording.2023-08-18.at.13.51.28.mov

I also tried the same approach as you did, add a paragraph and insert the summary in it, also doesn't work:

Are there any specific conditions under which you faced that issue? Was it a post or template editor? 🤔

Not really, the product summary is simply unavailable across the board (both in the post and template editors). I'm glad to jump on a call & help narrow down the cause if that helps!

[imanish003]

Not really, the product summary is simply unavailable across the board (both in the post and template editors). I'm glad to jump on a call & help narrow down the cause if that helps!

I've started investigating, and I'm encountering a slightly different issue. In template editing:

• Everything appears to be functioning correctly, with only one Summary block visible.

However, when it comes to posts, I'm noticing the presence of two Summary blocks within the Single Product as you can see in demo below:

Screen.Recording.2023-08-23.at.11.16.07.AM.mov

@kmanijak It seems that we'll need to find an alternative solution to address our challenge of duplicate Title and Summary blocks. The approach we implemented in #10548 doesn't appear to be achieving the desired outcome. Can you reproduce this issue as well?

[imanish003]

@kmanijak @nefeline I closed it by mistake 🤦‍♂️

[imanish003]

Hi @nefeline 👋🏻

If the store owner decided to display only products in stock in their store, users on their site should still be able to search for these products. At a minimum, in this first moment, I'd recommend not allowing disabling the "Inherit query from template" option when the Product Collection (Beta) block is inserted within the Product Search Results template, otherwise, this is the experience users will have:

As we discussed during our call, it would be beneficial to create a separate discussion for this matter. Additionally, as agreed upon in the call, we concluded that this issue doesn't act as a roadblock for the release of the Product Collection block because:

• It mirrors the behavior of Query Loop and Products beta block.
• The scope of this also includes Products by category, tag, etc., Based on the decision, we will need to make the same change for these templates too.

I can't reproduce what you are seeing 🤔 . As another example, here's a direct comparison between the Single Product block and the Product Collection (Beta) block when attempting to insert the Product Summary to them:

I've successfully replicated the issue you raised concerning the unavailability of the Product Summary block in the inserter. I've resolved this in PR #10718 and incorporated it into this pull request. Could you please take another look at this?

I am extremely grateful for your comprehensive review of this pull request. Your efforts are highly appreciated! 🙌🏻

[nefeline]

Hi @imanish003,

Thanks for addressing all the feedback!

Regarding:

as agreed upon in the call, we concluded that this issue doesn't act as a roadblock for the release of the Product Collection block because:
It mirrors the behavior of Query Loop and Products beta block.
The scope of this also includes Products by category, tag, etc., Based on the decision, we will need to make the same change for these templates too.

Adding here that per @shaunandrews feedback, we will be removing this toggle, in favor of having "Collections" — one of which will be the default query. ref. p1692873557131709-slack-C02FL3X7KR6

I am extremely grateful for your comprehensive review of this pull request. Your efforts are highly appreciated! 🙌🏻

Likewise! Thanks for your promptness in addressing the problems flagged here during the code review and your efforts in developing this block 🥇