Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#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 2 years ago.
"marked *" on a second line
TwentyTwenty-required-message-word-wrap-2.png (13.7 KB) - added by sabernhardt 2 years ago.
the asterisk on its own, on the second line
56397.diff (900 bytes) - added by sabernhardt 2 years ago.
adds display: inline-block to the required fields message
TwentyTwenty-required-message-with-patch.png (13.8 KB) - added by sabernhardt 2 years 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 2 years 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
2 years ago

"marked *" on a second line

@sabernhardt
2 years ago

the asterisk on its own, on the second line

@sabernhardt
2 years ago

adds display: inline-block to the required fields message

@sabernhardt
2 years ago

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

#1 @sabernhardt
2 years ago

  • Keywords has-patch has-screenshots added

@sabernhardt
2 years ago

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

#2 @sabernhardt
2 years 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
2 years 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
2 years 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
2 years 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
2 years ago

  • Keywords has-unit-tests removed

#7 @audrasjb
2 years ago

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

#8 @audrasjb
2 years 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.