Update comments template to match latest Gutenberg block markup (#7736)

* Update comments pattern markup

* Tweak avatar and comment styling in theme.json

* Update versions and change log

course/patterns/comments.php

@@ -7,33 +7,33 @@
 
 ?>
 
-<!-- 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"} -->
+<!-- wp:comments -->
+<div class="wp-block-comments"><!-- 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","lineHeight":"1"},"spacing":{"padding":{"top":"0","right":"0","bottom":"0px","left":"0"},"margin":{"top":"0","right":"0","left":"0"}}},"fontSize":"large"} /-->
 
 	<!-- 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:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
+<div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":48} /--></div>
+<!-- /wp:column -->
 
-			<!-- 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:column -->
+<div class="wp-block-column"><!-- wp:comment-author-name {"isLink":false} /-->
 
-				<!-- 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:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
+<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"format":"F j, Y g:i a","isLink":false,"fontSize":"x-small"} /-->
 
-					<!-- wp:comment-edit-link /--></div>
-				<!-- /wp:group -->
+<!-- wp:comment-edit-link /--></div>
+<!-- /wp:group -->
 
-				<!-- wp:comment-content {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
+<!-- wp:comment-content /-->
 
-				<!-- wp:comment-reply-link /--></div>
-			<!-- /wp:group --></div>
-		<!-- /wp:group --></div>
-	<!-- /wp:group -->
+<!-- wp:comment-reply-link /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
 	<!-- /wp:comment-template -->
 
 	<!-- wp:comments-pagination -->

course/readme.txt

@@ -1,7 +1,7 @@
 === Course ===
 Contributors: Automattic
-Requires at least: 6.2
-Tested up to: 6.4
+Requires at least: 6.3
+Tested up to: 6.5
 Requires PHP: 7.4
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -12,6 +12,9 @@ Course is a flexible and modern education theme for anyone wanting to share thei
 
 == Changelog ==
 
+= 1.3.7 =
+* Update comments template to match latest Gutenberg block markup (#7736)
+
 = 1.3.6 =
 * Optimize images (#7671)
 * Fix unnecessary padding in outline buttons (#7462)

course/style.css

@@ -3,9 +3,9 @@ Theme Name: Course
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Course is a flexible and modern education theme for anyone wanting to share their knowledge. The theme is built with integration with Sensei LMS and is ideal for Sensei users that are creating or selling courses. Style variations with multiple font and color combinations help you craft the perfect look and feel to show off courses and content. The theme can be used without Sensei too.
-Version: 1.3.6
-Requires at least: 6.2
-Tested up to: 6.4
+Version: 1.3.7
+Requires at least: 6.3
+Tested up to: 6.5
 Requires PHP: 7.4
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -127,8 +127,7 @@ h1, h2, h3, h4, h5, h6 {
 /*
  * Comments
  */
-
-.wp-block-comments-query-loop .wp-block-post-comments-form:not(last-child) {
+.wp-block-comments .wp-block-post-comments-form:not(last-child) {
 	margin-bottom: var(--wp--custom--comment-gap);
 }
 
@@ -136,13 +135,13 @@ h1, h2, h3, h4, h5, h6 {
 	font-size: var(--wp--preset--font-size--x-small);
 }
 
-.wp-block-comments-query-loop .wp-block-comments-pagination {
+.wp-block-comments .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 {
+.wp-block-comments hr,
+.wp-block-comments .wp-block-comments-title {
 	margin-bottom: clamp(2.5rem, 2.167rem + 1.111vw, 3rem);
 }
 
@@ -270,20 +269,20 @@ h1, h2, h3, h4, h5, h6 {
 	grid-column: 1 / 2;
 }
 
-.wp-block-comments-query-loop .wp-block-comment-template .wp-block-comment-author-name {
+.wp-block-comments .wp-block-comment-template .wp-block-comment-author-name {
 	margin-bottom: var(--wp--custom--comment-gap-small);
 }
 
-.wp-block-comments-query-loop .wp-block-comment-template .wp-block-comment-content p {
+.wp-block-comments .wp-block-comment-template .wp-block-comment-content p {
 	margin-block-start: var(--wp--custom--comment-gap-medium);
 	margin-block-end: var(--wp--custom--comment-gap-small);
 }
 
-.wp-block-comments-query-loop .comment > .is-vertical > .wp-block-group {
+.wp-block-comments .comment > .is-vertical > .wp-block-group {
 	align-items: flex-start;
 }
 
-.wp-block-comments-query-loop .comment > div > div > .is-vertical {
+.wp-block-comments .comment > div > div > .is-vertical {
 	gap: 0;
 }
 

course/theme.json

@@ -356,6 +356,13 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/avatar": {
+				"border": {
+					"radius": "24px",
+					"style": "solid",
+					"width": "1px"
+				}
+			},
 			"core/code": {
 				"border": {
 					"color": "var(--wp--preset--color--foreground)",
@@ -460,11 +467,6 @@
 					"fontSize": "var(--wp--custom--typography--font-sizes--normal)",
 					"lineHeight": "160%",
 					"fontFamily": "var(--wp--preset--font-family--body)"
-				},
-				"spacing": {
-					"padding": {
-						"top": "var(--wp--preset--spacing--40)"
-					}
 				}
 			},
 			"core/comment-date": {