Add control for Mini Cart Icon size.

[danielwrobert]

trafficstars

Uses the RangeControl component to allow for icon size updates. Also removes the CSS styling so that the SVG properties can take effect when set.

Note that I've restricted the sizing between 20 and 40 (setting steps in increments of 5) because those min/max sizes seemed to fit well with the typography font-size options.

Fixes #6922

Accessibility

• [x] I've tested using only a keyboard (no mouse)
• [x] I've tested using a screen reader

Screenshots

Before	After

Testing

Automated Tests

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

User Facing Testing

1. Add a Mini Cart block to a Page or Post in the editor.
2. Select the Mini Cart block and, in the block's sidebar settings, confirm there is an Icon Size option with a range slider.
3. Adjust the icon size and confirm the cart icon updates in the editor.
4. Confirm the minimum value is 20 and the max value is 40.
5. Save and preview the frontend to confirm the changes have persisted.

WooCommerce Visibility

• [ ] WooCommerce Core
• [x] Feature plugin
• [ ] Experimental

Changelog

Update: Add size control for the Mini Cart block icon.

[github-actions[bot]]

The release ZIP for this PR is accessible via:

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

[github-actions[bot]]

Size Change: +95 B (0%)

Total Size: 1.01 MB

Filename	Size	Change
build/mini-cart-component-frontend.js	20 kB	+20 B (0%)
build/mini-cart.js	4.35 kB	+83 B (+2%)
build/wc-blocks-style-rtl.css	24.8 kB	-3 B (0%)
build/wc-blocks-style.css	24.8 kB	-5 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.8 kB
build/active-filters-wrapper-frontend.js	6.07 kB
build/active-filters.js	7.38 kB
build/all-products-frontend.js	11.4 kB
build/all-products.js	33.5 kB
build/all-reviews.js	7.65 kB
build/attribute-filter-frontend.js	22.8 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	3.44 kB
build/attribute-filter-wrapper-frontend.js	5.08 kB
build/attribute-filter.js	12.4 kB
build/blocks-checkout.js	39.5 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.64 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.08 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.29 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.25 kB
build/cart-blocks/cart-totals-frontend.js	322 B
build/cart-blocks/empty-cart-frontend.js	344 B
build/cart-blocks/filled-cart-frontend.js	782 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.78 kB
build/cart-blocks/order-summary-discount-frontend.js	2.13 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	456 B
build/cart-blocks/order-summary-shipping-frontend.js	14.6 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	436 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.24 kB
build/cart-frontend.js	28.1 kB
build/cart.js	46.9 kB
build/checkout-blocks/actions-frontend.js	1.86 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	3.86 kB
build/checkout-blocks/billing-address-frontend.js	1.12 kB
build/checkout-blocks/contact-information-frontend.js	2 kB
build/checkout-blocks/express-payment-frontend.js	1.14 kB
build/checkout-blocks/fields-frontend.js	343 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.93 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-frontend.js	1.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js	14.6 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	436 B
build/checkout-blocks/payment-frontend.js	8.34 kB
build/checkout-blocks/shipping-address-frontend.js	1.11 kB
build/checkout-blocks/shipping-methods-frontend.js	4.57 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	325 B
build/checkout-frontend.js	29.4 kB
build/checkout.js	40.9 kB
build/customer-account.js	3.08 kB
build/featured-category.js	13.1 kB
build/featured-product.js	13.3 kB
build/filter-wrapper-frontend.js	13.9 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.29 kB
build/general-style.css	1.29 kB
build/handpicked-products.js	7.22 kB
build/legacy-template.js	2.85 kB
build/mini-cart-contents-block/empty-cart-frontend.js	366 B
build/mini-cart-contents-block/filled-cart-frontend.js	388 B
build/mini-cart-contents-block/footer-frontend.js	2.81 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	590 B
build/mini-cart-contents-block/shopping-button-frontend.js	313 B
build/mini-cart-contents-block/title-frontend.js	368 B
build/mini-cart-contents.js	16.7 kB
build/mini-cart-frontend.js	1.88 kB
build/price-filter-frontend.js	13.7 kB
build/price-filter-wrapper-frontend.js	7.08 kB
build/price-filter.js	8.45 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	226 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.48 kB
build/product-best-sellers.js	7.58 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	443 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js	302 B
build/product-button-frontend.js	2.16 kB
build/product-button.js	3.84 kB
build/product-categories.js	2.36 kB
build/product-category-list-frontend.js	1.14 kB
build/product-category-list.js	502 B
build/product-category.js	8.57 kB
build/product-image-frontend.js	2.16 kB
build/product-image.js	3.93 kB
build/product-new.js	7.57 kB
build/product-on-sale.js	7.89 kB
build/product-price-frontend.js	2.18 kB
build/product-price.js	1.54 kB
build/product-query.js	5.92 kB
build/product-rating-frontend.js	1.59 kB
build/product-rating.js	919 B
build/product-sale-badge-frontend.js	1.39 kB
build/product-sale-badge.js	814 B
build/product-search.js	2.62 kB
build/product-sku-frontend.js	629 B
build/product-sku.js	377 B
build/product-stock-indicator-frontend.js	1.27 kB
build/product-stock-indicator.js	645 B
build/product-summary-frontend.js	1.53 kB
build/product-summary.js	919 B
build/product-tag-list-frontend.js	1.14 kB
build/product-tag-list.js	497 B
build/product-tag.js	8.06 kB
build/product-title-frontend.js	1.59 kB
build/product-title.js	3.31 kB
build/product-top-rated.js	7.81 kB
build/products-by-attribute.js	8.5 kB
build/rating-filter-frontend.js	21.3 kB
build/rating-filter-wrapper-frontend.js	6.29 kB
build/rating-filter.js	7.47 kB
build/reviews-by-category.js	11.2 kB
build/reviews-by-product.js	12.3 kB
build/reviews-frontend.js	6.88 kB
build/single-product-frontend.js	17.3 kB
build/single-product.js	9.96 kB
build/stock-filter-frontend.js	21 kB
build/stock-filter-wrapper-frontend.js	3.18 kB
build/stock-filter.js	8.21 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--cde4eab5-frontend.js	6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js	19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js	7.53 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.82 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js	9.48 kB
build/wc-blocks-data.js	21.2 kB
build/wc-blocks-editor-style-rtl.css	5.41 kB
build/wc-blocks-editor-style.css	5.41 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	931 B
build/wc-blocks-registry.js	2.92 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.88 kB
build/wc-blocks-vendors-style-rtl.css	1.95 kB
build/wc-blocks-vendors-style.css	1.95 kB
build/wc-blocks-vendors.js	62.7 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}

[vivialice]

Hey! Thanks @danielwrobert for looking at this!

For some reason, when try it in my test store, I am not getting the same result as you. The badge isn't scaling correctly with the rest of the icon:

Using TT2 theme. Let me know if I might be missing a setting or something.

[danielwrobert]

@vivialice thanks for reviewing this and nice catch on the badge!

I will adjust this to be sure that is included in the control.

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[github-actions[bot]]

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

• Files with errors: 421
• Total errors: 1916

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[danielwrobert]

Per a conversation with @vivialice, I am going to go ahead and close this PR out for now.

The icon and badge currently scale with the price text size. This is also the behavior for the Customer Account block so we decided it would be best to keep them consistent.

If we determine that it is better to separate the controls, we can circle back to this and also include the separation in the Customer Account block in that effort.

Note that the work is mostly done in this PR - the remaining item would be to include the badge with the icon scaling, which I missed initially (see comment from @vivialice here).