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

Fix Product Query block hijacking all Query blocks queries #6952

Merged
merged 8 commits into from
Aug 25, 2022

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Aug 22, 2022

The Product Query block was adding a filter to Gutenberg's core Query Loop block. When this filter was added once, it would from then on apply to all other Query Loop blocks (or variations thereof) on a page.

This change makes sure that:

  1. No filters are added in the first place if our custom __woocommerceVariationProps
    are not set.
  2. The filter only gets run once.

Fixes #6950

Testing

Warning
In order to use the changes on this PR, you will need to have a custom fork of Gutenberg installed.

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. Set the toggle to display “On sale products”
  3. Add another Product Query block on the same page
  4. Do not set the toggle
  5. Add a Query Loop block
  6. Set it to display your posts
  7. Go to the front-end
  8. Make sure the three loop blocks show the expected items
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Filters are still created, hooked and ran. They are not removed even when they have ran their course. Tradeoff explained above.

Changelog

Product Query: Fix an issue where multiple query loop blocks on the same page would be hijacked by a custom variation settings.

The Product Query block was adding a filter to Gutenberg's core
Query Loop block. When this filter was added once, it would from
then on apply to all other Query Loop blocks (or variations thereof)
on a page.

This change makes sure that:

1. No filters are added in the first place if our custom `__woocommerceVariationProps`
are not set.
2. The filter only gets run once.
@sunyatasattva sunyatasattva added type: bug The issue/PR concerns a confirmed bug. block-type: product-grid Issues related to/affecting all product-grid type blocks. labels Aug 22, 2022
@sunyatasattva sunyatasattva self-assigned this Aug 22, 2022
@rubikuserbot rubikuserbot requested a review from a team August 22, 2022 11:08
@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-6952.zip

@github-actions
Copy link
Contributor

github-actions bot commented Aug 22, 2022

Size Change: 0 B

Total Size: 868 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.34 kB
build/active-filters.js 7.99 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.7 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 21.9 kB
build/attribute-filter.js 12.9 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 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.27 kB
build/cart-blocks/cart-line-items-frontend.js 428 B
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 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 274 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.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47 kB
build/cart.js 41.3 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.38 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.26 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 604 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.7 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.74 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.2 kB
build/checkout.js 42.6 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.36 kB
build/legacy-template.js 2.79 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 365 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 6.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 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 22.9 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 4.58 kB
build/price-filter-frontend.js 13.3 kB
build/price-filter.js 9.17 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 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart-frontend.js 6.95 kB
build/product-add-to-cart.js 6.89 kB
build/product-best-sellers.js 7.71 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 436 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B
build/product-button-frontend.js 1.87 kB
build/product-button.js 1.57 kB
build/product-categories.js 2.42 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 503 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.88 kB
build/product-image.js 1.59 kB
build/product-new.js 7.71 kB
build/product-on-sale.js 8.03 kB
build/product-price-frontend.js 1.9 kB
build/product-price.js 1.51 kB
build/product-query.js 647 B
build/product-rating-frontend.js 1.16 kB
build/product-rating.js 742 B
build/product-sale-badge-frontend.js 1.13 kB
build/product-sale-badge.js 804 B
build/product-search.js 2.64 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 379 B
build/product-stock-indicator-frontend.js 993 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 872 B
build/product-tag-list.js 498 B
build/product-tag.js 8.08 kB
build/product-title-frontend.js 1.31 kB
build/product-title.js 922 B
build/product-top-rated.js 7.95 kB
build/products-by-attribute.js 8.63 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.51 kB
build/stock-filter.js 7.46 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 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--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.08 kB
build/wc-blocks-editor-style.css 5.09 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.5 kB
build/wc-blocks-style.css 22.4 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.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

Copy link
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.

LGTM! Good catch! For now, I think that we can adopt this approach 👍 What do you think if we add a comment? Maybe add a link to this PR, it is a good idea too!

@github-actions github-actions bot added this to the 8.4.0 milestone Aug 23, 2022
@Aljullu Aljullu added the skip-changelog PRs that you don't want to appear in the changelog. label Aug 24, 2022
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Tested on my end too, and confirming it fixes the issue. 👌

I agree with Luigi that we can go ahead with this solution for now. We can always improve it in the future if we have any other ideas.

One thing we could try is to store $parsed_block into a class property, this way we don't need to pass it to the filter function every time. Something along these lines:

public function update_query( $pre_render, $parsed_block ) {
	if ( 'core/query' !== $parsed_block['blockName'] || ! isset( $parsed_block['attrs']['__woocommerceVariationProps'] ) ) {
		return;
	}
	$this->parsed_block = $parsed_block;

	add_filter(
		'gutenberg_build_query_vars_from_query_block',
		array( $this, 'get_query_vars' ),
		10,
		1
	);
}

public function get_query_vars( $query ) {
	remove_filter(
		'gutenberg_build_query_vars_from_query_block',
		array( $this, 'get_query_vars' )
	);
	return $this->get_query_by_attributes( $query, $this->parsed_block );
}

It has the benefit that we can remove the filter, with the expense that we need to add a property to the class. So leaving the final decision to you.

src/BlockTypes/ProductQuery.php Show resolved Hide resolved
@sunyatasattva
Copy link
Contributor Author

Thank you @Aljullu!! I've tested your implementation and it's great. You solved my conundrum! This is a much cleaner solution and I don't have the reservations I had before for this fix now! This made me a happy dev :D

@sunyatasattva sunyatasattva merged commit be8c003 into trunk Aug 25, 2022
@sunyatasattva sunyatasattva deleted the fix/6950-product-query-hijacks-all-query-loops branch August 25, 2022 00:48
@gigitux gigitux mentioned this pull request Sep 12, 2022
4 tasks
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
…ce#6952)

* Fix Product Query block hijacking all Query blocks queries

The Product Query block was adding a filter to Gutenberg's core
Query Loop block. When this filter was added once, it would from
then on apply to all other Query Loop blocks (or variations thereof)
on a page.

This change makes sure that:

1. No filters are added in the first place if our custom `__woocommerceVariationProps`
are not set.
2. The filter only gets run once.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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
Development

Successfully merging this pull request may close these issues.

Product Query block hijacks all further queries
3 participants