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

…anguages (#68188) * fix: Add ltr for email and url * style: Add CSS for email/url in component * fix: Revert extra file change * fix: add ltr for email and url in the textcontrol component * revert: Changes for textcontrol reverted * fix: Add directionStyles for input-control-styles * style: Add direction ltr for email and url for rtl languages * style: Add ltr for placeholder * doc: Add log for InputControl ltr alignment change * fix: Remove ltr CSS for placeholder * doc: Add Log in unreleased section and updated log to refer to PR * doc: Remove log in the Bug Fixes header Co-authored-by: im3dabasia <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Jan 8, 2025 · b363d97 · b363d97
1 parent c7c09cf
commit b363d97
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -47,6 +47,7 @@ const InsertFromURLPopover = ( {
 			<InputControl
 				__next40pxDefaultSize
 				label={ __( 'URL' ) }
+				type="url"
 				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }

diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
@@ -77,6 +77,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						<InputControl
 							__next40pxDefaultSize
 							label={ label }
+							type="url"
 							hideLabelFromVision
 							placeholder={ __( 'Enter URL here…' ) }
 							value={ feedURL }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
 
+### Bug Fixes
+
+-   `InputControl`: Ensures email and url inputs have consistent LTR alignment in RTL languages ([#68188](https://github.com/WordPress/gutenberg/pull/68188)).
+
 ## 29.1.0 (2025-01-02)
 
 ### Enhancements

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -287,6 +287,12 @@ export const Input = styled.input< InputProps >`
 		&::-webkit-input-placeholder {
 			line-height: normal;
 		}
+
+		&[type='email'],
+		&[type='url'] {
+			/* rtl:ignore */
+			direction: ltr;
+		}
 	}
 `;