Changeset 52993

Timestamp:

03/25/2022 09:18:45 PM (3 years ago)

Author:

audrasjb

Message:

Twenty Nineteen: Override flex order in comment form.

This change updates Twenty Nineteen bundled theme to fix the DOM order in the comment form, and to add a new .comment-form-wrapper class to change flex display to block for this specific area.

Props garrett-eclipse, audrasjb, sabernhardt.
Fixes #46600.

Location:

trunk/src/wp-content/themes/twentynineteen

Files:

• comments.php (modified) (2 diffs)
• sass/site/primary/_comments.scss (modified) (1 diff)
• style-rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentynineteen/comments.php

@@ -62 +62 @@
         }
         ?>
-    </div><!-- .comments-title-flex -->
+    </div><!-- .comments-title-wrap -->
     <?php
     if ( have_comments() ) :
@@ -102 +102 @@
         if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
             ?>
-            <div class="comment-form-flex">
-                <span class="screen-reader-text"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></span>
+            <div class="comment-form-flex comment-form-wrapper">
+                <h2 class="comments-title"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
                 <?php twentynineteen_comment_form( 'asc' ); ?>
-                <h2 class="comments-title" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
             </div>
             <?php

trunk/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

@@ -113 +113 @@
         }
     }
+}
+
+.comment-form-wrapper,
+.comment-form-wrapper .comments-title {
+    display: block;
 }
 

trunk/src/wp-content/themes/twentynineteen/style-rtl.css

@@ -4694 +4694 @@
 }
 
+.comment-form-wrapper,
+.comment-form-wrapper .comments-title {
+  display: block;
+}
+
 .comment-list {
   list-style: none;

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

@@ -4700 +4700 @@
 }
 
+.comment-form-wrapper,
+.comment-form-wrapper .comments-title {
+  display: block;
+}
+
 .comment-list {
   list-style: none;