Twenty Twenty-Four and Twenty Twenty-Five: Long links overflow content area

[cagrimmett]

In the Twenty Twenty-Four and Twenty Twenty-Five themes, long links overflow their content area containers, and if long enough, results in a horizontal scroll bar.

In my testing, this can be fixed by adding an overflow-wrap: break-word; and word-wrap: break-word; (for older browsers) to links.

For TT5, this would go on line 685 of theme.json

"css": "& { overflow-wrap: break-word; word-wrap: break-word; }"

For TT4, it would go on line 894 of theme.json

See attached screenshots for how long links look in content now and how they look with the suggested fix applied.

Now:

With suggested fix:

[wildworks]

Related: #56341

To be precise, this issue isn't a problem with links. It occurs when there is long text without word separators.

This issue can be reproduced in all default block themes: Twenty Twenty Two, Twenty Twenty Three, Twenty Twenty Four, and Twenty Twenty Five. Rather than fixing it for each theme, we might want to add the text wrapping option to the global styles. See ​https://github.com/WordPress/gutenberg/issues/55190 for more details.

[cagrimmett]

@wildworks The thought behind changing it in the theme and restricting it to only links is that links are most likely to be the problem (most likely to be long, unbroken strings in content) and restricting it to links fixes that problem without causing unintended consequences.

Might setting that globally produce unintended consequences?

[wildworks]

Might setting that globally produce unintended consequences?

It's probably fine, but the default block themes have avoided adding custom CSS whenever possible. I think that's the design goal of block themes.

However, at the moment there seems to be no solution other than adding CSS, so it may be a good idea to add CSS until the global styles are strengthened.

[sabernhardt]

links are most likely to be the problem (most likely to be long, unbroken strings in content)

#56341 also gives long, linked URLs as an example, but link text should be kept concise and should avoid including full URLs. Seeing the text break the entire page might help encourage authors to write better link text.

• ​Master the Art of Accessible Link Text
• ​Web Accessibility Basics: Links

The example articles listed in the image have titles that would fit well for link text, and URL parts such as access tokens and UTM parameters ideally would never be visible on screen or spoken.

---

If we change the four individual themes' CSS, T22 and T25 have their own CSS files, and #63875 already adjusted those for pre element overflow.