Make WordPress Core

Opened 2 years ago

Last modified 13 months ago

#54915 accepted defect (bug)

Username, email and password fields must be ltr in rtl locale

Reported by: man4toman's profile man4toman Owned by: sabernhardt's profile sabernhardt
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Users Keywords: has-screenshots has-testing-info has-patch
Focuses: ui, css, rtl, administration Cc:

Description

Currently, username, email and password fields are rtl in rtl locale.
But for better experience and readability they must be ltr.

Attachments (12)

fields-in-admin-area.png (21.3 KB) - added by man4toman 2 years ago.
fields-in-login.png (16.3 KB) - added by man4toman 2 years ago.
54915.diff (9.9 KB) - added by sabernhardt 2 years ago.
54915.1.diff (12.4 KB) - added by sabernhardt 2 years ago.
refresh, adding network pages plus comment author fields
user-page-6.3-alpha-55505-src.png (151.8 KB) - added by agnieszkaszuba 16 months ago.
user-page-hebrew-6.3-alpha-55505-src.png (69.4 KB) - added by agnieszkaszuba 16 months ago.
admin-page-6.3-alpha-55505-src.png (204.1 KB) - added by agnieszkaszuba 16 months ago.
post-password-classic-6.3-alpha-55505-src.png (74.5 KB) - added by agnieszkaszuba 16 months ago.
post-password-quickedit-6.3-alpha-55505-src.png (169.2 KB) - added by agnieszkaszuba 16 months ago.
post-password-quickedit-hebrew.png (167.3 KB) - added by agnieszkaszuba 16 months ago.
reset-password-6.3-alpha-55505-src.png (41.2 KB) - added by agnieszkaszuba 16 months ago.
login-page-6.3-alpha-55505-src.png (30.4 KB) - added by agnieszkaszuba 16 months ago.

Download all attachments as: .zip

Change History (34)

#1 @SergeyBiryukov
2 years ago

  • Component changed from General to Users
  • Focuses ui administration added

#2 @joyously
2 years ago

How do you run a blame command on a file that will show lines that have been deleted?
If you look at https://core.trac.wordpress.org/browser/tags/5.9/src/wp-admin/css/forms.css#L110 you will see that the CSS is there for the email and url input types to be LTR. The src/wp-admin/css/login.css file used to have @import url(forms.css); but that got removed somewhere (possibly with the change for conditionally loading blocks happened). I don't know SVN well enough to figure out where it got removed.

This ticket was mentioned in Slack in #core by joyously. View the logs.


2 years ago

#4 @sabernhardt
2 years ago

  • Focuses css added

r45673 removed the CSS imports because the 'forms' and 'l10n' styles are listed as dependencies for 'login' (plus 'install' and 'wp-admin'). However, the login fields are text and password types.

Maybe someone has a better idea, but I would add a new class to the selector list in forms.css (and assign the class wherever necessary):

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

#5 @sabernhardt
2 years ago

