Browse Source

Libre 2: Minor fixes to Gutenberg implementation, including:
* Update selectors for buttons, custom colours.
* Correct caption styles on front-end and in editor.
* Remove spacing around figure elements in editor.

Laurel Fulford 6 years ago
parent
commit
ced40cef8b
2 changed files with 77 additions and 13 deletions
  1. 38 9
      libre-2/css/blocks.css
  2. 39 4
      libre-2/css/editor-blocks.css

+ 38 - 9
libre-2/css/blocks.css

@@ -77,11 +77,43 @@ Description: Used to style Gutenberg Blocks.
 
 figure[class^="wp-block-"]:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull),
 [class^="wp-block-"]:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) figure,
-[class^="wp-block-"] figure:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull), {
+[class^="wp-block-"] figure:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
 	margin-left: 0;
 	margin-right: 0;
 }
 
+/* Captions */
+
+[class^="wp-block-"] figcaption {
+	color: inherit;
+	font-size: 14px;
+	font-style: italic;
+	position: relative;
+}
+
+[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
+	text-align: left;
+}
+
+[class^="wp-block-"]:not(.wp-block-gallery) figcaption::after {
+	border-top: 1px solid;
+	clear: both;
+	content: "";
+	display: block;
+	margin-top: .875em;
+	padding-top: .875em;
+	width: 25%;
+}
+
+[class^="wp-block-"].alignfull:not(.wp-block-gallery) figcaption {
+	padding-left: 2vw;
+	padding-right: 2vw;
+}
+
+.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
+	text-align: right;
+}
+
 /*--------------------------------------------------------------
 3.0 Blocks - Common Blocks
 --------------------------------------------------------------*/
@@ -270,16 +302,9 @@ p.has-drop-cap:not(:focus)::first-letter {
 	box-shadow: 0 2px 0 0 currentColor;
 }
 
-.wp-block-button .wp-block-button__link:not(.has-background) {
+.wp-block-button__link {
 	background: transparent;
-	padding: 0.21875em 0;
-}
-
-.wp-block-button .wp-block-button__link:not(.has-color) {
 	color: #404040;
-}
-
-.wp-block-button__link {
 	border: 0 none;
 	font-size: 18px;
 	font-size: 1rem;
@@ -287,6 +312,10 @@ p.has-drop-cap:not(:focus)::first-letter {
 	transition: 0.2s;
 }
 
+.wp-block-button .wp-block-button__link:not(.has-background) {
+	padding: 0.21875em 0;
+}
+
 .wp-block-button__link:hover,
 .wp-block-button__link:focus,
 .wp-block-button__link:active {

+ 39 - 4
libre-2/css/editor-blocks.css

@@ -133,6 +133,33 @@ Description: Used to style Gutenberg Blocks in the editor.
 	transition: 0.2s;
 }
 
+/* Caption styles */
+
+[class^="wp-block-"] figcaption {
+	color: inherit;
+	font-size: 14px;
+	font-style: italic;
+	position: relative;
+}
+
+[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
+	text-align: left;
+}
+
+[class^="wp-block-"]:not(.wp-block-gallery) figcaption::after {
+	border-top: 1px solid;
+	clear: both;
+	content: "";
+	display: block;
+	margin-top: .875em;
+	padding-top: .875em;
+	width: 25%;
+}
+
+.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
+	text-align: right;
+}
+
 /* Table styles */
 
 .wp-block-freeform.block-library-rich-text__tinymce table,
@@ -204,8 +231,9 @@ Description: Used to style Gutenberg Blocks in the editor.
 
 /* Pre styles */
 
-.wp-block-freeform.block-library-rich-text__tinymce pre {
-
+.editor-styles-wrapper .wp-block-freeform.block-library-rich-text__tinymce pre {
+	font-family: "Libre Baskerville", Libre, Georgia, Times, serif;
+	font-size: inherit;
 }
 
 /*--------------------------------------------------------------
@@ -312,6 +340,13 @@ p.has-drop-cap:not(:focus)::first-letter {
 	}
 }
 
+/* Audio */
+
+.editor-styles-wrapper .wp-block-audio {
+	margin-left: 0;
+	margin-right: 0;
+}
+
 /* Cover */
 
 .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
@@ -384,8 +419,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Preformatted */
 
-.wp-block-preformatted pre {
-	font-family: "Libre Baskerville", Libre, Georgia, Times, serif
+.editor-styles-wrapper .wp-block-preformatted pre {
+	font-family: "Libre Baskerville", Libre, Georgia, Times, serif;
 }
 
 /* Pullquote */