Fix Comments Styles for BB & Co. (#4109)

* Added and formatted comments for Blockbase refactoring font definitions for the block
* Fixed wp.com comment styles for Quadrat.  Removed unnecessary comment font stylings.
* Fixed Seedlet-blocks wp.com comment styles
* Moved .com specific fixes to appropriate space.

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blockbase/assets/ponyfill.css

@@ -370,15 +370,12 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-weight: var(--wp--custom--post-author--font-weight);
 }
 
-.wp-block-post-comments .comment {
-	font-size: var(--wp--custom--form--typography--font-size);
-}
-
 .wp-block-post-comments label, .wp-block-post-comments .comment-meta {
 	font-size: var(--wp--custom--form--label--typography--font-size);
 }
 
-.wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
+.wp-block-post-comments input[type="submit"],
+.wp-block-post-comments .reply a {
 	border-width: 0;
 	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
 	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
@@ -396,11 +393,15 @@ p.has-drop-cap:not(:focus):first-letter {
 	border-radius: var(--wp--custom--button--border--radius);
 }
 
-.wp-block-post-comments input[type="submit"] svg, .wp-block-post-comments .reply a svg {
+.wp-block-post-comments input[type="submit"] svg,
+.wp-block-post-comments .reply a svg {
 	fill: var(--wp--custom--button--color--text);
 }
 
-.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus {
+.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover,
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus,
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus {
 	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
 	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
 	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
@@ -411,7 +412,10 @@ p.has-drop-cap:not(:focus):first-letter {
 	border-color: var(--wp--custom--button--border--color);
 }
 
-.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus svg {
+.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--text);
 }
 
@@ -419,6 +423,24 @@ p.has-drop-cap:not(:focus):first-letter {
 	display: inline-block;
 }
 
+.wp-block-post-comments .comment-form input[type="text"] {
+	width: 100%;
+}
+
+.wp-block-post-comments .comment-reply-title small {
+	float: right;
+	font-size: 14px;
+}
+
+.wp-block-post-comments .comment-form-cookies-consent input[type="checkbox"] {
+	margin-left: 0;
+}
+
+.wp-block-post-comments .commentlist .comment p {
+	font-size: var(--wp--custom--post-comment--typography--font-size);
+	line-height: var(--wp--custom--post-comment--typography--line-height);
+}
+
 .wp-block-pullquote.is-style-solid-color,
 .wp-block-pullquote {
 	text-align: var(--wp--custom--pullquote--typography--text-align);

blockbase/block-templates/singular.html

@@ -14,4 +14,8 @@
 </main>
 <!-- /wp:group -->
 
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-comments /--></div>
+<!-- /wp:group -->
+
 <!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->

blockbase/inc/wpcom-style.css

@@ -12,3 +12,8 @@ img#wpstats {
 	width: 0 !important;
 	overflow: hidden;
 }
+
+/* NOTE: This is a wp.com-specific fix so that the comment form presented there (highlander) is NOT displayed as a GRID. */
+body.highlander-enabled .wp-block-post-comments form {
+	display: revert;
+}

blockbase/sass/blocks/_post-comments.scss

@@ -1,15 +1,13 @@
 @import 'button-mixins';
 
 .wp-block-post-comments {
-	.comment {
-		font-size: var(--wp--custom--form--typography--font-size);
-	}
 
 	label, .comment-meta {
 		font-size: var(--wp--custom--form--label--typography--font-size);
 	}
 
-	input[type="submit"], .reply a {
+	input[type="submit"], 
+	.reply a {
 		@include button-main-styles;
 		@include button-hover-styles;
 	}
@@ -17,4 +15,33 @@
 	.reply a {
 		display: inline-block;
 	}
+
+	.comment-form {
+		input[type="text"] {
+			width: 100%;
+		}
+	}
+
+	.comment-reply-title {
+		small {
+			float: right;
+			font-size: 14px;
+		}
+	}
+
+	.comment-form-cookies-consent {
+		input[type="checkbox"]{
+			margin-left: 0;
+		}
+	}
+
+	.commentlist {
+		.comment {
+			p {
+				font-size: var(--wp--custom--post-comment--typography--font-size);
+				line-height: var(--wp--custom--post-comment--typography--line-height);
+			}
+		}
+	}
+
 }

blockbase/theme.json

@@ -218,6 +218,12 @@
 					"fontWeight": "normal"
 				}
 			},
+			"post-comment": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"lineHeight": "var(--wp--custom--body--typography--line-height)"
+				}
+			},
 			"post-content": {
 				"padding": {
 					"left": "20px",

mayland-blocks/theme.json

@@ -226,6 +226,12 @@
 					"fontWeight": "normal"
 				}
 			},
+			"post-comment": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"lineHeight": "var(--wp--custom--body--typography--line-height)"
+				}
+			},
 			"post-content": {
 				"padding": {
 					"left": "20px",

quadrat/assets/theme.css

@@ -210,7 +210,6 @@ ul ul {
 }
 
 .wp-block-post-comments {
-	font-size: var(--wp--preset--font-size--normal);
 	line-height: var(--wp--custom--body--typography--line-height);
 }
 
@@ -342,11 +341,6 @@ ul ul {
 	margin-bottom: 60px;
 }
 
-.wp-block-post-comments .commentlist .comment p {
-	font-size: var(--wp--preset--font-size--normal);
-	line-height: var(--wp--custom--body--typography--line-height);
-}
-
 .wp-block-post-comments .comment-body > p > a,
 .wp-block-post-comments .comment-edit-link {
 	text-decoration: underline;

quadrat/sass/blocks/_post-comments.scss

@@ -2,7 +2,6 @@
 
 .wp-block-post-comments {
 
-	font-size: var(--wp--preset--font-size--normal);
 	line-height: var(--wp--custom--body--typography--line-height);
 
 	.reply a {
@@ -124,12 +123,6 @@
 
 	.commentlist {
 		margin-bottom: 60px;
-		.comment {
-			p {
-				font-size: var(--wp--preset--font-size--normal);
-				line-height: var(--wp--custom--body--typography--line-height);
-			}
-		}
 	}
 
 	// Target certain links within post comments to use the underline treatment.

quadrat/theme.json

@@ -262,6 +262,12 @@
 					"fontWeight": "normal"
 				}
 			},
+			"post-comment": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"lineHeight": "var(--wp--custom--body--typography--line-height)"
+				}
+			},
 			"post-content": {
 				"padding": {
 					"left": "min( var(--wp--custom--margin--horizontal), 5vw)",

seedlet-blocks/theme.json

@@ -259,6 +259,12 @@
 					"fontWeight": "normal"
 				}
 			},
+			"post-comment": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"lineHeight": "var(--wp--custom--body--typography--line-height)"
+				}
+			},
 			"post-content": {
 				"padding": {
 					"left": "20px",