Fix course theme comment styles (#7252)

* Update comment pattern to match design

* Update comment styles and add pseudo checkbox style

* Update single page and lesson template to use comment pattern

* Update theme.json to match comment reply design

* Update single column templates to use comment pattern

* Update templates to use common comment pattern

* Move top border to comment pattern

* Add preset for top and bottom margin of comment title

* Add spacings for pagination and remove spacer

* Remove extra class from pagination and move preset style to css

* Use margin instead of padding

* Update course/style.css

Co-authored-by: Donna Peplinskie <donnapep@gmail.com>

* Change 0 rem to 0

* Add spacing after comment reply form in middle

* Resize cancel reply link text

* Change color of input text in comment reply form fields

* Update font size of comment input texts

---------

Co-authored-by: Donna Peplinskie <donnapep@gmail.com>

course/patterns/comments.php

@@ -8,42 +8,41 @@
 ?>
 
 <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-<div class="wp-block-comments wp-block-comments-query-loop">
-<!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
+<div class="wp-block-comments wp-block-comments-query-loop"><!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-css-opacity is-style-wide"/>
+	<!-- /wp:separator -->
 
-<!-- wp:comment-template -->
-<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-<div class="wp-block-group"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
+	<!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1"},"spacing":{"padding":{"top":"0","right":"0","bottom":"0px","left":"0"},"margin":{"top":"0","right":"0","left":"0"}}},"fontSize":"large"} /-->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:comment-author-name /-->
+	<!-- wp:comment-template {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","left":"0","bottom":"0"},"blockGap":"0","margin":{"bottom":"5rem"}}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"wrap"}} -->
+	<div class="wp-block-group" style="margin-bottom:5rem;padding-top:0;padding-right:0;padding-bottom:0rem;padding-left:0"><!-- wp:group {"style":{"spacing":{"blockGap":"20px","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
+		<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:avatar {"size":48,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
 
-<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+			<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:comment-author-name {"isLink":false} /-->
 
-<!-- wp:comment-edit-link /--></div>
-<!-- /wp:group -->
+				<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
+				<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a","isLink":false} /-->
 
-<!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
+					<!-- wp:comment-edit-link /--></div>
+				<!-- /wp:group -->
 
-<!-- wp:comment-reply-link /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
+				<!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
 
-<!-- wp:spacer {"height":"5rem"} -->
-<div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer --></div>
-<!-- /wp:group -->
-<!-- /wp:comment-template -->
+				<!-- wp:comment-reply-link /--></div>
+			<!-- /wp:group --></div>
+		<!-- /wp:group --></div>
+	<!-- /wp:group -->
+	<!-- /wp:comment-template -->
 
-<!-- wp:comments-pagination -->
-<!-- wp:comments-pagination-previous /-->
+	<!-- wp:comments-pagination -->
+	<!-- wp:comments-pagination-previous /-->
 
-<!-- wp:comments-pagination-numbers /-->
+	<!-- wp:comments-pagination-numbers /-->
 
-<!-- wp:comments-pagination-next /-->
-<!-- /wp:comments-pagination -->
+	<!-- wp:comments-pagination-next /-->
+	<!-- /wp:comments-pagination -->
 
-<!-- wp:post-comments-form /--></div>
-<!-- /wp:comments -->
+	<!-- wp:post-comments-form /--></div>
+<!-- /wp:comments -->

course/style.css

@@ -127,17 +127,94 @@ h1, h2, h3, h4, h5, h6 {
 /*
  * Comments
  */
+
+.wp-block-comments-query-loop .wp-block-post-comments-form:not(last-child) {
+	margin-bottom: var(--wp--custom--comment-gap);
+}
+
+.comment-reply-title a {
+	font-size: var(--wp--preset--font-size--x-small);
+}
+
+.wp-block-comments-query-loop .wp-block-comments-pagination {
+	margin-top: calc( var(--wp--custom--comment-gap) / 2 * -1 );
+	margin-bottom: var(--wp--custom--comment-gap);
+}
+
+.wp-block-comments-query-loop hr,
+.wp-block-comments-query-loop .wp-block-comments-title {
+	margin-bottom: clamp(2.5rem, 2.167rem + 1.111vw, 3rem);
+}
+
+.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] {
+	display: none;
+}
+
+.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] + label:before {
+	border: 1px solid var(--wp--preset--color--foreground);
+	content: "\00a0";
+	display: inline-block;
+	font-size: 1rem;
+	height: 16px;
+	padding: 0;
+	vertical-align: center;
+	width: 16px;
+	border-radius: 4px;
+	margin-right: var(--wp--custom--comment-gap-small);
+}
+
+.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]:checked + label:before {
+	color: green;
+	content: "\2713";
+	text-align: center;
+}
+
+
+.wp-block-post-comments-form h3.comment-reply-title {
+	margin-bottom: var(--wp--preset--spacing--60);
+}
+
+.wp-block-post-comments-form .comment-form-comment label {
+	display: inline-block;
+}
+
+.wp-block-post-comments-form .comment-form-comment label,
+.wp-block-post-comments-form .comment-form-author label,
+.wp-block-post-comments-form .comment-form-url label,
+.wp-block-post-comments-form .comment-form-email label
+{
+	margin-bottom: 5px;
+}
+
+.wp-block-post-comments-form form.comment-form .form-submit {
+	margin-top: var(--wp--preset--spacing--50);
+}
+
 .wp-block-post-comments-form form.comment-form p input:not([type=submit]),
 .wp-block-post-comments-form form.comment-form textarea {
 	border: 1px solid var(--wp--preset--color--foreground);
 	border-radius: 8px;
 	background-color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
+	font-size: var(--wp--preset--font-size--x-small);
+	padding: 11px;
 }
 
 .wp-block-post-comments-form .comment-form-cookies-consent label {
 	margin: auto 0;
 }
 
+.wp-block-post-comments-form .comment-form-cookies-consent {
+	align-items: center;
+	gap: var(--wp--preset--spacing--30);
+}
+
+.wp-block-post-comments-form .comment-form-cookies-consent input {
+	transform: scale(1.3);
+	background-color: transparent;
+	accent-color: red;
+}
+
 .wp-block-post-comments-form .comment-form {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
@@ -204,7 +281,6 @@ h1, h2, h3, h4, h5, h6 {
 
 .wp-block-comments-query-loop .comment > .is-vertical > .wp-block-group {
 	align-items: flex-start;
-	gap: var(--wp--custom--comment-gap-small);
 }
 
 .wp-block-comments-query-loop .comment > div > div > .is-vertical {

course/templates/page.html

@@ -14,59 +14,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/single-column-featured-no-title.html

@@ -14,59 +14,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/single-column-featured-title.html

@@ -16,59 +16,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/single-column-no-featured-no-title.html

@@ -8,59 +8,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/single-column-no-featured-title.html

@@ -14,59 +14,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/single-course.html

@@ -14,59 +14,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/single.html

@@ -7,8 +7,8 @@
 <div class="wp-block-group"><!-- wp:post-title {"level":1,"align":"wide","style":{"typography":{"textTransform":"uppercase"}}} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"tagName":"main","lock":{"move":false,"remove":true},"style":{"border":{"bottom":{"width":"1px"},"radius":"0px"},"spacing":{"margin":{"top":"2.5rem"}}}} -->
-<main class="wp-block-group" style="border-radius:0px;border-bottom-width:1px;margin-top:2.5rem">
+<!-- wp:group {"tagName":"main","lock":{"move":false,"remove":true},"style":{"border":{"radius":"0px"},"spacing":{"margin":{"top":"2.5rem"}}}} -->
+<main class="wp-block-group" style="border-radius:0px;margin-top:2.5rem">
     <!-- wp:post-featured-image /-->
     
     <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0px","left":"0px"},"margin":{"bottom":"40px"}}}} -->

course/templates/wide-featured-no-title.html

@@ -14,59 +14,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/wide-featured-title.html

@@ -16,59 +16,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/templates/wide-no-featured-no-title.html

@@ -8,59 +8,7 @@
   <div class="wp-block-group">
     <!-- wp:group {"layout":{"type":"constrained"}} -->
     <div class="wp-block-group">
-      <!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
-      <div class="wp-block-comments wp-block-comments-query-loop">
-        <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
-        <hr class="wp-block-separator has-css-opacity is-style-wide" />
-        <!-- /wp:separator -->
-
-        <!-- wp:comments-title {"showPostTitle":false,"showCommentsCount":false,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->
-
-        <!-- wp:comment-template -->
-        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
-        <div class="wp-block-group">
-          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"}} -->
-          <div class="wp-block-group">
-            <!-- wp:avatar {"size":40,"style":{"border":{"radius":"24px","width":"1px"}}} /-->
-
-            <!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-            <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-              <!-- wp:comment-author-name /-->
-
-              <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
-              <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-                <!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-                <!-- wp:comment-edit-link /-->
-              </div>
-              <!-- /wp:group -->
-
-              <!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
-
-              <!-- wp:comment-reply-link /-->
-            </div>
-            <!-- /wp:group -->
-          </div>
-          <!-- /wp:group -->
-
-          <!-- wp:spacer {"height":"5rem"} -->
-          <div style="height:5rem" aria-hidden="true" class="wp-block-spacer"></div>
-          <!-- /wp:spacer -->
-        </div>
-        <!-- /wp:group -->
-        <!-- /wp:comment-template -->
-
-        <!-- wp:comments-pagination -->
-        <!-- wp:comments-pagination-previous /-->
-
-        <!-- wp:comments-pagination-numbers /-->
-
-        <!-- wp:comments-pagination-next /-->
-        <!-- /wp:comments-pagination -->
-
-        <!-- wp:post-comments-form /-->
-      </div>
-      <!-- /wp:comments -->
+      <!-- wp:pattern {"slug":"course/comments"} /-->
     </div>
     <!-- /wp:group -->
   </div>

course/theme.json

@@ -395,7 +395,12 @@
 				"elements": {
 					"heading": {
 						"typography": {
-							"fontSize": "var(--wp--custom--typography--font-sizes--normal)"
+							"fontSize": "var(--wp--custom--typography--font-sizes--normal)",
+							"fontFamily": "var(--wp--preset--font-family--system)",
+							"textTransform": "none",
+							"fontWeight": "600",
+							"letterSpacing": "-0.24px",
+							"lineHeight": "100%"
 						}
 					},
 					"button": {
@@ -410,6 +415,12 @@
 							"fontFamily": "var(--wp--preset--font-family--heading)",
 							"fontSize": "var(--wp--custom--typography--font-sizes--button)",
 							"lineHeight": "100%"
+						},
+						"spacing": {
+							"padding": {
+								"top": "1.125rem",
+								"bottom": "1.125rem"
+							}
 						}
 					}
 				}