Make WordPress Core

#56397 closed enhancement (fixed)

Twenty Twenty: word wrap in comments required message

Reported by: sabernhardt's profile sabernhardt Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: css Cc:

Description

Because the comments-notes and logged-in-as paragraphs are centered in Twenty Twenty, words can wrap poorly to the next line. With "Edit your profile" as visible text (r53796), wrapping will occur more often.

Attachments (5)

TwentyTwenty-required-message-word-wrap-1.png (13.9 KB) - added by sabernhardt 16 months ago.
"marked *" on a second line
TwentyTwenty-required-message-word-wrap-2.png (13.7 KB) - added by sabernhardt 16 months ago.
the asterisk on its own, on the second line
56397.diff (900 bytes) - added by sabernhardt 16 months ago.
adds display: inline-block to the required fields message
TwentyTwenty-required-message-with-patch.png (13.8 KB) - added by sabernhardt 16 months ago.
patch keeps the full required message on the second line (in English)
TwentyTwenty-required-message-with-patch-French-360px.png (21.0 KB) - added by sabernhardt 16 months ago.
French form at 360 pixels wide (modifying new logged-in-as string within the browser)

Download all attachments as: .zip

Change History (13)

@sabernhardt
16 months ago

"marked *" on a second line

@sabernhardt
16 months ago

the asterisk on its own, on the second line

@sabernhardt
16 months ago

adds display: inline-block to the required fields message

@sabernhardt
16 months ago

patch keeps the full required message on the second line (in English)

#1 @sabernhardt
16 months ago

  • Keywords has-patch has-screenshots added

@sabernhardt
16 months ago

French form at 360 pixels wide (modifying new logged-in-as string within the browser)

#2 @sabernhardt
16 months ago

Setting display to inline-block generally helps, though it still would not display well in all languages at narrower widths (or high zoom).

#3 @audrasjb
16 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Looks good to me at a glance. Self assigning for further review/testing 👀

#4 @mukesh27
16 months ago

  • Keywords commit added

Hi there!

Thanks for the ticket and patch Stephen!

56397.diff Work perfectly as expected and ready to merge. Waiting for JB's final review.

Adding commit keyword.

#5 @nidhidhandhukiya
16 months ago

  • Keywords has-unit-tests added

I have reproduced this issue on WP 6.0.1 and the issue is resolved with the given patch and works fine. Checked this issue on cross browsers as well and it is working well with latest versions of chrome, safari and fire fox.

#6 @audrasjb
15 months ago

  • Keywords has-unit-tests removed

#7 @audrasjb
15 months ago

I tested the patch with several languages and it looks good to me. Thanks @sabernhardt for spotting this.

#8 @audrasjb
15 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 54046:

Twenty Twenty: Improve word wrap in comments required message.

Because .comments-notes and .logged-in-as paragraphs are centered in Twenty Twenty, words were wrapping poorly to the next line, and even more often with "Edit your profile" displayed as visible text (see [53796]). This changeset ensures the required message is displayed on a new line.

Follow-up to [53796].

Props sabernhardt, audrasjb, mukesh27, nidhidhandhukiya.
Fixes #56397.

Note: See TracTickets for help on using tickets.