Fix RTL block alignments (#11293)

* Fix RTL block alignments When you explicitly pick an alignment in the editor, this alignment should be respected regardless of text direction. "Align left" is always _align left_. This PR fixes that by adding ignore comments to the auto RTL prefixer * Fix issue with toolbar as well.
WordPress · Nov 1, 2018 · 9b4ef60 · 9b4ef60
1 parent a38c816
commit 9b4ef60
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 0 deletions.
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -29,6 +29,7 @@ $blocks-button__line-height: $big-font-size + 6px;
 	}
 
 	&.alignright {
+		/*rtl:ignore*/
 		text-align: right;
 	}
 }

diff --git a/packages/block-library/src/categories/style.scss b/packages/block-library/src/categories/style.scss
@@ -1,8 +1,10 @@
 .wp-block-categories {
 	&.alignleft {
+		/*rtl:ignore*/
 		margin-right: 2em;
 	}
 	&.alignright {
+		/*rtl:ignore*/
 		margin-left: 2em;
 	}
 }
diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
@@ -88,12 +88,16 @@
 	}
 
 	.alignright {
+		/*rtl:ignore*/
 		float: right;
+		/*rtl:ignore*/
 		margin: 0.5em 0 0.5em 1em;
 	}
 
 	.alignleft {
+		/*rtl:ignore*/
 		float: left;
+		/*rtl:ignore*/
 		margin: 0.5em 1em 0.5em 0;
 	}
 

diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -6,6 +6,7 @@
 	}
 
 	&.alignright {
+		/*rtl:ignore*/
 		text-align: right;
 	}
 

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -41,12 +41,16 @@
 	}
 
 	.alignleft {
+		/*rtl:ignore*/
 		float: left;
+		/*rtl:ignore*/
 		margin-right: 1em;
 	}
 
 	.alignright {
+		/*rtl:ignore*/
 		float: right;
+		/*rtl:ignore*/
 		margin-left: 1em;
 	}
 

diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
@@ -1,8 +1,10 @@
 .wp-block-latest-posts {
 	&.alignleft {
+		/*rtl:ignore*/
 		margin-right: 2em;
 	}
 	&.alignright {
+		/*rtl:ignore*/
 		margin-left: 2em;
 	}
 	&.is-grid {

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -814,12 +814,23 @@
 			// It behaves as relative, in other words, until it reaches an edge and then behaves as fixed.
 			// But by applying a float, we take it out of this flow. The benefit is that we don't need to compensate for margins.
 			// In turn, this allows margins on sibling elements to collapse to parent elements.
+			// RTL note: this rule does need to be auto-flipped based on direction.
+			float: left;
+		}
+	}
+
+	.editor-block-list__block[data-align="left"] & {
+		@include break-small() {
+			// RTL note: this rule should not be auto-flipped based on direction.
+			/*rtl:ignore*/
 			float: left;
 		}
 	}
 
 	.editor-block-list__block[data-align="right"] & {
 		@include break-small() {
+			// RTL note: this rule should not be auto-flipped based on direction.
+			/*rtl:ignore*/
 			float: right;
 		}
 	}