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

Fix: Product Query: Update the Editor preview when custom attributes are changed#7366

Merged
dinhtungdu merged 3 commits intotrunkfrom
fix/6969
Oct 12, 2022
Merged

Fix: Product Query: Update the Editor preview when custom attributes are changed#7366
dinhtungdu merged 3 commits intotrunkfrom
fix/6969

Conversation

@dinhtungdu
Copy link
Copy Markdown
Member

@dinhtungdu dinhtungdu commented Oct 11, 2022

Fixes #6969

This PR is a rework of #6975 by @gigitux.

This PR fixes the issue with the editor preview for the Product Query Block by modifying the query arguments for the REST requests. This also fixes the styling issue of the On Sale toggle control.

I decided to keep the __woocommerceOnSale instead of following the approach in #6975 because:

  • The implementation is much simpler.
  • We don't need many custom query arguments. Most product query variations can be created by adjusting the default query:
    • Best selling products: order by popularity.
    • Newest products: order by date.
    • Top rated products: order by rating.
    • Handpicked products: use posts from post__in.

Accessibility

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

Screen.Recording.2022-10-11.at.21.21.16.mov

Testing

Automated Tests

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

User Facing Testing

  1. Add a Product Query block.
  2. Click on “Show only products on sale”.
  3. Notice that the block preview IS updated to show only products on sale.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fix: Product Query: Update the Editor preview when custom attributes are changed

@dinhtungdu dinhtungdu self-assigned this Oct 11, 2022
@rubikuserbot rubikuserbot requested review from a team and gigitux and removed request for a team October 11, 2022 14:42
@dinhtungdu dinhtungdu added status: needs review type: bug The issue/PR concerns a confirmed bug. block-type: product-grid Issues related to/affecting all product-grid type blocks. labels Oct 11, 2022
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Oct 11, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Oct 11, 2022 •
edited
Loading

Size Change: 0 B

Total Size: 962 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.72 kB
build/active-filters-wrapper-frontend.js 6.01 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.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 784 B
build/cart-blocks/cart-items-frontend.js 298 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.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 785 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 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.61 kB
build/cart-blocks/order-summary-shipping-frontend.js 430 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 kB
build/cart.js 46.2 kB
build/checkout-blocks/actions-frontend.js 1.79 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.98 kB
build/checkout-blocks/billing-address-frontend.js 948 B
build/checkout-blocks/contact-information-frontend.js 3.03 kB
build/checkout-blocks/express-payment-frontend.js 1.16 kB
build/checkout-blocks/fields-frontend.js 344 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 276 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 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 323 B
build/checkout-frontend.js 52.1 kB
build/checkout.js 40 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 10.6 kB
build/filter-wrapper.js 1.86 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.27 kB
build/legacy-template.js 2.84 kB
build/mini-cart-component-frontend.js 16.8 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.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.62 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 882 B
build/product-category-list.js 502 B
build/product-category.js 8.61 kB
build/product-image-frontend.js 1.92 kB
build/product-image.js 1.62 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 1.92 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 773 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 379 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 920 B
build/product-tag-list-frontend.js 878 B
build/product-tag-list.js 496 B
build/product-tag.js 8 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 7.39 kB
build/rating-filter.js 7.87 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7 kB
build/single-product-frontend.js 29.2 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.72 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 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.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
gigitux approved these changes Oct 12, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

Thanks for working on this! LGTM 🚢

@gigitux gigitux mentioned this pull request Oct 12, 2022
Closed
@dinhtungdu dinhtungdu merged commit 47cd3b0 into trunk Oct 12, 2022
@dinhtungdu dinhtungdu deleted the fix/6969 branch October 12, 2022 10:27
This was referenced Oct 13, 2022
Merged
Merged
@opr opr added this to the 8.8.0 milestone Oct 24, 2022
sunyatasattva pushed a commit that referenced this pull request Oct 26, 2022
@dinhtungdu @sunyatasattva
Fix: Product Query: Update the Editor preview when custom attributes …
0f91d95 
…are changed (#7366)
@Aljullu Aljullu added the skip-changelog PRs that you don't want to appear in the changelog. label Oct 26, 2022
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
@dinhtungdu @senadir
Fix: Product Query: Update the Editor preview when custom attributes …
fbc5c1b 
…are changed (woocommerce#7366)
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer

@gigitux gigitux gigitux approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@dinhtungdu dinhtungdu

Labels

block-type: product-grid Issues related to/affecting all product-grid type blocks. skip-changelog PRs that you don't want to appear in the changelog. type: bug The issue/PR concerns a confirmed bug.

Projects

None yet

Milestone

8.8.0

Development

Successfully merging this pull request may close these issues.

Product Query: Editor preview won't update when custom attributes are changed

4 participants

@dinhtungdu @gigitux @Aljullu @opr