Skip to content

Fix: Force LTR direction in Math block textarea for RTL languages #72684

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 2 commits into from
Oct 27, 2025
Merged

Fix: Force LTR direction in Math block textarea for RTL languages #72684

merged 2 commits into from
Oct 27, 2025

Conversation

@harshbhonsle
Copy link
Contributor

@harshbhonsle harshbhonsle commented Oct 25, 2025

What?

Closes #72553

This PR forces the Math block's textarea to render with left-to-right (LTR) direction, even when the site language is RTL.

Why?

Math formulas are universally written left-to-right. In RTL languages like Arabic or Hebrew, the default input direction causes confusion and makes formulas hard to read and write. This fix ensures consistent behavior for all users.

How?

Added style={{ direction: 'ltr' }} to the TextareaControl component inside packages/block-library/src/math/edit.js.

Testing Instructions

  1. Set the site language to an RTL language (e.g., Arabic).
  2. Create or edit a post/page.
  3. Insert a Math block.
  4. Type a formula like x^2 + y^2.
  5. Confirm that the input flows left-to-right and is readable.

Testing Instructions for Keyboard

  • Use Tab to navigate to the Math block.
  • Use arrow keys to move within the textarea.
  • Confirm that keyboard navigation behaves consistently in LTR mode.

Screenshots or screencast

|Before|After|
Before:
image

After:
image

@github-actions
Copy link

github-actions bot commented Oct 25, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @muajjiin.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: muajjiin.

Co-authored-by: harshbhonsle <harshbhonsle08@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 25, 2025
@github-actions
Copy link

github-actions bot commented Oct 25, 2025

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @harshbhonsle! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Internationalization (i18n) Issues or PRs related to internationalization efforts [Block] Math labels Oct 25, 2025
t-hamano
t-hamano reviewed Oct 25, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR! I think using the .wp-block-math__textarea-control selector is clearer than using inline CSS.

.wp-block-math__textarea-control textarea {
	font-family: $font-family-mono;
	/*rtl:ignore*/
	direction: ltr;
}

@github-project-automation github-project-automation bot moved this to 🔎 Needs Review in WordPress 6.9 Editor Tasks Oct 25, 2025
@harshbhonsle
Copy link
Contributor Author

harshbhonsle commented Oct 25, 2025

Thanks! Sure, I’ll make the changes to use .wp-block-math__textarea-control instead of inline CSS. That does make it clearer. Appreciate the suggestion!

@harshbhonsle
Copy link
Contributor Author

harshbhonsle commented Oct 25, 2025

I've updated the PR to move the LTR direction rule into the .wp-block-math__textarea-control selector in SCSS, as suggested. This improves clarity and keeps styling consistent. Let me know if there's anything else you'd like me to adjust!

@harshbhonsle harshbhonsle requested a review from t-hamano October 26, 2025 06:55
Mamaduka
Mamaduka approved these changes Oct 26, 2025
View reviewed changes
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thanks, @harshbhonsle!

t-hamano
t-hamano approved these changes Oct 27, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM!

@t-hamano t-hamano added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 27, 2025
@t-hamano t-hamano merged commit db81db2 into WordPress:trunk Oct 27, 2025
39 checks passed
@github-project-automation github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 6.9 Editor Tasks Oct 27, 2025
@github-actions github-actions bot added this to the Gutenberg 22.0 milestone Oct 27, 2025
@github-actions github-actions bot removed the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 27, 2025
gutenbergplugin pushed a commit that referenced this pull request Oct 27, 2025
@harshbhonsle @t-hamano @gutenbergplugin
Fix: Force LTR direction in Math block textarea for RTL languages (#7…
f065954 
…2684)

* Fix: Force LTR direction in Math block textarea for RTL languages

* style: move LTR direction rule to .wp-block-math__textarea-control selector for clarity

Unlinked contributors: muajjiin.

Co-authored-by: harshbhonsle <harshbhonsle08@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
@github-actions github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Oct 27, 2025
@github-actions
Copy link

github-actions bot commented Oct 27, 2025

I just cherry-picked this PR to the wp/6.9 branch to get it included in the next release: f065954

@t-hamano t-hamano mentioned this pull request Oct 27, 2025
Closed
@harshbhonsle harshbhonsle deleted the fix/math-block-rtl-direction branch November 1, 2025 08:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Mamaduka Mamaduka Mamaduka approved these changes

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

+1 more reviewer

@muajjiin muajjiin muajjiin approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core [Block] Math First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository Internationalization (i18n) Issues or PRs related to internationalization efforts [Type] Bug An existing feature does not function as intended

Projects

WordPress 6.9 Editor Tasks
Status: ✅ Done

Milestone

Gutenberg 22.0

Development

Successfully merging this pull request may close these issues.

Math Block and Math format: Force LTR direction in RTL languages

4 participants

@harshbhonsle @Mamaduka @t-hamano @muajjiin