Adds in basic styling for post comment form (#35704)

* Adds in basic styling for post comment form

* Add padding, type specs.

* Move some styles to the post-comments block too.

* Tidy up cookies consent area + checkbox.

* Standardize the font family used in forms.

Co-authored-by: Tammie Lister <tammie@automattic.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

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

@@ -1,9 +1,49 @@
 // Styles copied from button block styles.
-.wp-block-post-comments-form input[type="submit"] {
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	display: inline-block;
-	text-align: center;
-	overflow-wrap: break-word;
+.wp-block-post-comments-form {
+
+	input[type="submit"] {
+		border: none;
+		box-shadow: none;
+		cursor: pointer;
+		display: inline-block;
+		text-align: center;
+		overflow-wrap: break-word;
+	}
+
+	textarea,
+	input:not([type="submit"]) {
+		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:not([type="submit"]):not([type="checkbox"]) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+
+	.comment-form-comment textarea {
+		display: block;
+		box-sizing: border-box;
+		width: 100%;
+	}
+
+	.comment-form-comment,
+	.comment-form-author,
+	.comment-form-email,
+	.comment-form-url {
+		label {
+			display: block;
+			margin-bottom: 0.25em;
+		}
+	}
+
+	.comment-form-cookies-consent {
+		display: flex;
+		gap: 0.25em;
+
+		#wp-comment-cookies-consent {
+			margin-top: 0.35em;
+		}
+	}
 }

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

@@ -55,6 +55,7 @@
 	.comment-form-url {
 		label {
 			display: block;
+			margin-bottom: 0.25em;
 		}
 	}
 
@@ -63,13 +64,33 @@
 		width: 100%;
 	}
 
+	.comment-form-cookies-consent {
+		display: flex;
+		gap: 0.25em;
+
+		#wp-comment-cookies-consent {
+			margin-top: 0.35em;
+		}
+	}
+
 	.reply {
 		font-size: 0.75em;
 		margin-bottom: 1.4em;
 	}
 
 	textarea,
-	input {
+	input:not([type="submit"]) {
 		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:not([type="submit"]):not([type="checkbox"]) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+
+	input[type="submit"] {
+		border: none;
 	}
 }