Merge branch 'comments'

wp-content/themes/twentynineteen-tailwindcss/comments.php

@@ -0,0 +1,128 @@
+<?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 Twenty_Nineteen
+ * @since 1.0.0
+ */
+
+/*
+ * If the current post is protected by a password and
+ * the visitor has not yet entered the password we will
+ * return early without loading the comments.
+*/
+if ( post_password_required() ) {
+	return;
+}
+
+$discussion = twentynineteen_get_discussion_data();
+?>
+
+<div id="comments" class="max-w-xl <?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">
+	<div class="lg:flex lg:justify-between lg:items-baseline">
+		<h2 class="text-4xl font-bold">
+		<?php
+		if ( comments_open() ) {
+			if ( have_comments() ) {
+				_e( 'Join the Conversation', 'twentynineteen' );
+			} else {
+				_e( 'Leave a comment', 'twentynineteen' );
+			}
+		} else {
+			if ( '1' == $discussion->responses ) {
+				/* translators: %s: post title */
+				printf( _x( 'One reply on &ldquo;%s&rdquo;', 'comments title', 'twentynineteen' ), get_the_title() );
+			} else {
+				printf(
+					/* translators: 1: number of comments, 2: post title */
+					_nx(
+						'%1$s reply on &ldquo;%2$s&rdquo;',
+						'%1$s replies on &ldquo;%2$s&rdquo;',
+						$discussion->responses,
+						'comments title',
+						'twentynineteen'
+					),
+					number_format_i18n( $discussion->responses ),
+					get_the_title()
+				);
+			}
+		}
+		?>
+		</h2><!-- .comments-title -->
+		<?php
+			// Only show discussion meta information when comments are open and available.
+		if ( have_comments() && comments_open() ) {
+			get_template_part( 'template-parts/post/discussion', 'meta' );
+		}
+		?>
+	</div><!-- .comments-title-flex -->
+	<?php
+	if ( have_comments() ) :
+
+		// Show comment form at top if showing newest comments at the top.
+		if ( comments_open() ) {
+			twentynineteen_comment_form( 'desc' );
+		}
+
+		?>
+		<ol class="comment-list">
+			<?php
+			wp_list_comments(
+				array(
+					'walker'      => new TwentyNineteen_Walker_Comment(),
+					'avatar_size' => twentynineteen_get_avatar_size(),
+					'short_ping'  => true,
+					'style'       => 'ol',
+				)
+			);
+			?>
+		</ol><!-- .comment-list -->
+		<?php
+
+		// Show comment navigation
+		if ( have_comments() ) :
+			$prev_icon     = twentynineteen_get_icon_svg( 'chevron_left', 22 );
+			$next_icon     = twentynineteen_get_icon_svg( 'chevron_right', 22 );
+			$comments_text = __( 'Comments', 'twentynineteen' );
+			the_comments_navigation(
+				array(
+					'prev_text' => sprintf( '%s <span class="nav-prev-text"><span class="primary-text">%s</span> <span class="secondary-text">%s</span></span>', $prev_icon, __( 'Previous', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ) ),
+					'next_text' => sprintf( '<span class="nav-next-text"><span class="primary-text">%s</span> <span class="secondary-text">%s</span></span> %s', __( 'Next', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ), $next_icon ),
+				)
+			);
+		endif;
+
+		// Show comment form at bottom if showing newest comments at the bottom.
+		if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
+			?>
+			<div>
+				<span class="screen-reader-text"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></span>
+				<?php twentynineteen_comment_form( 'asc' ); ?>
+				<h2 class="text-3xl font-bold mt-10" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
+			</div>
+			<?php
+		endif;
+
+		// If comments are closed and there are comments, let's leave a little note, shall we?
+		if ( ! comments_open() ) :
+			?>
+			<p class="no-comments">
+				<?php _e( 'Comments are closed.', 'twentynineteen' ); ?>
+			</p>
+			<?php
+		endif;
+
+	else :
+
+		// Show comment form.
+		twentynineteen_comment_form( true );
+
+	endif; // if have_comments();
+	?>
+</div><!-- #comments -->

wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css

@@ -0,0 +1,3 @@
+.avatar {
+  @apply rounded-full;
+}

wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css

@@ -0,0 +1,29 @@
+.comment-form {
+  @apply mt-20;
+
+  > * {
+    @apply mt-4;
+  }
+
+  label {
+    @apply w-full block pb-2;
+    @apply text-sm text-gray-700;
+  }
+
+  input,
+  textarea {
+    @apply w-full p-3 border border-gray-400;
+
+    &:focus {
+      @apply bg-white outline-none border-blue-700;
+    }
+  }
+
+  .form-submit {
+    @apply mt-6;
+  }
+
+  input[type=submit] {
+    @apply w-auto;
+  }
+}

wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css

@@ -0,0 +1,44 @@
+.comment-list .comment,
+.comment-author b.fn {
+  @apply mt-12 pl-24 relative w-full block;
+}
+
+.comment-list {
+  .comment-author .avatar,
+  .comment-author > a.url {
+    @apply absolute top-0 left-0;
+  }
+
+  .comment-author > b.fn {
+    @apply pl-0 text-2xl text-black;
+  }
+  .comment-author > b.fn a {
+    @apply text-inherit;
+  }
+
+  .comment-author img {
+    @apply w-16;
+  }
+
+  .comment-metadata {
+    @apply text-sm text-gray-900;
+  }
+
+  .comment-content {
+    @apply mt-8 text-base;
+  }
+
+  .comment-reply {
+    @apply mt-6 text-sm;
+  }
+}
+
+.post-author-badge {
+  @apply absolute top-0 left-0 ml-10 w-6 h-6;
+  @apply flex items-center;
+  @apply bg-blue-500 rounded-full p-1;
+
+  > svg {
+    @apply fill-current text-white block;
+  }
+}

wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css

@@ -1,3 +1,5 @@
+.markup,
+.comment-content,
 .entry-content {
   @apply font-serif text-lg leading-loose;
 

wp-content/themes/twentynineteen-tailwindcss/src/css/components/discussion-avatar-list.css

@@ -0,0 +1,15 @@
+.discussion-avatar-list {
+    @apply flex;
+}
+
+.discussion-avatar-list li {
+  @apply mb-1;
+
+  &:not(:first-child) {
+    @apply -ml-3;
+  }
+}
+
+.discussion-avatar-list img {
+    @apply rounded-full w-10;
+}

wp-content/themes/twentynineteen-tailwindcss/src/css/style.css

@@ -25,7 +25,11 @@ h2:before {
   @apply absolute opacity-0 pointer-events-none;
 }
 
+@import 'components/avatars.css';
+@import 'components/comment-form.css';
+@import 'components/comment-list.css';
 @import 'components/content.css';
+@import 'components/discussion-avatar-list.css';
 @import 'components/forms.css';
 @import 'components/post.css';
 @import 'components/widgets.css';

wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * The template for displaying Current Discussion on posts
+ *
+ * @package WordPress
+ * @subpackage Twenty_Nineteen
+ * @since 1.0.0
+ */
+
+/* Get data from current discussion on post. */
+$discussion    = twentynineteen_get_discussion_data();
+$has_responses = $discussion->responses > 0;
+
+if ( $has_responses ) {
+	/* translators: %1(X comments)$s */
+	$meta_label = sprintf( _n( '%d Comment', '%d Comments', $discussion->responses, 'twentynineteen' ), $discussion->responses );
+} else {
+	$meta_label = __( 'No comments', 'twentynineteen' );
+}
+?>
+
+<div>
+	<?php
+	if ( $has_responses ) {
+		twentynineteen_discussion_avatars_list( $discussion->authors );
+	}
+	?>
+	<p class="flex items-center text-sm">
+		<?php echo twentynineteen_get_icon_svg( 'comment', 16 ); ?>
+		<span class="ml-2"><?php echo esc_html( $meta_label ); ?></span>
+	</p>
+</div><!-- .discussion-meta -->