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

Refactor external dispatch actions from being called inside useSelect #6718

Merged
merged 6 commits into from
Jul 29, 2022

Conversation

senadir
Copy link
Member

@senadir senadir commented Jul 19, 2022

This PR resolves the long-standing issue in wordpress.com in which Cart and Checkout blocks would cause an infinite loop and, recently, crash some blocks.

The source of the issue was that the wpcom code that did the monkey patching couldn't handle actions being called from inside a useSelect or useDispatch function, causing an infinite loop in Gutenberg.

I couldn't really pinpoint the exact line that handle that, maybe someone more experienced in that codebase can look cc @Addison-Stavlo.

For this PR, I just moved the logic from outside the useSelect call, it made sense anyway to do that outside.

Fixes #5866
Fixes Automattic/wp-calypso#57449

Note

Because we didn't make the wpcom code more resilient yet, this issue might surface back again, if it does, the fix would be to simply create your functions outside the useSelect function, not inside it.

Testing

To test this PR, you will need to have a zip to upload to an atomic website *.wpcomstaging.com. Use this zip
woocommerce-gutenberg-products-block.zip that reflects this PR.

  1. Create a new atomic website (wordpress.com -> new website -> pro plan -> install WooCommerce).
  2. Upload and enable this plugin.
  3. Open the editor, open the console as well.
  4. Insert Cart block, you shouldn't see any console errors, all block should load fine without errors.
  5. Insert Checkout block, you shouldn't see any console errors, all blocks should load fine without errors.
  6. Try adding a product, going to cart and checkout, they should load fine.

Outside wpcom, make sure this PR doesn't regress anything:

  • Create a coupon.
  • Go to cart, try to use the coupon, you should see a snackbar below, no errors in console.
  • Go to checkout, remove the coupon, insert it again, no error should surface.
  • Do not include in the Testing Notes: Only include the second part of testing.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix Cart an d Checkout blocks compatiblity issue with wordpress.com in which blocks wouldn't load in the editor.

@rubikuserbot rubikuserbot requested review from a team and nielslange and removed request for a team July 19, 2022 20:20
| 'removeCoupon'
| 'isApplyingCoupon'
| 'isRemovingCoupon'
| 'receiveApplyingCoupon'
Copy link
Member Author

Choose a reason for hiding this comment

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

This is a broken TS, wasn't sure what's the best fix @opr either add receiveApplyingCoupon to StoreCartCoupon or have another sort of union. Not even sure what StoreCartCoupon should be and what should it include.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think we need to type this, it should be inferred, and it also seems weird to still pick dispatch actions inside useSelect I propose we drop the explicit typing, remove the actions from the useSelect and get them from useDispatch instead. This is consistent with how it's being done elsewhere in the codebase and the data store refactor work.

I tested this on wpcom and it works still.

See this example patch and let me know what you think.

From c7787796b798e7914f290c03f484b9fd19f99a7f Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Fri, 22 Jul 2022 09:35:31 +0100
Subject: [PATCH] Add new dispatch outside of select

---
 .../hooks/cart/use-store-cart-coupons.ts      | 23 ++++---------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts b/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
index aa5cd0bf8..2115fd330 100644
--- a/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
+++ b/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
@@ -29,34 +29,21 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const { createNotice } = useDispatch( 'core/notices' );
 	const { setValidationErrors } = useValidationContext();
 
