Make WordPress Core

Opened 10 months ago

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

"marked *" on a second line

@sabernhardt
10 months ago

the asterisk on its own, on the second line

@sabernhardt
10 months ago

adds display: inline-block to the required fields message

@sabernhardt
10 months ago

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

#1 @sabernhardt
10 months ago

  • Keywords has-patch has-screenshots added

@sabernhardt
10 months ago

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

#2 @sabernhardt
10 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
10 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
10 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
10 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
9 months ago

  • Keywords has-unit-tests removed

#7 @audrasjb
9 months ago

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

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