Merge pull request #4535 from Automattic/blockbase-comments-refactor

Blockbase comments block refactor

blockbase/assets/ponyfill.css

@@ -412,75 +412,50 @@ p.has-background {
 	font-size: var(--wp--custom--form--label--typography--font-size);
 }
 
-.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));
-	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
-	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
-	font-weight: var(--wp--custom--button--typography--font-weight);
-	font-family: inherit;
-	font-size: var(--wp--custom--button--typography--font-size);
-	line-height: var(--wp--custom--button--typography--line-height);
-	text-decoration: none;
-	opacity: 1;
-	color: var(--wp--custom--button--color--text);
-	background-color: var(--wp--custom--button--color--background);
-	border-color: currentColor;
-	border-radius: var(--wp--custom--button--border--radius);
-}
-
-.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--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);
-	opacity: 1;
-	color: var(--wp--custom--button--color--text);
-	background-color: var(--wp--custom--button--color--background);
-	border-color: currentColor;
-	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 {
-	fill: var(--wp--custom--button--color--text);
-}
-
 .wp-block-post-comments .reply {
-	margin-block: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--margin--vertical);
+	margin-bottom: 0;
 }
 
 .wp-block-post-comments .reply a {
 	display: inline-block;
+	text-decoration: underline;
+}
+
+.wp-block-post-comments .reply a:hover {
+	text-decoration: none;
 }
 
 .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";
+	grid-template-areas: "notes notes" "author author" "email url" "comment comment" "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);
 	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 form textarea {
+	vertical-align: top;
+}
+
+.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: var(--wp--custom--margin--vertical);
 }
 
 .wp-block-post-comments form .comment-notes {
@@ -526,6 +501,8 @@ p.has-background {
 }
 
 .wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + label {
+	display: inline-block;
+	line-height: calc( var(--wp--custom--form--checkbox--unchecked--sizing--height) + 2 * var(--wp--custom--form--border--width));
 	margin-left: 0;
 	padding-left: 3em;
 	position: relative;
@@ -561,13 +538,24 @@ p.has-background {
 	font-size: 14px;
 }
 
+.wp-block-post-comments .commentlist {
+	margin-bottom: calc(2 * var(--wp--style--block-gap));
+}
+
 .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);
+	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-post-comments .comment-body {
+	margin-bottom: calc(1.5 * var( --wp--style--block-gap ));
 }
 
 .wp-block-post-comments .commentmetadata {
 	margin-left: 0;
+	margin-bottom: calc(0.75 * var( --wp--style--block-gap ));
 }
 
 .wp-block-post-comments .comment-awaiting-moderation {

blockbase/sass/blocks/_buttons-outline-style.scss

@@ -18,12 +18,6 @@
    	}
 }
 
