Updated comment form layout

css/comment-respond.css

@@ -12,9 +12,18 @@
   font-size: var(--size-body-small);
 }
 
+.comment-respond__notes {
+  font-size: var(--size-body-extra-small);
+  margin-bottom: var(--space-sm);
+}
+
 .comment-respond__item {
   margin-bottom: var(--space-sm);
-  max-width: 360px;
+  max-width: 20rem;
+}
+
+.comment-respond__item--large {
+  max-width: 40rem;
 }
 
 .comment-respond__cancel {
@@ -45,7 +54,6 @@
   color: #fff;
   cursor: pointer;
   font-family: var(--heading-font-family);
-  min-width: 100px;
   padding: var(--space-xs);
 }
 
@@ -59,3 +67,11 @@
 .comment-respond__cancel a:hover {
   box-shadow: var(--link-focus);
 }
+
+.comment-respond__checkbox {
+  margin-right: var(--space-sm);
+}
+
+.comment-respond__checkbox-label {
+  font-size: var(--size-body-extra-small);
+}

theme/comments.php

@@ -4,7 +4,7 @@ require get_template_directory() . '/classes/walker.comments.php';
 $form_settings = array(
   class_form => 'comment-respond__form',
   class_submit => 'comment-respond__submit',
-  comment_field => '<div class="comment-respond__item"><label class="comment-respond__label" for="comment">Comment</label><textarea class="comment-respond__input" id="comment" name="comment" cols="25" rows="8" aria-required="true"></textarea></div>',
+  comment_field => '<div class="comment-respond__item comment-respond__item--large"><label class="comment-respond__label" for="comment">Comment</label><textarea class="comment-respond__input" id="comment" name="comment" cols="25" rows="8" aria-required="true"></textarea></div>',
   logged_in_as => '<p class="comment-respond__text">' . sprintf( __( 'Logged in as <a class="link" href="%1$s">%2$s</a>. <a class="link" href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>',
   title_reply_before => '<h3 id="reply-title" class="comment-respond__title">',
   title_reply => '<span class="comment-respond__title-text">Reply</span>',
@@ -15,6 +15,7 @@ $form_settings = array(
     author => '<div class="comment-respond__item"><label class="comment-respond__label" for="author">' . __( 'Name', 'domainreference' ) . ( $req ? '<span class="comment-respond__required">*</span>' : '' ) . '</label>' . '<input class="comment-respond__input" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
     email => '<div class="comment-respond__item"><label class="comment-respond__label" for="email">' . __( 'Email', 'domainreference' ) . ( $req ? '<span class="comment-respond__required">*</span>' : '' ) . '</label>' . '<input class="comment-respond__input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>',
     url => '<div class="comment-respond__item"><label class="comment-respond__label" for="url">' . __( 'Website', 'domainreference' ) . '</label>' . '<input class="comment-respond__input" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>',
+    cookies => '<div class="comment-respond__item comment-respond__item--large"><input class="comment-respond__checkbox" id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"/><label class="comment-respond__checkbox-label" for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></div>',
   ),
 );
 ?>