Switch `Select` by `Toggle` for the 'Add-to-Cart behaviour' #8558

albarin · 2023-02-27T15:45:24Z

The goal of this PR is to change the SelectControl to the ToggleGroupControl since it only has two options.

Screenshots

Before	After

Testing

Automated Tests

User Facing Testing

Create a new page and add the Mini cart block.
Open the settings and make sure the Add-to-Cart behaviour selector is using a toggle button, not a select dropdown.
Make sure both options can be saved, and keep working as expected (there are no regressions).

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Changelog

Fix: change the "Add-to-Cart behaviour" mini-cart select to a toggle button.

github-actions · 2023-02-27T15:47:37Z

The release ZIP for this PR is accessible via:

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

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
`reviews-frontend.js`	`react`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`attribute-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wc-settings`, `wp-polyfill`	⚠️
`price-filter-frontend.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`single-product-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`stock-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

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

TypeScript Errors Report

Files with errors: 487
Total errors: 2337

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/mini-cart/edit.tsx

_{comments-aggregator}

github-actions · 2023-02-27T15:55:19Z

Size Change: +5 B (0%)

Total Size: 1.11 MB

Filename	Size	Change
`build/mini-cart.js`	4.31 kB	+5 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	7.98 kB
`build/active-filters-wrapper-frontend.js`	5.99 kB
`build/active-filters.js`	7.33 kB
`build/all-products-frontend.js`	11.7 kB
`build/all-products.js`	36.4 kB
`build/all-reviews.js`	7.67 kB
`build/attribute-filter-frontend.js`	22.4 kB
`build/attribute-filter-wrapper-frontend.js`	7.08 kB
`build/attribute-filter.js`	12.4 kB
`build/blocks-checkout.js`	41.2 kB
`build/breadcrumbs.js`	2.04 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.38 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products-frontend.js`	9.71 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.19 kB
`build/cart-blocks/cart-express-payment-frontend.js`	720 B
`build/cart-blocks/cart-items-frontend.js`	299 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.35 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.06 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.24 kB
`build/cart-blocks/cart-totals-frontend.js`	322 B
`build/cart-blocks/empty-cart-frontend.js`	345 B
`build/cart-blocks/filled-cart-frontend.js`	655 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	1.62 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.12 kB
`build/cart-blocks/order-summary-fee-frontend.js`	274 B
`build/cart-blocks/order-summary-heading-frontend.js`	455 B
`build/cart-blocks/order-summary-shipping-frontend.js`	14.8 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	275 B
`build/cart-blocks/order-summary-taxes-frontend.js`	434 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.24 kB
`build/cart-frontend.js`	28.9 kB
`build/cart.js`	47.5 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	3.92 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 kB
`build/checkout-blocks/contact-information-frontend.js`	2.05 kB
`build/checkout-blocks/express-payment-frontend.js`	1.13 kB
`build/checkout-blocks/fields-frontend.js`	345 B
`build/checkout-blocks/order-note-frontend.js`	1.14 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.67 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	1.79 kB
`build/checkout-blocks/order-summary-discount-frontend.js`	2.29 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	276 B
`build/checkout-blocks/order-summary-frontend.js`	1.24 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	14.9 kB
`build/checkout-blocks/order-summary-subtotal-frontend.js`	275 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	435 B
`build/checkout-blocks/payment-frontend.js`	8.43 kB
`build/checkout-blocks/pickup-options-frontend.js`	2.8 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.14 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.28 kB
`build/checkout-blocks/shipping-methods-frontend.js`	4.58 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	324 B
`build/checkout-frontend.js`	30.5 kB
`build/checkout.js`	44.2 kB
`build/customer-account.js`	3.08 kB
`build/featured-category.js`	13.5 kB
`build/featured-product.js`	13.7 kB
`build/filter-wrapper-frontend.js`	14.1 kB
`build/filter-wrapper.js`	2.39 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 kB
`build/handpicked-products.js`	7.24 kB
`build/legacy-template.js`	5.29 kB
`build/mini-cart-component-frontend.js`	28 kB
`build/mini-cart-contents-block/empty-cart-frontend.js`	366 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	268 B
`build/mini-cart-contents-block/footer-frontend.js`	2.86 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	589 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	313 B
`build/mini-cart-contents-block/title-frontend.js`	367 B
`build/mini-cart-contents.js`	16.6 kB
`build/mini-cart-frontend.js`	2 kB
`build/price-filter-frontend.js`	13.8 kB
`build/price-filter-wrapper-frontend.js`	6.99 kB
`build/price-filter.js`	8.39 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`	253 B
`build/product-add-to-cart--product-button--product-image--product-rating--product-title.js`	151 B
`build/product-add-to-cart-frontend.js`	6.71 kB
`build/product-add-to-cart.js`	8.61 kB
`build/product-best-sellers.js`	7.59 kB
`build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js`	500 B
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js`	262 B
`build/product-button-frontend.js`	2.22 kB
`build/product-button.js`	3.99 kB
`build/product-categories.js`	2.36 kB
`build/product-category-list-frontend.js`	1.19 kB
`build/product-category-list.js`	502 B
`build/product-category.js`	8.58 kB
`build/product-image-frontend.js`	2.23 kB
`build/product-image.js`	4.09 kB
`build/product-new.js`	7.58 kB
`build/product-on-sale.js`	7.91 kB
`build/product-price-frontend.js`	2.32 kB
`build/product-price.js`	1.58 kB
`build/product-query.js`	6.6 kB
`build/product-rating-frontend.js`	1.65 kB
`build/product-rating.js`	920 B
`build/product-results-count.js`	1.65 kB
`build/product-sale-badge-frontend.js`	1.45 kB
`build/product-sale-badge.js`	816 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	629 B
`build/product-sku.js`	378 B
`build/product-stock-indicator-frontend.js`	1.31 kB
`build/product-stock-indicator.js`	645 B
`build/product-summary-frontend.js`	1.58 kB
`build/product-summary.js`	920 B
`build/product-tag-list-frontend.js`	1.18 kB
`build/product-tag-list.js`	497 B
`build/product-tag.js`	8.07 kB
`build/product-title-frontend.js`	1.65 kB
`build/product-title.js`	3.46 kB
`build/product-top-rated.js`	7.82 kB
`build/products-by-attribute.js`	8.52 kB
`build/rating-filter-frontend.js`	20.9 kB
`build/rating-filter-wrapper-frontend.js`	5.61 kB
`build/rating-filter.js`	7.41 kB
`build/reviews-by-category.js`	11.2 kB
`build/reviews-by-product.js`	12.3 kB
`build/reviews-frontend.js`	7.14 kB
`build/single-product-frontend.js`	17.9 kB
`build/single-product.js`	9.94 kB
`build/stock-filter-frontend.js`	21.1 kB
`build/stock-filter-wrapper-frontend.js`	5.85 kB
`build/stock-filter.js`	8.14 kB
`build/store-notices.js`	1.69 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js`	6.86 kB
`build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js`	7.69 kB
`build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js`	5.26 kB
`build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js`	19.4 kB
`build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js`	7.25 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.83 kB
`build/vendors--checkout-blocks/shipping-method-frontend.js`	12 kB
`build/vendors--checkout-blocks/shipping-methods-frontend.js`	8.84 kB
`build/wc-blocks-data.js`	21.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.74 kB
`build/wc-blocks-editor-style.css`	5.75 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	933 B
`build/wc-blocks-registry.js`	3.15 kB
`build/wc-blocks-shared-context.js`	1.52 kB
`build/wc-blocks-shared-hocs.js`	1.73 kB
`build/wc-blocks-style-rtl.css`	26.7 kB
`build/wc-blocks-style.css`	26.7 kB
`build/wc-blocks-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 kB
`build/wc-blocks-vendors.js`	64.4 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
`build/wc-shipping-method-pickup-location.js`	29.7 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

nefeline

Nice work! 🚀

Create a new page and add the Mini cart block.
Open the settings and make sure the Add-to-Cart behaviour selector is using a toggle button, not a select dropdown.

✅ Confirmed the toggle button is in place.

Make sure both options can be saved, and keep working as expected (there are no regressions).

✅ Confirmed both options work as expected.

Switch Select by Toggle for the 'Add-to-Cart behaviour'

06bcabb

albarin marked this pull request as ready for review February 27, 2023 15:45

woocommercebot requested review from a team and nefeline and removed request for a team February 27, 2023 15:45

nefeline approved these changes Feb 28, 2023

View reviewed changes

github-actions bot added the status: ready to merge label Feb 28, 2023

albarin added 3 commits March 1, 2023 09:20

Merge branch 'trunk' into fix/7517-add-toggle

9a358da

Merge branch 'trunk' into fix/7517-add-toggle

3ec7239

Merge branch 'trunk' into fix/7517-add-toggle

38409e5

albarin merged commit 5767abf into trunk Mar 2, 2023

albarin deleted the fix/7517-add-toggle branch March 2, 2023 14:09

github-actions bot removed the status: ready to merge label Mar 2, 2023

Aljullu added type: enhancement The issue is a request for an enhancement. block: mini-cart Issues related to the Mini-Cart block. labels Mar 13, 2023

Aljullu added this to the 9.8.0 milestone Mar 13, 2023

Aljullu mentioned this pull request Mar 14, 2023

Update WooCommerce Blocks package to 9.8.0 woocommerce/woocommerce#37210

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch `Select` by `Toggle` for the 'Add-to-Cart behaviour' #8558

Switch `Select` by `Toggle` for the 'Add-to-Cart behaviour' #8558

albarin commented Feb 27, 2023 •

edited by Aljullu

Loading

github-actions bot commented Feb 27, 2023 •

edited

Loading

github-actions bot commented Feb 27, 2023 •

edited

Loading

nefeline left a comment

Switch Select by Toggle for the 'Add-to-Cart behaviour' #8558

Switch Select by Toggle for the 'Add-to-Cart behaviour' #8558

Conversation

albarin commented Feb 27, 2023 • edited by Aljullu Loading

Screenshots

Testing

Automated Tests

User Facing Testing

WooCommerce Visibility

Changelog

github-actions bot commented Feb 27, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented Feb 27, 2023 • edited Loading

nefeline left a comment

Choose a reason for hiding this comment

Switch `Select` by `Toggle` for the 'Add-to-Cart behaviour' #8558

Switch `Select` by `Toggle` for the 'Add-to-Cart behaviour' #8558

albarin commented Feb 27, 2023 •

edited by Aljullu

Loading

github-actions bot commented Feb 27, 2023 •

edited

Loading

github-actions bot commented Feb 27, 2023 •

edited

Loading