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

Make mini cart icon RTL on RTL sites in editor #9707

Merged
merged 2 commits into from
Jun 5, 2023
Merged

Conversation

roykho
Copy link
Member

@roykho roykho commented Jun 2, 2023

Fixes #9421

This PR fixes the issue with the mini cart icon where in RTL language sites, the icon was still facing right when it should face left.

Note (separate issue): I did notice we are using two different cart icons.
file.png

I am not sure if this was intended. If not, then I can also add this fix along with this PR.

Screenshots

file.png

Testing

User Facing Testing

  1. Install a plugin called "RTL Tester".
  2. Switch to RTL with the button in your admin bar.
  3. Add a post and insert the Mini cart block.
  4. Click on the Mini cart icon to open the editor drawer.
  5. Ensure the Mini cart icon is facing left instead of right as seen in the screenshot above.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix mini cart icon not displaying correctly in RTL sites.

@roykho roykho added type: bug The issue/PR concerns a confirmed bug. block: mini-cart Issues related to the Mini-Cart block. labels Jun 2, 2023
@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team June 2, 2023 15:52
@github-actions
Copy link
Contributor

github-actions bot commented Jun 2, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9707.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: 469
  • Total errors: 2256

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 2, 2023

Size Change: +605 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters.js 7.47 kB +2 B (0%)
build/all-products.js 40 kB -4 B (0%)
build/all-reviews.js 7.85 kB +2 B (0%)
build/attribute-filter.js 13.2 kB +3 B (0%)
build/cart.js 45.1 kB +1 B (0%)
build/checkout.js 46.4 kB -2 B (0%)
build/featured-category.js 15.1 kB +1 B (0%)
build/featured-product.js 15.3 kB +3 B (0%)
build/filter-wrapper-frontend.js 14.3 kB -2 B (0%)
build/handpicked-products.js 8.04 kB +3 B (0%)
build/legacy-template.js 6.45 kB -1 B (0%)
build/mini-cart-component-frontend.js 28.5 kB -1 B (0%)
build/mini-cart-contents.js 18 kB +17 B (0%)
build/mini-cart.js 4.44 kB +3 B (0%)
build/price-filter.js 8.55 kB +4 B (0%)
build/product-best-sellers.js 8.35 kB +3 B (0%)
build/product-categories.js 2.7 kB -2 B (0%)
build/product-category.js 9.37 kB +3 B (0%)
build/product-collection.js 11.2 kB +513 B (+5%) 🔍
build/product-new.js 8.65 kB +3 B (0%)
build/product-on-sale.js 8.69 kB +3 B (0%)
build/product-query.js 11.8 kB -1 B (0%)
build/product-top-rated.js 8.91 kB +2 B (0%)
build/products-by-attribute.js 9.75 kB +1 B (0%)
build/rating-filter.js 6.9 kB +7 B (0%)
build/reviews-by-category.js 12.1 kB +1 B (0%)
build/reviews-by-product.js 13.3 kB +2 B (0%)
build/single-product.js 11.1 kB +1 B (0%)
build/stock-filter.js 7.62 kB +10 B (0%)
build/wc-blocks-editor-style-rtl.css 6.04 kB +28 B (0%)
build/wc-blocks-editor-style.css 6.03 kB +28 B (0%)
build/wc-blocks-style-rtl.css 27.9 kB +5 B (0%)
build/wc-blocks-style.css 27.8 kB +5 B (0%)
build/wc-blocks-vendors.js 65 kB -37 B (0%)
build/wc-blocks.js 3.69 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.65 kB
build/active-filters-wrapper-frontend.js 7.61 kB
build/all-products-frontend.js 12 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.04 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 254 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.51 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 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 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.9 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 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.19 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 332 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 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 277 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.85 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 32 kB
build/customer-account.js 3.18 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.73 kB
build/mini-cart-contents-block/empty-cart-frontend.js 362 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 4.09 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 593 B
build/mini-cart-contents-block/shopping-button-frontend.js 526 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-frontend.js 2.72 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 250 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.52 kB
build/product-add-to-cart.js 8.84 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 3.97 kB
build/product-image-frontend.js 2.62 kB
build/product-image.js 4.14 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.68 kB
build/product-rating-frontend.js 2.27 kB
build/product-rating.js 971 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.79 kB
build/product-sale-badge.js 665 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.03 kB
build/product-stock-indicator.js 730 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 905 B
build/product-tag.js 9.01 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.21 kB
build/product-title.js 3.66 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.2 kB
build/reviews-frontend.js 7.18 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 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-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 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.75 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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 30.4 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

Tested with the RTL language and the icon is facing the correct direction. 💪

Note (separate issue): I did notice we are using two different cart icons.
I am not sure if this was intended. If not, then I can also add this fix along with this PR.

I'm not sure why is that, but I remember there was an idea to make this icon customizable by merchants, hence it might've been intended to have different icons (ref: pdnLyh-2xv-p2). But my personal opinion - I think it would make sense to unify them.

assets/js/blocks/mini-cart/editor.scss Outdated Show resolved Hide resolved
@github-actions github-actions bot added this to the 10.4.0 milestone Jun 5, 2023
@tarunvijwani
Copy link

Bumping it to 10.5.0 release.

@tarunvijwani tarunvijwani modified the milestones: 10.4.0, 10.5.0 Jun 5, 2023
@roykho roykho merged commit 98e77b0 into trunk Jun 5, 2023
@roykho roykho deleted the fix/mini-cart-rtl branch June 5, 2023 13:36
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. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mini-Cart block editor sidebar: Cart Drawer image is not adjusted on RTL
3 participants