woocommerce-blocks
woocommerce-blocks copied to clipboard
Published
20 hours ago •
woocommerce
woocommerce
Refactor Product Query to use the latest Gutenberg APIs
trafficstars
As we worked with Gutenberg folks in WordPress/gutenberg#43590, WordPress/gutenberg#43632 and WordPress/gutenberg#44093 we have created a standard API that could be used for our use-case. This PR refactors our WIP experimental work to use that standardized API.
Screenshots
Testing
Automated Tests
- [ ] Changes in this PR are covered by Automated Tests.
- [ ] Unit tests
- [ ] E2E tests
User Facing Testing
- Go to the Editor
- Make sure that “Product Query” and “Products on Sale” show up on the Gutenberg inserter
- Insert “Product Query”
- Make sure the products show up in the editor and front-end
- Make sure the the only inspector controls that show up in the editor are the following:
Layout,Columns,Order by,Filters > Keywords,Filters > Taxonomies,Show Products on Sale,Color,Advanced(see screenshot above). - Make sure you can toggle the Show Products on Sale and that it works on the front-end
- Repeat steps 3–5 for the “Products on Sale” except for the fact that the inspector controls should not display the
Show Products on Saletoggle (see screenshot above).
Warning It is normal that the preview won't update with the products on sale. This is being worked on in #6975.
- [ ] Do not include in the Testing Notes
WooCommerce Visibility
- [ ] WooCommerce Core
- [ ] Feature plugin
- [x] Experimental
The release ZIP for this PR is accessible via:
https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7169.zip
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: +19 kB (+2%)
Total Size: 893 kB
| Filename | Size | Change | |
|---|---|---|---|
build/active-filters-frontend.js |
7.62 kB | -7 B (0%) | |
build/active-filters.js |
8.29 kB | +17 B (0%) | |
build/all-products-frontend.js |
18.2 kB | +60 B (0%) | |
build/all-products.js |
34 kB | +83 B (0%) | |
build/all-reviews.js |
7.79 kB | +3 B (0%) | |
build/attribute-filter-frontend.js |
22.3 kB | +8 B (0%) | |
build/attribute-filter.js |
13.3 kB | +43 B (0%) | |
build/blocks-checkout.js |
17.5 kB | +23 B (0%) | |
build/cart-blocks/cart-accepted-payment-methods-frontend.js |
1.17 kB | +2 B (0%) | |
build/cart-blocks/cart-express-payment-frontend.js |
5.08 kB | -3 B (0%) | |
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js |
5.27 kB | +24 B (0%) | |
build/cart-blocks/cart-line-items-frontend.js |
430 B | +1 B (0%) | |
build/cart-blocks/cart-order-summary-frontend.js |
1.1 kB | -1 B (0%) | |
build/cart-blocks/empty-cart-frontend.js |
345 B | -1 B (0%) | |
build/cart-blocks/filled-cart-frontend.js |
781 B | -2 B (0%) | |
build/cart-blocks/order-summary-coupon-form-frontend.js |
2.64 kB | -1 B (0%) | |
build/cart-blocks/order-summary-discount-frontend.js |
2.15 kB | -1 B (0%) | |
build/cart-blocks/order-summary-fee-frontend.js |
273 B | -1 B (0%) | |
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js |
6.37 kB | -1 B (0%) | |
build/cart-blocks/order-summary-shipping-frontend.js |
427 B | -1 B (0%) | |
build/cart-blocks/order-summary-taxes-frontend.js |
434 B | -1 B (0%) | |
build/cart-blocks/proceed-to-checkout-frontend.js |
1.15 kB | +3 B (0%) | |
build/cart-frontend.js |
48 kB | +907 B (+2%) | |
build/cart.js |
50.3 kB | +8.45 kB (+20%) | 🚨 |
build/checkout-blocks/actions-frontend.js |
1.42 kB | -3 B (0%) | |
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js |
4.11 kB | -6 B (0%) | |
build/checkout-blocks/billing-address-frontend.js |
890 B | +2 B (0%) | |
build/checkout-blocks/express-payment-frontend.js |
5.37 kB | -6 B (0%) | |
build/checkout-blocks/fields-frontend.js |
345 B | +1 B (0%) | |
build/checkout-blocks/order-note-frontend.js |
1.08 kB | -1 B (0%) | |
build/checkout-blocks/order-summary-cart-items-frontend.js |
3.66 kB | +25 B (+1%) | |
build/checkout-blocks/order-summary-coupon-form-frontend.js |
2.79 kB | +2 B (0%) | |
build/checkout-blocks/order-summary-discount-frontend.js |
2.27 kB | -2 B (0%) | |
build/checkout-blocks/order-summary-shipping-frontend.js |
600 B | -2 B (0%) | |
build/checkout-blocks/order-summary-subtotal-frontend.js |
275 B | +1 B (0%) | |
build/checkout-blocks/order-summary-taxes-frontend.js |
435 B | +1 B (0%) | |
build/checkout-blocks/payment-frontend.js |
7.68 kB | -3 B (0%) | |
build/checkout-blocks/shipping-address-frontend.js |
1.03 kB | +1 B (0%) | |
build/checkout-blocks/shipping-methods-frontend.js |
4.75 kB | +2 B (0%) | |
build/checkout-blocks/totals-frontend.js |
325 B | -1 B (0%) | |
build/checkout-frontend.js |
49.9 kB | +660 B (+1%) | |
build/checkout.js |
43.7 kB | +546 B (+1%) | |
build/featured-category.js |
13.2 kB | +20 B (0%) | |
build/featured-product.js |
13.4 kB | +23 B (0%) | |
build/handpicked-products.js |
7.33 kB | +47 B (+1%) | |
build/legacy-template.js |
2.84 kB | +3 B (0%) | |
build/mini-cart-component-frontend.js |
16.9 kB | +51 B (0%) | |
build/mini-cart-contents-block/filled-cart-frontend.js |
229 B | -1 B (0%) | |
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js |
4.69 kB | -1 B (0%) | |
build/mini-cart-contents-block/footer-frontend.js |
7.39 kB | +413 B (+6%) | 🔍 |
build/mini-cart-contents-block/title-frontend.js |
367 B | -1 B (0%) | |
build/mini-cart-contents.js |
23.4 kB | +599 B (+3%) | |
build/mini-cart-frontend.js |
1.72 kB | +1 B (0%) | |
build/mini-cart.js |
4.57 kB | +12 B (0%) | |
build/price-filter-frontend.js |
13.4 kB | +3 B (0%) | |
build/price-filter.js |
9.35 kB | +15 B (0%) | |
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js |
226 B | +3 B (+1%) | |
build/product-add-to-cart--product-button--product-image--product-title.js |
2.69 kB | +35 B (+1%) | |
build/product-add-to-cart-frontend.js |
2.6 kB | -4.34 kB (-63%) | 🏆 |
build/product-add-to-cart.js |
6.87 kB | -4 B (0%) | |
build/product-best-sellers.js |
7.7 kB | +79 B (+1%) | |
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js |
432 B | -3 B (-1%) | |
build/product-button--product-image--product-rating--product-sale-badge--product-title.js |
302 B | +2 B (+1%) | |
build/product-button-frontend.js |
1.89 kB | +12 B (+1%) | |
build/product-button.js |
1.58 kB | +13 B (+1%) | |
build/product-categories.js |
2.36 kB | -5 B (0%) | |
build/product-category-list-frontend.js |
879 B | -4 B (0%) | |
build/product-category-list.js |
503 B | +1 B (0%) | |
build/product-category.js |
8.69 kB | +77 B (+1%) | |
build/product-image-frontend.js |
1.91 kB | +30 B (+2%) | |
build/product-image.js |
1.61 kB | +21 B (+1%) | |
build/product-new.js |
7.69 kB | +68 B (+1%) | |
build/product-on-sale.js |
8.02 kB | +77 B (+1%) | |
build/product-price-frontend.js |
1.91 kB | +12 B (+1%) | |
build/product-price.js |
1.53 kB | +14 B (+1%) | |
build/product-query.js |
646 B | -2 B (0%) | |
build/product-rating-frontend.js |
1.18 kB | +12 B (+1%) | |
build/product-rating.js |
771 B | +32 B (+4%) | |
build/product-sale-badge-frontend.js |
1.14 kB | +9 B (+1%) | |
build/product-sale-badge.js |
816 B | +15 B (+2%) | |
build/product-search.js |
2.61 kB | -7 B (0%) | |
build/product-sku.js |
380 B | +1 B (0%) | |
build/product-stock-indicator-frontend.js |
992 B | -4 B (0%) | |
build/product-summary-frontend.js |
1.28 kB | -3 B (0%) | |
build/product-tag-list-frontend.js |
873 B | -3 B (0%) | |
build/product-tag.js |
8.05 kB | +53 B (+1%) | |
build/product-title-frontend.js |
1.34 kB | +26 B (+2%) | |
build/product-title.js |
938 B | +17 B (+2%) | |
build/product-top-rated.js |
7.93 kB | +68 B (+1%) | |
build/products-by-attribute.js |
8.62 kB | +90 B (+1%) | |
build/reviews-by-category.js |
11.3 kB | +87 B (+1%) | |
build/reviews-by-product.js |
12.4 kB | +110 B (+1%) | |
build/single-product-frontend.js |
21.5 kB | +66 B (0%) | |
build/single-product.js |
10.1 kB | +39 B (0%) | |
build/stock-filter-frontend.js |
7.61 kB | -2 B (0%) | |
build/stock-filter.js |
7.55 kB | +33 B (0%) | |
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js |
0 B | -5.26 kB (removed) | 🏆 |
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js |
4.85 kB | +2 B (0%) | |
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js |
0 B | -19.1 kB (removed) | 🏆 |
build/vendors--product-add-to-cart-frontend.js |
0 B | -7.53 kB (removed) | 🏆 |
build/wc-blocks-data.js |
9.9 kB | +24 B (0%) | |
build/wc-blocks-editor-style-rtl.css |
5.24 kB | +141 B (+3%) | |
build/wc-blocks-editor-style.css |
5.24 kB | +140 B (+3%) | |
build/wc-blocks-shared-context.js |
1.51 kB | -12 B (-1%) | |
build/wc-blocks-shared-hocs.js |
1.71 kB | -1 B (0%) | |
build/wc-blocks-style-rtl.css |
23.9 kB | +104 B (0%) | |
build/wc-blocks-style.css |
23.8 kB | +106 B (0%) | |
build/wc-blocks-vendors.js |
54.5 kB | +14 B (0%) | |
build/cart-blocks/cart-cross-sells-frontend.js |
253 B | +253 B (new file) | 🆕 |
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js |
5.43 kB | +5.43 kB (new file) | 🆕 |
build/cart-blocks/cart-cross-sells-products-frontend.js |
4.66 kB | +4.66 kB (new file) | 🆕 |
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-frontend.js |
5.26 kB | +5.26 kB (new file) | 🆕 |
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js |
19.1 kB | +19.1 kB (new file) | 🆕 |
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js |
6.92 kB | +6.92 kB (new file) | 🆕 |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
build/cart-blocks/cart-items-frontend.js |
299 B |
build/cart-blocks/cart-totals-frontend.js |
322 B |
build/cart-blocks/order-summary-heading-frontend.js |
454 B |
build/cart-blocks/order-summary-subtotal-frontend.js |
274 B |
build/checkout-blocks/contact-information-frontend.js |
2.84 kB |
build/checkout-blocks/order-summary-fee-frontend.js |
276 B |
build/checkout-blocks/order-summary-frontend.js |
1.11 kB |
build/checkout-blocks/terms-frontend.js |
1.23 kB |
build/general-style-rtl.css |
1.29 kB |
build/general-style.css |
1.29 kB |
build/mini-cart-contents-block/empty-cart-frontend.js |
366 B |
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/price-format.js |
1.19 kB |
build/product-sku-frontend.js |
380 B |
build/product-stock-indicator.js |
623 B |
build/product-summary.js |
920 B |
build/product-tag-list.js |
497 B |
build/reviews-frontend.js |
7.02 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--mini-cart-contents-block/footer-frontend.js |
6.86 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-vendors-style-rtl.css |
1.95 kB |
build/wc-blocks-vendors-style.css |
1.95 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 |
Make sure that “Product Query” and “Products on Sale” show up on the Gutenberg inserter
The Gutenberg feature plugin needs to be enabled for the PQ block to show up in the inserter. It also required npm start, as npm run build won't include it. This seems obvious now but just noting because it tripped me up for a min, initially.
Make sure you can toggle the Show Products on Sale and that it works on the front-end
This does not seem to be functioning, as described:
https://user-images.githubusercontent.com/481776/191837942-9aae7617-c463-4154-a9f3-50796c79ca38.mp4
👋 - There is going to be a small change to this newly created API here: https://github.com/WordPress/gutenberg/pull/44523. There is going to be a rename from allowControls to allowedControls.
