#12170 Set up RTL generation and enqueuing

[claudiulodro]

This relates to issue #12170.

I've set up the Gruntfile for generating RTL CSS files and modified the style enqueuing to handle RTL files when appropriate. The auto-generated RTL files seem to work great out of the box. The only tweak I see that will need to be done is that the Reviews tab on products shows up as "(Reviews (4" in RTL mode.

To verify, I recommend https://wordpress.org/plugins/rtl-tester/

[claudiosanches]

@jameskoster do you want check this one?

[mikejolley]

For some reason in Chrome the admin products screen is blank until I inspect. Odd, needs @jameskoster to review.

[jameskoster]

All looks good on the frontend, only thing I noticed was this;

• Form row first / last don't seem to be 'flipping' correctly - https://cloudup.com/cmOU3Oc-5r1

There are a few issues on the backend;

• Product data tab icons https://cloudup.com/chZK3LlLm-y
• Checkbox spacing in variations; https://cloudup.com/cc7TW3hsZAF
• Dismissible wc notices; https://cloudup.com/c2G8_LHH0hb (we should use core approach for these notices as they work fine in rtl)
• Add shipping zone button isn't flipped; https://cloudup.com/cfGAB2XC2iw
• From address not flipped in email settings; https://cloudup.com/crqK2X3l-X9

I also noticed there are issues with pretty much all the select2 elements (multi-select, general dropdowns etc). This affects both front and backend.

@mikejolley I occasionally see a similar issue - a blank screen, until I scroll (or open inspector). I'm wondering if that's cause by the rtl-tester. You didn't experience that @claudiulodro ? I found this happened on most of the admin screens (including non-wc screens) and a couple of the frontend pages (orders in my account, for one).

[claudiulodro]

@jameskoster, @mikejolley I haven't been able to reproduce the blank screen thing. I don't see a way it could be coming from the RTL Tester plugin, though, since that only has about 10 lines of code that does anything, and it's all PHP. Most likely it's something with Chrome. Do you still get this problem in another browser?

@jameskoster what is your recommended solution for the visual tweaks that have to be done on top of the auto-generated RTL CSS? Modifying the generated RTL with properties like Storefront does? https://github.com/woocommerce/storefront/blob/master/Gruntfile.js

[jameskoster]

I reckon most of the issues can be fixed in the ltr stylesheet. Seems like they're caused by things like alignment and margins.

For anything that can't be fixed there, yes that's the approach we should use I think.

I don't see the blank screen issue in Firefox so yeah, probably a Chrome thing.

[mikejolley]

I've changed the label to in progress. Mark it for review again when ready :)

[claudiulodro]

@jameskoster I've changed the CSS to handle the areas you noticed need work. I wasn't able to reproduce the wc notices styling error you reported (Works great in RTL mode for me on all browsers). I also had to do some tweaks to get the tiptips working properly in RTL, so that's included in the changes.

[mikejolley]

This looks good to me now, and code is fine. LGTM 👍