Browse Source

Apostrophe 2: 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
f241d169da
2 changed files with 39 additions and 28 deletions
  1. 12 2
      apostrophe-2/css/blocks.css
  2. 27 26
      apostrophe-2/css/editor-blocks.css

+ 12 - 2
apostrophe-2/css/blocks.css

@@ -144,10 +144,20 @@ body {
 
 /* Quote */
 
-.wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
-.wp-block-quote:not(.is-large):not(.is-style-large).alignright {
+.wp-block-quote:not(.is-large):not(.is-style-large)[style="text-align:right"] {
+	border-left: 0;
+	border-right: 4px solid #d9d9d9;
+	padding-left: 0;
+	padding-right: 1.5em;
 }
 
+.wp-block-quote:not(.is-large):not(.is-style-large)[style="text-align:center"] {
+	border: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
+
 .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
 .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
 }

+ 27 - 26
apostrophe-2/css/editor-blocks.css

@@ -297,32 +297,50 @@
 
 /* Quote */
 
-.editor-block-list__block .wp-block-quote {
-	border-left: 4px solid #d9d9d9;
+.wp-block-quote {
 	font-size: 19px;
 	font-style: italic;
 	margin: 0 1.5em 1.5em 0;
 	padding-left: 1.5em;
 }
 
-.editor-block-list__block .wp-block-quote p {
+.wp-block-quote:not(.is-large):not(.is-style-large) {
+	border-color: #d9d9d9;
+	border-width: 4px;
+}
+
+.wp-block-quote p {
 	color: inherit;
 	font-size: 19px;
 }
 
-.rtl .editor-block-list__block .wp-block-quote {
+.rtl .wp-block-quote {
+	margin: 0 0 1.5em 1.5em;
+}
+
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large),
+.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"] {
 	border-left: 0;
 	border-right: 4px solid #d9d9d9;
-	margin: 0 0 1.5em 1.5em;
 	padding-left: 0;
 	padding-right: 1.5em;
 }
 
-.editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
-.editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
-.editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
+.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: 4px solid #d9d9d9;
+	border-right: 0;
 	padding-left: 1.5em;
+	padding-right: 0;
+}
+
+.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"] {
+	border-left: 0;
+	border-right: 0;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .editor-block-list__block .wp-block-quote__citation {
@@ -333,13 +351,8 @@
 	margin-top: 0.25em;
 }
 
-.editor-block-list__block .wp-block-quote__citation:before {
-	content: "—";
-}
-
 .editor-block-list__block .wp-block-quote em,
-.editor-block-list__block .wp-block-quote i,
-.editor-block-list__block .wp-block-quote__citation:before {
+.editor-block-list__block .wp-block-quote i {
 	font-style: normal;
 }
 
@@ -347,18 +360,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: 1.5em;
-}
-
 .editor-block-list__block .wp-block-quote.is-large,
 .editor-block-list__block .wp-block-quote.is-style-large,
 .editor-block-list__block .wp-block-quote.is-large p,