Scratchpad: Minor fixes to Gutenberg styles, including adding bottom margins to a few elements, tweaking and minor reorganization.

scratchpad/blocks.css

@@ -18,12 +18,6 @@ Description: Used to style Gutenberg Blocks.
 1.0 General Block Styles
 --------------------------------------------------------------*/
 
-/* Alignments */
-
-.no-sidebar #page {
-	overflow-x: hidden;
-}
-
 /* Captions */
 
 [class^="wp-block-"] figcaption {
@@ -32,6 +26,13 @@ Description: Used to style Gutenberg Blocks.
 	line-height: 1.5;
 }
 
+[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
+	border-bottom: 1px solid #ddd;
+	color: #b9b9b9;
+	margin-top: 0;
+	padding-bottom: 0.5em;
+}
+
 /*--------------------------------------------------------------
 2.0 Blocks - Common Blocks
 --------------------------------------------------------------*/
@@ -51,6 +52,15 @@ p.has-drop-cap:not(:focus)::first-letter {
 	display: flex;
 }
 
+.wp-block-cover-image .wp-block-cover-image-text,
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image h2,
+.wp-block-cover .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover-text,
+.wp-block-cover h2 {
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+}
+
 /* Gallery */
 
 .wp-block-gallery {
@@ -89,6 +99,10 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Audio */
 
+.wp-block-audio {
+	margin-bottom: 1.75em;
+}
+
 .wp-block-audio audio {
 	display: block;
 	width: 100%;
@@ -306,18 +320,33 @@ hr.wp-block-separator {
 	max-width: 100%;
 }
 
+/* Media & Text */
+
+.wp-block-media-text {
+	margin-bottom: 1.75em;
+}
+
+.wp-block-media-text *:last-child {
+	margin-bottom: 0;
+}
+
 /*--------------------------------------------------------------
 5.0 Blocks - Widget Blocks
 --------------------------------------------------------------*/
 
-/* Categories */
+/* Archives, Categories & Latest Posts */
 
-.wp-block-categories.aligncenter {
+.wp-block-archives.aligncenter,
+.wp-block-categories.aligncenter,
+.wp-block-latest-posts.aligncenter {
+	list-style-position: inside;
 	margin-left: 1.5em;
 	margin-right: 1.5em;
 	text-align: center;
 }
 
+/* Categories */
+
 .wp-block-categories-list.alignleft {
 	margin-left: 1.5em;
 }
@@ -329,16 +358,14 @@ hr.wp-block-separator {
 	margin-right: 0;
 }
 
-.editor-block-list__block .wp-block-latest-comments__comment-meta a {
-	box-shadow: none;
+.wp-block-latest-comments__comment-meta a {
 	font-weight: 700;
 	text-decoration: none;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #ccc;
 	margin-bottom: 0;
-	padding: .75em 0;
+	padding: 0.75em 0;
 }
 
 .wp-block-latest-comments .avatar,
@@ -346,10 +373,21 @@ hr.wp-block-separator {
 	margin: 0;
 }
 
-.wp-block-latest-comments__comment-excerpt p:last-child {
-	margin-bottom: 0;
+.wp-block-latest-comments__comment,
+.wp-block-latest-comments__comment-date,
+.wp-block-latest-comments__comment-excerpt p {
+	font-size: inherit;
 }
 
+.wp-block-latest-comments__comment-date {
+	color: #999;
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	font-size: 16px;
+	font-size: 1rem;
+}
+
+/* Latest Posts */
+
 .wp-block-latest-posts.is-grid,
 .rtl .wp-block-latest-posts.is-grid {
 	margin-left: 0;
@@ -484,4 +522,4 @@ hr.wp-block-separator {
 .has-black-background-color:focus,
 .has-black-background-color:active {
 	background-color: #222;
-}
+}

scratchpad/editor-blocks.css

@@ -135,14 +135,6 @@
 	}
 }
 
-/* Images */
-
-.wp-block-image figcaption {
-	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
-	font-size: 15px;
-	line-height: 1.5;
-}
-
 /*--------------------------------------------------------------
 2.0 General Block Styles
 --------------------------------------------------------------*/
@@ -226,10 +218,50 @@
 
 /* Captions */
 
-[class^="wp-block-"] figcaption {
+[class^="wp-block-"] figcaption,
+.wp-caption-dd {
 	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
 	font-size: 15px;
 	line-height: 1.5;
+	margin-left: 0;
+	margin-right: 0;
+	text-align: center;
+}
+
+[class^="wp-block-"]:not(.wp-block-gallery) figcaption,
+.wp-caption-dd {
+	border-bottom: 1px solid #ddd;
+	color: #b9b9b9;
+	padding-bottom: 0.5em;
+}
+
+/* Definition List styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce dt {
+	font-weight: bold;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce dd {
+	margin-bottom: 1em;
+}
+
+/* Code styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce code,
+.wp-block-freeform.block-library-rich-text__tinymce kbd,
+.wp-block-freeform.block-library-rich-text__tinymce tt,
+.wp-block-freeform.block-library-rich-text__tinymce var {
+	background: transparent;
+	color: #777;
+	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+	font-size: 15px;
+}
+
+/* Mark, Ins styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce mark,
+.wp-block-freeform.block-library-rich-text__tinymce ins {
+	background: #fff9c0;
 }
 
 /*--------------------------------------------------------------
@@ -250,6 +282,14 @@
 	margin: 0 0 1.5em;
 }
 
+/* Images */
+
+.wp-block-image figcaption {
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	font-size: 15px;
+	line-height: 1.5;
+}
+
 /* Quote */
 
 .editor-block-list__block .wp-block-quote:before {
@@ -362,6 +402,17 @@
 	font-style: normal;
 }
 
+/* Cover */
+
+.wp-block-cover-image .wp-block-cover-image-text,
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image h2,
+.wp-block-cover .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover-text,
+.wp-block-cover h2 {
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+}
+
 /* File */
 
 .wp-block-file {
@@ -760,6 +811,7 @@
 
 /* Buttons */
 .wp-block-button .wp-block-button__link {
+	background: transparent;
 	border: 2px solid currentColor;
 	border-radius: 255px 15px 225px 15px/15px 225px 15px;
 	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
@@ -799,6 +851,7 @@
 .wp-block-button__link:not(.has-background):active,
 .wp-block-button__link:not(.has-background):focus,
 .wp-block-button__link:not(.has-background):hover {
+	background: transparent;
 	border-color: rgba(119, 119, 119, 0.8);
 }
 
@@ -823,7 +876,6 @@
 	margin-bottom: 1.5em;
 }
 
-
 .wp-block-separator.is-style-wide {
 	max-width: 100%;
 }
@@ -871,4 +923,4 @@
 
 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 	margin-bottom: .75em;
-}
+}