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

Scratchpad: Align quote icon to right when text is right aligned

scratchpad/blocks.css

@@ -79,7 +79,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Quote */
 
 .wp-block-quote.is-large,
-.wp-block-quote.is-style-large {
+.wp-block-quote.is-style-large,
+.rtl .wp-block-quote[style*="text-align:left"] {
 	padding-left: 70px;
 	padding-right: 0;
 }
@@ -101,11 +102,24 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .rtl .wp-block-quote.is-large,
-.rtl .wp-block-quote.is-style-large {
+.rtl .wp-block-quote.is-style-large,
+.wp-block-quote[style*="text-align:right"],
+.wp-block-quote.is-large[style*="text-align:right"],
+.wp-block-quote.is-style-large[style*="text-align:right"] {
 	padding-right: 70px;
 	padding-left: 0;
 }
 
+.wp-block-quote[style*="text-align:right"]::before {
+	left: auto;
+	right: 0;
+}
+
+.rtl .wp-block-quote[style*="text-align:left"]::before {
+	left: 0;
+	right: auto;
+}
+
 /* Audio */
 
 .wp-block-audio {

scratchpad/editor-blocks.css

@@ -296,21 +296,27 @@
 
 /* Quote */
 
-.editor-block-list__block .wp-block-quote:before {
+.wp-block-quote:before {
 	background: url("images/icon-sprites.svg") 0 -408px no-repeat;
 	background-size: 100%;
 	content: "";
 	display: block;
 	height: 39px;
-	left: 0;
 	opacity: 0.2;
 	position: absolute;
 	top: 0;
 	width: 50px;
 }
 
-.editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
-.editor-block-list__block .wp-block-quote {
+.wp-block-quote:before,
+.rtl .wp-block-quote[style*="text-align:left"]:before,
+.rtl .wp-block-quote[style*="text-align: left"]:before {
+	left: 0;
+	right: auto;
+}
+
+.wp-block-quote:not(.is-large):not(.is-style-large),
+.wp-block-quote {
 	border: 0;
 	color: #aaa;
 	font-size: 22px;
@@ -320,7 +326,9 @@
 	position: relative;
 }
 
-.rtl .editor-block-list__block .wp-block-quote:before {
+.rtl .wp-block-quote:before,
+.wp-block-quote[style*="text-align:right"]:before,
+.wp-block-quote[style*="text-align: right"]:before {
 	left: auto;
 	right: 0;
 }
@@ -332,14 +340,26 @@
 	}
 }
 
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
-.rtl .editor-block-list__block .wp-block-quote {
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large),
+.rtl .wp-block-quote,
+.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"],
+.wp-block-quote[style*="text-align:right"],
+.wp-block-quote[style*="text-align: right"] {
 	border: 0;
 	margin: 0;
 	padding-left: 0;
 	padding-right: 70px;
 }
 
+.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"],
+.rtl .wp-block-quote[style*="text-align:left"],
+.rtl .wp-block-quote[style*="text-align: left"] {
+	padding-left: 70px;
+	padding-right: 0;
+}
+
 .edit-post-visual-editor .editor-block-list__block blockquote p {
 	color: #aaa;
 	font-size: 22px;
@@ -362,18 +382,6 @@
 	margin-bottom: 0;
 }
 
-.editor-block-list__block .wp-block-quote.alignleft {
-	margin: .75em 1.5em .75em 0;
-}
-
-.editor-block-list__block .wp-block-quote.alignright {
-	margin: .75em 0 .75em 1.5em;
-}
-
-.editor-block-list__block .wp-block-quote.aligncenter {
-	margin-bottom: .75em;
-}
-
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	font-size: 32px;