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):

Fixes horizontal scroll/overflow in Twenty Twenty-One caused by a user's Biographical Info containing one long unbroken string of characters (no spaces).

The bio text is displayed on:

• Single post pages, via .author-description (assets/sass/06-components/entry.scss)
• Author archive pages, via .archive-description (assets/sass/06-components/archives.scss)

Neither selector currently breaks on long words, so an unbroken string forces its container wider than the viewport instead of wrapping, producing horizontal scroll.

This PR adds word-wrap: break-word; to both selectors, matching the convention this theme already uses for other body text.

Compiled style.css / style-rtl.css and the source map were regenerated from the updated SCSS.

Trac ticket: https://core.trac.wordpress.org/ticket/59746

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Sonnet 5
Used for: Code Review

[arkaprabhachowdhury]

Test result: long unbroken author biography wraps correctly on the Twenty Twenty-One author archive at 430 × 900.

[arkaprabhachowdhury]

Test result: long unbroken author biography wraps correctly on a Twenty Twenty-One single post at 430 × 900.

[arkaprabhachowdhury]

Test Report

This report validates the patch in ​PR #13279 for the long, unbroken author biography overflow in Twenty Twenty-One.

Environment

• WordPress Playground: core-pr=13279
• WordPress: 7.2-alpha-20260826.105230
• PR head: 408971578c7e6e233c6fbd0f2817117698031ef2
• PHP: 7.4.33
• Theme: Twenty Twenty-One 2.9
• Browser: Playwright Chromium
• Viewport: 430 x 900

Test Steps

1. Opened a fresh Playground instance for ​PR #13279.
2. Activated Twenty Twenty-One.
3. Added a long biography containing no spaces to the admin user profile.
4. Checked the biography on the author archive and default single post.
5. Compared each element/document scrollWidth with clientWidth.
6. Temporarily disabled the patch wrapping rule as a control, repeated the measurement, and restored the rule.

Results

• ✅ Author archive: word-wrap: break-word; element 400 / 400 px; document 430 / 430 px. No overflow.
• ✅ Single post: word-wrap: break-word; element 285 / 285 px; document 430 / 430 px. No overflow.
• ✅ Control with wrapping disabled: element 1959 / 285 px; document 2089 / 430 px. The reported issue reproduced.

Widths are shown as scrollWidth / clientWidth.

Patch Review

• The patch targets both selectors confirmed in the ticket history: .author-description and .archive-description.
• The SCSS source and generated style.css, style-rtl.css, and source map are updated together.
• word-wrap: break-word matches an existing Twenty Twenty-One convention.
• The scope correctly remains within Twenty Twenty-One rather than changing the Gutenberg Post Author Biography block.
• GitHub reports 139 passing checks and 0 failures for the tested PR head.

Supplemental Artifacts

• ticket-59746-author-archive-mobile.png
• ticket-59746-single-post-author-bio.png

Conclusion

The patch works as intended on both affected Twenty Twenty-One views. The long biography wraps inside its container and no horizontal document scroll is introduced. No review blockers found.