Fix: Permalink editor rtl languages

WordPress · Feb 27, 2019 · bccf734 · bccf734
1 parent 845185b
commit bccf734
Show file tree

Hide file tree

Showing 3 changed files with 37 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
@@ -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
@@ -53,7 +53,10 @@
 
 	&::after {
 		@include long-content-fade($size: 20%, $edge: 1px);
+		right: 0;
+		right: 0;
 	}
+	text-align: left;
 }
 
 .editor-post-permalink-editor {
@@ -110,3 +113,15 @@
 	margin-right: 6px;
 	flex: 0 0 0%;
 }
+
+.editor-post-permalink-editor__prefix {
+	text-align: left;
+}
+
+/* rtl:begin:ignore */
+.editor-post-permalink__editor-container,
+.editor-post-permalink__link {
+	direction: ltr;
+}
+/* rtl:end:ignore */
+