-.wp-block-post-comments {
-   	input[type="submit"], .reply a {
-	   @include button-outline-hover-styles;
-   	}
-}
-
 //NOTE: Double-classed to raise specificity above parent theme's outline hover styles
 //as an alternative to !important.  Only needed for the editor.
 .wp-block-button.wp-block-button.is-style-outline {

blockbase/sass/blocks/_post-comments.scss

@@ -1,21 +1,18 @@
-@import 'button-mixins';
-
 .wp-block-post-comments {
 	label, .comment-meta {
 		font-size: var(--wp--custom--form--label--typography--font-size);
 	}
 
-	input[type="submit"], 
-	.reply a {
-		@include button-main-styles;
-		@include button-hover-styles;
-	}
-
 	.reply {
-		margin-block: var(--wp--custom--margin--vertical);
+		margin-top: var(--wp--custom--margin--vertical);
+		margin-bottom: 0;
 
 		a {
 			display: inline-block;
+			text-decoration: underline;
+			&:hover {
+				text-decoration: none;
+			}
 		}
 	}
 
@@ -25,22 +22,35 @@
 		grid-template-rows: auto;
 		grid-template-areas:
 			"notes notes"
-			"comment comment"
 			"author author"
-			"email email"
-			"url url"
+			"email url"
+			"comment comment"
 			"cookies-consent cookies-consent"
 			"form-submit form-submit";
 
 		input:not([type=submit]):not([type=checkbox]),
 		textarea {
+			font-size: var(--wp--preset--font-size--normal);
 			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%;
 		}
 
+		textarea {
+			vertical-align: top;
+		}
+
+		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: var(--wp--custom--margin--vertical);
 		}
 
 		.comment-notes {
@@ -76,6 +86,8 @@
 				@include hide-accesibly;
 				margin-left: 0;
 				& + label {
+					display: inline-block;
+					line-height: calc( var(--wp--custom--form--checkbox--unchecked--sizing--height) + 2 * var(--wp--custom--form--border--width));
 					margin-left: 0;
 					padding-left: 3em;
 					position: relative;
@@ -114,16 +126,24 @@
 	}
 
 	.commentlist {
+		margin-bottom: calc(2 * var(--wp--style--block-gap));
 		.comment {
 			p {
 				font-size: var(--wp--custom--post-comment--typography--font-size);
 				line-height: var(--wp--custom--post-comment--typography--line-height);
+				margin-bottom: var(--wp--custom--margin--vertical);
+				margin-top: var(--wp--custom--margin--vertical);	
 			}
 		}
 	}
 
+	.comment-body {
+		margin-bottom: calc(1.5 * var( --wp--style--block-gap ));
+	}
+
 	.commentmetadata {
 		margin-left: 0;
+		margin-bottom: calc(0.75 * var( --wp--style--block-gap ));
 	}
 
 	.comment-awaiting-moderation {

blockbase/theme.json

@@ -164,7 +164,7 @@
 						"fontSize": "14px",
 						"position": {
 							"left": "3px",
-							"top": "4px"
+							"top": "3px"
 						},
 						"sizing": {
 							"height": "12px",
@@ -189,8 +189,16 @@
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"label": {
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
+					},
 					"typography": {
-						"fontSize": "var(--wp--preset--font-size--tiny)"
+						"fontSize": "var(--wp--preset--font-size--tiny)",
+						"fontWeight": "normal",
+						"letterSpacing": "normal",
+						"textTransform": "none"
 					}
 				},
 				"typography": {

geologist/assets/theme.css

@@ -72,16 +72,6 @@
 	padding-right: var(--wp--custom--button--spacing--padding--right);
 }
 
-.wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
-	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
-	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-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -184,51 +174,12 @@ ul ul {
 	align-items: flex-end;
 }
 
-.wp-block-post-comments .reply {
-	margin-bottom: 30px;
-}
-
-.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--hover--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 {
-	grid-template-areas: "notes notes" "author author" "email url" "comment comment" "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 .commentmetadata {
-	margin-bottom: 20px;
-}
-
-.wp-block-post-comments .commentlist {
-	margin-bottom: 60px;
-}
-
 .wp-block-post-comments .comment-body > p > a,
 .wp-block-post-comments .comment-edit-link {
 	text-decoration: underline;

geologist/sass/blocks/_post-comments.scss

@@ -1,43 +1,6 @@
-@import "../../../blockbase/sass/blocks/button-mixins";
-
 .wp-block-post-comments {
-	.reply {
-		margin-bottom: 30px;
-
-		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);
-				}
-			}
-		}
-	}
 
 	form {
-		grid-template-areas:
-			"notes notes"
-			"author author"
-			"email url"
-			"comment comment"
-			"cookies-consent cookies-consent"
-			"form-submit form-submit";
-
 		input:not([type=submit]):not([type=checkbox]),
 		textarea {
 			font-size: var(--wp--preset--font-size--normal);
@@ -45,14 +8,6 @@
 		}
 	}
 
-	.commentmetadata {
-		margin-bottom: 20px;
-	}
-
-	.commentlist {
-		margin-bottom: 60px;
-	}
-
 	// Target certain links within post comments to use the underline treatment.
 	.comment-body > p > a,
 	.comment-edit-link {

geologist/theme.json

@@ -215,7 +215,7 @@
 						"fontSize": "14px",
 						"position": {
 							"left": "3px",
-							"top": "4px"
+							"top": "3px"
 						},
 						"sizing": {
 							"height": "12px",
@@ -240,8 +240,16 @@
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"label": {
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
+					},
 					"typography": {
-						"fontSize": "var(--wp--preset--font-size--tiny)"
+						"fontSize": "var(--wp--preset--font-size--tiny)",
+						"fontWeight": "normal",
+						"letterSpacing": "normal",
+						"textTransform": "none"
 					}
 				},
 				"typography": {

mayland-blocks/theme.json

@@ -172,7 +172,7 @@
 						"fontSize": "14px",
 						"position": {
 							"left": "3px",
-							"top": "4px"
+							"top": "3px"
 						},
 						"sizing": {
 							"height": "12px",
@@ -197,8 +197,16 @@
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"label": {
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
+					},
 					"typography": {
-						"fontSize": "var(--wp--preset--font-size--tiny)"
+						"fontSize": "var(--wp--preset--font-size--tiny)",
+						"fontWeight": "normal",
+						"letterSpacing": "normal",
+						"textTransform": "none"
 					}
 				},
 				"typography": {

quadrat/assets/theme.css

@@ -208,16 +208,6 @@
 	padding-right: var(--wp--custom--button--spacing--padding--right);
 }
 
-.wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
-	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
-	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-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -320,51 +310,10 @@ ul ul {
 	align-items: flex-end;
 }
 
-.wp-block-post-comments .reply {
-	margin-bottom: 30px;
-}
-
-.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--hover--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 {
-	grid-template-areas: "notes notes" "author author" "email url" "comment comment" "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 {
 	border: none;
 	background: var(--wp--custom--color--secondary);
-	font-size: var(--wp--preset--font-size--normal);
-	width: 100%;
-}
-
-.wp-block-post-comments .commentmetadata {
-	margin-bottom: 20px;
-}
-
-.wp-block-post-comments .commentlist {
-	margin-bottom: 60px;
 }
 
 .wp-block-post-comments .comment-body > p > a,

quadrat/sass/blocks/_post-comments.scss

@@ -1,60 +1,13 @@
-@import "../../../blockbase/sass/blocks/button-mixins";
-
 .wp-block-post-comments {
-	.reply {
-		margin-bottom: 30px;
-
-		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);
-				}
-			}
-		}
-	}
 
 	form {
-		grid-template-areas:
-			"notes notes"
-			"author author"
-			"email url"
-			"comment comment"
-			"cookies-consent cookies-consent"
-			"form-submit form-submit";
-
 		input:not([type=submit]):not([type=checkbox]),
 		textarea {
 			border: none;
 			background: var(--wp--custom--color--secondary);
-			font-size: var(--wp--preset--font-size--normal);
-			width: 100%;
 		}
 	}
 
-	.commentmetadata {
-		margin-bottom: 20px;
-	}
-
-	.commentlist {
-		margin-bottom: 60px;
-	}
-
 	// Target certain links within post comments to use the underline treatment.
 	.comment-body > p > a,
 	.comment-edit-link {

quadrat/theme.json

@@ -210,7 +210,7 @@
 						"fontSize": "14px",
 						"position": {
 							"left": "3px",
-							"top": "4px"
+							"top": "3px"
 						},
 						"sizing": {
 							"height": "12px",
@@ -235,8 +235,16 @@
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"label": {
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
+					},
 					"typography": {
-						"fontSize": "var(--wp--preset--font-size--tiny)"
+						"fontSize": "var(--wp--preset--font-size--tiny)",
+						"fontWeight": "normal",
+						"letterSpacing": "normal",
+						"textTransform": "none"
 					}
 				},
 				"typography": {

seedlet-blocks/assets/theme.css

@@ -176,28 +176,14 @@ is passed all of the block attributes on the block definition in the template. *
 	justify-content: center;
 }
 
-.wp-block-post-comments .reply a {
-	border-radius: var(--wp--custom--button--border--radius);
-	font-size: var(--wp--preset--font-size--small);
-	line-height: 1.5;
-	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 {
-	padding: 23px 25px;
-}
-
 .wp-block-post-comments #comments,
 .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,
 .wp-block-post-comments .comment-author {
 	font-size: var(--wp--preset--font-size--tiny);
-	margin-left: 0;
 }
 
 .wp-block-post-comments .comment-meta a,
@@ -205,53 +191,37 @@ is passed all of the block attributes on the block definition in the template. *
 	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 .commentlist .comment {
-	padding-left: 0;
-}
-
-.wp-block-post-comments .commentlist .comment p {
-	font-size: var(--wp--preset--font-size--normal);
-	margin-bottom: var(--wp--custom--margin--vertical);
-	margin-top: var(--wp--custom--margin--vertical);
+.wp-block-post-comments form label:not([for=wp-comment-cookies-consent]) {
+	--wp--custom--form--label--typography--font-size: var(--wp--preset--font-size--small);
+	--wp--custom--form--label--spacing--margin--bottom: 0;
 }
 
 .wp-block-post-comments .commentlist > li {
-	margin-top: var(--wp--custom--margin--vertical);
-	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-bottom: calc(1.5 * var( --wp--style--block-gap ));
 }
 
 .wp-block-post-comments .commentlist > li:not(first-child) {
 	border-bottom: 1px solid var(--wp--custom--form--border--color);
 }
 
+.wp-block-post-comments .commentlist .children > li {
+	padding-top: var(--wp--custom--margin--vertical);
+	border-top: 1px solid var(--wp--custom--form--border--color);
+}
+
 .wp-block-post-comments .comment .comment-author .avatar {
-	border-radius: 1.5em;
 	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;
 }
 
-.wp-block-post-comments .comment .comment-author .fn {
-	font-size: var(--global--font-size-xs);
-}
-
 .wp-block-post-comments form p {
+	--wp--custom--margin--vertical: var(--wp--custom--margin--baseline);
 	margin-top: var(--wp--custom--margin--baseline);
-	margin-bottom: var(--wp--custom--margin--baseline);
 }
 
 .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);
 	line-height: 1.5;
 	padding: 23px 25px;
 }
@@ -267,8 +237,7 @@ is passed all of the block attributes on the block definition in the template. *
 
 .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--preset--font-size--normal: var(--wp--preset--font-size--small);
 }
 
 .wp-block-post-comments form input:not([type=submit]):not([type=checkbox]):focus,

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

@@ -1,90 +1,60 @@
 .wp-block-post-comments {
-	.reply {
-		a {
-			border-radius: var(--wp--custom--button--border--radius);
-			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 {
-					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);
-		margin-left: 0;
 
 		a {
 			text-decoration: none;
 		}
 	}
 
-	label {
-		font-size: var(--wp--preset--font-size--small);
-		margin-bottom: var(--wp--custom--margin--baseline);
+	form {
+		label:not([for=wp-comment-cookies-consent]) {
+			--wp--custom--form--label--typography--font-size: var(--wp--preset--font-size--small);
+			--wp--custom--form--label--spacing--margin--bottom: 0;
+		}
 	}
 
 	.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);
-
+			margin-bottom: calc(1.5 * var( --wp--style--block-gap ));
 			&:not(first-child) {
 				border-bottom: 1px solid var(--wp--custom--form--border--color);
 			}
 		}
+
+		.children {
+			> li {
+				padding-top: var(--wp--custom--margin--vertical);
+				border-top: 1px solid var(--wp--custom--form--border--color);
+			}
+
+		}
 	}
 
 	.comment .comment-author {
 		.avatar {
-			border-radius: 1.5em;
 			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);
-		}
 	}
 
 	form {
 		p {
+			--wp--custom--margin--vertical: var(--wp--custom--margin--baseline);
 			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;
 
@@ -104,8 +74,7 @@
 
 		input:not([type=submit]):not([type=checkbox]),
 		textarea {
-			font-size: var(--wp--preset--font-size--small);
-			width: 100%;
+			--wp--preset--font-size--normal: var(--wp--preset--font-size--small);
 
 			&:focus {
 				color: var(--wp--custom--form--color--text);

seedlet-blocks/theme.json

@@ -205,7 +205,7 @@
 						"fontSize": "14px",
 						"position": {
 							"left": "3px",
-							"top": "4px"
+							"top": "3px"
 						},
 						"sizing": {
 							"height": "12px",
@@ -230,8 +230,16 @@
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"label": {
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
+					},
 					"typography": {
-						"fontSize": "var(--wp--preset--font-size--tiny)"
+						"fontSize": "var(--wp--preset--font-size--tiny)",
+						"fontWeight": "normal",
+						"letterSpacing": "normal",
+						"textTransform": "none"
 					}
 				},
 				"typography": {

skatepark/assets/theme.css

@@ -105,16 +105,6 @@ p {
 	padding-right: var(--wp--custom--button--spacing--padding--right);
 }
 
-.wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
-	border-style: var(--wp--custom--button--border--style);
-	border-color: currentColor;
-	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-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -134,78 +124,23 @@ p {
 	letter-spacing: 0.1em;
 }
 
-.wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
-	text-transform: uppercase;
-	letter-spacing: 0.1em;
-}
-
 .wp-block-cover.alignfull {
 	padding-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--post-content--padding--left), var(--wp--custom--post-content--padding--left) ));
 	padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--post-content--padding--left), var(--wp--custom--post-content--padding--left) ));
 }
 
 .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);
+	text-decoration-thickness: 0.07em;
+	text-underline-offset: 0.46ex;
 }
 
 .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);
+	margin-bottom: calc( 2 * var(--wp--custom--margin--baseline));
 }
 
 .wp-block-post-comments .comment-author cite {
@@ -217,7 +152,7 @@ p {
 }
 
 .wp-block-post-comments .commentmetadata {
-	margin-bottom: 36px;
+	--wp--style--block-gap: 48px;
 }
 
 .wp-block-post-comments .commentmetadata a {
@@ -225,11 +160,13 @@ p {
 }
 
 .wp-block-post-comments .commentlist {
-	margin-bottom: calc( 8 * var(--wp--custom--margin--baseline));
+	--wp--style--block-gap: 60px;
 }
 
 .wp-block-post-comments .comment-body > p > a,
 .wp-block-post-comments .comment-edit-link {
+	text-decoration-thickness: 0.07em;
+	text-underline-offset: 0.46ex;
 	text-decoration: underline;
 }
 

skatepark/sass/blocks/_buttons.scss

@@ -10,10 +10,3 @@
 		letter-spacing: 0.1em;
 	}
 }
-
-.wp-block-post-comments {
-	input[type="submit"], .reply a {
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-	}
-}

skatepark/sass/blocks/_post-comments.scss

@@ -1,79 +1,20 @@
-@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);
-				}
-			}
+			@include text-decoration;
 		}
 	}
 
 	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;
+		margin-bottom: calc( 2 * var(--wp--custom--margin--baseline));
 	}
 
 	.comment-author {
-		margin-bottom: var(--wp--custom--margin--baseline);
-
 		cite {
 			font-weight: bold;
 		}
@@ -84,7 +25,7 @@
 	}
 
 	.commentmetadata {
-		margin-bottom: 36px;
+		--wp--style--block-gap: 48px;
 
 		a {
 			font-weight: 500;
@@ -92,12 +33,13 @@
 	}
 
 	.commentlist {
-		margin-bottom: calc( 8 * var(--wp--custom--margin--baseline) );
+		--wp--style--block-gap: 60px;
 	}
 
 	// Target certain links within post comments to use the underline treatment.
 	.comment-body > p > a,
 	.comment-edit-link {
+		@include text-decoration;
 		text-decoration: underline;
 
 		&:hover {

skatepark/theme.json

@@ -231,16 +231,16 @@
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"label": {
+					"spacing": {
+						"margin": {
+							"bottom": "var(--wp--custom--margin--baseline)"
+						}
+					},
 					"typography": {
 						"fontSize": "var(--wp--preset--font-size--tiny)",
 						"fontWeight": "900",
 						"letterSpacing": ".1em",
 						"textTransform": "uppercase"
-					},
-					"spacing": {
-						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
-						}
 					}
 				},
 				"typography": {