Add automated RTL support#3844
Conversation
We're going to autogenerate RTL css files, so this won't be needed
This currently loads the version from https://github.com/yoavf/webpack-rtl-plugin/tree/develop This include a simple (but required) change, that's been requested upstream as a PR: romainberger/webpack-rtl-plugin#15
This is done by adding style data - WP will automatically load the -rtl css files instead of the regular files in RTL mode.
|
Whoa what serendipitous timing! CC @youknowriad 😉 |
|
Ha @jasmussen - I got started with this at WC US, and missed #3831 before pushing. I think this method is preferable, since we don't end up with big LTR and RTL css files, and we use WP's built in style loading for RTL. If there's ever a decision to switch to having the CSS inline, then using postcss makes more sense. |
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
Nice work here! This approach is better indeed. We should also copy the "arrow icon" inverting from the other PR.
gutenberg.php
Outdated
| display: block; | ||
| top: 0; | ||
| margin: -1px 0; | ||
| <?php if ( is_rtl() ) : ?> |
There was a problem hiding this comment.
Just wondering about the indentation here, should it be aligned with the styling (like above) or not? We should probably be consistent anyway.
|
This is absolutely the better approach! Thanks Yoav. |
|
Awesome work |
3 participants
Description
The current RTL experience with Gutenberg is broken, and there's no reason to try and maintain RTL css manually.
This adds automated generation of RTL CSS files using rtlcss via a slightly modified webpack-rtl-plugin. The modification to the plugin are described in this PR.
It also adds minor fixes for the new post button inline css.
How Has This Been Tested?
Confirmed that:
npm run buildwill also build-rtl.cssfiles.Screenshots (jpeg or gifs if applicable):
Before:
After:
Types of changes
Bug fix for current RTL CSS
Checklist: