From 80e66a80a68e1dad2b0f0a13b8accf029854f698 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Fri, 20 Dec 2024 16:31:57 +0530 Subject: [PATCH 1/7] fix: Add ltr for email and url --- .../block-editor/src/components/media-placeholder/index.js | 1 + packages/block-library/src/form-input/style.scss | 6 ++++++ packages/block-library/src/rss/edit.js | 1 + 3 files changed, 8 insertions(+) diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 0cbc6c8c26203f..1abad46cafb675 100644 --- 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 = ( { Date: Thu, 26 Dec 2024 17:30:52 +0530 Subject: [PATCH 2/7] style: Add CSS for email/url in component --- packages/block-library/src/form-input/style.scss | 5 ----- .../src/input-control/styles/input-control-styles.tsx | 6 ++++++ 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/form-input/style.scss b/packages/block-library/src/form-input/style.scss index 63e4f95513f9a9..e1e503273443bd 100644 --- a/packages/block-library/src/form-input/style.scss +++ b/packages/block-library/src/form-input/style.scss @@ -62,8 +62,3 @@ textarea.wp-block-form-input__input { min-height: 10em; } -input[type="email"], -input[type="url"] { - /*rtl:ignore*/ - direction: ltr; -} 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 39eea8fdb029a1..db24a5e60f137a 100644 --- 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; + } } `; From 48b862424f99ba63d05c9286b3d1b3cd3d86fe7e Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 26 Dec 2024 17:32:23 +0530 Subject: [PATCH 3/7] fix: Revert extra file change --- packages/block-library/src/form-input/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/form-input/style.scss b/packages/block-library/src/form-input/style.scss index e1e503273443bd..7b1ac53cc89c01 100644 --- a/packages/block-library/src/form-input/style.scss +++ b/packages/block-library/src/form-input/style.scss @@ -61,4 +61,3 @@ textarea.wp-block-form-input__input { min-height: 10em; } - From 7d04ada150f71e315997a721bf8b55a65b072061 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 26 Dec 2024 19:53:15 +0530 Subject: [PATCH 4/7] fix: add ltr for email and url in the textcontrol component --- packages/block-library/src/form/edit.js | 2 ++ packages/block-library/src/navigation-link/edit.js | 1 + packages/block-library/src/navigation-submenu/edit.js | 1 + packages/components/src/text-control/style.scss | 6 ++++++ 4 files changed, 10 insertions(+) diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js index a7260afabedf39..227f5ea05014ff 100644 --- a/packages/block-library/src/form/edit.js +++ b/packages/block-library/src/form/edit.js @@ -123,6 +123,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => { help={ __( 'The email address where form submissions will be sent. Separate multiple email addresses with a comma.' ) } + type="email" /> ) } @@ -159,6 +160,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => { help={ __( 'The URL where the form should be submitted.' ) } + type="url" /> ) } diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 5966739aa61a61..dcd13cdd16bd0d 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -202,6 +202,7 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) { ); } } autoComplete="off" + type="url" /> diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index dbdbd23b13b2f6..a1ce7bec748959 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -428,6 +428,7 @@ export default function NavigationSubmenuEdit( { } } label={ __( 'Link' ) } autoComplete="off" + type="url" /> diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss index 5ae2a90b827736..3e59c47532a617 100644 --- a/packages/components/src/text-control/style.scss +++ b/packages/components/src/text-control/style.scss @@ -28,3 +28,9 @@ padding-right: $grid-unit-15; } } + +.components-text-control__input[type="email"], +.components-text-control__input[type="url"] { + /* rtl:ignore */ + direction: ltr; +} From 645a8ed7419fef6fec3a558f02d77ce30a8eb4cc Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Fri, 27 Dec 2024 20:52:18 +0530 Subject: [PATCH 5/7] revert: Changes for textcontrol reverted --- packages/block-library/src/form/edit.js | 2 -- packages/block-library/src/navigation-link/edit.js | 1 - packages/block-library/src/navigation-submenu/edit.js | 1 - packages/components/src/text-control/style.scss | 6 ------ 4 files changed, 10 deletions(-) diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js index 227f5ea05014ff..a7260afabedf39 100644 --- a/packages/block-library/src/form/edit.js +++ b/packages/block-library/src/form/edit.js @@ -123,7 +123,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => { help={ __( 'The email address where form submissions will be sent. Separate multiple email addresses with a comma.' ) } - type="email" /> ) } @@ -160,7 +159,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => { help={ __( 'The URL where the form should be submitted.' ) } - type="url" /> ) } diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index dcd13cdd16bd0d..5966739aa61a61 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -202,7 +202,6 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) { ); } } autoComplete="off" - type="url" /> diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index a1ce7bec748959..dbdbd23b13b2f6 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -428,7 +428,6 @@ export default function NavigationSubmenuEdit( { } } label={ __( 'Link' ) } autoComplete="off" - type="url" /> diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss index 3e59c47532a617..5ae2a90b827736 100644 --- a/packages/components/src/text-control/style.scss +++ b/packages/components/src/text-control/style.scss @@ -28,9 +28,3 @@ padding-right: $grid-unit-15; } } - -.components-text-control__input[type="email"], -.components-text-control__input[type="url"] { - /* rtl:ignore */ - direction: ltr; -} From d517683279c03b306b7047bce4510691889874e6 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Fri, 27 Dec 2024 21:05:03 +0530 Subject: [PATCH 6/7] fix: Add directionStyles for input-control-styles --- .../styles/input-control-styles.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) 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 db24a5e60f137a..7530f2944aa6c7 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 ) => { @@ -153,6 +154,15 @@ const disabledStyles = ( { disabled }: InputProps ) => { } ); }; +const directionStyles = ( { type }: InputProps ) => { + if ( type !== 'url' && type !== 'email' ) { + return ''; + } + return css` + direction: ltr; + `; +}; + export const fontSizeStyles = ( { inputSize: size }: InputProps ) => { const sizes = { default: '13px', @@ -283,16 +293,11 @@ export const Input = styled.input< InputProps >` ${ fontSizeStyles } ${ sizeStyles } ${ customPaddings } + ${ directionStyles } &::-webkit-input-placeholder { line-height: normal; } - - &[type='email'], - &[type='url'] { - /* rtl:ignore */ - direction: ltr; - } } `; From 39deacbf75786cc36a72482ca86d5f56ef9f19ba Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Sat, 28 Dec 2024 14:31:46 +0530 Subject: [PATCH 7/7] style: Add direction ltr for email and url for rtl languages --- .../styles/input-control-styles.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) 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 7530f2944aa6c7..db24a5e60f137a 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, HTMLInputTypeAttribute } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; /** * Internal dependencies @@ -141,7 +141,6 @@ type InputProps = { dragCursor?: CSSProperties[ 'cursor' ]; paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ]; paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ]; - type?: HTMLInputTypeAttribute; }; const disabledStyles = ( { disabled }: InputProps ) => { @@ -154,15 +153,6 @@ const disabledStyles = ( { disabled }: InputProps ) => { } ); }; -const directionStyles = ( { type }: InputProps ) => { - if ( type !== 'url' && type !== 'email' ) { - return ''; - } - return css` - direction: ltr; - `; -}; - export const fontSizeStyles = ( { inputSize: size }: InputProps ) => { const sizes = { default: '13px', @@ -293,11 +283,16 @@ export const Input = styled.input< InputProps >` ${ fontSizeStyles } ${ sizeStyles } ${ customPaddings } - ${ directionStyles } &::-webkit-input-placeholder { line-height: normal; } + + &[type='email'], + &[type='url'] { + /* rtl:ignore */ + direction: ltr; + } } `;