Add back ToggleButtonControl component in WC Blocks 8.9 so it supports WP 5.9 #8101
Conversation
Aljullu
added
status: needs review
type: bug
|
The release ZIP for this PR is accessible via: |
TypeScript Errors ReportFiles with errors: 445
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/atomic/blocks/product-elements/image/test/block.test.js assets/js/atomic/blocks/product-elements/price/attributes.js assets/js/atomic/blocks/product-elements/price/block.js assets/js/atomic/blocks/product-elements/price/edit.js assets/js/atomic/blocks/product-elements/price/index.js assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.js assets/js/atomic/blocks/product-elements/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/reviews/review-list-item/index.js assets/js/base/components/reviews/review-list/index.js assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/block.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/blocks/single-product/block.js assets/js/blocks/single-product/edit/index.js assets/js/blocks/single-product/edit/layout-editor.js assets/js/data/payment/check-payment-methods.ts assets/js/editor-components/toggle-button-control/index.js assets/js/types/type-defs/payment-method-interface.ts assets/js/utils/notices.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js packages/prices/utils/price.ts |
|
Size Change: +3.37 kB (0%) Total Size: 1 MB
ℹ️ View Unchanged
|
Aljullu
requested review from
a team and
dinhtungdu
and removed request for
a team
There was a problem hiding this comment.
@Aljullu Featured Products and Featured Category are still using ToggleGroupControl, which is broken when editing in the Editor. We should fix it there too IMO. Otherwise, this is LGTM.
|
Good catch, @dinhtungdu! I fixed it in c31b3c7 and updated the PR testing steps. |
TypeScript Errors ReportFiles with errors: 445
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/atomic/blocks/product-elements/image/test/block.test.js assets/js/atomic/blocks/product-elements/price/attributes.js assets/js/atomic/blocks/product-elements/price/block.js assets/js/atomic/blocks/product-elements/price/edit.js assets/js/atomic/blocks/product-elements/price/index.js assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.js assets/js/atomic/blocks/product-elements/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/reviews/review-list-item/index.js assets/js/base/components/reviews/review-list/index.js assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/block.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/blocks/single-product/block.js assets/js/blocks/single-product/edit/index.js assets/js/blocks/single-product/edit/layout-editor.js assets/js/data/payment/check-payment-methods.ts assets/js/editor-components/toggle-button-control/index.js assets/js/types/type-defs/payment-method-interface.ts assets/js/utils/notices.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js packages/prices/utils/price.ts |
Script Dependencies ReportThe
This comment was automatically generated by the |
There was a problem hiding this comment.
@Aljullu Look like we discovered another error. After choosing a category to display for the Featured Category block, I got this, can you reproduce in your end?
TypeScript Errors ReportFiles with errors: 445
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/atomic/blocks/product-elements/image/test/block.test.js assets/js/atomic/blocks/product-elements/price/attributes.js assets/js/atomic/blocks/product-elements/price/block.js assets/js/atomic/blocks/product-elements/price/edit.js assets/js/atomic/blocks/product-elements/price/index.js assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.js assets/js/atomic/blocks/product-elements/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/reviews/review-list-item/index.js assets/js/base/components/reviews/review-list/index.js assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/block.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/blocks/single-product/block.js assets/js/blocks/single-product/edit/index.js assets/js/blocks/single-product/edit/layout-editor.js assets/js/data/payment/check-payment-methods.ts assets/js/editor-components/toggle-button-control/index.js assets/js/types/type-defs/payment-method-interface.ts assets/js/utils/notices.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js packages/prices/utils/price.ts |
1 similar comment
TypeScript Errors ReportFiles with errors: 445
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/atomic/blocks/product-elements/image/test/block.test.js assets/js/atomic/blocks/product-elements/price/attributes.js assets/js/atomic/blocks/product-elements/price/block.js assets/js/atomic/blocks/product-elements/price/edit.js assets/js/atomic/blocks/product-elements/price/index.js assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.js assets/js/atomic/blocks/product-elements/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/reviews/review-list-item/index.js assets/js/base/components/reviews/review-list/index.js assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/block.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/blocks/single-product/block.js assets/js/blocks/single-product/edit/index.js assets/js/blocks/single-product/edit/layout-editor.js assets/js/data/payment/check-payment-methods.ts assets/js/editor-components/toggle-button-control/index.js assets/js/types/type-defs/payment-method-interface.ts assets/js/utils/notices.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js packages/prices/utils/price.ts |
TypeScript Errors ReportFiles with errors: 445
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/atomic/blocks/product-elements/image/test/block.test.js assets/js/atomic/blocks/product-elements/price/attributes.js assets/js/atomic/blocks/product-elements/price/block.js assets/js/atomic/blocks/product-elements/price/edit.js assets/js/atomic/blocks/product-elements/price/index.js assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.js assets/js/atomic/blocks/product-elements/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/reviews/review-list-item/index.js assets/js/base/components/reviews/review-list/index.js assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/block.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/blocks/single-product/block.js assets/js/blocks/single-product/edit/index.js assets/js/blocks/single-product/edit/layout-editor.js assets/js/data/payment/check-payment-methods.ts assets/js/editor-components/toggle-button-control/index.js assets/js/types/type-defs/payment-method-interface.ts assets/js/utils/notices.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js packages/prices/utils/price.ts |
TypeScript Errors ReportFiles with errors: 445
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/atomic/blocks/product-elements/image/test/block.test.js assets/js/atomic/blocks/product-elements/price/attributes.js assets/js/atomic/blocks/product-elements/price/block.js assets/js/atomic/blocks/product-elements/price/edit.js assets/js/atomic/blocks/product-elements/price/index.js assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.js assets/js/atomic/blocks/product-elements/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/reviews/review-list-item/index.js assets/js/base/components/reviews/review-list/index.js assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/block.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/blocks/single-product/block.js assets/js/blocks/single-product/edit/index.js assets/js/blocks/single-product/edit/layout-editor.js assets/js/data/payment/check-payment-methods.ts assets/js/editor-components/toggle-button-control/index.js assets/js/types/type-defs/payment-method-interface.ts assets/js/utils/notices.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js packages/prices/utils/price.ts |
1 similar comment
TypeScript Errors ReportFiles with errors: 445
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/atomic/blocks/product-elements/image/test/block.test.js assets/js/atomic/blocks/product-elements/price/attributes.js assets/js/atomic/blocks/product-elements/price/block.js assets/js/atomic/blocks/product-elements/price/edit.js assets/js/atomic/blocks/product-elements/price/index.js assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.js assets/js/atomic/blocks/product-elements/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/reviews/review-list-item/index.js assets/js/base/components/reviews/review-list/index.js assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/block.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/blocks/single-product/block.js assets/js/blocks/single-product/edit/index.js assets/js/blocks/single-product/edit/layout-editor.js assets/js/data/payment/check-payment-methods.ts assets/js/editor-components/toggle-button-control/index.js assets/js/types/type-defs/payment-method-interface.ts assets/js/utils/notices.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js packages/prices/utils/price.ts |
This should be fixed in addac8e. Thanks for catching it, @dinhtungdu! I noticed there is an issue with the button alignment when inserting the block: it defaults to left alignment.
This can be changed directly from the editor, so I consider it not a blocker. Also, I'm uncertain whether there is an easy way to fix it without breaking it in newer WP installs. |
* Empty commit for release pull request * Refactor Filter Wrapper to remove usage of useInnerBlocksProps (#8095) * Add WC Blocks 8.9.4 changelog * Add 8.9.4 testing steps * bot: update checkstyle.xml * Add back ToggleButtonControl component in WC Blocks 8.9 so it supports WP 5.9 (#8101) * Add back ToggleButtonControl component in WC Blocks 8.9 so it supports WP 5.9 * bot: update checkstyle.xml * Update Featured Product/Category to use ToggleButtonControl as well * bot: update checkstyle.xml * Only use getSpacingClassesAndStyles if available Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update testing steps * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This PR adds back the
ToggleButtonControlcomponent and uses it instead ofToggleGroupControlfrom GB. The reason is that the GB component is not available in WP 5.8, and we need to support it in WC 7.2. In practice, this PR reverts #5967.The plan is to merge this PR only in
release/8.9.x, so we only revert #5967 in the 8.9.x branch, but not intrunk.Testing
User Facing Testing
WooCommerce Visibility
Performance Impact
Changelog