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

Mini Cart: Add font size and font family controls #6396

Merged
merged 3 commits into from
May 30, 2022
Merged

Mini Cart: Add font size and font family controls #6396

merged 3 commits into from
May 30, 2022

Conversation

danieldudzic
Copy link
Contributor

This PR adds support for Typography options: Font size and Font family for the Mini Cart block.

Fixes #6254

Screenshots

Before After
before_now after_now

Testing

How to test the changes in this Pull Request:

  1. Activate a block theme, like Twenty Twenty Two
  2. Create a new page, and add the Mini Cart block
  3. Check if the Typography option is available for the block
  4. Check if the Font size and Font family options work correctly both in the editor and on the frontend

2b. After testing the above, try the same with the Mini Cart block added via the FSE editor (for example in the header)

Automated Tests

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

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

Changelog

Add support for Font size and Font family for the Mini Cart block.

@danieldudzic danieldudzic added focus: global styles Issues that involve styles/css/layout structure. block: mini-cart Issues related to the Mini-Cart block. labels May 10, 2022
@danieldudzic danieldudzic requested a review from gigitux May 10, 2022 15:41
@danieldudzic danieldudzic self-assigned this May 10, 2022
@rubikuserbot rubikuserbot requested a review from a team May 10, 2022 15:41
@github-actions
Copy link
Contributor

github-actions bot commented May 10, 2022 •
edited
Loading

Size Change: -10.1 kB (-1%)

Total Size: 862 kB

