Preformatted: Inconsistent behaviour across themes

[shubhtoy]

Description

Currently, the Preformatted Block in Gutenberg does not apply any CSS rules to handle long, unspaced strings (for eg: TestTestTestTestTestTestTestTestTestTestTestTestTestTest). This results in horizontal overflow when long text sequences (e.g., URLs, code snippets, or intentionally long words) are inserted, breaking the layout and exceeding the content area on many themes.

The default styling for the Preformatted block lacks word-break or overflow-wrap properties that would prevent long strings from overflowing their container.

While core themes like Twenty Twenty-One mitigate this issue at the theme level using overflow-x: auto, earlier themes like Twenty Twenty used break-word instead. However, themes following Twenty Twenty-One do not offer any block-specific fix for this edge case, meaning the Preformatted block often breaks layouts unless handled manually.

Step-by-step reproduction instructions

1. Add a Preformatted block to a post or page.
2. Paste a long, unspaced string (e.g., a long URL, hash, or code line).
3. Preview or view the post on front-end.
4. Observe horizontal overflow outside the content area.

Sample String: TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest

Screenshots, screen recording, code snippet

Screenshots from different bundled themes:

1. Twenty Twenty Five

2. Twenty Twenty One

3. Twenty Twenty

Screenshot from proposed fix working on Twenty Twenty Five theme

Environment info

• WordPress: 6.9-alpha-60273
• PHP: 8.2.28
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.4.7-MariaDB-ubu2404 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: macOS
• Plugins:
  • Gutenberg 21.0.0-rc.1

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [x] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure