Make WordPress Core

Opened 16 months ago

Last modified 8 days ago

#57542 new defect (bug)

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

Reported by: patelhitesh's profile patelhitesh Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.5
Component: Bundled Theme Keywords: has-screenshots has-patch 2nd-opinion
Focuses: css Cc:

Description

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.

Attachments (4)

CleanShot 2023-01-24 at 16.44.33@2x.png (108.1 KB) - added by patelhitesh 16 months ago.
Label text alignment issue in comment form
57542.patch (1004 bytes) - added by sabernhardt 15 months ago.
copying part of wp-block-comments styles
2022-logged-in-with-patch.png (10.5 KB) - added by sabernhardt 15 months ago.
2022-logged-out-with-patch.png (17.1 KB) - added by sabernhardt 15 months ago.

Download all attachments as: .zip

Change History (10)

@patelhitesh
16 months ago

Label text alignment issue in comment form

#1 @patelhitesh
16 months ago

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

label { vertical-align: top; }

#2 @sabernhardt
16 months ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Label text alignment issue in comment form to Twenty Twenty-Two: Label text alignment issue in comment form

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.

#3 @sabernhardt
16 months ago

  • Keywords needs-design-feedback removed

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 when 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 -->.

Version 0, edited 16 months ago by sabernhardt (next)

#4 @poena
15 months ago

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
15 months ago

copying part of wp-block-comments styles

#5 @sabernhardt
15 months ago

  • Keywords has-patch added; needs-patch removed

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.

#6 @makdiahussain
8 days ago

  • Keywords 2nd-opinion added
  • Version set to 6.5

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;
}

Note: See TracTickets for help on using tickets.