Twenty Twenty-Two: Label text alignment issue in comment form

[patelhitesh]

In the Twenty Twenty-Two theme, there is a comment form at the end of each post. In this form, label text should be aligned on top so it looks good when the comment box area is big. For more information please check the attached screenshot.

[patelhitesh]

Label text alignment issue in comment form

[patelhitesh]

In the above ticket, to resolve the label text alignment issue please find below CSS:

label { vertical-align: top; }

[sabernhardt]

Hi and thanks for the report!

Twenty Twenty-Three uses the wp-block-post-comments-form stylesheet to make this field stretch to the full width. I would like that in Twenty Twenty-Two.

[sabernhardt]

Never mind about that stylesheet. Twenty Twenty-Two's default Single template uses the legacy Comments block, not Post Comments Form. That block has a similar wp-block-comments stylesheet, which did not seem to activate until after I added a Post Comments Form block to the Single template. The Comments stylesheet still appears since I kept the Comments block and removed the Post Comments Form block. This could be a problem with checking for the existence of a block instead of a theme problem.

Try adding a block to the Single template and saving the template. If the site is public, you could create a Custom HTML block with a comment like <!-- sample block -->.

[poena]

Hi!

In https://core.trac.wordpress.org/ticket/57560, I suggested that the CSS could be in the theme, since the old comments block is deprecated. I think we could do the same for this issue.

[sabernhardt]

copying part of wp-block-comments styles

[sabernhardt]

I copied the styles for labels and input/textarea fields from the ​Comments block styles in case the block styles are not enqueued.

If that is not enough, we might consider enqueuing the full wp-block-comments stylesheet.

[makdiahussain]

I've reviewed the issue regarding the label text alignment in the comment form for the Twenty Twenty-Two theme. After examining I also found that label text within the comment form is not aligned properly when the comment box area is large.

[Screenshot](​https://snipboard.io/lVKXsn.jpg)

So we can replicate the behavior of the wp-block-post-comments-form stylesheet from Twenty Twenty-Three in Twenty Twenty-Two, we can add custom CSS to achieve the desired styling. Here's how we can do it:

/* Custom CSS to stretch the comment form field to full width */
.comment-form {
    display: flex;
    flex-direction: column;
}

.comment-form label {
    margin-bottom: 8px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.comment-form p {
    margin-bottom: 16px;
}

.comment-form .comment-notes,
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
    display: flex;
    flex-wrap: wrap;
}

.comment-form .comment-form-author label,
.comment-form .comment-form-email label,
.comment-form .comment-form-url label,
.comment-form .comment-form-comment label {
    flex: 1 0 100%;
}

.comment-form .comment-form-author input,
.comment-form .comment-form-email input,
.comment-form .comment-form-url input,
.comment-form .comment-form-comment textarea {
    flex: 1 0 100%;
}

.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
    margin-bottom: 16px;
}

[sabernhardt]

#58676 was marked as a duplicate.

[sabernhardt]

See #56496 about (not) fixing the heading level in the legacy block.

With the bigger issue, I would prefer not to try making it look a little better.

[karmatosed]

I agree with the recommendation to close this for now. I am going to move forward with doing that. Thank you everyone for your collaboration on this.