Blockbase: Move form grid styles to Blockbase

blockbase/assets/ponyfill.css

@@ -462,14 +462,50 @@ p.has-background {
 	display: inline-block;
 }
 
-.wp-block-post-comments form input[type="text"] {
-	width: 100%;
+.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 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 form .comment-form-cookies-consent input[type="checkbox"] {

blockbase/sass/blocks/_post-comments.scss

@@ -2,7 +2,6 @@
 @import '../base/mixins';
 
 .wp-block-post-comments {
-
 	label, .comment-meta {
 		font-size: var(--wp--custom--form--label--typography--font-size);
 	}
@@ -22,14 +21,55 @@
 	}
 
 	form {
-		input[type="text"] {
-			width: 100%;
-		}
+		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 {

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,42 +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 .form-submit {
-	grid-area: form-submit;
-}
-
-.wp-block-post-comments .reply {
-	margin-bottom: 30px;
-}
-
 .wp-block-post-comments .commentmetadata {
 	margin-bottom: 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,42 +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;
-		}
-
-		.form-submit {
-			grid-area: form-submit;
-		}
-	}
-
-	.reply {
-		margin-bottom: 30px;
 	}
 
 	.commentmetadata {

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,57 +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 {
+.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);
@@ -130,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;
-	}
 }

skatepark/assets/theme.css

@@ -135,15 +135,9 @@
 	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
 }
 
-.wp-block-post-comments .comment-reply-title {
-	margin-bottom: 30px;
-}
-
 .wp-block-post-comments form {
-	display: grid;
 	-moz-column-gap: 1.2em;
 	     column-gap: 1.2em;
-	grid-template-rows: auto;
 	grid-template-areas: "notes notes" "comment comment" "author email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
 }
 
@@ -166,37 +160,16 @@
 	margin-bottom: 30px;
 }
 
-.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-comment textarea {
 	vertical-align: top;
 }
 
 .wp-block-post-comments form .comment-form-cookies-consent {
-	grid-area: cookies-consent;
 	margin-bottom: var(--wp--custom--margin--vertical);
 }
 
-.wp-block-post-comments form .form-submit {
-	grid-area: form-submit;
+.wp-block-post-comments .comment-reply-title {
+	margin-bottom: 30px;
 }
 
 .wp-block-post-comments .comment-author {

skatepark/sass/blocks/_post-comments.scss

@@ -27,14 +27,8 @@
 		}
 	}
 
-	.comment-reply-title {
-		margin-bottom: 30px;
-	}
-
 	form {
-		display: grid;
 		column-gap: 1.2em;
-		grid-template-rows: auto;
 		grid-template-areas:
 			"notes notes"
 			"comment comment"
@@ -62,38 +56,19 @@
 			margin-bottom: 30px;
 		}
 
-		.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;
-
 			textarea {
 				vertical-align: top;
 			}
 		}
 
 		.comment-form-cookies-consent {
-			grid-area: cookies-consent;
 			margin-bottom: var(--wp--custom--margin--vertical);
 		}
+	}
 
-		.form-submit {
-			grid-area: form-submit;
-		}
+	.comment-reply-title {
+		margin-bottom: 30px;
 	}
 
 	.comment-author {