Enable Compatibility Layer for Product Collection

[kmanijak]

Product Collection has to be compatible with the extensions and cover the same extensibility points as Products (Beta) block does.

In this PR Compatibility Layer is enabled for Product Collection block.

Fixes #10194 and #10378

Testing

Automated Tests

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

User Facing Testing

Core tests - include in the testing steps (fix for #10378)

1. Go to Editor
2. Add Products (Beta) block
3. Add the following code to your site using the Code Snippets plugin:

add_action( 'woocommerce_before_shop_loop_item' , function () {
	echo 'Hook: woocommerce_before_shop_loop_item';
});

add_action( 'woocommerce_after_shop_loop_item' , function () {
	echo 'Hook: woocommerce_after_shop_loop_item';
});

4. Go to the frontend

Expected: The content is rendered above and below each product

Experimental tests - do not include in testing steps (fix for #10194)

1. Go to Editor and edit Product Catalog and Product Search Results
2. Clear customizations in both of them
3. If the Classic Template shows up, transform it to blockified template
4. Replace Products (Beta) block with Product Collection
5. Add Product Search block to the Header
6. Save templates
7. Add the following code to your site using the Code Snippets plugin, then reload the shop page on the front end to see if the test content is displayed at the expected position:

add_action( 'woocommerce_before_shop_loop_item' , function () {
	echo 'Hook: woocommerce_before_shop_loop_item';
});

Repeat for other hooks (script covering all of those actions at the bottom of PR for better readibility):

• woocommerce_before_main_content
• woocommerce_after_main_content
• woocommerce_before_shop_loop_item_title
• woocommerce_shop_loop_item_title
• woocommerce_after_shop_loop_item_title
• woocommerce_before_shop_loop_item
• woocommerce_after_shop_loop_item
• woocommerce_before_shop_loop
• woocommerce_after_shop_loop
• woocommerce_no_products_found - to check this scenario, you can use Product Search and type some phrase that won't return any results (e.g. "asdfasdf").

Double check these still work for Products (Beta) block by removing Product Collection and adding Products (Beta) block back.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

---

Appendix - script for testing steps

add_action( 'woocommerce_before_main_content' , function () {
	echo 'Hook: woocommerce_before_main_content';
});

add_action( 'woocommerce_after_main_content' , function () {
	echo 'Hook: woocommerce_after_main_content';
});

add_action( 'woocommerce_before_shop_loop_item_title' , function () {
	echo 'Hook: woocommerce_before_shop_loop_item_title';
});

add_action( 'woocommerce_shop_loop_item_title' , function () {
	echo 'Hook: woocommerce_shop_loop_item_title';
});

add_action( 'woocommerce_after_shop_loop_item_title' , function () {
	echo 'Hook: woocommerce_after_shop_loop_item_title';
});

add_action( 'woocommerce_before_shop_loop_item' , function () {
	echo 'Hook: woocommerce_before_shop_loop_item';
});

add_action( 'woocommerce_after_shop_loop_item' , function () {
	echo 'Hook: woocommerce_after_shop_loop_item';
});

add_action( 'woocommerce_before_shop_loop' , function () {
	echo 'Hook: woocommerce_before_shop_loop';
});

add_action( 'woocommerce_after_shop_loop' , function () {
	echo 'Hook: woocommerce_after_shop_loop';
});

add_action( 'woocommerce_no_products_found' , function () {
	echo 'Hook: woocommerce_no_products_found';
});

Changelog

Products: fix the before/after shop item hooks

[github-actions]

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: 0 B

Total Size: 1.34 MB

ℹ️ 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.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/active-filters.js	7.51 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-products.js	41.3 kB
build/all-reviews-rtl.css	1.79 kB
build/all-reviews.css	1.79 kB
build/all-reviews.js	7.77 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/attribute-filter.js	13.1 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs-rtl.css	232 B
build/breadcrumbs.css	232 B
build/breadcrumbs.js	2.15 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js	137 B
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 kB
build/cart-blocks/cart-express-payment-frontend.js	712 B
build/cart-blocks/cart-express-payment-style.js	137 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-order-summary-style.js	319 B
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/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	136 B
build/cart-blocks/order-summary-discount-frontend.js	2.04 kB
build/cart-blocks/order-summary-discount-style.js	137 B
build/cart-blocks/order-summary-fee-frontend.js	270 B
build/cart-blocks/order-summary-fee-style.js	136 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-shipping-style.js	178 B
build/cart-blocks/order-summary-subtotal-frontend.js	270 B
build/cart-blocks/order-summary-subtotal-style.js	136 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/order-summary-taxes-style.js	176 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.41 kB
build/cart-blocks/proceed-to-checkout-style.js	1.09 kB
build/cart-frontend.js	29.7 kB
build/cart-rtl.css	9.48 kB
build/cart.css	9.46 kB
build/cart.js	44.9 kB
build/catalog-sorting-rtl.css	256 B
build/catalog-sorting.css	256 B
build/catalog-sorting.js	1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js	485 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.19 kB
build/checkout-blocks/billing-address-style.js	532 B
build/checkout-blocks/contact-information-frontend.js	2.02 kB
build/checkout-blocks/contact-information-style.js	607 B
build/checkout-blocks/express-payment-frontend.js	1.11 kB
build/checkout-blocks/fields-frontend.js	301 B
build/checkout-blocks/fields-style.js	249 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-discount-style.js	136 B
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	11.9 kB
build/checkout-blocks/order-summary-shipping-style.js	137 B
build/checkout-blocks/order-summary-style.js	318 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/order-summary-taxes-style.js	176 B
build/checkout-blocks/payment-frontend.js	9.11 kB
build/checkout-blocks/payment-style.js	460 B
build/checkout-blocks/pickup-options-frontend.js	4.96 kB
build/checkout-blocks/pickup-options-style.js	441 B
build/checkout-blocks/shipping-address-frontend.js	4.17 kB
build/checkout-blocks/shipping-address-style.js	475 B
build/checkout-blocks/shipping-method-frontend.js	2.58 kB
build/checkout-blocks/shipping-method-style.js	1.35 kB
build/checkout-blocks/shipping-methods-frontend.js	6.51 kB
build/checkout-blocks/shipping-methods-style.js	417 B
build/checkout-blocks/terms-frontend.js	1.51 kB
build/checkout-blocks/terms-style.js	673 B
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.04 kB
build/checkout.css	9.03 kB
build/checkout.js	47.6 kB
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-category.js	14.9 kB
build/featured-product-rtl.css	1.02 kB
build/featured-product.css	1.02 kB
build/featured-product.js	15.1 kB
build/filter-wrapper-frontend.js	14.1 kB
build/filter-wrapper-rtl.css	375 B
build/filter-wrapper.css	375 B
build/filter-wrapper.js	2.39 kB
build/handpicked-products.js	7.97 kB
build/legacy-template-rtl.css	238 B
build/legacy-template.css	238 B
build/legacy-template.js	8.13 kB
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	248 B
build/mini-cart-contents-block/cart-button-frontend.js	1.68 kB
build/mini-cart-contents-block/cart-button-style.js	383 B
build/mini-cart-contents-block/checkout-button-frontend.js	1.77 kB
build/mini-cart-contents-block/checkout-button-style.js	464 B
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/filled-cart-style.js	268 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.34 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/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	546 B
build/mini-cart-contents-block/products-table-rtl.css	2.12 kB
build/mini-cart-contents-block/products-table-style.js	5.32 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/shopping-button-style.js	395 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-items-counter-style.js	302 B
build/mini-cart-contents-block/title-label-frontend.js	1.5 kB
build/mini-cart-contents-block/title-label-style.js	300 B
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-contents.js	17.6 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/mini-cart.js	6.35 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.56 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-filter.js	8.52 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	272 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.51 kB
build/product-add-to-cart-rtl.css	1.35 kB
build/product-add-to-cart.css	1.36 kB
build/product-add-to-cart.js	8.54 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-category.js	9.3 kB
build/product-collection.js	13.8 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-gallery-large-image.js	2.03 kB
build/product-gallery-thumbnails-rtl.css	272 B
build/product-gallery-thumbnails.css	271 B
build/product-gallery-thumbnails.js	3.91 kB
build/product-gallery.js	4.88 kB
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-image.js	1.51 kB
build/product-new.js	8.61 kB
build/product-on-sale.js	8.61 kB
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-query.js	12.8 kB
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-results-count.js	1.67 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.83 kB
build/product-sku-rtl.css	237 B
build/product-sku.css	237 B
build/product-sku.js	523 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-summary.js	920 B
build/product-tag.js	8.79 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/product-title.js	965 B
build/product-top-rated.js	8.88 kB
build/products-by-attribute.js	9.64 kB
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/rating-filter.js	6.89 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-by-product.js	13.1 kB
build/reviews-frontend.js	7.06 kB
build/single-product-rtl.css	375 B
build/single-product.css	375 B
build/single-product.js	11.2 kB
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/stock-filter.js	7.61 kB
build/store-notices.js	1.69 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--cart-blocks/proceed-to-checkout-style.js	179 B
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--checkout-blocks/shipping-method-style.js	11.7 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	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-editor-style-rtl.css	6.37 kB
build/wc-blocks-editor-style.css	6.38 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.js	65.5 kB
build/wc-blocks.css	2.46 kB
build/wc-blocks.js	2.63 kB
build/wc-interactivity.js	10.2 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}

[kmanijak]

Perhaps better testing steps would be to trigger hooks programmatically rather than by using extensions 🤔 What do you think @gigitux?

[gigitux]

Perhaps better testing steps would be to trigger hooks programmatically rather than by using extensions 🤔 What do you think @gigitux?

I suggest following the Tung approach #8172. Furthermore, it would be great to add some E2E tests. In the next few days, in the trunk it will be available an easy way to test hook with playwright: #10206

[kmanijak]

I suggest following the Tung approach #8172. Furthermore, it would be great to add some E2E tests. In the next few days, in the trunk it will be available an easy way to test hook with playwright: #10206

Thanks for this suggestion @gigitux! It was really helpful as I actually found two issues:

1. Adding hooks for Product Collection disables some hooks for Products (Beta) block
2. woocommerce_before_shop_loop_item and woocommerce_after_shop_loop_item do not work either for Product Collection or Products (Beta) on trunk

I'll raise an issue for 2., but 1. has to be fixed within this PR, so I'm switching this PR to draft until I fix it.

[kmanijak]

@gigitux I fixed both issues:

1. Adding hooks for Product Collection disables some hooks for Products (Beta) block

Commit: here
Solution: Previously I added new items to array with the same keys which simply overridden the previous keys. In this commit I change the logic a bit, so in the hooks array you can define a set of blocks to which the hook should be applied.

2. woocommerce_before_shop_loop_item and woocommerce_after_shop_loop_item do not work either for Product Collection or Products (Beta) on trunk

Commit: here
Solution: There's logic related to abstract core/null block that represents the single product. It has "artificial" block_name assigned and assignment happened AFTER the hooks where grouped based on block_name.

Furthermore, it would be great to add some E2E tests. In the next few days, in the trunk it will be available an easy way to test hook with playwright: #10206

Regarding tests I'm planning to add them next week (Cooldown), but this documentation looks promising!

[gigitux]

Thanks for your great work! 🚀

I added two comments. One should be addressed. For the second one, I want to get your feedback about it.

Also, I noticed that with your changes, the woocommerce_before_shop_loop and woocommerce_after_shop_loop hooks are injected into the page even if any product hasn't been found. For the Products block, I fixed this in a dedicated PR: #9464. I think that the approach should be the same.

[kmanijak]

Also, I noticed that with your changes, the woocommerce_before_shop_loop and woocommerce_after_shop_loop hooks are injected into the page even if any product hasn't been found. For the Products block, I fixed this in a dedicated PR: #9464. I think that the approach should be the same.

@gigitux, I didn't change that logic, though, this check is still in here.

I double-checked in the trunk and here's the outcome:

Products (trunk)	Products (this branch)	Product Collection

As you can see, the same hooked content appears on the page in each case. If you're saying that woocommerce_before_shop_loop_item and woocommerce_after_shop_loop_item should not be rendered in this case, I'd raise a separate issue to not block this PR. Unless I should test it differently?

[kmanijak]

I created an issue for the problem described in this comment: #10452

EDIT: and the fix: #10453

[gigitux]

Great work! LGTM! I just added a new comment about updating the comments on the AbstractTemplateCompatibility class (https://github.com/woocommerce/woocommerce-blocks/blob/6339f97e70b207a677f2f568c9b749c790eccc4c/src/Templates/AbstractTemplateCompatibility.php/#L99-L121).

BTW, I will pre-approve this PR! 🚀