[Product Query] Add support for the Filter By Attributes block

[gigitux]

trafficstars

This PR adds support for the Filter By Attributes block. This PR is blocked by #7162.

#6790

Screenshots

Testing

Automated Tests

User Facing Testing

1. Create a new post/page and add the Product Query block and the Filter By Attributes block.
2. On the front-end side, apply some filters and be sure that they are applied correctly.
3. Edit the post/page and add the Product Query block and enable "Show only products on sale" option.
4. On the front-end side, apply some filters and be sure that they are applied correctly.
5. Edit the post/page and add a Query Loop block.
6. On the front-end side, apply some filters, be sure that the filters are applied correctly and the Query Loop works correctly (continue to show posts).
7. Do the same steps (1-6), but instead add in a post/page, add the blocks in an FSE template (for example Product Catalog template).

Note During your test, pay attention to the pagination too.

• [x] Do not include in the Testing Notes

WooCommerce Visibility

• [ ] WooCommerce Core
• [ ] Feature plugin
• [x] Experimental

Performance Impact

Changelog

N/A

[github-actions[bot]]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7186.zip

[github-actions[bot]]

Size Change: 0 B

Total Size: 992 kB

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.73 kB
build/active-filters-wrapper-frontend.js	6 kB
build/active-filters.js	7.44 kB
build/all-products-frontend.js	26.5 kB
build/all-products.js	33.6 kB
build/all-reviews.js	7.79 kB
build/attribute-filter-frontend.js	22.5 kB
build/attribute-filter-wrapper-frontend.js	7.04 kB
build/attribute-filter.js	12.4 kB
build/blocks-checkout.js	17.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js	5.64 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	4.67 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.1 kB
build/cart-blocks/cart-express-payment-frontend.js	786 B
build/cart-blocks/cart-items-frontend.js	299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.31 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.11 kB
build/cart-blocks/cart-totals-frontend.js	320 B
build/cart-blocks/empty-cart-frontend.js	346 B
build/cart-blocks/filled-cart-frontend.js	783 B
build/cart-blocks/order-summary-coupon-form-frontend.js	2.73 kB
build/cart-blocks/order-summary-discount-frontend.js	2.16 kB
build/cart-blocks/order-summary-fee-frontend.js	272 B
build/cart-blocks/order-summary-heading-frontend.js	455 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js	6.61 kB
build/cart-blocks/order-summary-shipping-frontend.js	428 B
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	433 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.19 kB
build/cart-frontend.js	54.5 kB
build/cart.js	47.5 kB
build/checkout-blocks/actions-frontend.js	1.78 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.98 kB
build/checkout-blocks/billing-address-frontend.js	954 B
build/checkout-blocks/contact-information-frontend.js	3.02 kB
build/checkout-blocks/express-payment-frontend.js	1.17 kB
build/checkout-blocks/fields-frontend.js	343 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	2.89 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-frontend.js	1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js	603 B
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	433 B
build/checkout-blocks/payment-frontend.js	7.86 kB
build/checkout-blocks/shipping-address-frontend.js	1.06 kB
build/checkout-blocks/shipping-methods-frontend.js	4.89 kB
build/checkout-blocks/terms-frontend.js	1.64 kB
build/checkout-blocks/totals-frontend.js	323 B
build/checkout-frontend.js	56.6 kB
build/checkout.js	41.3 kB
build/featured-category.js	13.2 kB
build/featured-product.js	13.5 kB
build/filter-wrapper-frontend.js	13.8 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.29 kB
build/general-style.css	1.29 kB
build/handpicked-products.js	7.33 kB
build/legacy-template.js	2.83 kB
build/mini-cart-component-frontend.js	20.2 kB
build/mini-cart-contents-block/empty-cart-frontend.js	367 B
build/mini-cart-contents-block/filled-cart-frontend.js	230 B
build/mini-cart-contents-block/footer-frontend.js	2.98 kB
build/mini-cart-contents-block/items-frontend.js	236 B
build/mini-cart-contents-block/products-table-frontend.js	590 B
build/mini-cart-contents-block/shopping-button-frontend.js	287 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-contents.js	16.8 kB
build/mini-cart-frontend.js	1.71 kB
build/mini-cart.js	4.57 kB
build/price-filter-frontend.js	13.6 kB
build/price-filter-wrapper-frontend.js	6.95 kB
build/price-filter.js	8.47 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js	227 B
build/product-add-to-cart--product-button--product-image--product-title.js	2.67 kB
build/product-add-to-cart-frontend.js	1.25 kB
build/product-add-to-cart.js	6.48 kB
build/product-best-sellers.js	7.7 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	433 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js	301 B
build/product-button-frontend.js	1.89 kB
build/product-button.js	1.58 kB
build/product-categories.js	2.36 kB
build/product-category-list-frontend.js	881 B
build/product-category-list.js	502 B
build/product-category.js	8.69 kB
build/product-image-frontend.js	1.91 kB
build/product-image.js	1.62 kB
build/product-new.js	7.69 kB
build/product-on-sale.js	8.01 kB
build/product-price-frontend.js	1.92 kB
build/product-price.js	1.53 kB
build/product-query.js	2.46 kB
build/product-rating-frontend.js	1.18 kB
build/product-rating.js	773 B
build/product-sale-badge-frontend.js	1.15 kB
build/product-sale-badge.js	817 B
build/product-search.js	2.61 kB
build/product-sku-frontend.js	380 B
build/product-sku.js	380 B
build/product-stock-indicator-frontend.js	997 B
build/product-stock-indicator.js	624 B
build/product-summary-frontend.js	1.29 kB
build/product-summary.js	921 B
build/product-tag-list-frontend.js	877 B
build/product-tag-list.js	497 B
build/product-tag.js	8.05 kB
build/product-title-frontend.js	1.34 kB
build/product-title.js	937 B
build/product-top-rated.js	7.93 kB
build/products-by-attribute.js	8.61 kB
build/rating-filter-frontend.js	7.09 kB
build/rating-filter-wrapper-frontend.js	5.34 kB
build/rating-filter.js	6.26 kB
build/reviews-by-category.js	11.3 kB
build/reviews-by-product.js	12.4 kB
build/reviews-frontend.js	7.01 kB
build/single-product-frontend.js	32.3 kB
build/single-product.js	10.1 kB
build/stock-filter-frontend.js	7.73 kB
build/stock-filter-wrapper-frontend.js	5.99 kB
build/stock-filter.js	6.65 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js	6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js	8.21 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js	19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js	7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js	4.85 kB
build/wc-blocks-data.js	18.3 kB
build/wc-blocks-editor-style-rtl.css	5.24 kB
build/wc-blocks-editor-style.css	5.24 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	932 B
build/wc-blocks-registry.js	2.93 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.72 kB
build/wc-blocks-style-rtl.css	24.2 kB
build/wc-blocks-style.css	24.1 kB
build/wc-blocks-vendors-style-rtl.css	1.95 kB
build/wc-blocks-vendors-style.css	1.95 kB
build/wc-blocks-vendors.js	62.4 kB
build/wc-blocks.js	2.62 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB

_{compressed-size-action}

[gigitux]

Thanks, @sunyatasattva for your great review! I addressed almost all your feedback, and I replied to some comments! Let me know what you think!

Also, I created another issue regarding the filters #7245

[github-actions[bot]]

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

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

[github-actions[bot]]

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
reviews-frontend.js	react, wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill		⚠️
all-products-frontend.js	lodash, react, 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-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
price-filter-frontend.js	lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url		⚠️
attribute-filter-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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		⚠️
stock-filter-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url		⚠️
active-filters-frontend.js	lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
rating-filter-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url		⚠️
cart-frontend.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-compose, wp-data, wp-deprecated, wp-dom, 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		⚠️
checkout-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, 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		⚠️
mini-cart-frontend.js	wc-settings, wp-polyfill		⚠️
single-product-frontend.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-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
filter-wrapper-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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		⚠️
mini-cart-component-frontend.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, 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		⚠️

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