I forgot to mention that moving the password show/hide button outside the input border (#48222) should help with the login form in RTL and password left-to-right, too.

(That is, changing the text direction would make a little more sense without the visibility toggle button on the left side of the input. The other ticket does not need to be completed first.)

Last edited 2 years ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


2 years ago

#7 @hellofromTonya
2 years ago

  • Keywords has-testing-info added

@sabernhardt
2 years ago

#8 @sabernhardt
2 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.0

The common.css file has had a .ltr class for this, but that is not included on the login screen. I added the class to forms.css and included password-type inputs.

/* rtl:ignore */
.ltr,
input[type="password"],
input[type="email"],
input[type="url"] {
	direction: ltr;
}

The patch adds the ltr class to several inputs.
Login: username, password
Install: username, password
User Edit (Profile): username, password, application password
New User: username, password

I expect I missed at least one more input that needs the class, too.

#9 @sabernhardt
2 years ago

  • Keywords needs-refresh added

@sabernhardt
2 years ago

refresh, adding network pages plus comment author fields

#10 @sabernhardt
2 years ago

  • Keywords needs-refresh removed

Earlier ticket about this: #26824

Extra changes in 54915.1.diff:

  • Network wp-activate.php: The patch sets direction for the activation key.
  • Network wp-signup.php: The patch sets direction for the username and any email-type input.
  • Comment Author Email (in edit-form-comment.php and the wp_comment_reply() function in template.php): Changing the input type to email would correct the text direction, but I added the code class to match the styling to the URL input below it (including the direction).

However, the wp_login_form() function in general-template.php would need a different approach to make the text direction work (on the front end).

#11 @sabernhardt
2 years ago

  • Milestone changed from 6.0 to 6.1

#12 @sabernhardt
2 years ago

#52266 was marked as a duplicate.

Version 0, edited 2 years ago by sabernhardt (next)

#13 @sabernhardt
2 years ago

  • Keywords needs-refresh added

The patch needs updating after a few changesets involving these files.

For the wp_login_form(), and possibly similar front-end fields, I'm considering inline styles even though I usually would not recommend that.
$direction_style = is_rtl() ? ' style="direction: ltr;"' : '';
And maybe we should ignore those fields, at least for this ticket.

#14 @sabernhardt
22 months ago

  • Milestone changed from 6.1 to 6.2
  • Owner set to sabernhardt
  • Status changed from new to accepted

I'm waiting on #43061 before updating the patch. (If done soon enough, I might ask to put this ticket back to 6.1.)

This ticket was mentioned in PR #3933 on WordPress/wordpress-develop by @sabernhardt.


18 months ago
#15

  • Keywords needs-refresh removed

Sets all password type inputs to LTR direction and adds the .ltr class to forms.css for use in the login page. Several fields need the ltr class or another method of setting the direction.

Site fields in Arabic

Login pages: username and password

Common login at wp-login.php, with the password visibility button on the right (as recommended by ierwira)

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212381-b9ff5fc8-8b06-402b-95f8-f2cb13f82eec.png

Reset Password

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212419-062b9313-bcf7-4ccb-93bc-f0f2c84c04f9.png

Custom login form using wp_login_form() in Twenty Sixteen (this adds the direction style inline, but I do not expect anyone would want to override that)

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212425-7e32c8fc-b06c-42f2-a7f0-2d83b5cb83f7.png

Comments: email field

Switching the type from text to email would solve the direction, but I used the .code class instead to match the styling of the URL field. (These could have both the email type and the class, too.)

Edit Comment

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212431-8bdf34bc-1e5e-4861-988a-c3e15202d90f.png

Quick Edit on Comments screen

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212433-0715cceb-ee6a-488d-b074-cc062a527bc1.png

Post password

Quick Edit on Posts screen

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212412-0b2b3628-8dac-434b-8e00-6770b28a015d.png

Post metabox (in Classic Editor)

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212410-2326cc77-e3ba-497c-bbfd-98fb228c9325.png

Media: URL fields

Edit from Media Gallery (list mode)

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212441-22a0fcbf-e419-4185-a5e4-7f1c27335843.png

Edit from Media Gallery (grid mode)

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212437-34c73da3-e067-42fd-bea6-6127236a04e5.png

Insert an image into a post (I used Classic Editor)

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212377-f8785b40-fec6-46cf-9c0e-278538b951b8.png

User Profile: username, password and application password

Navigate to your profile page (/wp-admin/profile.php) or edit another user's profile (/wp-admin/user-edit.php).

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212417-a9078187-aff5-4c7a-a0ce-1f177578fd58.png

Editing another user is very similar.

New User: username and password

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212407-adbe1301-8ceb-42f6-aadd-460debb57e8d.png

Network (multisite) fields, in Persian

Activation page: activation key

Set language in Network Settings, and navigate to /wp-activate.php.

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212427-f630e95c-44b0-4fc3-b463-26c1af9430c4.png

Registration page: username and email

Set language in main site's Settings, and make sure the network allows both site and user registrations. Then navigate to /wp-signup.php.

User signup (not logged in, step 1)

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212422-5b32083c-9278-4575-879f-f09879b68cd6.png

Network Site Info: Site Address (URL)

Navigate to /wp-admin/network/sites.php (if using a mouse, you could hover over the first link under My Sites dropdown, and then click the second link in the sub-menu). Open individual sites, and the first tab will be Info.

The main site has a code element to fix the direction.

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212383-f348d55b-29be-4456-bb87-c3ccda5daeab.png

Other sites use the url type for their input fields.

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212386-6372ec77-a41e-4c45-8910-0a9dea25c324.png

Network Site Users: username and email

Navigate to the second tab for each Site (main: /wp-admin/network/site-users.php?id=1), and scroll down to the Add New User form.

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212404-398e5e90-be9e-4bf3-912c-550d2d68b22d.png

Network Site Settings: several options are URLs, usernames or emails

Navigate to the fourth tab for each Site (main: /wp-admin/network/site-settings.php?id=1).

This patch adds the ltr class to multiple option fields (siteurl, home, admin_email, new_admin_email, mailserver_url, mailserver_login, mailserver_pass, ping_sites, permalink_structure, category_base, tag_base, upload_path, upload_url_path).

Main site:

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212388-54efb27c-8ea6-4bb2-a590-4092f3a261f0.png
...
https://i0.wp.com/user-images.githubusercontent.com/17100257/215212390-3a806fde-5758-43b8-8fd1-693a14a2f9a7.png
...
https://i0.wp.com/user-images.githubusercontent.com/17100257/215212393-0c54482b-b70a-4b28-b338-ee8242189956.png
...
https://i0.wp.com/user-images.githubusercontent.com/17100257/215212398-28fe372a-c0bc-420a-9399-76c93735112b.png
(The upload path options were empty.)

Second site:

https://i0.wp.com/user-images.githubusercontent.com/17100257/215212400-16417df2-3098-46b2-a4d5-260082bb98c2.png

Trac ticket: https://core.trac.wordpress.org/ticket/54915

@sabernhardt commented on PR #3933:


18 months ago
#16

The Install and setup-config.php pages already set LTR direction on their fields (by ID selectors).

The Repeat Password fields on the profile screens, which appear without JS active, would not need the special class because they remain password type.

https://i0.wp.com/user-images.githubusercontent.com/17100257/215230218-071f3dc0-182b-4636-a42c-ca27c45d4019.png

#17 @sabernhardt
18 months ago

  • Keywords needs-testing added

#18 @shibleemehdi
18 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/3933

Environment

  • OS: Ventura 13.1
  • Web Server: nginx/1.23.3
  • PHP: 7.4.33 (Supports 64bit values)
  • WordPress: 6.2-beta1-55292-src
  • Browser: Chrome 109.0.5414.119 (Official Build) (arm64)
  • Theme: Twenty Twenty-Three
  • Active Plugins:

Actual Results

  • ✅ Partially Issue resolved with the patch.

Additional Notes

#19 @sabernhardt
17 months ago

  • Milestone changed from 6.2 to 6.3

If the login page did not change but all the other pages were improved, the forms-rtl and login-rtl stylesheets may not have compiled correctly. I tend to have success with the npm run dev command when testing RTL stylesheets.

Anyway, I think I took too long to get this done for 6.2.

#20 @agnieszkaszuba
16 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/3933

Environment

  • OS: macOS 13.0.1
  • Web Server: Nginx
  • PHP: 7.4.24
  • WordPress: 6.3-alpha-55505-src
  • Browser: Chrome 109.0.5414.119 (Official Build) (x86_64)
  • Theme: Twenty Twenty-Three
  • Active Plugins: -

Actual Results

  • ❌ Issue not resolved with patch.

Additional Notes

  • I tested the following scenarios and didn't get the expected result in any of them (password and username were in RTL instead of LTR). I tested all of these scenarios with site language Arabic, and scenarios 3 and 4 also in Hebrew.
  1. Login page
  2. Admin page
  3. New user page
  4. Post password

Supplemental Artifacts









#21 @oglekler
13 months ago

  • Keywords changes-requested added; needs-testing removed

I am adding changes-requested to indicate that this patch needs further work and removing needs-testing until the patch will be ready.

#22 @sabernhardt
13 months ago

  • Keywords changes-requested removed
  • Milestone changed from 6.3 to Future Release
Note: See TracTickets for help on using tickets.