[wp-trac] [WordPress Trac] #63875: Block themes: <pre> tag overflows container, causing horizontal scroll (was: <pre> tag overflows container in theme details/preview modal causing horizontal scroll (Twenty Twenty-Five))

[WordPress Trac]

#63875: Block themes: <pre> tag overflows container, causing horizontal scroll
-------------------------------------------------+-------------------------
 Reporter:  pateljaymin                          |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Bundled Theme                        |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch has-test-info 2nd-opinion  |     Focuses:  ui,
  changes-requested                              |  accessibility, css
-------------------------------------------------+-------------------------
Changes (by sabernhardt):

 * keywords:  has-patch needs-test-info => has-patch has-test-info 2nd-
     opinion changes-requested
 * version:  6.8.2 =>
 * component:  General => Bundled Theme


Comment:

 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63875#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform