Seedlet Blocks: Post Comments styling improvements

seedlet-blocks/assets/theme.css

@@ -164,28 +164,12 @@
 
 .wp-block-post-comments .reply a {
 	border-radius: var(--wp--custom--button--border--radius);
-	font-size: var(--wp--preset--font-size--tiny);
-	line-height: 1;
-	padding: 23px 25px;
-}
-
-.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 {
-	font-size: var(--wp--preset--font-size--tiny);
-	line-height: 1;
-	padding: 23px 25px;
-}
-
-.wp-block-post-comments input[type="submit"] {
-	border-radius: var(--wp--custom--button--border--radius);
-	cursor: pointer;
 	font-size: var(--wp--preset--font-size--small);
-	line-height: 1;
+	line-height: 1.5;
 	padding: 23px 25px;
 }
 
-.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 {
-	font-size: var(--wp--preset--font-size--small);
-	line-height: 1;
+.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 {
 	padding: 23px 25px;
 }
 
@@ -193,6 +177,7 @@
 .wp-block-post-comments #reply-title {
 	font-size: var(--wp--preset--font-size--huge);
 	font-style: italic;
+	margin-bottom: var(--wp--custom--margin--vertical);
 }
 
 .wp-block-post-comments .comment-meta,
@@ -206,6 +191,11 @@
 	text-decoration: none;
 }
 
+.wp-block-post-comments label {
+	font-size: var(--wp--preset--font-size--small);
+	margin-bottom: var(--wp--custom--margin--baseline);
+}
+
 .wp-block-post-comments input[type=checkbox] + label {
 	margin-left: 0;
 }
@@ -220,9 +210,18 @@
 	margin-top: var(--wp--custom--margin--vertical);
 }
 
+.wp-block-post-comments .commentlist > li {
+	margin-top: var(--wp--custom--margin--vertical);
+	margin-bottom: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-post-comments .commentlist > li:not(first-child) {
+	border-bottom: 1px solid var(--wp--custom--form--border--color);
+}
+
 .wp-block-post-comments .comment .comment-author .avatar {
 	border-radius: 1.5em;
-	border: 2px solid #fff;
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	display: block;
 	float: left;
 	height: 42px;
@@ -234,6 +233,78 @@
 	font-size: var(--global--font-size-xs);
 }
 
+.wp-block-post-comments .comment-form {
+	display: grid;
+	column-gap: 1em;
+	grid-template-rows: auto;
+	grid-template-areas: "notes notes" "comment comment" "author email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
+}
+
+.wp-block-post-comments .comment-form p {
+	margin-top: var(--wp--custom--margin--baseline);
+	margin-bottom: var(--wp--custom--margin--baseline);
+}
+
+.wp-block-post-comments .comment-form input[type="submit"] {
+	border-radius: var(--wp--custom--button--border--radius);
+	cursor: pointer;
+	font-size: var(--wp--preset--font-size--normal);
+	line-height: 1.5;
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color).has-focus {
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments .comment-form .comment-form-cookies-consent > label,
+.wp-block-post-comments .comment-form .comment-notes {
+	font-size: var(--wp--preset--font-size--tiny);
+}
+
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),
+.wp-block-post-comments .comment-form textarea {
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+	font-size: var(--wp--preset--font-size--small);
+	width: 100%;
+}
+
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]):focus,
+.wp-block-post-comments .comment-form textarea:focus {
+	color: var(--wp--custom--form--color--text);
+	outline-width: 1px;
+	outline-style: dotted;
+	outline-color: var(--wp--custom--form--color--text);
+}
+
+.wp-block-post-comments .comment-notes {
+	grid-area: notes;
+}
+
+.wp-block-post-comments .comment-form-author {
+	grid-area: author;
+}
+
+.wp-block-post-comments .comment-form-email {
+	grid-area: email;
+}
+
+.wp-block-post-comments .comment-form-url {
+	grid-area: url;
+}
+
+.wp-block-post-comments .comment-form-comment {
+	grid-area: comment;
+}
+
+.wp-block-post-comments .comment-form-cookies-consent {
+	grid-area: cookies-consent;
+}
+
+.wp-block-post-comments .form-submit {
+	grid-area: form-submit;
+}
+
 .wp-block-pullquote.is-style-solid-color {
 	padding: var(--wp--custom--margin--horizontal);
 }

seedlet-blocks/child-experimental-theme.json

@@ -99,7 +99,7 @@
 				"tertiary": "var(--wp--preset--color--almost-white)",
 				"foreground": "var(--wp--preset--color--almost-black)",
 				"background": "var(--wp--preset--color--white)",
-				"selection": "var(--wp--preset--color--almost-white)"
+				"selection": "#f2f2f2"
 			},
 			"fontsToLoadFromGoogle": [
 				"family=Fira+Sans:ital,wght@0,400;0,500;1,400",

seedlet-blocks/experimental-theme.json

@@ -131,7 +131,7 @@
 				"tertiary": "var(--wp--preset--color--almost-white)",
 				"foreground": "var(--wp--preset--color--almost-black)",
 				"background": "var(--wp--preset--color--white)",
-				"selection": "var(--wp--preset--color--almost-white)"
+				"selection": "#f2f2f2"
 			},
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",

seedlet-blocks/sass/blocks/_post-comments.scss

@@ -2,46 +2,27 @@
 	.reply {
 		a {
 			border-radius: var(--wp--custom--button--border--radius);
-			font-size: var(--wp--preset--font-size--tiny);
-			line-height: 1;
+			font-size: var(--wp--preset--font-size--small);
+			line-height: 1.5;
 			padding: 23px 25px;
-			
+
 			&:not(.has-background):not(.has-text-color) {
 				&:hover,
 				&:focus,
 				&.has-focus {
-					font-size: var(--wp--preset--font-size--tiny);
-					line-height: 1;
 					padding: 23px 25px;
 				}
 			}
 		}
 	}
-	
-	input[type="submit"] {
-		border-radius: var(--wp--custom--button--border--radius);
-		cursor: pointer;
-		font-size: var(--wp--preset--font-size--small);
-		line-height: 1;
-		padding: 23px 25px;
-		
-		&:not(.has-background):not(.has-text-color) {
-			&:hover,
-			&:focus,
-			&.has-focus {
-				font-size: var(--wp--preset--font-size--small);
-				line-height: 1;
-				padding: 23px 25px;
-			}
-		}
-	}
-	
+
 	#comments,
 	#reply-title {
 		font-size: var(--wp--preset--font-size--huge);
 		font-style: italic;
+		margin-bottom: var(--wp--custom--margin--vertical)
 	}
-	
+
 	.comment-meta,
 	.comment-author {
 		font-size: var(--wp--preset--font-size--tiny);
@@ -51,34 +32,131 @@
 			text-decoration: none;
 		}
 	}
-	
+
+	label {
+		font-size: var(--wp--preset--font-size--small);
+		margin-bottom: var(--wp--custom--margin--baseline);
+	}
+
 	input[type=checkbox] + label {
 		margin-left: 0;
 	}
-	
-	.commentlist .comment {
-		padding-left: 0;
-		
-		p {
-			font-size: var(--wp--preset--font-size--normal);
-			margin-bottom: var(--wp--custom--margin--vertical);
+
+	.commentlist {
+		.comment {
+			padding-left: 0;
+
+			p {
+				font-size: var(--wp--preset--font-size--normal);
+				margin-bottom: var(--wp--custom--margin--vertical);
+				margin-top: var(--wp--custom--margin--vertical);
+			}
+		}
+
+		> li {
 			margin-top: var(--wp--custom--margin--vertical);
+			margin-bottom: var(--wp--custom--margin--vertical);
+
+			&:not(first-child) {
+				border-bottom: 1px solid var(--wp--custom--form--border--color);
+			}
 		}
 	}
-	
+
 	.comment .comment-author {
 		.avatar {
 			border-radius: 1.5em;
-			border: 2px solid #fff;
+			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 			display: block;
 			float: left;
 			height: 42px;
 			margin-right: 18px;
 			width: 42px;
 		}
-		
+
 		.fn {
 			font-size: var(--global--font-size-xs);
 		}
 	}
+
+	.comment-form {
+		display: grid;
+		column-gap: 1em;
+		grid-template-rows: auto;
+		grid-template-areas:
+			"notes notes"
+			"comment comment"
+			"author email"
+			"url url"
+			"cookies-consent cookies-consent"
+			"form-submit form-submit";
+
+		p {
+			margin-top: var(--wp--custom--margin--baseline);
+			margin-bottom: var(--wp--custom--margin--baseline);
+		}
+
+		input[type="submit"] {
+			border-radius: var(--wp--custom--button--border--radius);
+			cursor: pointer;
+			font-size: var(--wp--preset--font-size--normal);
+			line-height: 1.5;
+			padding: 23px 25px;
+
+			&:not(.has-background):not(.has-text-color) {
+				&:hover,
+				&:focus,
+				&.has-focus {
+					padding: 23px 25px;
+				}
+			}
+		}
+
+		.comment-form-cookies-consent > label,
+		.comment-notes {
+			font-size: var(--wp--preset--font-size--tiny);
+		}
+
+		input:not([type=submit]):not([type=checkbox]),
+		textarea {
+			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+			font-size: var(--wp--preset--font-size--small);
+			width: 100%;
+
+			&:focus {
+				color: var(--wp--custom--form--color--text);
+				outline-width: 1px;
+				outline-style: dotted;
+				outline-color: var(--wp--custom--form--color--text);
+			}
+		}
+	}
+
+	.comment-notes {
+		grid-area: notes;
+	}
+
+	.comment-form-author {
+		grid-area: author;
+	}
+
+	.comment-form-email {
+		grid-area: email;
+	}
+
+	.comment-form-url {
+		grid-area: url;
+	}
+
+	.comment-form-comment {
+		grid-area: comment;
+	}
+
+	.comment-form-cookies-consent {
+		grid-area: cookies-consent;
+	}
+
+	.form-submit {
+		grid-area: form-submit;
+	}
 }