Prefix/suffix for new site slug input does not appear correctly on RTL

[geminorum]

On network Add Site page, the input for site slug is reversed when page is on right-to-left.

Prefix/suffix for new site slug input does not appear correctly on RTL

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

[geminorum]

Screenshot for patched (sub-directory install)

[geminorum]

Screenshot for patched (sub-domain install)

[westonruter]

Supposedly this had been fixed in #49949, but it regressed since then?

[johnjamesjacoby]

This looks right to me.

Domains and paths are always left to right, right? 😅

See: https://core.trac.wordpress.org/ticket/49949#comment:1

[geminorum]

Replying to westonruter:

Supposedly this had been fixed in #49949, but it regressed since then?

#49949 addressed the direction within the input, not the formation of prefix/suffix + input.

In the patch I used the same approach from permalink_structure input on Permalink Settings page.

[geminorum]

Replying to johnjamesjacoby:

Domains and paths are always left to right, right? 😅

Right; domain, path and code are always in Left-to-Right mode.

[geminorum]

Much better approach is the Bootstrap Input Groups

[westonruter]

@geminorum Can you share screenshots of the issue without the patch applied?

[geminorum]

Not Patched (subdirectory install)

[geminorum]

Not Patched (subdomain install)

I noticed that <span class="code"> was being printed twice, in different ways. In 0a05fed I've refactored to extract into a wrapper element. I've also tidied up the HTML and PHP to make it overall easier to read and to be more consistent. Please review.

Review from Gemini:

The changes in src/wp-admin/network/site-new.php are a solid improvement for consistency, security, and presentation.

Review Findings:

1. Security (esc_html): The addition of esc_html() around the echoed domain parts (lines 222 and 224) is a great security hardening measure (Output Escaping).
2. Consistency: Wrapping both the subdomain and subdirectory layouts in a unified <span class="code"> container improves structural consistency.
3. Styling & RTL: Switching from regular-text ltr to regular-text code is appropriate. The .code class in common.css includes direction: ltr;, so the LTR requirement for domain inputs is preserved while adding the correct monospace styling.
4. Whitespace Control: The use of comments to eliminate whitespace between the input and code elements (which are likely inline-block) is a valid technique here to ensure they sit flush against each other.
5. Control Structures: The use of if ( ... ) : ... else : ... endif; is consistent with other HTML/template sections within this specific file (e.g., the language dropdown logic later in the file).
6. Translation: Moving the _e() call inside the <p> tag is cleaner than concatenating HTML strings in PHP.

Nit-picks:

• @since Tag: As is standard for existing files, there is no @since tag for this visual modification. This is generally acceptable for markup fixes unless a specific project standard requires it for all UI changes.
• Aria: The aria-describedby attribute correctly points to the description, maintaining accessibility.

Conclusion:

The changes look good and follow WordPress core standards. The logic is sound, and the styling update is robust.

Verdict: Approved.

[westonruter]

In 61365:

Networks and Sites: Ensure the Site Address field renders in correct order when RTL locale is active.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10612

Props geminorum, johnjamesjacoby, westonruter.
See #49949.
Fixes #64381.