-	const {
-		applyCoupon,
-		removeCoupon,
-		isApplyingCoupon,
-		isRemovingCoupon,
-	}: Pick<
-		StoreCartCoupon,
-		| 'applyCoupon'
-		| 'removeCoupon'
-		| 'isApplyingCoupon'
-		| 'isRemovingCoupon'
-		| 'receiveApplyingCoupon'
-	> = useSelect(
-		( select, { dispatch } ) => {
+	const { isApplyingCoupon, isRemovingCoupon } = useSelect(
+		( select ) => {
 			const store = select( storeKey );
-			const actions = dispatch( storeKey );
 
 			return {
-				applyCoupon: actions.applyCoupon,
-				removeCoupon: actions.removeCoupon,
 				isApplyingCoupon: store.isApplyingCoupon(),
 				isRemovingCoupon: store.isRemovingCoupon(),
-				receiveApplyingCoupon: actions.receiveApplyingCoupon,
 			};
 		},
 		[ createErrorNotice, createNotice ]
 	);
 
+	const { applyCoupon, removeCoupon, receiveApplyingCoupon } =
+		useDispatch( storeKey );
+
 	const applyCouponWithNotices = ( couponCode: string ) => {
 		applyCoupon( couponCode )
 			.then( ( result ) => {
-- 
2.32.1 (Apple Git-133)

Copy link
Member Author

Choose a reason for hiding this comment

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

Thank you Thomas! I applied the changes.

@senadir senadir requested a review from opr July 19, 2022 20:22
@senadir senadir self-assigned this Jul 19, 2022
@senadir senadir added type: bug The issue/PR concerns a confirmed bug. status: blocker Used on issues or pulls that block work from being released. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Jul 19, 2022
@senadir senadir changed the title Refactor outside dispatch actions from useSelect Refactor external dispatch actions from being called inside useSelect Jul 19, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jul 19, 2022

Size Change: +222 B (0%)

Total Size: 878 kB

Filename Size Change
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB +25 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 2.64 kB +23 B (+1%)
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB +26 B (+1%)
build/cart-frontend.js 47 kB +1 B (0%)
build/cart.js 44.3 kB +29 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.39 kB +28 B (+1%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB +20 B (+1%)
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB +26 B (+1%)
build/checkout-blocks/payment-frontend.js 7.69 kB +24 B (0%)
build/checkout-frontend.js 49.2 kB -1 B (0%)
build/checkout.js 45.6 kB +21 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.35 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.8 kB
build/attribute-filter-frontend.js 25.1 kB
build/attribute-filter.js 14.4 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 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 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 780 B
build/cart-blocks/order-summary-fee-frontend.js 273 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.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.16 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 890 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 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 602 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.76 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/handpicked-products.js 7.38 kB
build/legacy-template.js 2.8 kB
build/mini-cart-component-frontend.js 16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 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.68 kB
build/mini-cart-contents-block/footer-frontend.js 6.99 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 6.62 kB
build/price-filter-frontend.js 13.1 kB
build/price-filter.js 9.04 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.65 kB
build/product-add-to-cart--product-button.js 564 B
build/product-add-to-cart-frontend.js 6.96 kB
build/product-add-to-cart.js 6.64 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 500 B
build/product-button-frontend.js 1.85 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 921 B
build/product-category-list.js 501 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.72 kB
build/product-on-sale.js 8.04 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 731 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 678 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 917 B
build/product-tag-list-frontend.js 915 B
build/product-tag-list.js 495 B
build/product-tag.js 8.09 kB
build/product-title-frontend.js 1.29 kB
build/product-title.js 912 B
build/product-top-rated.js 7.96 kB
build/products-by-attribute.js 8.64 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 21.4 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.39 kB
build/stock-filter.js 7.3 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.74 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.04 kB
build/wc-blocks-editor-style.css 5.04 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.1 kB
build/wc-blocks-style.css 22.1 kB
build/wc-blocks-vendors-style-rtl.css 1.26 kB
build/wc-blocks-vendors-style.css 1.26 kB
build/wc-blocks-vendors.js 58.8 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

@Addison-Stavlo
Copy link

Addison-Stavlo commented Jul 20, 2022

👋 Thanks for unblocking this here.

Because we didn't make the wpcom code more resilient yet, this issue might surface back again,

Id be happy to see what we can do to resolve this. Im having a hard time understanding the cause here though.

The source of the issue was that the wpcom code that did the monkey patching couldn't handle actions being called from inside a useSelect or useDispatch function, causing an infinite loop in Gutenberg.

Just looking at the changes here, it looks like we weren't previously calling these actions within the useSelect here though? Just defining other functions that use them when called elsewhere?

On another note, ive never actually thought about calling dispatch from within useSelect. Generally I thought standard practice would be to separate the two (as is done with this example of using useSelect in combination with useDispatch from the block editor reference handbook)

const { isApplyingCoupon, isRemovingCoupon } = useSelect( (select) => ...  );
const { applyCoupon, removeCoupon, receiveApplyingCoupon } = useDispatch( storeName );
// then using the above to define further functions/logic

Is pulling dispatch actions out of useSelect a common practice?

opr
opr previously requested changes Jul 22, 2022
| 'removeCoupon'
| 'isApplyingCoupon'
| 'isRemovingCoupon'
| 'receiveApplyingCoupon'
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think we need to type this, it should be inferred, and it also seems weird to still pick dispatch actions inside useSelect I propose we drop the explicit typing, remove the actions from the useSelect and get them from useDispatch instead. This is consistent with how it's being done elsewhere in the codebase and the data store refactor work.

I tested this on wpcom and it works still.

See this example patch and let me know what you think.

From c7787796b798e7914f290c03f484b9fd19f99a7f Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Fri, 22 Jul 2022 09:35:31 +0100
Subject: [PATCH] Add new dispatch outside of select

---
 .../hooks/cart/use-store-cart-coupons.ts      | 23 ++++---------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts b/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
index aa5cd0bf8..2115fd330 100644
--- a/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
+++ b/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
@@ -29,34 +29,21 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const { createNotice } = useDispatch( 'core/notices' );
 	const { setValidationErrors } = useValidationContext();
 
-	const {
-		applyCoupon,
-		removeCoupon,
-		isApplyingCoupon,
-		isRemovingCoupon,
-	}: Pick<
-		StoreCartCoupon,
-		| 'applyCoupon'
-		| 'removeCoupon'
-		| 'isApplyingCoupon'
-		| 'isRemovingCoupon'
-		| 'receiveApplyingCoupon'
-	> = useSelect(
-		( select, { dispatch } ) => {
+	const { isApplyingCoupon, isRemovingCoupon } = useSelect(
+		( select ) => {
 			const store = select( storeKey );
-			const actions = dispatch( storeKey );
 
 			return {
-				applyCoupon: actions.applyCoupon,
-				removeCoupon: actions.removeCoupon,
 				isApplyingCoupon: store.isApplyingCoupon(),
 				isRemovingCoupon: store.isRemovingCoupon(),
-				receiveApplyingCoupon: actions.receiveApplyingCoupon,
 			};
 		},
 		[ createErrorNotice, createNotice ]
 	);
 
+	const { applyCoupon, removeCoupon, receiveApplyingCoupon } =
+		useDispatch( storeKey );
+
 	const applyCouponWithNotices = ( couponCode: string ) => {
 		applyCoupon( couponCode )
 			.then( ( result ) => {
-- 
2.32.1 (Apple Git-133)

Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

While @opr inspected the code, I did a smoke test and kept an eye on the console. The PR works as expected, given the areas I inspected. Once we have @opr's approval, let's ⛴ this fix.

@github-actions github-actions bot added this to the 8.2.0 milestone Jul 26, 2022
@senadir
Copy link
Member Author

senadir commented Jul 27, 2022

Hey @Addison-Stavlo

Id be happy to see what we can do to resolve this. Im having a hard time understanding the cause here though.

I'd lie if I said I fully understand what's happening, I think this might be a scope issue, but I would expect a visible error instead of useSelect looping at the onStoreChange call.

Just looking at the changes here, it looks like we weren't previously calling these actions within the useSelect here though? Just defining other functions that use them when called elsewhere?

Yes, I might have worded this badly, but we're just defining a function that will call them outside the useSelect, but the issue happen if you define the action variable inside the useSelect and construct it there.

On another note, ive never actually thought about calling dispatch from within useSelect. Generally I thought standard practice would be to separate the two (as is done with this example of using useSelect in combination with useDispatch from the block editor reference handbook)

It is a shortcode used to save code, you can find usage of that in Gutenberg, for our use case, we don't gain much so it's fine to remove it.

@senadir senadir dismissed opr’s stale review July 27, 2022 11:18

added changes.

@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-6718.zip

@Addison-Stavlo
Copy link

Addison-Stavlo commented Jul 28, 2022

It is a shortcode used to save code, you can find usage of that in Gutenberg, for our use case, we don't gain much so it's fine to remove it.

Hrm, I don't see any of those results reflecting what was being done here in terms of destructuring dispatch out of the store in useSelect - useSelect( ( select, { dispatch } ) =>

I'd lie if I said I fully understand what's happening, I think this might be a scope issue, but I would expect a visible error instead of useSelect looping at the onStoreChange call.

Yeah, Im glad you have something working but am definitely confused here as well. I haven't seen any other blocks crashing the editor like this, and originally found insertBlock(s) and replaceInnerBlocks to be the problematic actions here from the tracking side (adding any handling fn to those actions, even noop, caused the crash combined with the cart block - removing them entirely resolved it) - but this fix seems like it has nothing to do with those actions. 🤷‍♀️ 🤔 Wondering if these things somehow effected each other.

@senadir senadir merged commit 4eed41d into trunk Jul 29, 2022
@senadir senadir deleted the refactor/remove-notice-calls-from-select branch July 29, 2022 15:20
@senadir
Copy link
Member Author

senadir commented Jul 29, 2022

Yeah, Im glad you have something working but am definitely confused here as well. I haven't seen any other blocks crashing the editor like this, and originally found insertBlock(s) and replaceInnerBlocks to be the problematic actions here from the tracking side (adding any handling fn to those actions, even noop, caused the crash combined with the cart block - removing them entirely resolved it) - but this fix seems like it has nothing to do with those actions. 🤷‍♀️ 🤔 Wondering if these things somehow effected each other.

Something changed in Gutenberg around that because we didn't change anything worthwhile in our code nor did you, however that change did surface other the same error but in an easier to debug state.

Hrm, I don't see any of those results reflecting what was being done here in terms of destructuring dispatch out of the store in useSelect - useSelect( ( select, { dispatch } ) =>

It's true, it seems the current usage is only for creating actions, not inside the useSelect, it must have been refactored away because I do remember this pattern (and it's from GB that I picked it up).

I asked in slack about that behavior but got no responses, I will keep an eye for it so it doens't surface again.

Comment on lines +50 to +51
applyCoupon: actions.applyCoupon,
removeCoupon: actions.removeCoupon,
Copy link
Contributor

Choose a reason for hiding this comment

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

Could just move this out of the useSelect callback too? (same with receiveApplyingCoupon)

removeCoupon: actions.removeCoupon,
isApplyingCoupon: store.isApplyingCoupon(),
isRemovingCoupon: store.isRemovingCoupon(),
receiveApplyingCoupon: actions.receiveApplyingCoupon,
};
},
[ createErrorNotice, createNotice ]
Copy link
Contributor

Choose a reason for hiding this comment

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

These dependencies shouldn't be needed now?

};
},
[ createErrorNotice, createNotice ]
);

const applyCouponWithNotices = ( couponCode: string ) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't know how often createNotice or setValidationErrors or createErrorNotice change (can't remember if they themselves are dispatch function) but one optimization here might be to memoize the new composite dispatchers via useCallback. I think that might have been why they were in the useSelect callback originally so that we memoized them based on the dependencies.

@ralucaStan ralucaStan added the skip-changelog PRs that you don't want to appear in the changelog. label Jul 29, 2022
@ralucaStan ralucaStan removed the skip-changelog PRs that you don't want to appear in the changelog. label Aug 1, 2022
luisherranz pushed a commit to luisherranz/woocommerce-blocks that referenced this pull request Sep 20, 2022
…in (woocommerce#69)

* Use the archive-product template to render product attributes pages (woocommerce#6776)

* Bump mockery/mockery from 1.4.4 to 1.5.0 (woocommerce#6703)

Bumps [mockery/mockery](https://github.com/mockery/mockery) from 1.4.4 to 1.5.0.
- [Release notes](https://github.com/mockery/mockery/releases)
- [Changelog](https://github.com/mockery/mockery/blob/master/CHANGELOG.md)
- [Commits](mockery/mockery@1.4.4...1.5.0)

---
updated-dependencies:
- dependency-name: mockery/mockery
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>

* Update dependency @types/jest to v27.5.2 (woocommerce#6759)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Ensure addresses sync when loading the checkout shipping address block (woocommerce#6773)

* Update pull_request_template.md

* Add comment to prevent linting error on commented out code (woocommerce#6789)

* Update pull_request_template.md

* Update dependency @types/wordpress__blocks to v11.0.5 (woocommerce#6758)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update babel monorepo to v7.18.9 (woocommerce#6719)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Refactor external dispatch actions from being called inside useSelect (woocommerce#6718)

* refactor coupon functions outside of useSelect

* fix test

* Add new icon for mini cart block (woocommerce#6784)

* Add new icon for mini cart block (inserter).

See woocommerce#6617.

* Adjust size of SVG

The new SVG was rendering a little bit smaller than the original icon.
Potentially because of the mask and the artboard size.

This commit adjusts the size to render at the same size as the original
version of the icon in the inserter.

* add new action for customer updates (woocommerce#6792)

* Fix: Replace DropdownSelector with FormTokenField from Gutenberg (woocommerce#6647)

* Fix missing translations in inspector (woocommerce#6737)

* Try registering the "cart taxes" inner block

Registering server side. This example isn't working, but I'm pushing to
share it and see what's wrong with this implementation.

* Fix registering the cart taxes inner block issue

* Update translation script loading

* Remove unnecessary JS translation

The translation should work fine by getting the title & description from
the `block.json` file

* Put back the initial code in the 'Cart Taxes' inner block

We didn't provide the correct `block.json` file path server side,
that's why the `metadata` wasn't correctly registered

* Generate `block.json`files for inner blocks

This is the first step on fixing the missing translations of `metadata`
in `block.json` files

* Set the folder name exactly the same as the inner block name

We are doing this first test for the `Cart taxes` inner block.

The `Block` & its containing folder need to have the same name for:
- Consistency
- We use the `Block` name to get the file Path

* Update imports after folder renaming

* Get block name directly from the JSON metadata

Getting the block name from the JSON metadata is less error prone than
extracting it from the file path.

And no need to rename all our `inner-blocks` to get the correct
`block.json` path

* Revert folder naming change of `Cart taxes` inner block

Since we are getting the `block` name directly from the `block.json`
metadata instead of extracting it from the file path, there is no need
to keep their names in sync anymore

* Fix missing translations for the `Cart Subtotal` Block

* Register only the client-side settings on the client

When the block is registered on the server, you only need to register
the client-side settings on the client using the same block’s name.
See [docs](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#javascript-client-side).

* Add schema validation to `block.json`

Development is improved by using a defined schema definition file.
Supported editors can provide help like tooltips, autocomplete, and
schema validation.

* Use the same `editor_script` as the parent block

This prevents WordPress from generating script tags to inexistant
inner blocks JS files

* Add C&C inner blocks in Cart.php & Checkout.php

This is a refactoring to keep the block types controller file less
overloaded

* Fix all Cart inner blocks missing translations

* Create the "AbstractInnerBlock" class

The "Inner Blocks" will use their parent's script, so no need to create
new scripts for each one of them

And, our "Inner Blocks" should always be registered using the metadata file

* Update the "Inner Blocks" PHP classes

* Fix PHP lint erros & update function description

* Fix missing translations bug for all Checkout Inner Blocks

* Update src/BlockTypes/Checkout.php

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* skip lazy loaded scripts

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* fix proceed to checkout button (woocommerce#6804)

* Remove compatibility notice from Mini Cart block (woocommerce#6803)

* Empty commit for release pull request

* Update 8.2.0 changelog

* Add 8.2.0 testing steps

* Fix typo in 8.2.0 testing steps

* Ensure package names display correctly if only one item is in package (woocommerce#6815)

* Check package length >= 1 to show package name

* Check shipping rates length in order shipping packages slot

* Fix TS error where boolean value could be undefined

* Show items if there is more than one shipping rate

* Ensure package names display correctly if only one item is in package (woocommerce#6815)

* Check package length >= 1 to show package name

* Check shipping rates length in order shipping packages slot

* Fix TS error where boolean value could be undefined

* Show items if there is more than one shipping rate

* Update 8.2.0 testing zip

* Add option to hide/show price in Mini Cart block  (woocommerce#6796)

* Add toggle control to sidebar in editor.

Adds a visibility toggle in the Mini Cart block's sidebar editor
settings for the block price.

* Update name of hasVisiblePrice attrubite.

Adjusts the name of the hasVisiblePrice attribute to hasHiddenPrice.
This seems a bit easier to reason about, where we can set the default
state of the visibility toggle to 'off'.

* Add conditional price rendering to server side.

Since this is a dynamic block, need to add the condidional attribute
state to the server-side render callback.

* Add price visibility setting to block frontend.

We need to prevent pricec from rendering when hidden setting is active
after the JS kicks in on the frontend (i.e., when the Mini Cart is
interacted with by the user).

* Fix logic error in frontend rendering conditional.

* Add unit tests for both show/hide price states.

* Bumping version strings to new version.

* Remove empty element from changelog

* Release: 8.2.0 (woocommerce#6806)

* Empty commit for release pull request

* Update 8.2.0 changelog

* Add 8.2.0 testing steps

* Fix typo in 8.2.0 testing steps

* Ensure package names display correctly if only one item is in package (woocommerce#6815)

* Check package length >= 1 to show package name

* Check shipping rates length in order shipping packages slot

* Fix TS error where boolean value could be undefined

* Show items if there is more than one shipping rate

* Update 8.2.0 testing zip

* Bumping version strings to new version.

* Remove empty element from changelog

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update version to 8.3.0-dev

* Bump @wordpress/is-shallow-equal from 4.12.0 to 4.13.0 (woocommerce#6710)

Bumps [@wordpress/is-shallow-equal](https://github.com/WordPress/gutenberg/tree/HEAD/packages/is-shallow-equal) from 4.12.0 to 4.13.0.
- [Release notes](https://github.com/WordPress/gutenberg/releases)
- [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/is-shallow-equal/CHANGELOG.md)
- [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/is-shallow-equal@4.13.0/packages/is-shallow-equal)

---
updated-dependencies:
- dependency-name: "@wordpress/is-shallow-equal"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Bump AbleLincoln/push-to-sftp from 1.0 to 1.2 (woocommerce#6808)

Bumps [AbleLincoln/push-to-sftp](https://github.com/AbleLincoln/push-to-sftp) from 1.0 to 1.2.
- [Release notes](https://github.com/AbleLincoln/push-to-sftp/releases)
- [Commits](AbleLincoln/push-to-sftp@v1.0...v1.2)

---
updated-dependencies:
- dependency-name: AbleLincoln/push-to-sftp
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Bump @wordpress/i18n from 4.12.0 to 4.14.0 (woocommerce#6817)

Bumps [@wordpress/i18n](https://github.com/WordPress/gutenberg/tree/HEAD/packages/i18n) from 4.12.0 to 4.14.0.
- [Release notes](https://github.com/WordPress/gutenberg/releases)
- [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/i18n/CHANGELOG.md)
- [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/i18n@4.14.0/packages/i18n)

---
updated-dependencies:
- dependency-name: "@wordpress/i18n"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Bump yoast/phpunit-polyfills from 1.0.2 to 1.0.3 (woocommerce#6704)

Bumps [yoast/phpunit-polyfills](https://github.com/Yoast/PHPUnit-Polyfills) from 1.0.2 to 1.0.3.
- [Release notes](https://github.com/Yoast/PHPUnit-Polyfills/releases)
- [Changelog](https://github.com/Yoast/PHPUnit-Polyfills/blob/develop/CHANGELOG.md)
- [Commits](Yoast/PHPUnit-Polyfills@1.0.2...1.0.3)

---
updated-dependencies:
- dependency-name: yoast/phpunit-polyfills
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump github/codeql-action from 1 to 2 (woocommerce#6700)

Bumps [github/codeql-action](https://github.com/github/codeql-action) from 1 to 2.
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](github/codeql-action@v1...v2)

---
updated-dependencies:
- dependency-name: github/codeql-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Bump johnbillion/wp-hooks-generator from 0.7.0 to 0.9.0 (woocommerce#6705)

Bumps [johnbillion/wp-hooks-generator](https://github.com/johnbillion/wp-hooks-generator) from 0.7.0 to 0.9.0.
- [Release notes](https://github.com/johnbillion/wp-hooks-generator/releases)
- [Commits](wp-hooks/generator@0.7.0...0.9.0)

---
updated-dependencies:
- dependency-name: johnbillion/wp-hooks-generator
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Bump @wordpress/wordcount from 3.12.0 to 3.13.0 (woocommerce#6711)

Bumps [@wordpress/wordcount](https://github.com/WordPress/gutenberg/tree/HEAD/packages/wordcount) from 3.12.0 to 3.13.0.
- [Release notes](https://github.com/WordPress/gutenberg/releases)
- [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/wordcount/CHANGELOG.md)
- [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/wordcount@3.13.0/packages/wordcount)

---
updated-dependencies:
- dependency-name: "@wordpress/wordcount"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump @typescript-eslint/parser from 5.30.5 to 5.31.0 (woocommerce#6809)

Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 5.30.5 to 5.31.0.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.31.0/packages/parser)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/parser"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Empty commit for release pull request

* Ensure onChange is set for radio buttons in SavedPaymentMethodOptions (woocommerce#6825)

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* delete renovate bot (woocommerce#6824)

* Bump @wordpress/api-fetch from 6.9.0 to 6.11.0 (woocommerce#6833)

Bumps [@wordpress/api-fetch](https://github.com/WordPress/gutenberg/tree/HEAD/packages/api-fetch) from 6.9.0 to 6.11.0.
- [Release notes](https://github.com/WordPress/gutenberg/releases)
- [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/api-fetch/CHANGELOG.md)
- [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/api-fetch@6.11.0/packages/api-fetch)

---
updated-dependencies:
- dependency-name: "@wordpress/api-fetch"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* E2E: Try improving product list loading state detection and fix Site Editor URL (woocommerce#6811)

* e2e:try: detect loading state for product list

* fix: always use site-editor.php

* wait for price filter to be applied before checking the result

* Update renovate configuration (woocommerce#6836)

* delete renovate bot

* update renovate configuration

* try now

* Bump mini-css-extract-plugin from 1.3.6 to 1.6.2 (woocommerce#6714)

Bumps [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) from 1.3.6 to 1.6.2.
- [Release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases)
- [Changelog](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md)
- [Commits](webpack-contrib/mini-css-extract-plugin@v1.3.6...v1.6.2)

---
updated-dependencies:
- dependency-name: mini-css-extract-plugin
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Release: 8.2.1 (woocommerce#6826)

* Empty commit for release pull request

* Update 8.2.1 changelog

* Ensure onChange is set for radio buttons in SavedPaymentMethodOptions (woocommerce#6825)

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* Add 8.2.1 testing steps

* Bumping version strings to new version.

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* fix markdownlint violation (woocommerce#6853)

* Add missing label to dependabot configuration (woocommerce#6848)

* Fix: Compare action should update its original comment instead of a new comment (woocommerce#6736)

* Fix: flaky tests related to setMaxPrice (woocommerce#6856)

* Add font-weight option to Mini Cart block text (woocommerce#6760)

* Add font-weight option to Mini Cart button text.

Need to repeat steps for icon SVG and cart item count.

* Add font-weight controls to mini-cart item count.

* Add better error handling to PHP style output.

Ensure style value is set for style item in the
get_font_weight_class_and_style attributes array before rendering it to
the output.

* Revert font-weight option for quantity badge.

Per conversation with @vivialice, it looks better for now to keep the
font weight adjustment capabilities to just the price and leave the cart
icon and count as-is.

* Move $typography_styles variable into markup fn.

To resolve merge conflicts and get everything in it's proper place, this
commit will move the $typography_styles variable into the
get_cart_price_markup() function from woocommerce#6796.

* Fix: Attribute filter flaky test (woocommerce#6862)

* Fix: Override the description to prevent infinite loop (woocommerce#6849)

* Update billing address when shipping address gets change in Cart block (woocommerce#6823)

* Add Style Attributes Hooks to blocks/hooks Directory. (woocommerce#6870)

* Copy style-attributes file to desired directory.

Add a copy of the style-attributes file in blocks/hooks to the desired
base/hooks directory with the other hooks.

* Remove relative imports in favor of global aliases

Utilizes the custom global project aliases in place of using relative
imports.

Note: seeing some linting issues with the aliases. This seems to be the
case elsewhere so it is likely not a blocker for this effort, however,
it may be worth looking into as a follow-up.

* Adjust all imports to use @woocommerce/base-hooks.

Replace all instances of relative file paths to hooks/style-attributes
to use the custom global alias.

* Remove the hooks dir in `assets/js/blocks/`.

Now that everything is using the `@woocommerce/base-hooks` custom global
alias and we have the `style-attributes` hooks file in the base/hooks
directory, we no longer need the `style-attributes` hooks file in the
aforementioned `assets/js/blocks` directory.

* Split style-attributes.ts out into separate files.

Moved the four hooks in style-attributes.ts out into their own, separate
hook file to be consistent with the rest of our custom hooks.

Additionally, moved the helper function (parseStyle) out into a separate
export in base/utils.

* All Products block: Try hydrating

* Enqueue script that adds <gutenberg-interactive-block> custom element

* Fix nomenclature

* Use BHE hydration for All Products Block

* Fix phpcs issues

* Add block deprecation

* Add StoreNoticesProvider wrapper back to frontend

* Update blockRegistry implementation:

- The registry is now the instance of a BlockRegistry class.
- The BlockRegistry class has a `whenDefined()` method which is used to
 await the registration of a block with a given name.

* Revert "Update blockRegistry implementation:"

This reverts commit 8edc7b2.

Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
Co-authored-by: Daniel W. Robert <danielwrobert@users.noreply.github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com>
Co-authored-by: Bernie Reiter <ockham@raz.or.at>
Co-authored-by: Michal Czaplinski <mmczaplinski@gmail.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. status: blocker Used on issues or pulls that block work from being released. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cart block not working on WordPress.com site WooCommerce Blocks: Adding the Cart block crashes the editor
6 participants