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

Remove the ToggleButtonControl in favor of ToggleGroupControl #5967

Merged
merged 4 commits into from
Apr 11, 2022

Conversation

danieldudzic
Copy link
Contributor

This PR replaces the ToggleButtonControl Product Blocks component in favor of the core ToggleGroupControl.

Fixes #5873

Screenshots

Before After
OLD new

Manual Testing

How to test the changes in this Pull Request:

  1. Check out this branch and compile the changes
  2. Activate a block theme, like Twenty Twenty Two
  3. Create a new page, and add the following blocks:
  • Active Filters
  • Attribute Filter
  • Price Filter
  • Product Categories
  • Reviews
  1. Ensure that options are using the new component and are working correctly

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above

Automated Tests

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

@danieldudzic danieldudzic requested a review from gigitux March 1, 2022 12:05
@rubikuserbot rubikuserbot requested a review from a team March 1, 2022 12:07
@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2022

Size Change: -2.14 kB (0%)

Total Size: 861 kB

Filename Size Change
build/active-filters.js 6.6 kB -369 B (-5%)
build/all-products.js 33.7 kB -273 B (-1%)
build/all-reviews.js 7.76 kB -264 B (-3%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/catego--90468e1a.js 221 B -2 B (-1%)
build/atomic-block-components/add-to-cart.js 7.49 kB +2 B (0%)
build/atomic-block-components/button--atomic-block-components/category-list--atomic-block-components/imag--f11cdc7a.js 500 B -1 B (0%)
build/atomic-block-components/button.js 2.3 kB +3 B (0%)
build/atomic-block-components/image.js 1.09 kB +2 B (0%)
build/atomic-block-components/rating.js 723 B +6 B (+1%)
build/atomic-block-components/sale-badge.js 684 B -1 B (0%)
build/atomic-block-components/stock-indicator.js 623 B -1 B (0%)
build/atomic-block-components/summary.js 924 B +1 B (0%)
build/atomic-block-components/title.js 931 B -2 B (0%)
build/attribute-filter.js 12.7 kB -322 B (-2%)
build/cart.js 43.6 kB +12 B (0%)
build/checkout.js 44.8 kB +18 B (0%)
build/featured-category.js 8.63 kB -1 B (0%)
build/featured-product.js 9.73 kB -3 B (0%)
build/mini-cart-component-frontend.js 16 kB -1 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 329 B -34 B (-9%)
build/mini-cart-contents-block/filled-cart-frontend.js 230 B +8 B (+4%)
build/mini-cart-contents-block/footer-frontend.js 5.66 kB +24 B (0%)
build/mini-cart-contents-block/items-frontend.js 225 B +19 B (+9%) 🔍
build/mini-cart-contents-block/products-table-frontend.js 5.36 kB +19 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 288 B +28 B (+11%) ⚠️
build/mini-cart-contents-block/title-frontend.js 367 B +19 B (+5%) 🔍
build/mini-cart-contents.js 23.6 kB +29 B (0%)
build/price-filter.js 8.16 kB -334 B (-4%)
build/product-best-sellers.js 7.39 kB -1 B (0%)
build/product-categories.js 2.79 kB -387 B (-12%) 👏
build/product-category.js 8.51 kB +3 B (0%)
build/product-new.js 7.69 kB +3 B (0%)
build/product-on-sale.js 8 kB +3 B (0%)
build/product-search.js 2.18 kB -4 B (0%)
build/product-tag.js 7.83 kB +1 B (0%)
build/product-top-rated.js 7.92 kB +1 B (0%)
build/products-by-attribute.js 8.4 kB +1 B (0%)
build/reviews-by-category.js 11.2 kB -255 B (-2%)
build/reviews-by-product.js 12.3 kB -271 B (-2%)
build/single-product.js 10 kB +8 B (0%)
build/stock-filter.js 6.57 kB -10 B (0%)
build/wc-blocks-editor-style-rtl.css 4.79 kB -42 B (-1%)
build/wc-blocks-editor-style.css 4.79 kB -42 B (-1%)
build/wc-blocks-style-rtl.css 22.4 kB +131 B (+1%)
build/wc-blocks-style.css 22.3 kB +128 B (+1%)
build/wc-blocks-vendors.js 69.4 kB +5 B (0%)
build/wc-blocks.js 2.62 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.28 kB
build/all-products-frontend.js 18.6 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.64 kB
build/atomic-block-components/add-to-cart-frontend.js 7.01 kB
build/atomic-block-components/button-frontend.js 2.08 kB
build/atomic-block-components/category-list-frontend.js 922 B
build/atomic-block-components/category-list.js 500 B
build/atomic-block-components/image-frontend.js 1.86 kB
build/atomic-block-components/price-frontend.js 1.95 kB
build/atomic-block-components/price.js 1.51 kB
build/atomic-block-components/rating-frontend.js 1.14 kB
build/atomic-block-components/sale-badge-frontend.js 1.1 kB
build/atomic-block-components/sku-frontend.js 385 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator-frontend.js 1.04 kB
build/atomic-block-components/summary-frontend.js 1.34 kB
build/atomic-block-components/tag-list-frontend.js 924 B
build/atomic-block-components/tag-list.js 498 B
build/atomic-block-components/title-frontend.js 1.31 kB
build/attribute-filter-frontend.js 16.8 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/express-payment-frontend.js 5.2 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.5 kB
build/cart-blocks/order-summary-frontend.js 8.88 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.3 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.13 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.84 kB
build/checkout-blocks/express-payment-frontend.js 5.5 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.78 kB
build/checkout-blocks/shipping-address-frontend.js 997 B
build/checkout-blocks/shipping-methods-frontend.js 4.73 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 47.5 kB
build/handpicked-products.js 7.11 kB
build/legacy-template.js 2.19 kB
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.39 kB
build/price-filter-frontend.js 12.5 kB
build/price-format.js 1.19 kB
build/reviews-frontend.js 7.34 kB
build/single-product-frontend.js 22 kB
build/stock-filter-frontend.js 6.5 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--194c50bf-frontend.js 5.26 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary--mini-cart-contents-block/products-table-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/vendors--mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 7.71 kB
build/wc-blocks-data.js 9.83 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 953 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-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 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.61 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-categories.js wp-compose 🎉

This comment was automatically generated by the ./github/compare-assets action.

@gigitux
Copy link
Contributor

gigitux commented Mar 2, 2022

Thanks for working on this! LGTM!

Are we migrating to experimental components, are we sure that it is safe? @Aljullu

If we agree that it is safe, the thing to do is fix ESLint errors and after that, we can merge this PR 🥳

@Aljullu Aljullu added focus: components Work that introduces new or updates existing components. status: needs review labels Mar 3, 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.

LGTM as well, good job @danieldudzic!

Are we migrating to experimental components, are we sure that it is safe? @Aljullu

That's a good point, thanks for raising it. I do think that in general we should avoid using experimental features in WC core. However, in this specific case, I think we can do an exception given that it seems a low-risk change and we can revert back if needed.

However, one thing that we should make sure to test is whether this works with WP 5.7, which is the oldest version supported by WC core. (Currently, it's set to 5.6, but I think that needs to be updated)

@Aljullu
Copy link
Contributor

Aljullu commented Mar 3, 2022

(Currently, it's set to 5.6, but I think that needs to be updated)

Just found that there is a PR already prepared to update it: woocommerce/woocommerce#32013 🙂

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-categories.js wp-compose 🎉

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-categories.js wp-compose 🎉

This comment was automatically generated by the ./github/compare-assets action.

@gigitux
Copy link
Contributor

gigitux commented Mar 8, 2022

Thanks for updating the PR! It seems that there are other eslint errors. Could you check?

If you want, you can try locally with:

npm run lint:js

@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-categories.js wp-compose 🎉

This comment was automatically generated by the ./github/compare-assets 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.

Thanks for working on this and fix the linter errors. Great job! LGTM :shipit:

@github-actions github-actions bot added this to the 7.2.0 milestone Mar 10, 2022
@mikejolley mikejolley modified the milestones: 7.2.0, 7.3.0 Mar 10, 2022
@tomasztunik
Copy link
Contributor

@danieldudzic is anything blocking this from being merged?

@tjcafferkey tjcafferkey modified the milestones: 7.3.0, 7.4.0 Mar 28, 2022
@danieldudzic danieldudzic merged commit 562a414 into trunk Apr 11, 2022
@danieldudzic danieldudzic deleted the update/5873-replace-toggle-button branch April 11, 2022 11:33
@tarhi-saad tarhi-saad added the type: bug The issue/PR concerns a confirmed bug. label Apr 11, 2022
sunyatasattva added a commit that referenced this pull request Apr 11, 2022
@opr opr mentioned this pull request Apr 12, 2022
5 tasks
tarhi-saad added a commit that referenced this pull request Apr 13, 2022
Add screenshots to the #5967 testing notes
tarhi-saad added a commit that referenced this pull request Apr 14, 2022
* Empty commit for release pull request

* Add Changelog to readme.txt

* Update WC tested and required versions

* Add testing notes

* Register missing C&C inner blocks and update fallback template for older C& C versions (#6195)

* Register missing C & C inner blocks and update fallback template for older C & C versions

This will fix the issues with missing order summary inner blocks: Coupons (both in C & C blocks) and the Cart header. The issue was happening because, for example, for Cart the coupons were registred on the on frontend, but it just wasn't forced in the attributes. Because it also wasn't added to the PHP fallback layout, the render function didn't include it. For the Checkout block the coupons inner block wasn't registered at all.

* Revert changes to Checkout.php, we don't need to test for inner blocks

* Revert "Revert changes to Checkout.php, we don't need to test for inner blocks"

This reverts commit fc39535.

* Fix the returned template for older Checkout block iterations

* Fix Cart and Checkout templates to accommodate the Summary order inner blocks

* Hide coupon form div from inner blocks if coubons are not enabled

* Fix checkout coupon tests in checkout

They have been written for logged in user

* Fix Order Summary Heading inner block's default text

* Update comments with better wording

* Revert "Hide coupon form div from inner blocks if coubons are not enabled"

This reverts commit ab09021.

(cherry picked from commit 40180ae)

* Update the zip file link

* Update testing instructions

* Remove experimental build related PR from testing notes

* Fix/order summary sidebar css (#6231)

* Add box sizing to Totals item

* Add some unit tests for Order summary blocks

* Fix Proceed to checkout button size

(cherry picked from commit 669aee7)

* Update the WC required/tested versions

* Mini Cart Contents: Use block pattern to make the empty cart message translatable (#6248)

* try: use block pattern to make empty cart message translatable

* Update src/BlockTypes/MiniCart.php

Co-authored-by: Albert Juhé Lluveras <[email protected]>

* rename function

Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Luigi <[email protected]>
(cherry picked from commit cfe73f1)

* Update the release's ZIP file

* Update testing notes

In #6065, for Cart only Order Summary Heading & Coupon form can
be removed, and for Checkout only the Coupon form.

* Update the testing notes

Remove #5870 testing notes because they can't be tested as a user

* Update Testing notes

Add screenshots to the #5967 testing notes

* Remove #6166 testing instructions

We reverted this PR

* Revert (#6166) (#6253)

Revert "Prevent Featured Product block from breaking when product is out of stock + hidden
from catalog (#6166)"

This reverts commit 3c0e0af

(cherry picked from commit 908526e)

* Bumping version strings to new version.

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Saad Tarhi <[email protected]>
Co-authored-by: Raluca Stan <[email protected]>
Co-authored-by: Luigi Teschio <[email protected]>
Co-authored-by: Tung Du <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: components Work that introduces new or updates existing components. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace ToggleButtonControl with ToggleGroupControl
7 participants