Merge pull request #622 from Automattic/fixes/594-quote-block-border

Penscratch 2: Align quote icon to right when text is right aligned

penscratch-2/css/blocks.css

@@ -74,6 +74,34 @@ p.has-drop-cap:not(:focus)::first-letter {
 	}
 }
 
+.wp-block-quote[style*="text-align:right"] {
+	padding: 0 48px 0 0;
+}
+
+.wp-block-quote[style*="text-align:right"]:before {
+	left: auto;
+	right: 0;
+}
+
+.rtl .wp-block-quote[style*="text-align:left"] {
+	padding: 0 0 0 48px;
+}
+
+.rtl .wp-block-quote[style*="text-align:left"]:before {
+	left: 0;
+	right: auto;
+}
+
+@media (min-width: 50em) {
+	.wp-block-quote[style*="text-align:right"] {
+		padding: 0 64px 0 0;
+	}
+
+	.wp-block-quote[style*="text-align:left"] {
+		padding: 0 0 0 64px;
+	}
+}
+
 /* Audio */
 
 .wp-block-audio {

penscratch-2/css/editor-blocks.css

@@ -307,8 +307,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Quote */
 
-.editor-styles-wrapper .wp-block-quote,
-.wp-block-quote:not(.is-large):not(.is-style-large) {
+.wp-block-quote,
+.wp-block-quote:not(.is-large):not(.is-style-large),
+.rtl .wp-block-quote[style*="text-align:left"],
+.rtl .wp-block-quote[style*="text-align: left"],
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:left"],
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: left"] {
 	border: 0;
 	padding-left: 64px;
 	position: relative;
@@ -327,6 +331,19 @@ p.has-drop-cap:not(:focus)::first-letter {
 	transform: scaleX(-1);
 }
 
+.wp-block-quote[style*="text-align:right"],
+.wp-block-quote[style*="text-align: right"],
+.wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:right"],
+.wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: right"] {
+	padding: 0 64px 0 0;
+}
+
+.wp-block-quote[style*="text-align:right"]:before,
+.wp-block-quote[style*="text-align: right"]:before {
+	left: auto;
+	right: 0;
+}
+
 .edit-post-visual-editor .editor-block-list__block .wp-block-quote p {
 	color: #999;
 }
@@ -354,6 +371,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 	right: 0;
 }
 
+.rtl .wp-block-quote[style*="text-align:left"]:before,
+.rtl .wp-block-quote[style*="text-align: left"]:before {
+	left: 0;
+	right: auto;
+}
+
 .rtl .wp-block-quote .wp-block-quote__citation {
 	text-align: left;
 }