Fix: Permalink editor rtl languages

WordPress · Feb 24, 2019 · 476c507 · 476c507
1 parent 3397ae4
commit 476c507
Show file tree

Hide file tree

Showing 3 changed files with 34 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">
 				{ __( 'Preview' ) }
 			</p>
-			<ExternalLink
-				className="edit-post-post-link__link"
-				href={ postLink }
-				target="_blank"
-			>
-				{ isEditable ?
-					( <Fragment>
-						{ prefixElement }{ postNameElement }{ suffixElement }
-					</Fragment> ) :
-					postLink
-				}
-			</ExternalLink>
+			<div className="edit-post-post-link__preview-link-container">
+				<ExternalLink
+					className="edit-post-post-link__link"
+					href={ postLink }
+					target="_blank"
+				>
+					{ isEditable ?
+						( <Fragment>
+							{ prefixElement }{ postNameElement }{ suffixElement }
+						</Fragment> ) :
+						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
@@ -9,3 +9,9 @@
 .edit-post-post-link__link {
 	word-wrap: break-word;
 }
+
+/* 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
@@ -50,10 +50,6 @@
 	overflow: hidden;
 	position: relative;
 	white-space: nowrap;
-
-	&::after {
-		@include long-content-fade($size: 20%, $edge: 1px);
-	}
 }
 
 .editor-post-permalink-editor {
@@ -110,3 +106,17 @@
 	margin-right: 6px;
 	flex: 0 0 0%;
 }
+
+/* rtl:begin:ignore */
+.editor-post-permalink {
+	direction: ltr;
+	.editor-post-permalink__edit {
+		float: left;
+	}
+	.editor-post-permalink__link::after {
+		@include long-content-fade($direction: right, $size: 20%, $edge: 1px);
+		right: 0;
+		left: auto;
+	}
+}
+/* rtl:end:ignore */