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

Mini Cart Block: The color of the badge reflects the global style #5477

Merged
merged 2 commits into from
Jan 6, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Jan 3, 2022

With this PR, the color of the badge of Mini Cart Block will reflect the global style.

This PR also disables the ability to customize the background because it shouldn't be possible.

Fixes #4965

Screenshots

image
before this PR

image
with this PR

Manual Testing

How to test the changes in this PR:

Check out this branch:

  1. Install and enable Gutenberg plugin.
  2. Install and enable TT1 Blocks theme.
  3. Add the Mini Cart Block.
  4. Verify you can change ONLY the text color.
  5. Save.
  6. Go on the page and check if there are changes.
  7. Reset to default.
  8. Go to Dashboard and select Appearance > Editor (beta).
  9. Click on the Global styles icon .
  10. Verify the Mini Cart Block is shown and you can tweak its styles.
  11. Save
  12. Go on the page created earlier and check if all styles are applied correctly.
  13. Edit the previous post/page again.
  14. Change again text color.
  15. Save.
  16. Check if these styles have priority over the styles from the Site editor.

Mini Cart Block: the color of the badge reflects the global style #4965
@gigitux gigitux added skip-changelog PRs that you don't want to appear in the changelog. focus: global styles Issues that involve styles/css/layout structure. focus: FSE Work related to prepare WooCommerce for FSE. block: mini-cart Issues related to the Mini-Cart block. labels Jan 3, 2022
@gigitux gigitux self-assigned this Jan 3, 2022
@rubikuserbot rubikuserbot requested review from a team and sunyatasattva and removed request for a team January 3, 2022 11:41
@github-actions
Copy link
Contributor

github-actions bot commented Jan 3, 2022

Size Change: +1 B (0%)

Total Size: 819 kB

Filename Size Change
build/mini-cart.js 6.46 kB +4 B (0%)
build/wc-blocks-style-rtl.css 21.6 kB -2 B (0%)
build/wc-blocks-style.css 21.6 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 7.1 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 34.4 kB
build/all-reviews.js 8.35 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.87 kB
build/atomic-block-components/add-to-cart.js 6.43 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 851 B
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.7 kB
build/atomic-block-components/rating-frontend.js 553 B
build/atomic-block-components/rating.js 554 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator-frontend.js 585 B
build/atomic-block-components/stock-indicator.js 585 B
build/atomic-block-components/summary-frontend.js 874 B
build/atomic-block-components/summary.js 871 B
build/atomic-block-components/tag-list-frontend.js 460 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.11 kB
build/atomic-block-components/title.js 1.1 kB
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12.7 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.86 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.32 kB
build/cart-blocks/order-summary-frontend.js 8.98 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.4 kB
build/cart.js 44.3 kB
build/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 884 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.15 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.41 kB
build/checkout-blocks/shipping-address-frontend.js 971 B
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 47.5 kB
build/checkout.js 47.1 kB
build/featured-category.js 8.55 kB
build/featured-product.js 9.91 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.08 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.6 kB
build/mini-cart-frontend.js 1.76 kB
build/price-filter-frontend.js 12.4 kB
build/price-filter.js 8.62 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.51 kB
build/product-categories.js 3.47 kB
build/product-category.js 8.36 kB
build/product-new.js 7.66 kB
build/product-on-sale.js 8.05 kB
build/product-search.js 2.47 kB
build/product-tag.js 7.76 kB
build/product-top-rated.js 7.63 kB
build/products-by-attribute.js 8.48 kB
build/reviews-by-category.js 11.8 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.24 kB
build/single-product-frontend.js 22.1 kB
build/single-product.js 10.4 kB
build/stock-filter-frontend.js 6.81 kB
build/stock-filter.js 6.82 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 6.82 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.46 kB
build/wc-blocks-editor-style.css 4.46 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 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-blocks-vendors.js 65.5 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.61 kB

compressed-size-action

@gigitux gigitux mentioned this pull request Jan 3, 2022
18 tasks
Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

LGTM!

@github-actions github-actions bot added this to the 6.8.0 milestone Jan 5, 2022
@gigitux gigitux merged commit c90d6d2 into trunk Jan 6, 2022
@gigitux gigitux deleted the add/4965-mini-cart-button branch January 6, 2022 08:47
@dinhtungdu
Copy link
Member

@gigitux @Aljullu with this PR, the Mini Cart button doesn't work well for dark themes. The background setting was added to set the background color of the button as well as the badge. We used __experimentalSelector to make global style work with it, and it worked at the time the PR was merged, please see #5100 for more details.

image

@gigitux gigitux added the type: enhancement The issue is a request for an enhancement. label Jan 17, 2022
@Aljullu
Copy link
Contributor

Aljullu commented Jan 17, 2022

@gigitux @Aljullu with this PR, the Mini Cart button doesn't work well for dark themes.

Sorry I'm very late on this. 🙂 I'm right assuming this was fixed in #5539 or is there anything that needs to be done? @gigitux @dinhtungdu

@gigitux
Copy link
Contributor Author

gigitux commented Jan 17, 2022

I'm right assuming this was fixed in #5539

Yes, it is fixed in #5539

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. focus: FSE Work related to prepare WooCommerce for FSE. focus: global styles Issues that involve styles/css/layout structure. skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add global styles to all WC Blocks
4 participants