Browse Source

Rebalance: Update quote block border styles, to work better with the new styles planned for Gutenberg 5.2. See #594.

Laurel Fulford 6 years ago
parent
commit
1140d8e86c
2 changed files with 39 additions and 30 deletions
  1. 14 10
      rebalance/blocks.css
  2. 25 20
      rebalance/editor-blocks.css

+ 14 - 10
rebalance/blocks.css

@@ -63,17 +63,21 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Quote */
 
-.entry-content .wp-block-quote {
+.wp-block-quote,
+.rtl .wp-block-quote[style*="text-align:left"] {
 	border-left: 6px solid #f35029;
+	border-right: 0;
 	font-family: "Libre Baskerville", Georgia, serif;
 	font-style: italic;
 	font-size: 18px;
 	line-height: 1.825em;
 	margin: 0 0 1.5em -40px;
 	padding-left: 40px;
+	padding-right: 0;
 }
 
-.rtl .entry-content .wp-block-quote {
+.rtl .wp-block-quote,
+.wp-block-quote[style*="text-align:right"] {
 	border-left: 0;
 	border-right: 6px solid #f35029;
 	margin: 0 -40px 1.5em 0;
@@ -81,6 +85,14 @@ p.has-drop-cap:not(:focus)::first-letter {
 	padding-right: 40px;
 }
 
+.wp-block-quote[style*="text-align:center"] {
+	border: 0;
+	margin-left: 0;
+	margin-right: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
 .wp-block-quote cite {
 	font-family: "Libre Baskerville", Georgia, serif;
 	font-style: italic;
@@ -94,10 +106,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	font-size: 24px;
 }
 
-.wp-block-quote.is-large,
-.wp-block-quote.is-style-large {
-}
-
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large,
 .wp-block-quote.is-large p,
@@ -110,10 +118,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin-bottom: 1.5em;
 }
 
-.rtl .wp-block-quote {
-	border: 0;
-}
-
 /* Audio */
 
 .wp-block-audio {

+ 25 - 20
rebalance/editor-blocks.css

@@ -356,19 +356,25 @@
 
 /* Quote */
 
-.editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
-.editor-block-list__block .wp-block-quote {
+.wp-block-quote:not(.is-large):not(.is-style-large),
+.wp-block-quote,
+.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-left: 6px solid #f35029;
+	border-right: 0;
 	font-family: "Libre Baskerville", Georgia, serif;
 	font-style: italic;
 	font-size: 18px;
 	line-height: 1.825em;
 	margin: 0 0 1.5em -40px;
 	padding-left: 40px;
+	padding-right: 0;
 }
 
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
-.rtl .editor-block-list__block .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"],
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large),
+.rtl .wp-block-quote {
 	border-left: 0;
 	border-right: 6px solid #f35029;
 	margin: 0 -40px 1.5em 0;
@@ -376,6 +382,17 @@
 	padding-right: 40px;
 }
 
+.wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:center"],
+.wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: center"],
+.wp-block-quote[style*="text-align:center"],
+.wp-block-quote[style*="text-align: center"] {
+	border: 0;
+	margin-left: 0;
+	margin-right: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
 .edit-post-visual-editor .editor-block-list__block blockquote p {
 	font-family: "Libre Baskerville", Georgia, serif;
 	font-style: italic;
@@ -383,34 +400,22 @@
 	line-height: 1.825em;
 }
 
-.editor-block-list__block .wp-block-quote__citation {
+.wp-block-quote__citation {
 	color: inherit;
 	font-size: inherit;
 	font-family: "Libre Baskerville", Georgia, serif;
 	font-style: italic;
 }
 
-.editor-block-list__block .wp-block-quote em,
-.editor-block-list__block .wp-block-quote i {
+.wp-block-quote em,
+.wp-block-quote i {
 	font-style: normal;
 }
 
-.editor-block-list__block .wp-block-quote > :last-child {
+.wp-block-quote > :last-child {
 	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 {
 	border-left: 6px solid #f35029;