Browse Source

Lodestar: 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
6a5475f2d6
2 changed files with 50 additions and 12 deletions
  1. 21 0
      lodestar/assets/css/blocks.css
  2. 29 12
      lodestar/assets/css/editor-blocks.css

+ 21 - 0
lodestar/assets/css/blocks.css

@@ -112,6 +112,27 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Quote */
 
+.wp-block-quote[style*="text-align:center"] {
+	border: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.rtl .wp-block-style,
+.wp-block-quote[style*="text-align:right"] {
+	border: 0;
+	border-right: 4px solid #ddd;
+	padding-left: 0;
+	padding-right: 1.5em;
+}
+
+.rtl .wp-block-quote[style*="text-align:left"] {
+	border: 0;
+	border-left: 4px solid #ddd;
+	padding-left: 1.5em;
+	padding-right: 0;
+}
+
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	margin-left: 2em;

+ 29 - 12
lodestar/assets/css/editor-blocks.css

@@ -243,10 +243,37 @@ 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:not(.is-large):not(.is-style-large),
+.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 #ddd;
-	margin-left: 2em;
+	border-right: 0;
 	padding-left: 1.5em;
+	padding-right: 0;
+}
+
+.rtl .editor-styles-wrapper .wp-block-quote,
+.rtl .wp-block-quote:not(.is-large):not(.is-style-large) {
+	border-left: 0;
+	border-right: 4px solid #ddd;
+	margin-left: 0;
+	margin-right: 2em;
+	padding-left: 0;
+	padding-right: 1.5em;
+}
+
+.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: 0;
+	padding: 0;
+}
+
+.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 #ddd;
+	padding-left: 0;
+	padding-right: 1.5em;
 }
 
 .wp-block-quote .wp-block-quote__citation {
@@ -265,16 +292,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	font-size: 18px;
 }
 
-.rtl .editor-styles-wrapper .wp-block-quote,
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large) {
-	border-left: 0;
-	border-right: 4px solid #ddd;
-	margin-left: 0;
-	margin-right: 2em;
-	padding-left: 0;
-	padding-right: 1.5em;
-}
-
 /* Cover */
 
 .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,