Add to the Product Button block the support for the Product Query block

[gigitux]

trafficstars

This PR is blocked by #6911

This PR adds to the Product Button block the support for the Product Query block. Now, on the client side, when the Product Button Block is used in the Product Query block, the markup will be server side generated. Also, no javascript related to the Product Button block will be loaded.

Fixes #6785

Testing

N/A

User Facing Testing

1. Create a post/page and add the Product Query block.
2. Save it.
3. Open the frontend side and be sure that:

• no JS related to the Product Button block is loaded (the block is rendered on the server).
• The UI of the block is identical to on the editor side.
• The settings are reflected correctly (eg: custom style)

4. Go to WooCommerce Settings > Products > General.
5. Toggle Redirect to the cart page after successful addition.
6. Toggle Enable AJAX add to cart buttons on archives.
7. Be sure that the Product Button Block is used in the Product Query Block follows these settings.

Also, consider that this block has a different behavior when it is used in the Product Query block as respect when it is used in All Products. We will address this issue in the next iteration #6949

• [x] Do not include in the Testing Notes

WooCommerce Visibility

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

[github-actions[bot]]

The release ZIP for this PR is accessible via:

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

[github-actions[bot]]

Size Change: +72 B (0%)

Total Size: 893 kB

Filename	Size	Change
build/all-products.js	34 kB	+6 B (0%)
build/wc-blocks-style-rtl.css	23.9 kB	+33 B (0%)
build/wc-blocks-style.css	23.9 kB	+33 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.62 kB
build/active-filters.js	8.29 kB
build/all-products-frontend.js	18.2 kB
build/all-reviews.js	7.79 kB
build/attribute-filter-frontend.js	22.3 kB
build/attribute-filter.js	13.3 kB
build/blocks-checkout.js	17.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.17 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.44 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	4.63 kB
build/cart-blocks/cart-express-payment-frontend.js	5.08 kB
build/cart-blocks/cart-items-frontend.js	299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.25 kB
build/cart-blocks/cart-line-items-frontend.js	430 B
build/cart-blocks/cart-order-summary-frontend.js	1.1 kB
build/cart-blocks/cart-totals-frontend.js	322 B
build/cart-blocks/empty-cart-frontend.js	344 B
build/cart-blocks/filled-cart-frontend.js	782 B
build/cart-blocks/order-summary-coupon-form-frontend.js	2.64 kB
build/cart-blocks/order-summary-discount-frontend.js	2.15 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js	6.36 kB
build/cart-blocks/order-summary-shipping-frontend.js	427 B
build/cart-blocks/order-summary-subtotal-frontend.js	274 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.15 kB
build/cart-frontend.js	48 kB
build/cart.js	50.3 kB
build/checkout-blocks/actions-frontend.js	1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.11 kB
build/checkout-blocks/billing-address-frontend.js	889 B
build/checkout-blocks/contact-information-frontend.js	2.83 kB
build/checkout-blocks/express-payment-frontend.js	5.37 kB
build/checkout-blocks/fields-frontend.js	345 B
build/checkout-blocks/order-note-frontend.js	1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.64 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	2.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js	276 B
build/checkout-blocks/order-summary-frontend.js	1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js	602 B
build/checkout-blocks/order-summary-subtotal-frontend.js	274 B
build/checkout-blocks/order-summary-taxes-frontend.js	434 B
build/checkout-blocks/payment-frontend.js	7.68 kB
build/checkout-blocks/shipping-address-frontend.js	1.03 kB
build/checkout-blocks/shipping-methods-frontend.js	4.75 kB
build/checkout-blocks/terms-frontend.js	1.23 kB
build/checkout-blocks/totals-frontend.js	325 B
build/checkout-frontend.js	49.9 kB
build/checkout.js	43.7 kB
build/featured-category.js	13.2 kB
build/featured-product.js	13.4 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.84 kB
build/mini-cart-component-frontend.js	16.9 kB
build/mini-cart-contents-block/empty-cart-frontend.js	366 B
build/mini-cart-contents-block/filled-cart-frontend.js	229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js	4.69 kB
build/mini-cart-contents-block/footer-frontend.js	7.39 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	290 B
build/mini-cart-contents-block/shopping-button-frontend.js	288 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-contents.js	23.4 kB
build/mini-cart-frontend.js	1.72 kB
build/mini-cart.js	4.57 kB
build/price-filter-frontend.js	13.4 kB
build/price-filter.js	9.35 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	226 B
build/product-add-to-cart--product-button--product-image--product-title.js	2.69 kB
build/product-add-to-cart-frontend.js	2.6 kB
build/product-add-to-cart.js	6.87 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	432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js	302 B
build/product-button-frontend.js	1.9 kB
build/product-button.js	1.58 kB
build/product-categories.js	2.36 kB
build/product-category-list-frontend.js	890 B
build/product-category-list.js	503 B
build/product-category.js	8.69 kB
build/product-image-frontend.js	1.92 kB
build/product-image.js	1.61 kB
build/product-new.js	7.69 kB
build/product-on-sale.js	8.02 kB
build/product-price-frontend.js	1.93 kB
build/product-price.js	1.53 kB
build/product-query.js	646 B
build/product-rating-frontend.js	1.19 kB
build/product-rating.js	771 B
build/product-sale-badge-frontend.js	1.15 kB
build/product-sale-badge.js	816 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	1 kB
build/product-stock-indicator.js	623 B
build/product-summary-frontend.js	1.3 kB
build/product-summary.js	920 B
build/product-tag-list-frontend.js	883 B
build/product-tag-list.js	497 B
build/product-tag.js	8.05 kB
build/product-title-frontend.js	1.35 kB
build/product-title.js	938 B
build/product-top-rated.js	7.93 kB
build/products-by-attribute.js	8.62 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	21.5 kB
build/single-product.js	10.1 kB
build/stock-filter-frontend.js	7.62 kB
build/stock-filter.js	7.55 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-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	6.92 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/vendors--mini-cart-contents-block/footer-frontend.js	6.86 kB
build/wc-blocks-data.js	9.9 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	931 B
build/wc-blocks-registry.js	2.7 kB
build/wc-blocks-shared-context.js	1.51 kB
build/wc-blocks-shared-hocs.js	1.71 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	54.5 kB
build/wc-blocks.js	2.63 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 for the review! @danielwrobert 🚀

[sunyatasattva]

Just leaving this for posterity: this PR actually fixes https://github.com/woocommerce/woocommerce-blocks/issues/6794 not #6785