Photos: Gutenberg RTL styles

Added RTL support for blocks.

photos/blocks.css

@@ -96,6 +96,10 @@ p.has-drop-cap:not(:focus):first-letter {
 	margin: 0.08em 0.1em 0 0;
 }
 
+.rtl p.has-drop-cap:not(:focus):first-letter {
+	margin: 0.08em 0 0 0.1em;
+}
+
 /* Images */
 .wp-block-image {
 	margin-bottom: 1.5em;
@@ -131,6 +135,11 @@ p.has-drop-cap:not(:focus):first-letter {
 	padding-left: 2.7rem;
 }
 
+.rtl .wp-block-quote {
+	border-left: none;
+	border-right: 4px solid #d63031;
+}
+
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	margin-left: auto;
@@ -158,6 +167,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	background-color: #f0f0f0;
 	border-bottom: 4px solid #d63031;
 	border-left: none;
+	border-right: none;
 	border-top: 4px solid #d63031;
 	margin-bottom: 0;
 	padding: 1em 1.5em;
@@ -187,12 +197,14 @@ p.has-drop-cap:not(:focus):first-letter {
 	padding: 0;
 }
 
-.wp-block-pullquote.alignleft {
+.wp-block-pullquote.alignleft,
+.wp-block-pullquote.alignright {
 	text-align: left;
 }
 
-.wp-block-pullquote.alignright {
-	text-align: left;
+.rtl .wp-block-pullquote.alignleft,
+.rtl .wp-block-pullquote.alignright {
+	text-align: right;
 }
 
 .wp-block-pullquote.alignwide blockquote,
@@ -304,12 +316,19 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-weight: bold;
 	font-size: inherit;
 	line-height: 1.5;
+	margin-left: 0.75em;
 	padding: 0.5em 0.75em;
 	text-align: center;
 	transition: background 150ms ease-in-out,
 		color 150ms ease-in-out;
 }
 
+.rtl .wp-block-file .wp-block-file__button,
+.rtl .wp-block-button .wp-block-button__link {
+	margin-left: 0;
+	margin-right: 0.75em;
+}
+
 .wp-block-file .wp-block-file__button,
 .wp-block-button__link:not(.has-text-color) {
 	color: #d63031;
@@ -352,4 +371,5 @@ Widgets
 --------------------------------------------------------------*/
 .wp-block-latest-comments {
 	padding-left: 0;
-}
+	padding-right: 0;
+}

photos/editor-blocks.css

@@ -47,11 +47,23 @@ Description: Gutenberg Block Editor Styles
 	margin-right: 30px;
 }
 
+.rtl .alignleft,
+.rtl .editor-block-list__layout .editor-block-list__block[data-align="left"] .editor-block-list__block-edit {
+	margin-left: 30px;
+	margin-right: 0;
+}
+
 .alignright,
 .editor-block-list__layout .editor-block-list__block[data-align="right"] .editor-block-list__block-edit {
 	margin-left: 30px;
 }
 
+.rtl .alignright,
+.rtl .editor-block-list__layout .editor-block-list__block[data-align="right"] .editor-block-list__block-edit {
+	margin-left: 0;
+	margin-right: 30px;
+}
+
 .aligncenter,
 .editor-block-list__layout .editor-block-list__block[data-align="center"] .editor-block-list__block-edit {
 	clear: both;
@@ -159,10 +171,7 @@ a:active {
 
 /* Paragraphs */
 
-.edit-post-visual-editor p {
-	margin: 0 0 1.5em;
-}
-
+.edit-post-visual-editor p,
 .edit-post-visual-editor blockquote p {
 	margin: 0 0 1.5em;
 }
@@ -264,6 +273,11 @@ a:active {
 	margin-top: 0;
 }
 
+.rtl .wp-block-image .alignleft {
+	margin-left: 1.5em;
+	margin-right: -190px;
+}
+
 .wp-block-image .alignright {
 	margin-bottom: 1.5em;
 	margin-left: 1.5em;
@@ -271,6 +285,11 @@ a:active {
 	margin-top: 0;
 }
 
+.rtl .wp-block-image .alignright {
+	margin-left: -190px;
+	margin-right: 1.5em;
+}
+
 .wp-block-image figcaption {
 	color: #606060;
 	font-size: 0.8em;
@@ -321,6 +340,11 @@ blockquote {
 	padding: 1em 1.5em;
 }
 
+.rtl blockquote {
+	border-left: none;
+	border-right: 4px solid #d63031;
+}
+
 blockquote :last-child,
 blockquote p:last-child {
 	margin-bottom: 0;
@@ -332,6 +356,12 @@ blockquote p:last-child {
 	padding-left: 26px;
 }
 
+.rtl .wp-block-quote,
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large) {
+	border-left: none;
+	border-right: 4px solid #d63031;
+}
+
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	margin-left: auto;
@@ -362,6 +392,7 @@ blockquote p:last-child {
 .wp-block-pullquote blockquote {
 	border-bottom: 4px solid #d63031;
 	border-left: none;
+	border-right: none;
 	border-top: 4px solid #d63031;
 	font-style: italic;
 	margin: 0;
@@ -384,12 +415,14 @@ blockquote p:last-child {
 	text-transform: capitalize;
 }
 
-.wp-block[data-align="left"] .wp-block-pullquote {
+.wp-block[data-align="left"] .wp-block-pullquote,
+.wp-block[data-align="right"] .wp-block-pullquote {
 	text-align: left;
 }
 
-.wp-block[data-align="right"] .wp-block-pullquote {
-	text-align: left;
+.rtl .wp-block[data-align="left"] .wp-block-pullquote,
+.rtl .wp-block[data-align="right"] .wp-block-pullquote {
+	text-align: right;
 }
 
 .wp-block[data-align="left"] .wp-block-pullquote,
@@ -447,26 +480,18 @@ blockquote p:last-child {
 	line-height: 1.25;
 }
 
-/* Video */
-.wp-block-video {}
-
-/* Audio */
-.wp-block-audio {}
-
+/* Audio & Video */
 .wp-block[data-align="left"] .wp-block-audio,
 .wp-block[data-align="right"] .wp-block-audio {
 	width: 320px;
 }
 
-.wp-block-video video,
-.wp-block-audio audio {
+.wp-block-audio audio,
+.wp-block-video video {
 	height: auto;
 	width: 100%;
 }
 
-/* Categories */
-.wp-block-categories-list {}
-
 /* Tables */
 .wp-block-table {
 	display: table;
@@ -533,10 +558,18 @@ blockquote p:last-child {
 	text-align: left;
 }
 
+.rtl .wp-block-verse.alignleft {
+	text-align: right;
+}
+
 .wp-block-verse.alignright {
 	text-align: right;
 }
 
+.rtl .wp-block-verse.alignright {
+	text-align: left;
+}
+
 /* Separator */
 .wp-block-separator,
 .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
@@ -725,3 +758,10 @@ blockquote p:last-child {
 	padding-left: 1em;
 }
 
+.rtl .block-editor ul.wp-block-archives,
+.rtl .block-editor ul.wp-block-categories,
+.rtl .block-editor ul.wp-block-latest-posts {
+	padding-left: 0em;
+	padding-right: 1em;
+}
+