Add Product Query Support for Atomic Price Block

[danielwrobert]

trafficstars

Adds Product Query support for the atomic Price block.

On the client side, when the Price Block is used within the Product Query block, the markup will be rendered on the server side - no javascript related to the Price block will be loaded.

Fixes #

Accessibility

• [ ] I've tested using only a keyboard (no mouse)
• [ ] I've tested using a screen reader
• [ ] All animations respect prefers-reduced-motion
• [ ] All text has at least a 4.5 color contrast with its background

Other Checks

• [ ] This PR adds/removes a feature flag & I've updated this doc.
• [ ] This PR adds/removes an experimental interfaces and I've updated this doc.
• [ ] I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before	After

Testing

Automated Tests

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

User Facing Testing

• [ ] Do not include in the Testing Notes

WooCommerce Visibility

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

Performance Impact

Changelog

Add suggested changelog entry here.

[github-actions[bot]]

The release ZIP for this PR is accessible via:

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

[github-actions[bot]]

Size Change: +29 B (0%)

Total Size: 916 kB

Filename	Size	Change
build/all-products.js	33.6 kB	+29 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.62 kB
build/active-filters.js	8.3 kB
build/all-products-frontend.js	26.5 kB
build/all-reviews.js	7.79 kB
build/attribute-filter-frontend.js	22.4 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.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.63 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	4.66 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.23 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.3 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.1 kB
build/cart-blocks/cart-totals-frontend.js	321 B
build/cart-blocks/empty-cart-frontend.js	345 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	274 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.6 kB
build/cart-blocks/order-summary-shipping-frontend.js	429 B
build/cart-blocks/order-summary-subtotal-frontend.js	274 B
build/cart-blocks/order-summary-taxes-frontend.js	435 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.19 kB
build/cart-frontend.js	50.1 kB
build/cart.js	46.2 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	947 B
build/checkout-blocks/contact-information-frontend.js	3.03 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.88 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	601 B
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/payment-frontend.js	8 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	324 B
build/checkout-frontend.js	52.3 kB
build/checkout.js	40 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.29 kB
build/legacy-template.js	2.83 kB
build/mini-cart-component-frontend.js	16.8 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-frontend.js	2.96 kB
build/mini-cart-contents-block/items-frontend.js	236 B
build/mini-cart-contents-block/products-table-frontend.js	589 B
build/mini-cart-contents-block/shopping-button-frontend.js	287 B
build/mini-cart-contents-block/title-frontend.js	366 B
build/mini-cart-contents.js	16.8 kB
build/mini-cart-frontend.js	1.72 kB
build/mini-cart.js	4.57 kB
build/price-filter-frontend.js	13.5 kB
build/price-filter.js	9.4 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.66 kB
build/product-add-to-cart-frontend.js	1.25 kB
build/product-add-to-cart.js	6.47 kB
build/product-best-sellers.js	7.63 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	302 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	880 B
build/product-category-list.js	502 B
build/product-category.js	8.61 kB
build/product-image-frontend.js	1.91 kB
build/product-image.js	1.61 kB
build/product-new.js	7.62 kB
build/product-on-sale.js	7.94 kB
build/product-price-frontend.js	1.91 kB
build/product-price.js	1.53 kB
build/product-query.js	648 B
build/product-rating-frontend.js	1.18 kB
build/product-rating.js	774 B
build/product-sale-badge-frontend.js	1.15 kB
build/product-sale-badge.js	819 B
build/product-search.js	2.61 kB
build/product-sku-frontend.js	380 B
build/product-sku.js	379 B
build/product-stock-indicator-frontend.js	994 B
build/product-stock-indicator.js	623 B
build/product-summary-frontend.js	1.29 kB
build/product-summary.js	919 B
build/product-tag-list-frontend.js	876 B
build/product-tag-list.js	498 B
build/product-tag.js	7.99 kB
build/product-title-frontend.js	1.34 kB
build/product-title.js	938 B
build/product-top-rated.js	7.86 kB
build/products-by-attribute.js	8.53 kB
build/rating-filter-frontend.js	6.74 kB
build/rating-filter.js	5.53 kB
build/reviews-by-category.js	11.2 kB
build/reviews-by-product.js	12.3 kB
build/reviews-frontend.js	7.01 kB
build/single-product-frontend.js	29.3 kB
build/single-product.js	10 kB
build/stock-filter-frontend.js	7.64 kB
build/stock-filter.js	7.6 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	7.54 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	15.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	932 B
build/wc-blocks-registry.js	2.92 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.1 kB
build/wc-blocks-style.css	24 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}

[danielwrobert]

would it be a good occasion to migrated them to TypeScript while doing so? This seems it could be really beneficial for future-proofing them. What do you think?

@sunyatasattva yes, I think this is a good idea! Would you prefer refactoring this PR or merging it and then creating a follow-up PR?

[sunyatasattva]

@sunyatasattva yes, I think this is a good idea! Would you prefer refactoring this PR or merging it and then creating a follow-up PR?

I'd say we go ahead merging this PR and we refactor in the next one, just because the work is already done and we can already use it. But I think it makes sense for the next ones to bunch them up in one PR, would you agree?

[danielwrobert]

I'd say we go ahead merging this PR and we refactor in the next one, just because the work is already done and we can already use it. But I think it makes sense for the next ones to bunch them up in one PR, would you agree?

Yes, definitely, that makes sense to me as well!