From a247e6138d0806f6ac7b6f33d6ce78961d7d9d4f Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 5 Jan 2021 08:52:12 +0100
Subject: [PATCH 1/3] TT1-Blocks: Add comments.php and comment area styles

Follow up on https://github.com/WordPress/theme-experiments/pull/68
I consider this a temporary solution until a comment query for the individual post comment blocks is implemented.
---
 tt1-blocks/assets/css/comments.css     | 272 +++++++++++++++++++++++++
 tt1-blocks/block-templates/page.html   |   1 +
 tt1-blocks/block-templates/single.html |   1 +
 tt1-blocks/comments.php                |  68 +++++++
 tt1-blocks/style.css                   |   1 +
 5 files changed, 343 insertions(+)
 create mode 100644 tt1-blocks/assets/css/comments.css
 create mode 100644 tt1-blocks/comments.php

diff --git a/tt1-blocks/assets/css/comments.css b/tt1-blocks/assets/css/comments.css
new file mode 100644
index 00000000..111df9db
--- /dev/null
+++ b/tt1-blocks/assets/css/comments.css
@@ -0,0 +1,272 @@
+/**
+ * Comments Wrapper
+ */
+.comments-area > * {
+	margin-top: var(--wp--custom--spacing--vertical);
+	margin-bottom: var(--wp--custom--spacing--vertical);
+}
+
+.comments-area > *:first-child {
+	margin-top: 0;
+}
+
+.comments-area > *:last-child {
+	margin-bottom: 0;
+}
+
+.comments-area.show-avatars .avatar {
+	border-radius: 50%;
+	position: absolute;
+	top: 10px;
+}
+
+.comments-area.show-avatars .fn {
+	display: inline-block;
+	padding-left: 85px;
+}
+
+.comments-area.show-avatars .comment-metadata {
+	padding: 8px 0 9px 85px;
+}
+
+/**
+ * Comment Title
+ */
+.comments-title,
+.comment-reply-title {
+	font-size: var(--wp--preset--font-size--extra-large);
+}
+
+.comment-reply-title {
+	display: flex;
+	justify-content: space-between;
+}
+
+.comment-reply-title small a {
+	font-size: var(--wp--preset--font-size--extra-small);
+	font-style: normal;
+	font-weight: normal;
+	letter-spacing: normal;
+}
+
+/* Nested comment reply title*/
+.comment .comment-respond .comment-reply-title {
+	font-size: var(--wp--preset--font-size--large);
+}
+
+/**
+ * Comment Lists
+ */
+.comment-list {
+	padding-left: 0;
+	list-style: none;
+}
+
+.comment-list > li {
+	margin-top: var(--wp--custom--spacing--vertical);
+	margin-bottom: var(--wp--custom--spacing--vertical);
+}
+
+.comment-list .children {
+	list-style: none;
+	padding-left: 0;
+}
+
+.comment-list .children > li {
+	margin-top: var(--wp--custom--spacing--vertical);
+	margin-bottom: var(--wp--custom--spacing--vertical);
+}
+
+@media only screen and (min-width: 482px) {
+
+	.comment-list .depth-2,
+	.comment-list .depth-3 {
+		padding-left: calc(4 * var(--wp--custom--spacing--horizontal));
+	}
+}
+
+/**
+ * Comment Meta
+ */
+.comment-meta .comment-author {
+	line-height: var(--wp--custom--line-height--heading);
+	margin-bottom: calc(0.25 * var(--wp--custom--spacing--unit));
+}
+@media only screen and (min-width: 482px) {
+
+	.comment-meta .comment-author {
+		margin-bottom: 0;
+		padding-right: 0;
+	}
+}
+
+.comment-meta .comment-author .fn {
+	font-weight: normal;
+	font-size: var(--wp--preset--font-size--large);
+	hyphens: auto;
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+.comment-meta .comment-metadata {
+	color: var(--wp--preset--color--dark-gray);
+	font-size: var(--wp--preset--font-size--extra-small);
+	padding: 8px 0 9px 0;
+}
+
+.comment-meta .comment-metadata .edit-link {
+	margin-left: var(--wp--custom--spacing--horizontal);
+}
+@media only screen and (min-width: 482px) {
+
+	.comment-meta {
+		margin-right: inherit;
+	}
+
+	.comment-meta .comment-author {
+		max-width: inherit;
+	}
+}
+
+.reply {
+	font-size: var(--wp--preset--font-size--extra-small);
+	line-height: var(--wp--custom--line-height--heading);
+}
+
+.bypostauthor {
+	display: block;
+}
+
+.says {
+	display: none;
+}
+
+.comment-body {
+	position: relative;
+	margin-bottom: calc(1.7 * var(--wp--custom--spacing--vertical));
+}
+
+.comment-body > * {
+	margin-top: var(--wp--custom--spacing--vertical);
+	margin-bottom: var(--wp--custom--spacing--vertical);
+}
+
+.comment-body .reply {
+	margin: 0;
+}
+
+.comment-content a {
+	word-wrap: break-word;
+}
+
+.pingback .comment-body,
+.trackback .comment-body {
+	margin-top: var(--wp--custom--spacing--vertical);
+	margin-bottom: var(--wp--custom--spacing--vertical);
+}
+
+.comment-respond {
+	margin-top: var(--wp--custom--spacing--vertical);
+}
+
+.comment-respond > * {
+	margin-top: var(--wp--custom--spacing--unit);
+	margin-bottom: var(--wp--custom--spacing--unit);
+}
+
+.comment-respond > *:first-child {
+	margin-top: 0;
+}
+
+.comment-respond > *:last-child {
+	margin-bottom: 0;
+}
+
+.comment-respond > *:last-child.comment-form {
+	margin-bottom: var(--wp--custom--spacing--vertical);
+}
+
+.comment-author {
+	padding-top: 3px;
+}
+
+.comment-author .url {
+	color: currentColor;
+}
+
+.comment-form {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.comment-form > * {
+	flex-basis: 100%;
+}
+
+.comment-form .comment-notes {
+	font-size: var(--wp--preset--font-size--extra-small);
+}
+
+.comment-form .comment-form-url,
+.comment-form .comment-form-comment {
+	width: 100%;
+}
+
+.comment-form .comment-form-author,
+.comment-form .comment-form-email {
+	flex-basis: 0;
+	flex-grow: 1;
+}
+@media only screen and (max-width: 481px) {
+
+	.comment-form .comment-form-author,
+	.comment-form .comment-form-email {
+		flex-basis: 100%;
+	}
+}
+
+.comment-form .comment-form-cookies-consent > label,
+.comment-form .comment-notes {
+	font-size: var(--wp--preset--font-size--extra-small);
+	font-weight: normal;
+}
+
+.comment-form > p {
+	margin-bottom: var(--wp--custom--spacing--unit);
+}
+
+.comment-form > p:first-of-type {
+	margin-top: 0;
+}
+
+.comment-form > p:last-of-type {
+	margin-bottom: 0;
+}
+
+.comment-form > p label,
+.comment-form > p input[type=email],
+.comment-form > p input[type=text],
+.comment-form > p input[type=url],
+.comment-form > p textarea {
+	display: block;
+	font-size: var(--wp--preset--font-size--extra-small);
+	margin-bottom: calc(.5 * var(--wp--custom--spacing--unit));
+	width: 100%;
+	font-weight: var(--form--label-weight);
+}
+
+.comment-form > p.comment-form-cookies-consent {
+	display: flex;
+}
+
+@media only screen and (min-width: 482px) {
+
+	.comment-form > p.comment-form-author {
+		margin-right: calc(1.5 * var(--wp--custom--spacing--horizontal));
+	}
+
+	.comment-form > p.comment-notes,
+	.comment-form > p.logged-in-as {
+		display: block;
+	}
+}
\ No newline at end of file
diff --git a/tt1-blocks/block-templates/page.html b/tt1-blocks/block-templates/page.html
index 86fa87e9..f7ef8ff2 100644
--- a/tt1-blocks/block-templates/page.html
+++ b/tt1-blocks/block-templates/page.html
@@ -12,5 +12,6 @@
 
 <!-- wp:post-content /-->
 <!-- wp:post-comments /-->
+<!-- wp:post-comments-form /-->
 
 <!-- wp:template-part {"slug":"footer","theme":"tt1-blocks","align":"full","tagName":"footer","className":"site-footer"} /-->
\ No newline at end of file
diff --git a/tt1-blocks/block-templates/single.html b/tt1-blocks/block-templates/single.html
index 7048864e..7b4f2d4c 100644
--- a/tt1-blocks/block-templates/single.html
+++ b/tt1-blocks/block-templates/single.html
@@ -38,5 +38,6 @@
 <div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 <!-- wp:post-comments /-->
+<!-- wp:post-comments-form /-->
 
 <!-- wp:template-part {"slug":"footer","theme":"tt1-blocks","align":"full","tagName":"footer","className":"site-footer"} /-->
\ No newline at end of file
diff --git a/tt1-blocks/comments.php b/tt1-blocks/comments.php
new file mode 100644
index 00000000..e7fcd084
--- /dev/null
+++ b/tt1-blocks/comments.php
@@ -0,0 +1,68 @@
+<?php
+/**
+ * The template for displaying comments
+ *
+ * This is the template that displays the area of the page that contains both the current comments
+ * and the comment form.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package WordPress
+ * @subpackage TT1_Blocks
+ * @since 0.1
+ */
+
+/*
+ * If the current post is protected by a password and
+ * the visitor has not yet entered the password,
+ * return early without loading the comments.
+ */
+if ( post_password_required() ) {
+	return;
+}
+
+$tt1_blocks_comment_count = get_comments_number();
+?>
+
+<div id="comments" class="comments-area <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
+
+	<?php
+	if ( have_comments() ) :
+		;
+		?>
+		<h2 class="comments-title">
+			<?php if ( '1' === $tt1_blocks_comment_count ) : ?>
+				<?php esc_html_e( '1 comment', 'tt1-blocks' ); ?>
+			<?php else : ?>
+				<?php
+				printf(
+					/* translators: %s: comment count number. */
+					esc_html( _nx( '%s comment', '%s comments', $tt1_blocks_comment_count, 'Comments title', 'tt1-blocks' ) ),
+					esc_html( number_format_i18n( $tt1_blocks_comment_count ) )
+				);
+				?>
+			<?php endif; ?>
+		</h2><!-- .comments-title -->
+
+		<ol class="comment-list">
+			<?php
+			wp_list_comments(
+				array(
+					'avatar_size' => 60,
+					'style'       => 'ol',
+					'short_ping'  => true,
+				)
+			);
+			?>
+		</ol><!-- .comment-list -->
+
+		<?php
+		the_comments_pagination();
+		?>
+
+		<?php if ( ! comments_open() ) : ?>
+			<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'tt1-blocks' ); ?></p>
+		<?php endif; ?>
+	<?php endif; ?>
+
+</div><!-- #comments -->
diff --git a/tt1-blocks/style.css b/tt1-blocks/style.css
index 9b4d05e5..7563e678 100644
--- a/tt1-blocks/style.css
+++ b/tt1-blocks/style.css
@@ -23,6 +23,7 @@ TT1 Blocks is distributed under the terms of the GNU GPL.
 
 @import "assets/css/style-shared.css";
 @import "assets/css/blocks.css";
+@import "assets/css/comments.css";
 
 /*--------------------------------------------------------------
 # Defaults

From 938793475772eb83c793f2e4f31e6a5a07c86043 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 6 Jan 2021 11:46:11 +0100
Subject: [PATCH 2/3] Remove CSS

---
 tt1-blocks/assets/css/comments.css | 272 -----------------------------
 tt1-blocks/style.css               |   1 -
 2 files changed, 273 deletions(-)
 delete mode 100644 tt1-blocks/assets/css/comments.css

diff --git a/tt1-blocks/assets/css/comments.css b/tt1-blocks/assets/css/comments.css
deleted file mode 100644
index 111df9db..00000000
--- a/tt1-blocks/assets/css/comments.css
+++ /dev/null
@@ -1,272 +0,0 @@
-/**
- * Comments Wrapper
- */
-.comments-area > * {
-	margin-top: var(--wp--custom--spacing--vertical);
-	margin-bottom: var(--wp--custom--spacing--vertical);
-}
-
-.comments-area > *:first-child {
-	margin-top: 0;
-}
-
-.comments-area > *:last-child {
-	margin-bottom: 0;
-}
-
-.comments-area.show-avatars .avatar {
-	border-radius: 50%;
-	position: absolute;
-	top: 10px;
-}
-
-.comments-area.show-avatars .fn {
-	display: inline-block;
-	padding-left: 85px;
-}
-
-.comments-area.show-avatars .comment-metadata {
-	padding: 8px 0 9px 85px;
-}
-
-/**
- * Comment Title
- */
-.comments-title,
-.comment-reply-title {
-	font-size: var(--wp--preset--font-size--extra-large);
-}
-
-.comment-reply-title {
-	display: flex;
-	justify-content: space-between;
-}
-
-.comment-reply-title small a {
-	font-size: var(--wp--preset--font-size--extra-small);
-	font-style: normal;
-	font-weight: normal;
-	letter-spacing: normal;
-}
-
-/* Nested comment reply title*/
-.comment .comment-respond .comment-reply-title {
-	font-size: var(--wp--preset--font-size--large);
-}
-
-/**
- * Comment Lists
- */
-.comment-list {
-	padding-left: 0;
-	list-style: none;
-}
-
-.comment-list > li {
-	margin-top: var(--wp--custom--spacing--vertical);
-	margin-bottom: var(--wp--custom--spacing--vertical);
-}
-
-.comment-list .children {
-	list-style: none;
-	padding-left: 0;
-}
-
-.comment-list .children > li {
-	margin-top: var(--wp--custom--spacing--vertical);
-	margin-bottom: var(--wp--custom--spacing--vertical);
-}
-
-@media only screen and (min-width: 482px) {
-
-	.comment-list .depth-2,
-	.comment-list .depth-3 {
-		padding-left: calc(4 * var(--wp--custom--spacing--horizontal));
-	}
-}
-
-/**
- * Comment Meta
- */
-.comment-meta .comment-author {
-	line-height: var(--wp--custom--line-height--heading);
-	margin-bottom: calc(0.25 * var(--wp--custom--spacing--unit));
-}
-@media only screen and (min-width: 482px) {
-
-	.comment-meta .comment-author {
-		margin-bottom: 0;
-		padding-right: 0;
-	}
-}
-
-.comment-meta .comment-author .fn {
-	font-weight: normal;
-	font-size: var(--wp--preset--font-size--large);
-	hyphens: auto;
-	word-wrap: break-word;
-	word-break: break-word;
-}
-
-.comment-meta .comment-metadata {
-	color: var(--wp--preset--color--dark-gray);
-	font-size: var(--wp--preset--font-size--extra-small);
-	padding: 8px 0 9px 0;
-}
-
-.comment-meta .comment-metadata .edit-link {
-	margin-left: var(--wp--custom--spacing--horizontal);
-}
-@media only screen and (min-width: 482px) {
-
-	.comment-meta {
-		margin-right: inherit;
-	}
-
-	.comment-meta .comment-author {
-		max-width: inherit;
-	}
-}
-
-.reply {
-	font-size: var(--wp--preset--font-size--extra-small);
-	line-height: var(--wp--custom--line-height--heading);
-}
-
-.bypostauthor {
-	display: block;
-}
-
-.says {
-	display: none;
-}
-
-.comment-body {
-	position: relative;
-	margin-bottom: calc(1.7 * var(--wp--custom--spacing--vertical));
-}
-
-.comment-body > * {
-	margin-top: var(--wp--custom--spacing--vertical);
-	margin-bottom: var(--wp--custom--spacing--vertical);
-}
-
-.comment-body .reply {
-	margin: 0;
-}
-
-.comment-content a {
-	word-wrap: break-word;
-}
-
-.pingback .comment-body,
-.trackback .comment-body {
-	margin-top: var(--wp--custom--spacing--vertical);
-	margin-bottom: var(--wp--custom--spacing--vertical);
-}
-
-.comment-respond {
-	margin-top: var(--wp--custom--spacing--vertical);
-}
-
-.comment-respond > * {
-	margin-top: var(--wp--custom--spacing--unit);
-	margin-bottom: var(--wp--custom--spacing--unit);
-}
-
-.comment-respond > *:first-child {
-	margin-top: 0;
-}
-
-.comment-respond > *:last-child {
-	margin-bottom: 0;
-}
-
-.comment-respond > *:last-child.comment-form {
-	margin-bottom: var(--wp--custom--spacing--vertical);
-}
-
-.comment-author {
-	padding-top: 3px;
-}
-
-.comment-author .url {
-	color: currentColor;
-}
-
-.comment-form {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.comment-form > * {
-	flex-basis: 100%;
-}
-
-.comment-form .comment-notes {
-	font-size: var(--wp--preset--font-size--extra-small);
-}
-
-.comment-form .comment-form-url,
-.comment-form .comment-form-comment {
-	width: 100%;
-}
-
-.comment-form .comment-form-author,
-.comment-form .comment-form-email {
-	flex-basis: 0;
-	flex-grow: 1;
-}
-@media only screen and (max-width: 481px) {
-
-	.comment-form .comment-form-author,
-	.comment-form .comment-form-email {
-		flex-basis: 100%;
-	}
-}
-
-.comment-form .comment-form-cookies-consent > label,
-.comment-form .comment-notes {
-	font-size: var(--wp--preset--font-size--extra-small);
-	font-weight: normal;
-}
-
-.comment-form > p {
-	margin-bottom: var(--wp--custom--spacing--unit);
-}
-
-.comment-form > p:first-of-type {
-	margin-top: 0;
-}
-
-.comment-form > p:last-of-type {
-	margin-bottom: 0;
-}
-
-.comment-form > p label,
-.comment-form > p input[type=email],
-.comment-form > p input[type=text],
-.comment-form > p input[type=url],
-.comment-form > p textarea {
-	display: block;
-	font-size: var(--wp--preset--font-size--extra-small);
-	margin-bottom: calc(.5 * var(--wp--custom--spacing--unit));
-	width: 100%;
-	font-weight: var(--form--label-weight);
-}
-
-.comment-form > p.comment-form-cookies-consent {
-	display: flex;
-}
-
-@media only screen and (min-width: 482px) {
-
-	.comment-form > p.comment-form-author {
-		margin-right: calc(1.5 * var(--wp--custom--spacing--horizontal));
-	}
-
-	.comment-form > p.comment-notes,
-	.comment-form > p.logged-in-as {
-		display: block;
-	}
-}
\ No newline at end of file
diff --git a/tt1-blocks/style.css b/tt1-blocks/style.css
index 7563e678..9b4d05e5 100644
--- a/tt1-blocks/style.css
+++ b/tt1-blocks/style.css
@@ -23,7 +23,6 @@ TT1 Blocks is distributed under the terms of the GNU GPL.
 
 @import "assets/css/style-shared.css";
 @import "assets/css/blocks.css";
-@import "assets/css/comments.css";
 
 /*--------------------------------------------------------------
 # Defaults

From 00c9148f884c83ddce33a4bed8157b7b96a15d37 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell.reigstad@automattic.com>
Date: Mon, 11 Jan 2021 09:26:56 -0500
Subject: [PATCH 3/3] Add a code comment referencing WordPress/gutenberg#28045.

---
 tt1-blocks/comments.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tt1-blocks/comments.php b/tt1-blocks/comments.php
index e7fcd084..a61d6180 100644
--- a/tt1-blocks/comments.php
+++ b/tt1-blocks/comments.php
@@ -3,7 +3,8 @@
  * The template for displaying comments
  *
  * This is the template that displays the area of the page that contains both the current comments
- * and the comment form.
+ * and the comment form. This can be deleted from TT1 Blocks once this Gutenberg issue has been resolved:
+ * https://github.com/WordPress/gutenberg/issues/28045
  *
  * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
  *