![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 8 months ago
Last modified 3 months ago
#64300 new defect (bug)
Twenty Twenty-Four and Twenty Twenty-Five: Long links overflow content area
| Reported by: | cagrimmett | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | Future Release |
| Component: | Bundled Theme | Version: | |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: | css |
Description (last modified by )
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:
Change History (9)
#3
follow-up:
↓ 5
@
8 months ago
@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?
#4
@
8 months ago
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.
#5
in reply to: ↑ 3
@
8 months ago
- Component Themes → Bundled Theme
- Description modified (diff)
- Version trunk
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.
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.
#6
@
4 months ago
- Milestone 7.0 → Future Release
Moving out of the milestone because this has no patch.
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
4 months ago
This ticket was mentioned in PR #11654 on WordPress/wordpress-develop by @yashjawale.
3 months ago
#8
- Keywords has-patch added; needs-patch removed
Trac ticket: https://core.trac.wordpress.org/ticket/64300
## Summary
This patch fixes styling of links in TT4 and TT5 so that very long links don't overflow horizontally.
## Testing instructions
- Create a new post and add a long link as content
- Switch to TT4 / TT5 theme & check the published post on frontend for horizontal overflow on links
- Apply the patch
- Reload the post frontend page
- Verify that the links don't overflow
## Use of AI Tools
Not used
#9
@
3 months ago
Hey!
I've attached a PR with the according to suggestions in this ticket with the changes.
For twentytwentyfour, as its theme.json uses an older manifest version which doesn't appear to allow css key for elements, I've added the overflow CSS to its global styles key instead.
If it'll be preferred to modify CSS files instead, let me know!
Before the change
After the change
TIA.
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.