Merge pull request #4367 from Automattic/add/skatepark-comment-form-styles

Skatepark: Add comment styles

blockbase/assets/ponyfill.css

@@ -453,21 +453,108 @@ p.has-background {
 	fill: var(--wp--custom--button--color--text);
 }
 
+.wp-block-post-comments .reply {
+	margin-block: var(--wp--custom--margin--vertical);
+}
+
 .wp-block-post-comments .reply a {
 	display: inline-block;
 }
 
-.wp-block-post-comments .comment-form input[type="text"] {
+.wp-block-post-comments form {
+	display: grid;
+	column-gap: 1em;
+	grid-template-rows: auto;
+	grid-template-areas: "notes notes" "comment comment" "author author" "email email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
+}
+
+.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
+.wp-block-post-comments form textarea {
+	background: var(--wp--custom--color--background);
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	width: 100%;
 }
 
-.wp-block-post-comments .comment-reply-title small {
-	float: right;
-	font-size: 14px;
+.wp-block-post-comments form p {
+	margin-top: 0;
+}
+
+.wp-block-post-comments form .comment-notes {
+	grid-area: notes;
+}
+
+.wp-block-post-comments form .comment-form-author {
+	grid-area: author;
+}
+
+.wp-block-post-comments form .comment-form-email {
+	grid-area: email;
+}
+
+.wp-block-post-comments form .comment-form-url {
+	grid-area: url;
+}
+
+.wp-block-post-comments form .comment-form-comment {
+	grid-area: comment;
+}
+
+.wp-block-post-comments form .comment-form-cookies-consent {
+	grid-area: cookies-consent;
+}
+
+.wp-block-post-comments form .form-submit {
+	grid-area: form-submit;
 }
 
-.wp-block-post-comments .comment-form-cookies-consent input[type="checkbox"] {
+.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+	margin-left: 0;
+}
+
+.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + label {
 	margin-left: 0;
+	padding-left: 3em;
+	position: relative;
+}
+
+.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + label::before,
+.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + label::after {
+	box-sizing: border-box;
+}
+
+.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before {
+	content: var(--wp--custom--form--checkbox--unchecked--content);
+	position: absolute;
+	top: var(--wp--custom--form--checkbox--unchecked--position--top);
+	left: var(--wp--custom--form--checkbox--unchecked--position--left);
+	width: var(--wp--custom--form--checkbox--unchecked--sizing--width);
+	height: var(--wp--custom--form--checkbox--unchecked--sizing--height);
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+}
+
+.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:checked + ::after {
+	content: var(--wp--custom--form--checkbox--checked--content);
+	position: absolute;
+	top: var(--wp--custom--form--checkbox--checked--position--top);
+	left: var(--wp--custom--form--checkbox--checked--position--left);
+	width: var(--wp--custom--form--checkbox--checked--sizing--width);
+	height: var(--wp--custom--form--checkbox--checked--sizing--height);
+	font-size: var(--wp--custom--form--checkbox--checked--font-size);
+}
+
+.wp-block-post-comments .comment-reply-title small {
+	float: right;
+	font-size: 14px;
 }
 
 .wp-block-post-comments .commentlist .comment p {
@@ -475,6 +562,16 @@ p.has-background {
 	line-height: var(--wp--custom--post-comment--typography--line-height);
 }
 
+.wp-block-post-comments .commentmetadata {
+	margin-left: 0;
+}
+
+.wp-block-post-comments .comment-awaiting-moderation {
+	display: inline-block;
+	font-size: var(--wp--preset--font-size--small);
+	margin-bottom: var(--wp--custom--margin--baseline);
+}
+
 .wp-block-pullquote.is-style-solid-color,
 .wp-block-pullquote {
 	text-align: var(--wp--custom--pullquote--typography--text-align);

blockbase/sass/base/_style.scss

@@ -3,6 +3,7 @@
  * - Reset the browser
  */
 
+@import "mixins";
 @import "normalize";
 @import "breakpoints";
 

blockbase/sass/blocks/_post-comments.scss

@@ -1,7 +1,6 @@
 @import 'button-mixins';
 
 .wp-block-post-comments {
-
 	label, .comment-meta {
 		font-size: var(--wp--custom--form--label--typography--font-size);
 	}
@@ -12,14 +11,99 @@
 		@include button-hover-styles;
 	}
 
-	.reply a {
-		display: inline-block;
+	.reply {
+		margin-block: var(--wp--custom--margin--vertical);
+
+		a {
+			display: inline-block;
+		}
 	}
 
-	.comment-form {
-		input[type="text"] {
+	form {
+		display: grid;
+		column-gap: 1em;
+		grid-template-rows: auto;
+		grid-template-areas:
+			"notes notes"
+			"comment comment"
+			"author author"
+			"email email"
+			"url url"
+			"cookies-consent cookies-consent"
+			"form-submit form-submit";
+
+		input:not([type=submit]):not([type=checkbox]),
+		textarea {
+			background: var(--wp--custom--color--background);
+			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 			width: 100%;
 		}
+
+		p {
+			margin-top: 0;
+		}
+
+		.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;
+		}
+
+		.comment-form-cookies-consent {
+			input[type="checkbox"] {
+				@include hide-accesibly;
+				margin-left: 0;
+				& + label {
+					margin-left: 0;
+					padding-left: 3em;
+					position: relative;
+				}
+				& + label::before,
+				& + label::after {
+					box-sizing: border-box;
+				}
+				& + ::before {
+					content: var(--wp--custom--form--checkbox--unchecked--content);
+					position: absolute;
+					top: var(--wp--custom--form--checkbox--unchecked--position--top);
+					left: var(--wp--custom--form--checkbox--unchecked--position--left);
+					width: var(--wp--custom--form--checkbox--unchecked--sizing--width);
+					height: var(--wp--custom--form--checkbox--unchecked--sizing--height);
+					border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+				}
+				&:checked + ::after {
+					content: var(--wp--custom--form--checkbox--checked--content);;
+					position: absolute;
+					top: var(--wp--custom--form--checkbox--checked--position--top);
+					left: var(--wp--custom--form--checkbox--checked--position--left);
+					width: var(--wp--custom--form--checkbox--checked--sizing--width);
+					height: var(--wp--custom--form--checkbox--checked--sizing--height);
+					font-size: var(--wp--custom--form--checkbox--checked--font-size);
+				}
+			}
+		}
 	}
 
 	.comment-reply-title {
@@ -29,12 +113,6 @@
 		}
 	}
 
-	.comment-form-cookies-consent {
-		input[type="checkbox"]{
-			margin-left: 0;
-		}
-	}
-
 	.commentlist {
 		.comment {
 			p {
@@ -44,4 +122,14 @@
 		}
 	}
 
+	.commentmetadata {
+		margin-left: 0;
+	}
+
+	.comment-awaiting-moderation {
+		display: inline-block;
+		font-size: var(--wp--preset--font-size--small);
+		margin-bottom: var(--wp--custom--margin--baseline);
+	}
+
 }

blockbase/theme.json

@@ -158,6 +158,31 @@
 					"style": "solid",
 					"width": "2px"
 				},
+				"checkbox": {
+					"checked": {
+						"content": "\"\\2715\"",
+						"fontSize": "14px",
+						"position": {
+							"left": "3px",
+							"top": "4px"
+						},
+						"sizing": {
+							"height": "12px",
+							"width": "12px"
+						}
+					},
+					"unchecked": {
+						"content": "\"\"",
+						"position": {
+							"left": "0",
+							"top": "0.2em"
+						},
+						"sizing": {
+							"height": "16px",
+							"width": "16px"
+						}
+					}
+				},
 				"color": {
 					"background": "transparent",
 					"boxShadow": "none",

mayland-blocks/theme.json

@@ -166,6 +166,31 @@
 					"style": "solid",
 					"width": "2px"
 				},
+				"checkbox": {
+					"checked": {
+						"content": "\"\\2715\"",
+						"fontSize": "14px",
+						"position": {
+							"left": "3px",
+							"top": "4px"
+						},
+						"sizing": {
+							"height": "12px",
+							"width": "12px"
+						}
+					},
+					"unchecked": {
+						"content": "\"\"",
+						"position": {
+							"left": "0",
+							"top": "0.2em"
+						},
+						"sizing": {
+							"height": "16px",
+							"width": "16px"
+						}
+					}
+				},
 				"color": {
 					"background": "transparent",
 					"boxShadow": "none",

quadrat/assets/theme.css

@@ -320,8 +320,8 @@ ul ul {
 	align-items: flex-end;
 }
 
-.wp-block-post-comments {
-	line-height: var(--wp--custom--body--typography--line-height);
+.wp-block-post-comments .reply {
+	margin-bottom: 30px;
 }
 
 .wp-block-post-comments .reply a {
@@ -348,10 +348,6 @@ ul ul {
 }
 
 .wp-block-post-comments form {
-	display: grid;
-	-moz-column-gap: 1em;
-	     column-gap: 1em;
-	grid-template-rows: auto;
 	grid-template-areas: "notes notes" "author author" "email url" "comment comment" "cookies-consent cookies-consent" "form-submit form-submit";
 }
 
@@ -363,87 +359,6 @@ ul ul {
 	width: 100%;
 }
 
-.wp-block-post-comments form p {
-	margin-top: 0;
-}
-
-.wp-block-post-comments form .comment-notes {
-	grid-area: notes;
-}
-
-.wp-block-post-comments form .comment-form-author {
-	grid-area: author;
-}
-
-.wp-block-post-comments form .comment-form-email {
-	grid-area: email;
-}
-
-.wp-block-post-comments form .comment-form-url {
-	grid-area: url;
-}
-
-.wp-block-post-comments form .comment-form-comment {
-	grid-area: comment;
-}
-
-.wp-block-post-comments form .comment-form-cookies-consent {
-	grid-area: cookies-consent;
-}
-
-.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
-	        clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
-.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + label {
-	margin-left: 0;
-	padding-left: 2em;
-	position: relative;
-}
-
-.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before,
-.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::after {
-	box-sizing: border-box;
-}
-
-.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before {
-	content: "";
-	position: absolute;
-	top: 0.2em;
-	left: 0;
-	width: 16px;
-	height: 16px;
-	border: 1px solid var(--wp--custom--color--foreground);
-}
-
-.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:checked + ::after {
-	content: "\2715";
-	width: 12px;
-	height: 12px;
-	position: absolute;
-	top: 4px;
-	left: 3px;
-	font-size: 14px;
-}
-
-.wp-block-post-comments form .form-submit {
-	grid-area: form-submit;
-}
-
-.wp-block-post-comments .reply {
-	margin-bottom: 30px;
-}
-
 .wp-block-post-comments .commentmetadata {
 	margin-bottom: 20px;
 }

quadrat/child-theme.json

@@ -148,7 +148,9 @@
 			],
 			"form": {
 				"border": {
-					"color": "var(--wp--custom--color--foreground)"
+					"color": "var(--wp--custom--color--foreground)",
+					"style": "solid",
+					"width": "2px"
 				},
 				"padding": "20px"
 			},

quadrat/sass/blocks/_post-comments.scss

@@ -1,37 +1,35 @@
 @import "../../../blockbase/sass/blocks/button-mixins";
 
 .wp-block-post-comments {
+	.reply {
+		margin-bottom: 30px;
 
-	line-height: var(--wp--custom--body--typography--line-height);
-
-	.reply a {
-		--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
-		@include button-border-styles;
-		--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--color--text);
+		a {
+			--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+			@include button-border-styles;
+			--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--color--text);
 
-		& ,
-		&:hover,
-		&:focus,
-		&:active {
-			line-height: 1;
-		}
-		&:not(.has-background):not(.has-text-color) {
+			& ,
 			&:hover,
 			&:focus,
-			&.has-focus {
-				--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
-				--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
-				--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
+			&:active {
+				line-height: 1;
+			}
+			&:not(.has-background):not(.has-text-color) {
+				&:hover,
+				&:focus,
+				&.has-focus {
+					--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+					--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
+					--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
+				}
 			}
 		}
 	}
 
 	form {
-		display: grid;
-		column-gap: 1em;
-		grid-template-rows: auto;
 		grid-template-areas:
 			"notes notes"
 			"author author"
@@ -47,74 +45,6 @@
 			font-size: var(--wp--preset--font-size--normal);
 			width: 100%;
 		}
-
-		p {
-			margin-top: 0;
-		}
-
-		.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;
-
-			input[type="checkbox"] {
-				@include hide-accesibly;
-				& + label {
-					margin-left: 0;
-					padding-left: 2em;
-					position: relative;
-				}
-				& + ::before,
-				& + ::after {
-					box-sizing: border-box;
-				}
-				& + ::before {
-					content: "";
-					position: absolute;
-					top: 0.2em;
-					left: 0;
-					width: 16px;
-					height: 16px;
-					border: 1px solid var(--wp--custom--color--foreground);
-				}
-				&:checked + ::after {
-					content: "\2715";
-					width: 12px;
-					height: 12px;
-					position: absolute;
-					top: 4px;
-					left: 3px;
-					font-size: 14px;
-				}
-			}
-
-		}
-
-		.form-submit {
-			grid-area: form-submit;
-		}
-	}
-
-	.reply {
-		margin-bottom: 30px;
 	}
 
 	.commentmetadata {

quadrat/theme.json

@@ -204,6 +204,31 @@
 					"style": "solid",
 					"width": "2px"
 				},
+				"checkbox": {
+					"checked": {
+						"content": "\"\\2715\"",
+						"fontSize": "14px",
+						"position": {
+							"left": "3px",
+							"top": "4px"
+						},
+						"sizing": {
+							"height": "12px",
+							"width": "12px"
+						}
+					},
+					"unchecked": {
+						"content": "\"\"",
+						"position": {
+							"left": "0",
+							"top": "0.2em"
+						},
+						"sizing": {
+							"height": "16px",
+							"width": "16px"
+						}
+					}
+				},
 				"color": {
 					"background": "transparent",
 					"boxShadow": "none",

seedlet-blocks/assets/theme.css

@@ -215,10 +215,6 @@ is passed all of the block attributes on the block definition in the template. *
 	margin-bottom: var(--wp--custom--margin--baseline);
 }
 
-.wp-block-post-comments input[type=checkbox] + label {
-	margin-left: 0;
-}
-
 .wp-block-post-comments .commentlist .comment {
 	padding-left: 0;
 }
@@ -252,19 +248,12 @@ is passed all of the block attributes on the block definition in the template. *
 	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 {
+.wp-block-post-comments 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"] {
+.wp-block-post-comments form input[type="submit"] {
 	border-radius: var(--wp--custom--button--border--radius);
 	cursor: pointer;
 	font-size: var(--wp--preset--font-size--normal);
@@ -272,58 +261,29 @@ is passed all of the block attributes on the block definition in the template. *
 	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 {
+.wp-block-post-comments form input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments form input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments 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 {
+.wp-block-post-comments form .comment-form-cookies-consent > label,
+.wp-block-post-comments 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);
+.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
+.wp-block-post-comments form textarea {
 	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 {
+.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]):focus,
+.wp-block-post-comments 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/sass/blocks/_post-comments.scss

@@ -38,10 +38,6 @@
 		margin-bottom: var(--wp--custom--margin--baseline);
 	}
 
-	input[type=checkbox] + label {
-		margin-left: 0;
-	}
-
 	.commentlist {
 		.comment {
 			padding-left: 0;
@@ -79,18 +75,7 @@
 		}
 	}
 
-	.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";
-
+	form {
 		p {
 			margin-top: var(--wp--custom--margin--baseline);
 			margin-bottom: var(--wp--custom--margin--baseline);
@@ -119,7 +104,6 @@
 
 		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%;
 
@@ -131,32 +115,4 @@
 			}
 		}
 	}
-
-	.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;
-	}
 }

seedlet-blocks/theme.json

@@ -199,6 +199,31 @@
 					"style": "solid",
 					"width": "2px"
 				},
+				"checkbox": {
+					"checked": {
+						"content": "\"\\2715\"",
+						"fontSize": "14px",
+						"position": {
+							"left": "3px",
+							"top": "4px"
+						},
+						"sizing": {
+							"height": "12px",
+							"width": "12px"
+						}
+					},
+					"unchecked": {
+						"content": "\"\"",
+						"position": {
+							"left": "0",
+							"top": "0.2em"
+						},
+						"sizing": {
+							"height": "16px",
+							"width": "16px"
+						}
+					}
+				},
 				"color": {
 					"background": "transparent",
 					"boxShadow": "none",

skatepark/assets/theme.css

@@ -112,6 +112,100 @@
 	background-color: var(--wp--custom--button--color--text);
 }
 
+.wp-block-post-comments .reply a {
+	--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+	border-style: var(--wp--custom--button--border--style);
+	border-width: var(--wp--custom--button--border--width);
+	padding-top: var(--wp--custom--button--spacing--padding--top);
+	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);
+}
+
+.wp-block-post-comments .reply a, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a:active {
+	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 {
+	--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
+}
+
+.wp-block-post-comments form {
+	-moz-column-gap: 1.2em;
+	     column-gap: 1.2em;
+	grid-template-areas: "notes notes" "comment comment" "author email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
+}
+
+.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
+.wp-block-post-comments form textarea {
+	font-size: var(--wp--preset--font-size--normal);
+	width: 100%;
+}
+
+.wp-block-post-comments form label:not([for=wp-comment-cookies-consent]) {
+	font-size: var(--wp--custom--form--label--typography--font-size);
+	font-weight: var(--wp--custom--form--label--typography--font-weight);
+	letter-spacing: var(--wp--custom--form--label--typography--letter-spacing);
+	margin-bottom: var(--wp--custom--form--label--spacing--margin--bottom);
+	text-transform: var(--wp--custom--form--label--typography--text-transform);
+}
+
+.wp-block-post-comments form p {
+	margin-top: 0;
+	margin-bottom: 30px;
+}
+
+.wp-block-post-comments form .comment-form-comment textarea {
+	vertical-align: top;
+}
+
+.wp-block-post-comments form .comment-form-cookies-consent {
+	margin-bottom: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-post-comments .comment-reply-title {
+	margin-bottom: 30px;
+}
+
+.wp-block-post-comments .comment-author {
+	margin-bottom: var(--wp--custom--margin--baseline);
+}
+
+.wp-block-post-comments .comment-author cite {
+	font-weight: bold;
+}
+
+.wp-block-post-comments .comment-author .says {
+	display: none;
+}
+
+.wp-block-post-comments .commentmetadata {
+	margin-bottom: 36px;
+}
+
+.wp-block-post-comments .commentmetadata a {
+	font-weight: 500;
+}
+
+.wp-block-post-comments .commentlist {
+	margin-bottom: calc( 4 * var(--wp--custom--margin--baseline));
+}
+
+.wp-block-post-comments .comment-body > p > a,
+.wp-block-post-comments .comment-edit-link {
+	text-decoration: underline;
+}
+
+.wp-block-post-comments .comment-body > p > a:hover,
+.wp-block-post-comments .comment-edit-link:hover {
+	text-decoration: none;
+}
+
 .wp-block-search .wp-block-search__button:active, .wp-block-search .wp-block-search__button:focus {
 	outline-offset: -0.25em;
 }
@@ -226,12 +320,14 @@ a {
 	color: var(--wp--custom--color--background);
 }
 
+.wp-block-post-comments .comment-meta > a,
 .wp-block-post-comments .comment-body > p > a,
 .wp-block-post-comments .comment-edit-link {
 	-webkit-text-decoration-line: underline;
 	        text-decoration-line: underline;
 }
 
+.wp-block-post-comments .comment-meta > a:hover,
 .wp-block-post-comments .comment-body > p > a:hover,
 .wp-block-post-comments .comment-edit-link:hover {
 	-webkit-text-decoration-line: none;

skatepark/child-theme.json

@@ -132,15 +132,55 @@
 					}
 				}
 			],
+			"fontsToLoadFromGoogle": [
+				"family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
+			],
 			"form": {
-				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 				"border": {
 					"color": "var(--wp--custom--color--primary)",
+					"radius": "0",
+					"style": "solid",
 					"width": "3px"
 				},
+				"checkbox": {
+					"checked": {
+						"fontSize": "var(--wp--preset--font-size--normal)",
+						"position": {
+							"left": "7px",
+							"top": "3px"
+						},
+						"sizing": {
+							"height": "25px",
+							"width": "25px"
+						}
+					},
+					"unchecked": {
+						"position": {
+							"top": "-0.4em"
+						},
+						"sizing": {
+							"height": "30px",
+							"width": "30px"
+						}
+					}
+				},
 				"color": {
 					"background": "transparent"
 				},
+				"label": {
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
+					},
+					"typography": {
+						"fontSize": "var(--wp--preset--font-size--tiny)",
+						"fontWeight": "900",
+						"letterSpacing": ".1em",
+						"textTransform": "uppercase"
+					}
+				},
+				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}

skatepark/sass/blocks/_post-comments.scss

@@ -0,0 +1,107 @@
+@import "../../../blockbase/sass/blocks/button-mixins";
+
+.wp-block-post-comments {
+	.reply {
+		a {
+			--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+			@include button-border-styles;
+			--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+			--wp--custom--button--color--background: var(--wp--custom--button--color--background);
+			--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);
+
+			& ,
+			&:hover,
+			&:focus,
+			&:active {
+				line-height: 1;
+			}
+			&:not(.has-background):not(.has-text-color) {
+				&:hover,
+				&:focus,
+				&.has-focus {
+					--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+					--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
+					--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
+				}
+			}
+		}
+	}
+
+	form {
+		column-gap: 1.2em;
+		grid-template-areas:
+			"notes notes"
+			"comment comment"
+			"author email"
+			"url url"
+			"cookies-consent cookies-consent"
+			"form-submit form-submit";
+
+		input:not([type=submit]):not([type=checkbox]),
+		textarea {
+			font-size: var(--wp--preset--font-size--normal);
+			width: 100%;
+		}
+
+		label:not([for=wp-comment-cookies-consent]) {
+			font-size: var(--wp--custom--form--label--typography--font-size);
+			font-weight: var(--wp--custom--form--label--typography--font-weight);
+			letter-spacing: var(--wp--custom--form--label--typography--letter-spacing);
+			margin-bottom: var(--wp--custom--form--label--spacing--margin--bottom);
+			text-transform: var(--wp--custom--form--label--typography--text-transform);
+		}
+
+		p {
+			margin-top: 0;
+			margin-bottom: 30px;
+		}
+
+		.comment-form-comment {
+			textarea {
+				vertical-align: top;
+			}
+		}
+
+		.comment-form-cookies-consent {
+			margin-bottom: var(--wp--custom--margin--vertical);
+		}
+	}
+
+	.comment-reply-title {
+		margin-bottom: 30px;
+	}
+
+	.comment-author {
+		margin-bottom: var(--wp--custom--margin--baseline);
+
+		cite {
+			font-weight: bold;
+		}
+
+		.says {
+			display: none;
+		}
+	}
+
+	.commentmetadata {
+		margin-bottom: 36px;
+
+		a {
+			font-weight: 500;
+		}
+	}
+
+	.commentlist {
+		margin-bottom: calc( 4 * var(--wp--custom--margin--baseline) );
+	}
+
+	// Target certain links within post comments to use the underline treatment.
+	.comment-body > p > a,
+	.comment-edit-link {
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+}

skatepark/sass/elements/_links.scss

@@ -12,6 +12,7 @@ a {
 	}
 }
 
+.wp-block-post-comments .comment-meta > a,
 .wp-block-post-comments .comment-body > p > a,
 .wp-block-post-comments .comment-edit-link {
 	text-decoration-line: underline;

skatepark/sass/theme.scss

@@ -2,6 +2,7 @@
 @import "../../blockbase/sass/base/mixins";
 @import "base/text";
 @import "blocks/buttons";
+@import "blocks/post-comments";
 @import "blocks/search";
 @import "block-patterns/pre-footer";
 @import "block-styles/image-caption";

skatepark/theme.json

@@ -200,6 +200,31 @@
 					"style": "solid",
 					"width": "3px"
 				},
+				"checkbox": {
+					"checked": {
+						"content": "\"\\2715\"",
+						"fontSize": "var(--wp--preset--font-size--normal)",
+						"position": {
+							"left": "7px",
+							"top": "3px"
+						},
+						"sizing": {
+							"height": "25px",
+							"width": "25px"
+						}
+					},
+					"unchecked": {
+						"content": "\"\"",
+						"position": {
+							"left": "0",
+							"top": "-0.4em"
+						},
+						"sizing": {
+							"height": "30px",
+							"width": "30px"
+						}
+					}
+				},
 				"color": {
 					"background": "transparent",
 					"boxShadow": "none",
@@ -207,7 +232,15 @@
 				},
 				"label": {
 					"typography": {
-						"fontSize": "var(--wp--preset--font-size--tiny)"
+						"fontSize": "var(--wp--preset--font-size--tiny)",
+						"fontWeight": "900",
+						"letterSpacing": ".1em",
+						"textTransform": "uppercase"
+					},
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
 					}
 				},
 				"typography": {