Fix: Permalink editor rtl languages (#13919)

WordPress · Sep 9, 2019 · 276981d · 276981d
1 parent 96cadd0
commit 276981d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js
@@ -98,18 +98,20 @@ function PostLink( {
 			<p className="edit-post-post-link__preview-label">
 				{ postTypeLabel || __( 'View Post' ) }
 			</p>
-			<ExternalLink
-				className="edit-post-post-link__link"
-				href={ postLink }
-				target="_blank"
-			>
-				{ isEditable ?
-					( <>
-						{ prefixElement }{ postNameElement }{ suffixElement }
-					</> ) :
-					postLink
-				}
-			</ExternalLink>
+			<div className="edit-post-post-link__preview-link-container">
+				<ExternalLink
+					className="edit-post-post-link__link"
+					href={ postLink }
+					target="_blank"
+				>
+					{ isEditable ?
+						( <>
+							{ prefixElement }{ postNameElement }{ suffixElement }
+						</> ) :
+						postLink
+					}
+				</ExternalLink>
+			</div>
 		</PanelBody>
 	);
 }

diff --git a/packages/edit-post/src/components/sidebar/post-link/style.scss b/packages/edit-post/src/components/sidebar/post-link/style.scss
@@ -7,5 +7,13 @@
 }
 
 .edit-post-post-link__link {
+	text-align: left;
 	word-wrap: break-word;
+	display: block;
 }
+
+/* rtl:begin:ignore */
+.edit-post-post-link__preview-link-container {
+	direction: ltr;
+}
+/* rtl:end:ignore */
diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
@@ -71,10 +71,7 @@
 	overflow: hidden;
 	position: relative;
 	white-space: nowrap;
-
-	&::after {
-		@include long-content-fade($size: 20%, $edge: 1px);
-	}
+	text-align: left;
 }
 
 .editor-post-permalink-editor {
@@ -131,3 +128,21 @@
 	margin-right: 6px;
 	flex: 0 0 0%;
 }
+
+.editor-post-permalink-editor__prefix {
+	text-align: left;
+}
+
+/* rtl:begin:ignore */
+.editor-post-permalink__link {
+	text-align: left;
+}
+.editor-post-permalink__editor-container,
+.editor-post-permalink__link {
+	direction: ltr;
+}
+.editor-post-permalink__link::after {
+	@include long-content-fade($direction:right, $size: 20%, $edge: 0);
+}
+/* rtl:end:ignore */
+