Skip to content
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

TextControl: Fix text direction for URL and email fields in block editor for RTL languages #68561

Merged
merged 4 commits into from
Feb 24, 2025

Conversation

im3dabasia
Copy link
Contributor

@im3dabasia im3dabasia commented Jan 9, 2025

Fixes TextControl Component Part of this issue.

Related issues: #65893
Related comment: #68188 (review)

What?

Adds direction: ltr for URL and email input fields in the block editor to ensure correct text alignment, especially for RTL languages.

Why?

Currently, in RTL languages, the block editor shows URL and email fields from right to left, which is not ideal. As suggested in the issue, these fields should be displayed left to right (LTR) regardless of the language direction for consistency and better usability.

How?

Added the below CSS

.components-text-control__input[type="email"],
.components-text-control__input[type="url"] {
	/* rtl:ignore */
	direction: ltr;
}

Screenshots

Before

Screen.Recording.2025-01-30.at.5.39.03.PM.mov

After

Screen.Recording.2025-01-30.at.5.37.30.PM.mov

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended l10n Localization and translations best practices labels Jan 11, 2025
@im3dabasia im3dabasia marked this pull request as ready for review January 30, 2025 12:38
Copy link

github-actions bot commented Jan 30, 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.

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

Co-authored-by: im3dabasia <im3dabasia1@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.

@im3dabasia im3dabasia force-pushed the fix/add-ltr-for-text-control branch from 2e0bb79 to 2780c08 Compare January 30, 2025 12:47
@im3dabasia
Copy link
Contributor Author

Hi @t-hamano ,

We fixed a similar problem in this #68188 PR for the InputControl component.

This PR aims for a fix in the TextControl component. When you have a moment please review my PR.

Thank you 🙇

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! It also works correctly on Storybook.

711a1ab24323df5ab5c4b57c76706306.mp4

Can you resolve the code conflict? Please resolve the conflict so that an entry for this PR is added to the Unreleased > Bug Fixes section.

@im3dabasia im3dabasia force-pushed the fix/add-ltr-for-text-control branch from 615b1ba to f3ef531 Compare February 24, 2025 11:19
@im3dabasia
Copy link
Contributor Author

Hi @t-hamano , Updated the PR with the suggested changes. Please have a look when you have a moment.

@t-hamano t-hamano merged commit 74a2ba4 into WordPress:trunk Feb 24, 2025
60 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.4 milestone Feb 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
l10n Localization and translations best practices [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants