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

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

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.

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.

Navigation Menu

Repository navigation

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

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

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

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

Please confirm which theme type you used for testing.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

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

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

Please confirm which theme type you used for testing.

Activity

Andrew-Starr commented on May 16, 2025

t-hamano commented on May 17, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions