Templates: Add comments to single post template (#104)

* Templates: Add comments to single post template Fixes #305 * Move margin onto comments block so it only appears when there are comments
WordPress · Sep 11, 2023 · 6ac51f4 · 6ac51f4
1 parent 942ffdb
commit 6ac51f4
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 0 deletions.
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_comments.scss b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_comments.scss
@@ -0,0 +1,5 @@
+.wp-block-comment-template {
+	ol {
+		border-left: 1px solid var(--wp--preset--color--light-grey-1);
+	}
+}
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_index.scss b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_index.scss
@@ -1,6 +1,7 @@
 // Override the default styles that a block has from Core, it's plugin, etc.
 @import "button";
 @import "columns";
+@import "comments";
 @import "file";
 @import "list";
 @import "navigation";

diff --git a/source/wp-content/themes/wporg-parent-2021/templates/single.html b/source/wp-content/themes/wporg-parent-2021/templates/single.html
@@ -9,6 +9,52 @@
 		<!-- wp:post-content {"className":"is-style-two-column-display","layout":{"inherit":true}} /-->
 	</section>
 	<!-- /wp:group -->
+
+	<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0"}}}} -->
+	<div class="wp-block-group alignfull is-style-two-column-display" style="margin-top:0">
+		<!-- wp:comments {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}}} -->
+		<div class="wp-block-comments" style="margin-top:var(--wp--preset--spacing--60)">
+			<!-- wp:comments-title {"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+
+			<!-- wp:comment-template -->
+				<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}},"layout":{"type":"default"}} -->
+				<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--30)">
+					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+					<div class="wp-block-group">
+						<!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /-->
+
+						<!-- wp:comment-author-name /-->
+
+						<!-- wp:comment-date /-->
+					</div>
+					<!-- /wp:group -->
+
+					<!-- wp:comment-content /-->
+
+					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+					<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--20)">
+						<!-- wp:comment-reply-link {"fontSize":"small"} /-->
+
+						<!-- wp:comment-edit-link {"fontSize":"small"} /-->
+					</div>
+					<!-- /wp:group -->
+				</div>
+				<!-- /wp:group -->
+			<!-- /wp:comment-template -->
+
+			<!-- wp:comments-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
+				<!-- wp:comments-pagination-previous /-->
+
+				<!-- wp:comments-pagination-numbers /-->
+
+				<!-- wp:comments-pagination-next /-->
+			<!-- /wp:comments-pagination -->
+
+			<!-- wp:post-comments-form /-->
+		</div>
+		<!-- /wp:comments -->
+	</div>
+	<!-- /wp:group -->
 </article>
 <!-- /wp:group -->
 

diff --git a/source/wp-content/themes/wporg-parent-2021/theme.json b/source/wp-content/themes/wporg-parent-2021/theme.json
@@ -666,6 +666,43 @@
 					"fontFamily": "var(--wp--preset--font-family--monospace)"
 				}
 			},
+			"core/comment-author-name": {
+				"typography": {
+					"fontWeight": "600"
+				},
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				}
+			},
+			"core/comment-date": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var(--wp--preset--color--charcoal-4)"
+						},
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				}
+			},
 			"core/navigation": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--normal)"