Browse Source

Button 2: Gutenberg RTL styles for editor and front end

Chris Runnells 6 years ago
parent
commit
0b59bc255b
2 changed files with 59 additions and 1 deletions
  1. 44 1
      button-2/blocks.css
  2. 15 0
      button-2/editor-blocks.css

+ 44 - 1
button-2/blocks.css

@@ -40,10 +40,20 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin-right: 1.5em;
 }
 
+.rtl .wp-block-image .alignleft {
+	margin-left: 1.5em;
+	margin-right: 0;
+}
+
 .wp-block-image .alignright {
 	margin-left: 1.5em;
 }
 
+.rtl .wp-block-image .alignright {
+	margin-left: 0;
+	margin-right: 1.5em;
+}
+
 .wp-block-image.alignwide,
 [class^="wp-block-cover"].alignwide {
 	margin-left: -0.875em;
@@ -88,6 +98,13 @@ p.has-drop-cap:not(:focus)::first-letter {
 		width: calc( 100% + 3em );
 	}
 
+	.rtl .wp-block-image.alignwide,
+	.rtl [class^="wp-block-cover"].alignwide {
+		margin-left: 0;
+		max-width: calc( 100% + 1.5em );
+		width: calc( 100% + 1.5em );
+	}
+
 	.wp-block-image.alignfull,
 	[class^="wp-block-cover"].alignfull {
 		margin-left: -3em;
@@ -95,6 +112,14 @@ p.has-drop-cap:not(:focus)::first-letter {
 		max-width: 1142px;
 		width: calc( 100% + 6em );
 	}
+
+	.rtl .wp-block-image.alignfull,
+	.rtl [class^="wp-block-cover"].alignfull {
+		margin-left: 0;
+		max-width: calc( 100% + 3em );
+		width: calc( 100% + 3em );
+	}
+
 }
 
 @media only screen and (min-width: 75em) {
@@ -106,6 +131,14 @@ p.has-drop-cap:not(:focus)::first-letter {
 		width: calc( 100% + 2.5em );
 	}
 
+	.rtl .wp-block-image.alignwide,
+	.rtl [class^="wp-block-cover"].alignwide {
+		margin-right: -2.5em;
+		margin-left: 0;
+		max-width: calc( 100% + 2.5em );
+		width: calc( 100% + 2.5em );
+	}
+
 	.no-sidebar .wp-block-image.alignwide,
 	.no-sidebar [class^="wp-block-cover"].alignwide {
 		margin-right: -2.5em;
@@ -121,10 +154,18 @@ p.has-drop-cap:not(:focus)::first-letter {
 		width: calc( 100% + 5em );
 	}
 
+	.rtl .wp-block-image.alignfull,
+	.rtl [class^="wp-block-cover"].alignfull {
+		margin-left: 0;
+		margin-right: -5em;
+		max-width: 1142px;
+		width: calc( 100% + 5em );
+	}
+
 	.no-sidebar .wp-block-image.alignfull,
 	.no-sidebar [class^="wp-block-cover"].alignfull {
 		margin-right: -5em;
-		max-width: calc( 100% + 10em );
+		max-width: 1142px;
 		width: calc( 100% + 10em );
 	}
 }
@@ -137,6 +178,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-gallery {
 	margin-left: 0;
+	margin-right: 0;
 }
 
 /* Quote */
@@ -266,6 +308,7 @@ hr.wp-block-separator {
 
 .wp-block-latest-comments {
 	margin-left: 0;
+	margin-right: 0;
 }
 
 /*--------------------------------------------------------------

+ 15 - 0
button-2/editor-blocks.css

@@ -178,7 +178,9 @@ Description: Gutenberg Block Editor Styles
 
 .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large) {
 	border-left: none;
+	border-right: none;
 	padding-left: 0;
+	padding-right: 0;
 }
 
 .wp-block-quote {
@@ -286,11 +288,13 @@ Description: Gutenberg Block Editor Styles
 .wp-block-freeform.block-library-rich-text__tinymce q,
 .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 	border-left: none;
+	border-right: none;
 	box-shadow: none;
 	font-family: Lora, Garamond, serif;
 	font-size: 20px;
 	font-style: italic;
 	padding-left: 0;
+	padding-right: 0;
 	color: #bbb;
 }
 
@@ -361,6 +365,13 @@ Description: Gutenberg Block Editor Styles
 	padding-left: 0;
 }
 
+.rtl .editor-styles-wrapper .wp-block-freeform li > ul,
+.rtl .editor-styles-wrapper .wp-block-freeform li > ol {
+	margin-right: 0.75em;
+	padding-right: 0;
+}
+
+
 .wp-block-freeform.block-library-rich-text__tinymce pre {
 	background-color: #f3f3f3;
 	color: #777;
@@ -464,6 +475,10 @@ pre.wp-block-verse {
 	text-align: left;
 }
 
+.rtl .wp-block-table th .wp-block-table__cell-content {
+	text-align: right;
+}
+
 /*--------------------------------------------------------------
 5.0 Blocks - Layout Elements
 --------------------------------------------------------------*/