Fix: Permalink editor rtl languages

WordPress · Feb 18, 2019 · 04194de · 04194de
1 parent d80e15b
commit 04194de
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 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,10 @@
 .edit-post-post-link__link {
 	word-wrap: break-word;
 }
+
+/* rtl:begin:ignore */
+body.rtl .edit-post-post-link__preview-link-container {
+	direction: ltr;
+	float: right;
+}
+/* rtl:end:ignore */
diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
@@ -110,3 +110,15 @@
 	margin-right: 6px;
 	flex: 0 0 0%;
 }
+
+/* rtl:begin:ignore */
+body.rtl .editor-post-permalink {
+	direction: ltr;
+	.editor-post-permalink__edit {
+		float: left;
+	}
+	.editor-post-permalink__link::after {
+		@include long-content-fade($direction: left, $size: 20%, $edge: 1px);
+	}
+}
+/* rtl:end:ignore */