Rework comments walker

css/comment.css

@@ -1,3 +1,13 @@
+.comment {
+  margin-bottom: var(--space-sm);
+}
+
+@media (--viewport-lg) {
+  .comment {
+    margin-bottom: var(--space-md);
+  }
+}
+
 .comment__head {
   display: flex;
   margin-bottom: var(--space-sm);

css/comments.css

@@ -11,18 +11,12 @@
   margin-bottom: var(--space-sm);
 }
 
-.comments__item {
+.comments__list--sub-list {
-  margin-bottom: var(--space-md);
+  margin-left: var(--space-sm);
 }
 
-.comments__item--depth-1 {
+@media (--viewport-lg) {
-  margin-left: var(--space-md);
+  .comments__list--sub-list {
-}
+    margin-left: var(--space-md);
-
+  }
-.comments__item--depth-2 {
-  margin-left: calc(var(--space-md) * 2);
-}
-
-.comments__item--depth-3 {
-  margin-left: calc(var(--space-md) * 3);
 }

theme/classes/walker.comments.php

@@ -0,0 +1,49 @@
+<?php
+
+class Windycoys_Walker_Comments extends Walker_Comment {
+  function start_lvl(&$output) {
+    $output .= '<ol class="comments__list comments__list--sub-list">';
+  }
+
+  function end_lvl(&$output) {
+    $output .= '</ol>';
+  }
+
+  function start_el(&$output, $comment) {
+    $id = $comment->comment_ID;
+    $post_id = $comment->comment_post_ID;
+    $reply_link = get_permalink($post_id) . '?replytocom='.$id.'#respond';
+    $author_email = $comment->comment_author_email;
+    $author = $comment->comment_author;
+    $avatar = get_avatar($comment, 128);
+    $date = get_comment_date('jS F, Y', $id).' at '.get_comment_date('H:i', $id);
+    $content = $comment->comment_content;
+    $output .= '<li class="comments__item">';
+    $output .= '<div class="comment">';
+    $output .= '<div class="comment__head">';
+    $output .= sprintf('<div class="comment__avatar">%s</div>', $avatar);
+    $output .= '<div class="comment__metadata">';
+    $output .= sprintf('<span class="comment__author">%s</span>', $author);
+    $output .= sprintf('<span class="comment__date">%s</span>', $date);
+    $output .= '</div></div>';
+    $output .= sprintf('<div class="comment__body">%s</div>', $content);
+    $output .= '<div class="comment__foot">';
+    $output .= sprintf('<a class="comment__reply" data-comment-author="%s" ' .
+      'data-comment-id="%s" href="%s">',
+      $author,
+      $id,
+      $reply_link
+    );
+    $output .= '<span class="comment__reply-icon">';
+    $output .= '<svg class="icon icon--extra-small"><use xlink:href="#icon-reply"></use></svg></span>';
+    $output .= '<span class="comment__reply-text">Reply</span></a>';
+    $output .= '<div class="comment__inline-reply"></div>';
+    $output .= '</div></div>';
+  }
+
+  function end_el(&$output) {
+    $output .= '</li>';
+  }
+}
+
+?>

theme/classes/walker.navigation.php

@@ -1,3 +1,5 @@
+<?php
+
 class Windycoys_Walker_Navigation extends Walker_Nav_Menu {
   function start_lvl(&$output, $depth = 0) {
     $output .= '<ul class="nav__list">';
@@ -23,3 +25,4 @@ class Windycoys_Walker_Navigation extends Walker_Nav_Menu {
   }
 }
 
+?>

theme/comments.php

@@ -1,4 +1,6 @@
 <?php
+require get_template_directory() . '/classes/walker.comments.php';
+
 $form_settings = array(
   class_form => 'comment-respond__form',
   class_submit => 'comment-respond__submit',
@@ -35,12 +37,9 @@ $form_settings = array(
   <div class="comments__body">
     <ol class="comments__list">
       <?php
-        wp_list_comments(
+        wp_list_comments(array(
-          array(
+          walker => new Windycoys_Walker_Comments(),
-            'walker' => new Windycoys_Walker_Comment(),
+        ));
-            'style' => 'ol',
-          )
-        );
       ?>
     </ol>
   </div>

theme/functions.php

@@ -1,33 +1,4 @@
 <?php
-class Windycoys_Walker_Comment extends Walker_Comment {
-  function start_el(&$output, $comment, $depth = 0) {
-    $id = $comment->comment_ID;
-    $post_id = $comment->comment_post_ID;
-    $reply_link = get_permalink($post_id) . '?replytocom='.$id.'#respond';
-    $author_email = $comment->comment_author_email;
-    $author = $comment->comment_author;
-    $avatar = get_avatar($comment, 128);
-    $date = get_comment_date('jS F, Y', $id).' at '.get_comment_date('H:i', $id);
-    $content = $comment->comment_content;
-    $comment_depth = $depth > 0 ? ' comments__item--depth-'.$depth : '';
-    $output .= '<li class="comments__item'.$comment_depth.'">';
-    $output .= '<div class="comment">';
-    $output .= '<div class="comment__head">';
-    $output .= '<div class="comment__avatar">'.$avatar.'</div>';
-    $output .= '<div class="comment__metadata">';
-    $output .= '<span class="comment__author">'.$author.'</span>';
-    $output .= '<span class="comment__date">'.$date.'</span>';
-    $output .= '</div></div>';
-    $output .= '<div class="comment__body">'.$content.'</div>';
-    $output .= '<div class="comment__foot">';
-    $output .= '<a class="comment__reply" data-comment-author="'.$author.'" data-comment-id="'.$id.'" href="'.$reply_link.'">';
-    $output .= '<span class="comment__reply-icon">';
-    $output .= '<svg class="icon icon--extra-small"><use xlink:href="#icon-reply"></use></svg></span>';
-    $output .= '<span class="comment__reply-text">Reply</span></a>';
-    $output .= '<div class="comment__inline-reply"></div>';
-    $output .= '</div></div></li>';
-  }
-}
 
 function windycoys_the_tags() {
   $tags = get_the_tags();

theme/partials/navigation.php

@@ -1,4 +1,4 @@
-<?php require '../classes/walker.navigation.php' ?>
+<?php require get_template_directory() . '/classes/walker.navigation.php' ?>
 <nav class="nav<?php echo is_user_logged_in() ? ' logged-in' : '' ?>" aria-label="Main Navigation">
   <button class="menu">
     <span class="menu__line"></span>