The Preformatted block text is overlapping in some of the wordpress theme.

[viralsampat-multidots]

Description

Hello Team,

I have checked "Preformatted" block and found that its text is overlapping when we change its letter spacing and set its border into the below-mentioned themes.

• Twenty Twenty-Three Version: 1.6
• Twenty Twenty-Four Version: 1.3
• Twenty Twenty-Five Version: 1.2

I think that it should be fix. For better understanding here I have attached its issue video:

Thanks,

Step-by-step reproduction instructions

• Select preformatted block.
• Add any text to preformatted block
• Set its border from block settings.
• Change letter spacing from "Typography" settings
• Change its decoration to either "underline" or "Strikethrough" from typography settings.
• Save all the changes and view the page.

Screenshots, screen recording, code snippet

Issue video:

preformatted-issue.mp4

Environment info

• WordPress version: WordPress 6.8.1 running
• Browser: Google Chrome, Version 136.0.7103.93 (Official Build) (arm64)
• Device:** MacBook Air M1
• OS: macOS 15.4.1 (24E263)
• Gutenberg plugin: Version Version Version 20.8.0
• Themes:
  • Twenty Twenty-Three Version: 1.6
  • Twenty Twenty-Four Version: 1.3
  • Twenty Twenty-Five Version: 1.2

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

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

[Andrew-Starr]

I can recreate the issue with the Preformatted block in Chrome and Edge browsers.
In Firefox the issue is not present.

For comparison the Paragraph block is ok in all three browsers.

[t-hamano]

This doesn't seem to be a problem with the WordPress theme or the Preformatted block, but rather a problem with the HTML/CSS itself, or perhaps a specification of the HTML/CSS. It seems that a monospace font is causing this overflow.

See the screenshot below:

Code:

<p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

.box {
  width: 400px;
  box-sizing: border-box;
  white-space: pre-wrap;
  border: 1px solid;
  text-decoration: underline;
  letter-spacing: 10px;
}
.box + .box {
  font-family: monospace;
}

This is not a problem that can be solved by WordPress, so let's close this issue.

Feel free to comment if I've missed something.