Twenty Twenty-One: Adding User Biographical Info without space breaks the container and adds horizontal scroll

[mihirdev21]

I found one issue in User Biographical Info module.
Whenever I am adding bio without spacing, it breaks the container and adds horizontal scroll !

• Environment: fresh WordPress with no additional plugins
• Theme: Twenty Twenty-One ( 1.9 )
• Screen recording: ​https://screenrec.com/share/H6zALe1fXd

[mihirdev21]

Hello guys just to let you know...this issue is also reproduceable in WordPress 6.4 - beta2

• Screenshots: ​https://screenrec.com/share/qZYenwaorS , ​https://screenrec.com/share/v7mrqWui5k

[Presskopp]

easy fix:

.wp-block-post-author-biography {
    word-wrap: break-word;
}

[sabernhardt]

extra-long word in the author biography paragraph with Twenty Twenty-One, causing horizontal scroll

[sabernhardt]

Does this relate to the author biography paragraph on the front end? The ticket mentions Twenty Twenty-One, and the screen recordings are not available anymore. If the theme needs to break words, the ​bio styles could include either word-wrap or overflow-wrap (the theme uses overflow-wrap for .entry-title and word-wrap for other content).

If the Post Author Biography block should break words for block themes, that would belong on the Gutenberg repository (​Post Author Biography issues and ​block stylesheet).

[iamadisingh]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

• I have added this dummy text into users Biographical Info: Thisisaverylongstringofwordswithoutanyspacesorbreaksitjustkeepsgoingandgoingandwillcausehorizontalscrollingissuesbecausetherearenowordbreak.

Supplemental Artifacts

Screen recording: ​https://files.catbox.moe/sg4gd6.mov

[iamadisingh]

It looks like this issue is specific to the Post Author Biography block, which is part of the Gutenberg and this issue should be opened there also.

[zluck]

before fix

[zluck]

after fix

[zluck]

This patch adds a targeted CSS rule for .wp-block-post-author-biography in Twenty Twenty-Five to prevent overflow when the author bio contains a long unbroken string.

Changes

• Added assets/css/author-bio-wrap.css with overflow-wrap: anywhere and word-break: break-word rules.
• Enqueued it specifically for the core/post-author-biography block using wp_enqueue_block_style in functions.php, with both src and path for performance inlining.

Testing

• Reproduced on a fresh WP 6.8.1 and trunk install with Twenty Twenty-Five active.
• Steps: Add a long (300+ char) string without spaces in the Biographical Info field, view on a single post with Post Author Biography block.
• Before: Biography text overflows horizontally, breaking layout.
• After: Text wraps inside the container, no horizontal scroll.

Tested in Chrome 138, Firefox 128, and Edge 127 on Windows 11, plus Chrome 138 on macOS 14.

Attachments

• Before and after screenshots.
• Patch file 59746.diff.

Ready for testing and feedback.

[zluck]

patch file

[huzaifaalmesbah]

Thanks for the investigation and patch, @zluck. your patch 59746.diff​

I’d like to clarify a few points based on the original report and current status:

• The issue was originally reported and reproduced on Theme: Twenty Twenty-One, while most recent testing and the proposed fix target Twenty Twenty-Five. This makes it unclear whether the root problem is theme-specific or block-level, and whether Twenty Twenty-One is still affected or addressed.

• The patch references assets/css/author-bio-wrap.css, but this file doesn’t exist in the older core codebase, so it’s not clear how or where it’s being added.

• Because of this, the patch doesn’t seem ready for proper testing yet.

I think reporter-feedback is still needed. and removing the has-patch and needs-testing keywords based on the current state of ticket.

[sabernhardt]

overflow on author archive page

[sabernhardt]

This ticket can focus on Twenty Twenty-One. Any changes involving the Post Author Biography block belong on GitHub: ​GB70849.

I shared a screenshot earlier with the single posts template (.author-description):

The overflow can also occur on author archive pages (.archive-description):