-
Notifications
You must be signed in to change notification settings - Fork 108
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add RTL style overrides, ensure RTL CSS is loaded on RTL sites #2669
Conversation
Quiz radio inputs look good but checkboxes are misaligned, see https://learn.wordpress.org/quiz/how-to-use-headings-for-accessibility-and-seo/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking much better, but I found a few more things sorry
496b8be
to
62adb0c
Compare
I can't replicate this, borders look fine to me: Do you have an out of date wporg-parent on your sandbox, maybe? These are both things that the RTL filters should fix. Quizzes with checkboxes have been fixed (6d12c9e) And I've flipped the image alignment on learning pathways cards for RTL sites (c53f67c) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM now except for the border styles. I've updated all on my sandbox and still seeing them. The culprit seems to be https://learn.wordpress.org/wp-content/plugins/gutenberg/build/block-library/common-rtl.css?ver=18.8.0
If you're not seeing it then maybe ignore.
The RTL CSS incorrectly applies a right border style, which creates a visible border. Adding a width to the block's left border (which is right, when flipped RTL), hides the incorrect border.
62adb0c
to
c7851ff
Compare
Aha, I managed to trigger it by preventing inline styles — I was seeing this as an inline style, but it's using the unflipped LTR version here (that seems like a different problem 😬 ) This style should not be flipped in the RTL stylesheet, and is a bug in gutenberg- by setting the This can be worked around by setting the right style (to make the inline-end border visible) and the left width 0 (to hide the inline-start border). Left/right are flipped in the RTL function in the parent theme, so it's easier to talk in logical property direction 🙂 |
Fixes #2483. This updates the style.css registration to create an RTL replacement on RTL sites — this means the
style-index-rtl.css
file will be used instead. This PR also includes a few overrides specific to RTL sites, in the_rtl.scss
file.The issues were broadly with the Meeting Calendar plugin, Sensei, and hardcoded styles on blocks.
_rtl.scss
file.convert_inline_style_to_rtl
never runs to flip those values (hopefully thethe_block_template_html
filter will be added in 6.7, which will be a better place to run that filter) — in any case, I've added some CSS to_rtl.scss
for that case as well.Screenshots