Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Refactor Product Query to use the latest Gutenberg APIs #7169

Merged
merged 4 commits into from
Sep 23, 2022

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Sep 16, 2022

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

Screenshot 2022-09-16 at 20 24 26

Screenshot 2022-09-16 at 20 24 40

Testing

Automated Tests

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

User Facing Testing

  1. Go to the Editor
  2. Make sure that “Product Query” and “Products on Sale” show up on the Gutenberg inserter
  3. Insert “Product Query”
  4. Make sure the products show up in the editor and front-end
  5. 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).
  6. Make sure you can toggle the Show Products on Sale and that it works on the front-end
  7. Repeat steps 3–5 for the “Products on Sale” except for the fact that the inspector controls should not display the Show Products on Sale toggle (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
  • Experimental

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.
@sunyatasattva sunyatasattva added type: refactor The issue/PR is related to refactoring. skip-changelog PRs that you don't want to appear in the changelog. block-type: product-query Issues related to/affecting all product-query variations. labels Sep 16, 2022
@sunyatasattva sunyatasattva self-assigned this Sep 16, 2022
@rubikuserbot rubikuserbot requested review from a team and danielwrobert and removed request for a team September 16, 2022 18:42
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 16, 2022

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

compressed-size-action

@danielwrobert
Copy link
Contributor

danielwrobert commented Sep 22, 2022

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:

CleanShot.2022-09-22.at.15.47.23.mp4

Copy link
Contributor

@danielwrobert danielwrobert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Your latest commit fixes the sale toggle and now everything tests as described.

Nice work! :shipit:

@github-actions github-actions bot added this to the 8.6.0 milestone Sep 23, 2022
@sunyatasattva
Copy link
Contributor Author

Amazing! Thanks for the review @danielwrobert !

@sunyatasattva sunyatasattva merged commit 6e6f8b6 into trunk Sep 23, 2022
@sunyatasattva sunyatasattva deleted the refactor/product-query-block branch September 23, 2022 13:07
@ntsekouras
Copy link

👋 - There is going to be a small change to this newly created API here: WordPress/gutenberg#44523. There is going to be a rename from allowControls to allowedControls.

senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
…7169)

* Refactor Product Query to use the latest Gutenberg APIs

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.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product-query Issues related to/affecting all product-query variations. skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants