Post Comments: Add some basic CSS to the post comments block (#30382)

* Post Comments: Add some basic CSS to the post comments block

packages/block-library/src/post-comments/block.json

@@ -20,5 +20,6 @@
 			"link": true
 		},
 		"lineHeight": true
-	}
+	},
+	"style": "wp-block-post-comments"
 }

packages/block-library/src/post-comments/style.scss

@@ -0,0 +1,77 @@
+.wp-block-post-comments {
+	.commentlist {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		.comment {
+			min-height: 2.25em;
+			padding-left: 3.25em;
+
+			p {
+				font-size: 0.875em;
+				line-height: 1.8;
+				margin: 0.36em 0 1.4em;
+			}
+		}
+
+		.children {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	.comment-author {
+		line-height: 1.5;
+		margin-left: -3.25em;
+
+		.avatar {
+			border-radius: 1.5em;
+			display: block;
+			float: left;
+			height: 2.5em;
+			margin-right: 0.75em;
+			width: 2.5em;
+		}
+
+		cite {
+			font-style: normal;
+		}
+	}
+
+	.comment-meta {
+		line-height: 1.5;
+		margin-left: -3.25em;
+	}
+
+	.comment-body .commentmetadata {
+		font-size: 0.75em;
+	}
+
+	.comment-form-comment,
+	.comment-form-author,
+	.comment-form-email,
+	.comment-form-url {
+		label {
+			display: block;
+		}
+	}
+
+	.comment-form-comment textarea {
+		box-sizing: border-box;
+		width: 100%;
+	}
+
+	.reply {
+		font-size: 0.75em;
+		margin-bottom: 1.4em;
+	}
+
+	.comment-form {
+		textarea,
+		input {
+			border: 1px solid $gray-600;
+		}
+	}
+}

packages/block-library/src/style.scss

@@ -26,6 +26,7 @@
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
+@import "./post-comments/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-title/style.scss";