Blockbase: Add comment form checkbox styling

Including updates to Quadrat, Seedlet Blocks & Skatepark

blockbase/assets/ponyfill.css

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

blockbase/sass/blocks/_post-comments.scss

@@ -14,13 +14,13 @@
 
 	.reply {
 		margin-block: var(--wp--custom--margin--vertical);
-		
+
 		a {
 			display: inline-block;
 		}
 	}
 
-	.comment-form {
+	form {
 		input[type="text"] {
 			width: 100%;
 		}
@@ -29,6 +29,35 @@
 		textarea {
 			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 		}
+
+		.comment-form-cookies-consent {
+			input[type="checkbox"] {
+				margin-left: 0;
+				
+				& + ::before,
+				& + ::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 {
@@ -38,12 +67,6 @@
 		}
 	}
 
-	.comment-form-cookies-consent {
-		input[type="checkbox"]{
-			margin-left: 0;
-		}
-	}
-
 	.commentlist {
 		.comment {
 			p {

quadrat/assets/theme.css

@@ -411,31 +411,6 @@ ul ul {
 	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;
 }

quadrat/child-theme.json

@@ -151,7 +151,34 @@
 			],
 			"form": {
 				"border": {
-					"color": "var(--wp--custom--color--foreground)"
+					"color": "var(--wp--custom--color--foreground)",
+					"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"
+						}
+					}
 				},
 				"padding": "20px"
 			},

quadrat/sass/blocks/_post-comments.scss

@@ -82,28 +82,6 @@
 					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;
-				}
 			}
 
 		}

quadrat/theme.json

@@ -217,6 +217,31 @@
 				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--normal)"
+				},
+				"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"
+						}
+					}
 				}
 			},
 			"gallery": {

seedlet-blocks/assets/theme.css

@@ -283,7 +283,6 @@ is passed all of the block attributes on the block definition in the template. *
 
 .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);
 	font-size: var(--wp--preset--font-size--small);
 	width: 100%;
 }

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

@@ -119,7 +119,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%;
 

skatepark/assets/theme.css

@@ -213,31 +213,6 @@
 	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.4em;
-	left: 0;
-	width: 30px;
-	height: 30px;
-	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: "\2715";
-	width: 25px;
-	height: 25px;
-	position: absolute;
-	top: 3px;
-	left: 7px;
-	font-size: var(--wp--preset--font-size--normal);
-}
-
 .wp-block-post-comments form .form-submit {
 	grid-area: form-submit;
 }

skatepark/child-theme.json

@@ -111,6 +111,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"
+						}
+					}
+				},
 				"label": {
 					"spacing": {
 						"margin": {

skatepark/sass/blocks/_post-comments.scss

@@ -98,30 +98,7 @@
 					padding-left: 3em;
 					position: relative;
 				}
-				& + ::before,
-				& + ::after {
-					box-sizing: border-box;
-				}
-				& + ::before {
-					content: "";
-					position: absolute;
-					top: -0.4em;
-					left: 0;
-					width: 30px;
-					height: 30px;
-					border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
-				}
-				&:checked + ::after {
-					content: "\2715";
-					width: 25px;
-					height: 25px;
-					position: absolute;
-					top: 3px;
-					left: 7px;
-					font-size: var(--wp--preset--font-size--normal);
-				}
 			}
-
 		}
 
 		.form-submit {

skatepark/theme.json

@@ -171,6 +171,31 @@
 				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--normal)"
+				},
+				"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"
+						}
+					}
 				}
 			},
 			"gallery": {