From 242599eea6b771dd5c1b43096d986755149cb59d Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 22 Jun 2022 10:00:25 +0200
Subject: [PATCH] added new comment block to the theme

---
 block-canvas/patterns/comments.php | 61 ++++++++++++++++++++++++++++++
 block-canvas/templates/page.html   |  2 +-
 block-canvas/templates/single.html |  2 +-
 block-canvas/theme.json            | 35 +++++++++++++++++
 4 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 block-canvas/patterns/comments.php

diff --git a/block-canvas/patterns/comments.php b/block-canvas/patterns/comments.php
new file mode 100644
index 0000000000..594464b19d
--- /dev/null
+++ b/block-canvas/patterns/comments.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * Title: Comments
+ * slug: blockbase/comments
+ * inserter: no
+ */
+
+?>
+<!-- wp:comments-query-loop -->
+<div class="wp-block-comments-query-loop">
+	<!-- wp:comments-title /-->
+
+	<!-- wp:comment-template -->
+	<!-- wp:columns -->
+	<div class="wp-block-columns">
+		<!-- wp:column {"width":"40px"} -->
+		<div class="wp-block-column" style="flex-basis:40px"></div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+			<div class="wp-block-group">
+				<!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"},"spacing":{"margin":{"top":"10px"}}}} /-->
+
+				<!-- wp:group -->
+				<div class="wp-block-group">
+					<!-- wp:comment-author-name /-->
+
+					<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex"}} -->
+					<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 -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:comment-content /-->
+
+			<!-- wp:comment-reply-link /-->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+	<!-- /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-query-loop -->
\ No newline at end of file
diff --git a/block-canvas/templates/page.html b/block-canvas/templates/page.html
index 52bd0dbbfc..d7feeb8d9d 100644
--- a/block-canvas/templates/page.html
+++ b/block-canvas/templates/page.html
@@ -20,7 +20,7 @@
     <!-- wp:spacer {"height":60} -->
     <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
     <!-- /wp:spacer -->
-    <!-- wp:post-comments /-->
+    <!-- wp:pattern {"slug":"block-canvas/comments"} -->
 </div>
 <!-- /wp:group -->
 
diff --git a/block-canvas/templates/single.html b/block-canvas/templates/single.html
index f85357e354..4d36daf6b5 100644
--- a/block-canvas/templates/single.html
+++ b/block-canvas/templates/single.html
@@ -21,7 +21,7 @@
     <!-- wp:spacer {"height":60} -->
     <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
     <!-- /wp:spacer -->
-    <!-- wp:post-comments /-->
+    <!-- wp:pattern {"slug":"block-canvas/comments"} -->
 </div>
 <!-- /wp:group -->
 
diff --git a/block-canvas/theme.json b/block-canvas/theme.json
index 9616c81599..7167c2d106 100644
--- a/block-canvas/theme.json
+++ b/block-canvas/theme.json
@@ -158,6 +158,41 @@
                     "fontFamily": "monospace"
                 }
             },
+            "core/comment-author-name": {
+				"typography": {
+					"fontSize": "var(--wp--custom--font-sizes--small)"
+				}
+			},
+			"core/comment-date": {
+				"typography": {
+					"fontSize": "var(--wp--custom--font-sizes--small)"
+				}
+			},
+			"core/comment-edit-link": {
+				"typography": {
+					"fontSize": "var(--wp--custom--font-sizes--small)"
+				}
+			},
+			"core/comment-reply-link": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
+				"typography": {
+					"fontSize": "var(--wp--custom--font-sizes--small)",
+					"textDecoration": "underline"
+				}
+			},
+			"core/comments-title": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--large)"
+				}
+			},
+			"core/comment-content": {
+				"typography": {
+					"fontSize": "var(--wp--custom--post-comment--typography--font-size)",
+					"lineHeight": "var(--wp--custom--post-comment--typography--line-height)"
+				}
+			},
             "core/gallery": {
                 "spacing": {
                     "margin": {