Make WordPress Core

Opened 19 months ago

Last modified 19 months ago

#56341 new defect (bug)

Twenty Twenty-Two: Long text strings cause horizontal overflow

Reported by: mrfoxtalbot's profile mrfoxtalbot Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-patch
Focuses: css Cc:

Description

When viewed on narrow viewports, long strings will overflow outside the main content area.

Older bundled themes would default to word-break: break-all to avoid this and I believe that Twenty Twenty-Two should also work this way by "pushing" long strings into multiple lines.

The code below can be used as a temporary workaround.

.wp-site-blocks * {
   word-break: break-all;
}

Attachments (3)

long links in Twenty Twenty-Two.png (117.2 KB) - added by mrfoxtalbot 19 months ago.
long links in Twenty Twenty-One.png (134.1 KB) - added by mrfoxtalbot 19 months ago.
56341.diff (490 bytes) - added by tahmidulkarim 19 months ago.
Patch created.

Download all attachments as: .zip

Change History (7)

#1 @sabernhardt
19 months ago

  • Focuses css added
  • Summary changed from [Twenty Twenty-Two] Long text strings cause horizontal overflow to Twenty Twenty-Two: Long text strings cause horizontal overflow

Breaking text in every element by default, with the universal * selector, has caused an issue with trying to use CSS grid in Twenty Twenty (#48637).

It might be worth putting the style on the site container, though (using word-wrap—see ticket:37617#comment:7):

.wp-site-blocks {
   word-wrap: break-word;
}

(The example given on the other ticket would still need editing, but only on its container element.)


Some blocks already wrap text for any theme:

  • The Navigation block item labels have overflow-wrap: break-word.
  • The Embed block container also has overflow-wrap: break-word (if your link had been inside the embed caption, it would have wrapped).
  • Button block links use word-break: break-word.
  • The Post Title block also has word-break: break-word.

Older bundled themes would default to word-break: break-all to avoid this

I only found two cases of break-all in the 12 bundled themes: table cells in Twenty Nineteen and Twenty Twenty's mobile menu toggle button text. However, break-word is far more common.

#2 @tahmidulkarim
19 months ago

Adding word-wrap: break-word; in .wp-site-blocks solves the issue. overflow-wrap: break-word can also be used instead of word-wrap but for better cross-browser support I guess it would be wise to use word-wrap.

Also the CSS property can be added directly to the existing styles, see this screenshot - https://prnt.sc/c_6yhnRfbKhH, but as there are some other classes added so it might create side effects. Thus, my thoughts are as per @sabernhardt to add the style separately within .wp-site-blocks. I have added patch with the fix.

@tahmidulkarim
19 months ago

Patch created.

#3 @tahmidulkarim
19 months ago

  • Keywords has-patch added; needs-patch removed

#4 @mrfoxtalbot
19 months ago

Thank you for looking into this @tahmidulkarim & @sabernhardt.

The solution I put forward was just a first attempt and very likely imprecise or partial. For context, this problem came up originally in this support thread: https://wordpress.org/support/topic/naked-links-in-content-area-not-responsive-on-mobile-thus-causing-overflowing/.

Last edited 19 months ago by mrfoxtalbot (previous) (diff)
Note: See TracTickets for help on using tickets.