Twenty Twenty-Two and Twenty Twenty-Five: <pre> tag overflows container, causing horizontal scroll

[pateljaymin]

When viewing the Twenty Twenty-Five theme details and preview in the WordPress admin (Appearance → Add New → [Select Twenty Twenty-Five]), the <pre> element does not respect the container’s maximum width, causing horizontal scrolling.

Screen Size: 1920 x 1080
Wordpress Version: 6.8.2
Theme Version: 1.3

Video Link: ​https://tinyurl.com/2cnnmloa

[jaiminp]

@pateljaymin Please add the CSS below in the <pre> tag

white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;

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

### Steps to Produce:

1. Log in to the WordPress admin dashboard.
2. Navigate to Appearance > Add New to add a new theme.
3. In the theme directory, locate and select the "Twenty Twenty-Five" theme.
4. Click to view the theme details and preview modal window.
5. Observe the <pre> HTML tag content inside the preview modal.
6. Notice that the <pre> tag does not respect the container’s width.

Before:

After:

[sabernhardt]

The pre element overflow can happen with all four of the core block themes.

The preformatted blocks define white-space: pre-wrap on one of their elements:

• .wp-block-preformatted
• .wp-block-code code
• pre.wp-block-verse

For at least Twenty Twenty-Two and Twenty Twenty-Five, the CSS could make the overflow scroll for any other pre elements, only when necessary:

:where(pre) {
	overflow-x: auto;
}

Steps to reproduce in Theme Preview:

1. Go to Appearance → Themes.
2. Click the Add Theme link.
3. Click the Details & Preview link (thumbnail image) for Twenty Twenty-Five or another block theme. You might need to activate the theme too.
4. Find the Elements post within the preview frame. With Twenty Twenty-Five, the full post content is on the front page. Other themes could require accessing the post.
5. Find the preformatted text (<pre> element without a block), and notice that the text extends beyond the screen with a horizontal scrollbar at the bottom. If the page does not have a bottom scrollbar, try resizing the window to about 1,000 pixels wide.

Steps to reproduce in any post:

1. Create a new post.
2. Add a Classic block (or use the Classic Editor plugin).
3. Select "Preformatted" instead of "Paragraph" in the dropdown.
4. Paste a long line of text, and click Save.
5. Preview the post (or publish and view it). If the page does not have a horizontal scrollbar at the bottom, try resizing the window to a narrower width.

[nikunj8866]

@sabernhardt Thank you for the detailed explanation.

Following your guidance, I have applied the CSS fix to both Twenty Twenty-Two and Twenty Twenty-Five themes.

I have tested these changes using the steps to reproduce both in the Theme Preview and in individual posts.

[sabernhardt]

Adding to the stylesheet is probably best for Twenty Twenty-Two and Twenty Twenty-Five (PR 9593).

For the other two themes, I tried ​adding the CSS to global styles, but that idea would need more discussion.

[joedolson]

The process for making those changes for the themes without stylesheets is a bit more complicated; so let's keep this ticket focused on the themes that will have changes in the core repository.

Further changes in global styles should be handled upstream in the Gutenberg repository; @sabernhardt will open an issue to address that.

[sabernhardt]

The Gutenberg issue can address any possible changes to global styles.
​https://github.com/WordPress/gutenberg/issues/71585

[rollybueno]

This also happens on page, using code editor:

<pre>
System Log - Example Output
---------------------------

[2025-10-09 10:15:42] INFO:  Application started
[2025-10-09 10:15:43] DEBUG: Loading configuration file
[2025-10-09 10:15:44] WARN:  Deprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detectedDeprecated function detected
[2025-10-09 10:15:45] ERROR: Unable to connect to database
[2025-10-09 10:15:47] INFO:  Retrying connection...
[2025-10-09 10:15:49] INFO:  Connected successfully

Directory Structure:
--------------------
/var/www/html/
    index.php
    wp-config.php
    /wp-content/
        /themes/
            /my-theme/
                style.css
                functions.php
        /plugins/
            hello.php
            akismet.php

Code Snippet:
-------------
function sayHello($name) {
    echo "Hello, " . $name . "!";
}

sayHello("Rolly");

---------------------------------------------------
End of Preformatted Example
</pre>

Result:

[rollybueno]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/9593

Environment

• WordPress: 6.8.3
• PHP: 8.2.27
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
• Browser: Chrome 140.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• I don't see the Details/Preview on themes hover on my end, not sure why, but the same patch fixed the direct usage of <pre>, so I guess it should also fix the theme preview.

Supplemental Artifacts

Before:
https://core.trac.wordpress.org/ticket/63875#comment:12

After:

[joedolson]

The preview just renders the theme, so I don't think the fact that this occurs in the preview is actually a different problem, and doesn't need to be worried about.

I double-checked Twenty Twenty Five and also tested Twenty Twenty Two, and this is good to go. Marking for commit.

[joedolson]

In 60921:

Bundled Themes: Prevent pre from overflowing container.

Update CSS to set overflow-x: auto on pre elements in Twenty Twenty Two and Twenty Twenty Five.

Props pateljaymin, jaiminp, nikunj8866, sabernhardt, rollybueno, joedolson.
Fixes #63875.