Quadrat: Add comment styles (#3800)

* Add comment formm styles for Quadrat

* Remove border on the search button

* Change the order of the commment fields

* Change the order of the commment fields

* Match form styles to the rest of the site

* Comments: Change how we do spacing

* unchecked checkbox style

* checked state

* hide the checkbox accesibly

* undo class change

* updated screen reader mixin, changed checked state of checkbox

* Adjust spacing on the checkbox.

* Move comments below pagination and add spacer.

* Fix responsive spacing.

Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>
Co-authored-by: Jeff Ong <jonger4@gmail.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -143,12 +143,13 @@ input[type="datetime"],
 input[type="datetime-local"],
 input[type="color"],
 textarea {
+	background: var(--wp--custom--form--color--background);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border--radius);
+	box-shadow: var(--wp--custom--form--color--box-shadow);
 	color: var(--wp--custom--form--color--text);
+	font-family: var(--wp--preset--font-family--base);
 	padding: var(--wp--custom--form--padding);
-	background: var(--wp--custom--form--color--background);
-	box-shadow: var(--wp--custom--form--color--box-shadow);
 }
 
 input[type="text"]:focus,
@@ -205,7 +206,10 @@ input[type=checkbox] + label {
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
 	color: var(--wp--custom--button--color--hover-text);
 	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@@ -376,7 +380,10 @@ p.has-drop-cap:not(:focus):first-letter {
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
 	color: var(--wp--custom--button--color--hover-text);
 	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@@ -416,13 +423,26 @@ p.has-drop-cap:not(:focus):first-letter {
 .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 {
 	color: var(--wp--custom--button--color--hover-text);
 	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
 .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--hover-text);
 }
 
+.wp-block-post-comments input[type="submit"] {
+	border-color: var(--wp--custom--button--border--color);
+	border-style: var(--wp--custom--button--border--style);
+	border-width: var(--wp--custom--button--border--width);
+}
+
+.wp-block-post-comments .reply a {
+	display: inline-block;
+}
+
 .wp-block-pullquote.is-style-solid-color,
 .wp-block-pullquote {
 	text-align: var(--wp--custom--pullquote--typography--text-align);
@@ -489,7 +509,10 @@ p.has-drop-cap:not(:focus):first-letter {
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
 	color: var(--wp--custom--button--color--hover-text);
 	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@@ -541,7 +564,10 @@ p.has-drop-cap:not(:focus):first-letter {
 .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
 	color: var(--wp--custom--button--color--hover-text);
 	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg,
@@ -582,7 +608,10 @@ p.has-drop-cap:not(:focus):first-letter {
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
 	color: var(--wp--custom--button--color--hover-text);
 	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@@ -615,7 +644,10 @@ p.has-drop-cap:not(:focus):first-letter {
 .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus {
 	color: var(--wp--custom--button--color--hover-text);
 	background-color: var(--wp--custom--button--color--hover-background);
-	border-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
 .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus svg {

blank-canvas-blocks/experimental-theme.json

@@ -58,9 +58,12 @@
 			"button": {
 				"border": {
 					"color": "var(--wp--custom--button--color--text)",
+					"hoverColor": "transparent",
 					"radius": "4px",
 					"style": "solid",
-					"width": "0"
+					"hoverStyle": "solid",
+					"width": "0",
+					"hoverWidth": "0"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--secondary)",

blank-canvas-blocks/sass/base/_mixins.scss

@@ -0,0 +1,14 @@
+// Hide an element accesibly instead of using display: none;
+// Source: https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/responsive-block-control/style.scss#L1
+@mixin hide-accesibly {
+	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;
+}

blank-canvas-blocks/sass/blocks/_button.scss

@@ -4,14 +4,14 @@
 
 // NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere.  This can be removed when those no longer exist.
 @mixin button-main-styles {
-	font-weight: var(--wp--custom--button--typography--font-weight);
+ 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
-	padding: calc(.667em + 2px) calc(1.333em + 2px); //The padding found on an unmodified Button Block 
+	padding: calc(.667em + 2px) calc(1.333em + 2px); //The padding found on an unmodified Button Block
 	svg {
 		fill: var(--wp--custom--button--color--text);
 	}
@@ -25,7 +25,10 @@
 		&.has-focus {
 			color: var(--wp--custom--button--color--hover-text);
 			background-color: var(--wp--custom--button--color--hover-background);
-			border-color: var(--wp--custom--button--color--hover-background);
+			border-color: var(--wp--custom--button--border--hover-color);
+			border-style: var(--wp--custom--button--border--hover-style);
+			border-width: var(--wp--custom--button--border--hover-width);
+			padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width)); //The padding found on an unmodified Button Block
 			svg {
 				fill: var(--wp--custom--button--color--hover-text);
 			}
@@ -51,4 +54,4 @@
 	.wp-block-button:last-child {
 		margin-bottom: 0;
 	}
-}
+}

blank-canvas-blocks/sass/blocks/_post-comments.scss

@@ -13,4 +13,14 @@
 		@include button-main-styles;
 		@include button-hover-styles;
 	}
-}
+
+	input[type="submit"] {
+		border-color: var(--wp--custom--button--border--color);
+		border-style: var(--wp--custom--button--border--style);
+		border-width: var(--wp--custom--button--border--width);
+	}
+
+	.reply a {
+		display: inline-block;
+	}
+}

blank-canvas-blocks/sass/elements/_forms.scss

@@ -14,12 +14,13 @@ input[type="datetime"],
 input[type="datetime-local"],
 input[type="color"],
 textarea {
+	background: var(--wp--custom--form--color--background);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border--radius);
+	box-shadow: var(--wp--custom--form--color--box-shadow);
 	color: var(--wp--custom--form--color--text);
+	font-family: var(--wp--preset--font-family--base);
 	padding: var(--wp--custom--form--padding);
-	background: var(--wp--custom--form--color--background);
-	box-shadow: var(--wp--custom--form--color--box-shadow);
 
 	&:focus {
 		color: var(--wp--custom--form--color--text);

quadrat/assets/theme.css

@@ -41,14 +41,6 @@
 	text-align: right;
 }
 
-.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
-.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
-.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
-.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
-	border: 2px solid var(--wp--custom--color--primary);
-	padding: 0.667em 1.333em;
-}
-
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -118,6 +110,104 @@ ul ul {
 	text-decoration: underline;
 }
 
+.wp-block-post-comments .reply a {
+	font-size: 1em;
+	line-height: 1.2;
+}
+
+.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";
+}
+
+.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: 1em;
+	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-navigation-link {
 	border-top: 1px solid;
 	display: flex;
@@ -154,6 +244,10 @@ ul ul {
 	text-align: unset;
 }
 
+.wp-block-search .wp-block-search__button {
+	border: none;
+}
+
 .wp-block-table th {
 	font-weight: 500;
 }
@@ -179,14 +273,17 @@ ul ul {
 	}
 }
 
+a {
+	-webkit-text-decoration-line: underline;
+	        text-decoration-line: underline;
+}
+
 a:hover {
 	background: var(--wp--custom--color--primary);
 	color: var(--wp--custom--color--background);
-	text-decoration: none;
 }
 
-a:active,
-a:focus {
+a:active, a:focus {
 	background: var(--wp--custom--color--secondary);
 }
 

quadrat/block-template-parts/single.html

@@ -43,6 +43,9 @@
 		<!-- /wp:column -->
 	</div>
 	<!-- /wp:columns -->
-
+	<!-- wp:spacer {"height":150} -->
+	<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+	<!-- wp:post-comments /-->
 </div>
 <!-- /wp:group -->

quadrat/child-experimental-theme.json

@@ -33,7 +33,10 @@
 		"custom": {
 			"button": {
 				"border": {
-					"radius": "0"
+					"color": "transparent",
+					"hoverColor": "var(--wp--custom--color--foreground)",
+					"radius": "0",
+					"hoverWidth": "2px"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--foreground)",
@@ -56,6 +59,12 @@
 			"fontsToLoadFromGoogle": [
 				"family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400"
 			],
+			"form": {
+				"border": {
+					"color": "var(--wp--custom--color--foreground)"
+				},
+				"padding": "20px"
+			},
 			"heading": {
 				"typography": {
 					"fontWeight": "500"

quadrat/experimental-theme.json

@@ -57,10 +57,13 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--button--color--text)",
+					"color": "transparent",
+					"hoverColor": "var(--wp--custom--color--foreground)",
 					"radius": "0",
 					"style": "solid",
-					"width": "0"
+					"hoverStyle": "solid",
+					"width": "0",
+					"hoverWidth": "2px"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--foreground)",
@@ -89,9 +92,9 @@
 				"selection": "var(--wp--preset--color--darker-blue)"
 			},
 			"form": {
-				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"padding": "20px",
 				"border": {
-					"color": "#EFEFEF",
+					"color": "var(--wp--custom--color--foreground)",
 					"radius": "0",
 					"style": "solid",
 					"width": "2px"

quadrat/sass/blocks/_buttons.scss

@@ -1,17 +1,3 @@
-.wp-block-button {
-	&.wp-block-button__link,
-	.wp-block-button__link {
-		&:not(.has-background):not(.has-text-color) {
-			&:hover,
-			&:focus,
-			&.has-focus {
-				border: 2px solid var(--wp--custom--color--primary);
-				padding: 0.667em 1.333em;
-			}
-		}
-	}
-}
-
 .wp-block-button.is-style-outline {
 	&.wp-block-button__link,
 	.wp-block-button__link {

quadrat/sass/blocks/_post-comments.scss

@@ -0,0 +1,91 @@
+.wp-block-post-comments {
+	.reply a {
+		font-size: 1em;
+		line-height: 1.2;
+	}
+
+	form {
+		display: grid;
+		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";
+
+		input:not([type=submit]):not([type=checkbox]),
+		textarea {
+			border: none;
+			background: var(--wp--custom--color--secondary);
+			font-size: 1em;
+			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;
+		}
+	}
+}

quadrat/sass/blocks/_search.scss

@@ -0,0 +1,3 @@
+.wp-block-search .wp-block-search__button {
+	border: none;
+}

quadrat/sass/elements/_links.scss

@@ -1,10 +1,13 @@
-a:hover {
-	background: var(--wp--custom--color--primary);
-	color: var(--wp--custom--color--background);
-	text-decoration: none;
-}
+a {
+	text-decoration-line: underline;
+
+	&:hover {
+		background: var(--wp--custom--color--primary);
+		color: var(--wp--custom--color--background);
+	}
 
-a:active,
-a:focus {
-	background: var(--wp--custom--color--secondary);
+	&:active,
+	&:focus {
+		background: var(--wp--custom--color--secondary);
+	}
 }

quadrat/sass/theme.scss

@@ -1,4 +1,5 @@
 @import "../../blank-canvas-blocks/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
+@import "../../blank-canvas-blocks/sass/base/mixins";
 @import "block-patterns/headlines";
 @import "block-patterns/join";
 @import "blocks/buttons";
@@ -6,8 +7,10 @@
 @import "blocks/list";
 @import "blocks/media-text";
 @import "blocks/navigation";
+@import "blocks/post-comments";
 @import "blocks/post-navigation-link";
 @import "blocks/quote";
+@import "blocks/search";
 @import "blocks/table";
 @import "block-patterns/headlines";
 @import "elements/links";