Fix text direction for URL and email fields in block editor for RTL languages

[im3dabasia]

Closes : #65893

What?

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

Why?

Screenshots or screencast

Here are a few samples which I tested out.

Embed Block

Before	After

RSS Block

Before	After

Audio Block which uses url-popover component

Before	After

[github-actions]

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 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

[im3dabasia]

Hey @t-hamano ,

Thank you for pointing out this #65893. When you have a moment, could you please check this PR and provide your feedback?

[t-hamano]

Thanks for the PR!

I think the purpose of this PR is reasonable, but it is not desirable to write styles for input elements in the stylesheet of a specific block (Form Input block).

In my opinion, it might be better to solve this problem at the component level.

That is, add direction:ltr here in the InputControl component if the type is email or url.

Also, if we want to solve a similar problem with the Textcontrol component, I think we would need to add CSS here.

[im3dabasia]

Also, if we want to solve a similar problem with the Textcontrol component, I think we would need to add CSS here.

Hi @t-hamano,

For the TextControl component, we’ll need to add the type prop wherever the input type is set to url or email. Currently, the type prop isn't passed, which is why the CSS is not being applied. I’ve compiled a list of places where this prop can be added. Could you please review it and let me know if I've missed any?

form

gutenberg/packages/block-library/src/form/edit.js

Lines 109 to 126 in 48b8624

	<TextControl
	__nextHasNoMarginBottom
	__next40pxDefaultSize
	autoComplete="off"
	label={ __( 'Email for form submissions' ) }
	value={ email }
	required
	onChange={ ( value ) => {
	setAttributes( { email: value } );
	setAttributes( {
	action: `mailto:${ value }`,
	} );
	setAttributes( { method: 'post' } );
	} }
	help={ __(
	'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
	) }
	/>

gutenberg/packages/block-library/src/form/edit.js

Lines 148 to 162 in 48b8624

	<TextControl
	__next40pxDefaultSize
	__nextHasNoMarginBottom
	autoComplete="off"
	label={ __( 'Form action' ) }
	value={ action }
	onChange={ ( newVal ) => {
	setAttributes( {
	action: newVal,
	} );
	} }
	help={ __(
	'The URL where the form should be submitted.'
	) }
	/>

navigation-link

gutenberg/packages/block-library/src/navigation-link/edit.js

Lines 192 to 205 in 48b8624

	<TextControl
	__nextHasNoMarginBottom
	__next40pxDefaultSize
	label={ __( 'Link' ) }
	value={ url ? safeDecodeURI( url ) : '' }
	onChange={ ( urlValue ) => {
	updateAttributes(
	{ url: urlValue },
	setAttributes,
	attributes
	);
	} }
	autoComplete="off"
	/>

navigation-submenu

gutenberg/packages/block-library/src/navigation-submenu/edit.js

Lines 422 to 431 in 48b8624

	<TextControl
	__nextHasNoMarginBottom
	__next40pxDefaultSize
	value={ url || '' }
	onChange={ ( urlValue ) => {
	setAttributes( { url: urlValue } );
	} }
	label={ __( 'Link' ) }
	autoComplete="off"
	/>

There are several places where the rel attribute is used for links. I'm not entirely sure if the type prop is necessary in these cases. Could you please clarify if adding type="url" is required here?

Sample Link rel

gutenberg/packages/block-library/src/post-title/edit.js

Lines 164 to 172 in 48b8624

	<TextControl
	__next40pxDefaultSize
	__nextHasNoMarginBottom
	label={ __( 'Link rel' ) }
	value={ rel }
	onChange={ ( newRel ) =>
	setAttributes( { rel: newRel } )
	}
	/>

Screenshots for navigation-link

Before	After

[t-hamano]

Thanks for the update!

Sorry, I'm starting to think that since the TextControl component is so widely used, it might be better to address it in a separate PR. Can this PR address just the InputControl component?

[t-hamano]

If you reference the props directly, you should be able to output CSS conditionally. A possible approach would be something like this:

Details

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 39eea8fdb0..ece01451db 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -4,7 +4,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode, HTMLInputTypeAttribute } from 'react';
 
 /**
  * Internal dependencies
@@ -141,6 +141,7 @@ type InputProps = {
        dragCursor?: CSSProperties[ 'cursor' ];
        paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
        paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
+       type?: HTMLInputTypeAttribute;
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
@@ -262,6 +263,15 @@ const dragStyles = ( { isDragging, dragCursor }: InputProps ) => {
        `;
 };
 
+const directionStyles = ( { type }: InputProps ) => {
+       if ( type !== 'url' && type !== 'email' ) {
+               return '';
+       }
+       return css`
+               direction: ltr;
+       `;
+};
+
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -283,6 +293,7 @@ export const Input = styled.input< InputProps >`
                ${ fontSizeStyles }
                ${ sizeStyles }
                ${ customPaddings }
+               ${ directionStyles }
 
                &::-webkit-input-placeholder {
                        line-height: normal;