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.


git-svn-id: https://develop.svn.wordpress.org/trunk@52993 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jb Audras 2022-03-25 21:18:45 +00:00
parent 31a155c91f
commit 6263175b8d
4 changed files with 18 additions and 4 deletions

View File

@ -61,7 +61,7 @@ $discussion = twentynineteen_get_discussion_data();
get_template_part( 'template-parts/post/discussion', 'meta' );
}
?>
</div><!-- .comments-title-flex -->
</div><!-- .comments-title-wrap -->
<?php
if ( have_comments() ) :
@ -101,10 +101,9 @@ $discussion = twentynineteen_get_discussion_data();
// Show comment form at bottom if showing newest comments at the bottom.
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
endif;

View File

@ -114,6 +114,11 @@
}
}
.comment-form-wrapper,
.comment-form-wrapper .comments-title {
display: block;
}
.comment-list {
list-style: none;
padding: 0;

View File

@ -4693,6 +4693,11 @@ body.page .main-navigation {
display: block;
}
.comment-form-wrapper,
.comment-form-wrapper .comments-title {
display: block;
}
.comment-list {
list-style: none;
padding: 0;

View File

@ -4699,6 +4699,11 @@ body.page .main-navigation {
display: block;
}
.comment-form-wrapper,
.comment-form-wrapper .comments-title {
display: block;
}
.comment-list {
list-style: none;
padding: 0;