Filename Size Change
build/active-filters-frontend.js 6.59 kB -2 B (0%)
build/active-filters.js 7.42 kB +10 B (0%)
build/all-products-frontend.js 18.1 kB -21 B (0%)
build/all-products.js 33.4 kB +37 B (0%)
build/all-reviews.js 7.79 kB -8 B (0%)
build/attribute-filter-frontend.js 17.7 kB -3 B (0%)
build/attribute-filter.js 13.8 kB +39 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.06 kB -184 B (-4%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB -2 B (0%)
build/cart-blocks/cart-line-items-frontend.js 432 B -1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 782 B -1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB -190 B (-7%) ✅
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB -185 B (-8%) ✅
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.34 kB -2 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB -1 B (0%)
build/cart-frontend.js 45.3 kB -212 B (0%)
build/cart.js 44.1 kB -232 B (-1%)
build/checkout-blocks/actions-frontend.js 1.41 kB +1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB -1 B (0%)
build/checkout-blocks/billing-address-frontend.js 892 B +3 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.35 kB -182 B (-3%)
build/checkout-blocks/order-note-frontend.js 1.07 kB +2 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB -1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.78 kB -189 B (-6%) ✅
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB -185 B (-8%) ✅
build/checkout-blocks/order-summary-frontend.js 1.11 kB +1 B (0%)
build/checkout-blocks/payment-frontend.js 7.67 kB -175 B (-2%)
build/checkout-blocks/shipping-address-frontend.js 997 B +2 B (0%)
build/checkout-frontend.js 47.5 kB -237 B (0%)
build/checkout.js 45.4 kB -193 B (0%)
build/featured-category.js 13.1 kB +281 B (+2%)
build/featured-product.js 13.4 kB +2.23 kB (+20%) 🚨
build/handpicked-products.js 7.39 kB +247 B (+3%)
build/mini-cart-component-frontend.js 16.6 kB -9 B (0%)
build/mini-cart-contents-block/footer-frontend.js 5.63 kB -1 B (0%)
build/mini-cart-contents.js 22.8 kB +44 B (0%)
build/mini-cart.js 6.62 kB +524 B (+9%) 🔍
build/price-filter-frontend.js 12.5 kB -4 B (0%)
build/price-filter.js 8.74 kB +13 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.64 kB -1 B (0%)
build/product-add-to-cart--product-button.js 564 B -1 B (0%)
build/product-add-to-cart-frontend.js 6.96 kB -2 B (0%)
build/product-add-to-cart.js 6.64 kB +3 B (0%)
build/product-best-sellers.js 7.47 kB +44 B (+1%)
build/product-button-frontend.js 1.85 kB +8 B (0%)
build/product-button.js 1.09 kB +10 B (+1%)
build/product-category-list-frontend.js 923 B -1 B (0%)
build/product-category-list.js 501 B +1 B (0%)
build/product-category.js 8.58 kB +49 B (+1%)
build/product-image-frontend.js 1.84 kB -3 B (0%)
build/product-new.js 7.76 kB +43 B (+1%)
build/product-on-sale.js 8.07 kB +37 B (0%)
build/product-price-frontend.js 1.94 kB -1 B (0%)
build/product-price.js 1.5 kB -1 B (0%)
build/product-rating-frontend.js 1.15 kB -2 B (0%)
build/product-rating.js 730 B -6 B (-1%)
build/product-sale-badge-frontend.js 1.09 kB -2 B (0%)
build/product-sale-badge.js 677 B -1 B (0%)
build/product-sku.js 381 B -1 B (0%)
build/product-stock-indicator-frontend.js 1.03 kB -1 B (0%)
build/product-stock-indicator.js 620 B -1 B (0%)
build/product-summary-frontend.js 1.33 kB -1 B (0%)
build/product-summary.js 917 B -1 B (0%)
build/product-tag-list-frontend.js 917 B -1 B (0%)
build/product-tag.js 8.12 kB +272 B (+3%)
build/product-title.js 910 B +1 B (0%)
build/product-top-rated.js 8 kB +50 B (+1%)
build/products-by-attribute.js 8.69 kB +271 B (+3%)
build/reviews-by-category.js 11.3 kB +76 B (+1%)
build/reviews-by-product.js 12.3 kB +94 B (+1%)
build/reviews-frontend.js 7.02 kB -2 B (0%)
build/single-product-frontend.js 21.5 kB -16 B (0%)
build/single-product.js 10.1 kB +38 B (0%)
build/stock-filter-frontend.js 6.87 kB -1 B (0%)
build/stock-filter.js 6.95 kB +19 B (0%)
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.72 kB -23 B (0%)
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB -3 B (0%)
build/wc-blocks-editor-style-rtl.css 5.04 kB +92 B (+2%)
build/wc-blocks-editor-style.css 5.04 kB +95 B (+2%)
build/wc-blocks-style-rtl.css 22.2 kB +18 B (0%)
build/wc-blocks-style.css 22.1 kB +13 B (0%)
build/wc-blocks-vendors.js 59 kB -12.4 kB (-17%) 👏
build/wc-blocks.js 2.62 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
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-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/shipping-methods-frontend.js 4.71 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/legacy-template.js 2.2 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/items-frontend.js 225 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-frontend.js 1.72 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-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-categories.js 2.78 kB
build/product-image.js 1.07 kB
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-tag-list.js 495 B
build/product-title-frontend.js 1.3 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--decc3dc6-frontend.js 20.5 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 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-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

gigitux
gigitux suggested changes May 13, 2022
View reviewed changes
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.

Good job! Just two tiny comments! 💪

assets/js/hooks/style-attributes.ts Outdated Show resolved Hide resolved
assets/js/blocks/mini-cart/index.tsx Outdated Show resolved Hide resolved
@danieldudzic danieldudzic requested a review from gigitux May 27, 2022 19:48
gigitux
gigitux approved these changes May 30, 2022
View reviewed changes
Copy link
Contributor

@gigitux gigitux left a comment •
edited
Loading

Choose a reason for hiding this comment

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

LGTM :shipit:

@github-actions github-actions bot added this to the 7.8.0 milestone May 30, 2022
@danieldudzic danieldudzic merged commit e3e1868 into trunk May 30, 2022
@danieldudzic danieldudzic deleted the add/6254-minicart-typography-controls branch May 30, 2022 08:45
@gigitux gigitux mentioned this pull request Jun 7, 2022
Merged
8 tasks
@github-actions github-actions bot mentioned this pull request Jul 13, 2022
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@gigitux gigitux gigitux approved these changes

Assignees

@danieldudzic danieldudzic

Labels
block: mini-cart Issues related to the Mini-Cart block. focus: global styles Issues that involve styles/css/layout structure.
Projects
None yet
Milestone
7.8.0
Development

Successfully merging this pull request may close these issues.

Add typography style controls to the Mini Cart block
2 participants
@danieldudzic @gigitux