Fix overflow of Highlighted white-space in Code Block #70301

coderGtm · 2025-06-03T12:33:09Z

What?

Fixes the highlight issue for the frontend but does not seem to be working for editor.

Why?

Currently, when text within a code block is highlighted and includes extra white space, it can overflow beyond the code box, which is not ideal. While this issue is uncommon, it negatively affects the overall UI experience when it does happen.

How?

Changed the white-space property to break-spaces in the style.scss file.

Testing Instructions

Create a new Post
Insert a code block with extra white-spaces at the end of 1 line.
Highlight the code's background from the Block Controls Toolbar.
Verify that the highlight does not overflow the code block in the frontend.

Screenshots

Before	After

Note

While this solves the issue on the frontend, it is still not solved in the editor. Despite applying the css in style.css, it is overiden by inline styles of the Code block that adds white-space: pre-wrap; min-width: 1px; to the element:

While I am searching the source of this inline style, any guidance would be helpful.

Thanks

github-actions · 2025-06-03T12:33:49Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @coderGtm! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

github-actions · 2025-06-03T13:48:33Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: coderGtm <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: yyppsk <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: Rishit30G <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

coderGtm · 2025-06-03T17:12:36Z

Added !important to the attribute value to fix the editor style.

Since the Code Block internally uses the RichText Component, it has stylings of RichText applied. And the RichText uses some default styles which are defined here. These styles are applied as inline styles and take precedence over the Code Block's style.scss and hence, added the !important rule to fix it.

Another option would be to change the value of whiteSpace to break-spaces here in the default styles but I don't know how other components would be affected in that case.

Before	After

fabiankaegy · 2025-06-05T08:21:38Z

packages/block-library/src/code/style.scss

 		font-family: inherit;
 		overflow-wrap: break-word;
-		white-space: pre-wrap;
+		white-space: break-spaces !important;


I'd recommend leave the pre-wrap as a fallback and move the break-spaces into an @supports query since the property is still newer.

fabiankaegy

Thanks for the quick followup :)

After thinking about it for a bit more I have one additional request. We really should avoid using !important wherever we can. I know you explained why you had to use it here and it does make sense. But I think there is an alternative we could use here.

Let's remove the !important from the main stylesheet and then add a separate editor only stylesheet in which we can use a more specific css selector which then can override the property without the usage of !important.

This also ensures that the specificity on the frontend remains as low as possible to 3rd parties can override it easily :)

coderGtm · 2025-06-05T13:49:19Z

Hi. I understand your pov about avoiding !important as much as possible but even an editor style wont take precedence here as the pre-wrap style is added inline as I mentioned earlier.

Another solution I found right now, is to give Inline style to the Code Block after the initial Inline styles by Rich Text are applied. This will not require !important and also solves the issue.

yyppsk · 2025-06-14T17:04:27Z

Hi @coderGtm ,

I’ve tested this PR on the frontend and block editor and can confirm the highlight no longer overflows the code block as intended.

Environment

OS: macOS Air (M3)
Browsers: Chrome, Safari, Firefox

Steps to Reproduce

Create a new post.
Insert a code block and add extra whitespace at the end of one line.
Apply a background highlight via the Block Controls toolbar.

Expected Result
The highlighted background should stop at the code block’s edge—even when trailing whitespace is present.

Actual Result
Frontend: No overflow—highlight respects the block boundary in all tested browsers.
Block Editor: Works perfectly fine—no overflow there either.

Screenshots

Before	After

Block editor

cc: @fabiankaegy

coderGtm · 2025-06-18T06:55:40Z

Hi @fabiankaegy

Did you get a chance to review the changes? Is there anything else expected that I am missing?

Thanks

coderGtm · 2025-07-01T14:05:47Z

Just a ping letting reviewers know that all tests are now passing.

cc: @fabiankaegy

…berg into fix/link-rel-text

packages/block-library/src/code/edit.js

Mamaduka

@coderGtm, I just noticed that you've pushed changes on your fork's trunk`, which makes it harder to test locally.

You should always use feature/fix branches for the PRs. Do you mind extracting this?

Mamaduka · 2025-09-16T14:04:40Z

packages/block-library/src/code/edit.js

+const SUPPORTS_BREAK_SPACES =
+	typeof CSS !== 'undefined' &&
+	// eslint-disable-next-line no-undef
+	CSS.supports &&
+	// eslint-disable-next-line no-undef
+	CSS.supports( 'white-space', 'break-spaces' );


I think we can simplify this with optional chaining - !! CSS?.supports?.( 'white-space', 'break-spaces' );

It think it is safer as the suggested expression will short-circuit and return undefined if either CSS or CSS.supports is not defined.

The suggested expression will always return a Boolean, because of the !! operator.

if either CSS or CSS.supports is not defined.

Then SUPPORTS_BREAK_SPACES should be false, this is what we want, no?

Mamaduka · 2025-09-16T14:05:50Z

packages/block-library/src/code/edit.js

+	/**
+	 * If the browser supports 'break-spaces', we can use it for better
+	 * handling of whitespace in code blocks. Otherwise, we fall back to
+	 * 'pre-wrap', which is more widely supported.
+	 *
+	 * @constant
+	 * @type {string}
+	 */
+	const whiteSpaceStyle = SUPPORTS_BREAK_SPACES ? 'break-spaces' : 'pre-wrap';


Do we need a comment for this line? It just described what the code is doing, which is already visible.

I added it as a standard coding practice but yeah understandable as it's not needed really. Removed it.

coderGtm · 2025-09-16T17:18:44Z

@Mamaduka
Yes I know that's a big pain to test locally and a bad practice. This was my first PR in WordPress and in excitement I forgot to take it to a new branch and raised the PR. I also have a tough time managing the fork for other PRs due to it.

That is one of the reasons I want to get this PR approved and merged so I can safely update my fork's trunk 😅

I'm not sure what you mean by extracting it. Afaik once a PR is raised its branch cannot be changed, right?

jasmussen · 2025-09-18T11:28:01Z

Thanks for the PR. The details of the implementation are well covered by other reviewers, so I'll mostly comment on expectations of the behavior of the codeblock, seeing as this is using an exciting and new to me feature of break-spaces.

Which is to say, the "after" image is what I would also expect as far as the default out-of-box experience, so I think the PR/approach is reasonable. Should we choose differently at some point in the future, a block support could be considered for the code block to toggle this behavior off, if you really wanted the spaces to break out.

Mamaduka · 2025-09-19T07:32:31Z

Thanks for the input, @jasmussen! I agree, let's keep things simple for now.

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 3, 2025

coderGtm marked this pull request as ready for review June 3, 2025 13:48

coderGtm requested review from ajitbohra and fabiankaegy as code owners June 3, 2025 13:48

t-hamano added [Block] Code Affects the Code Block [Type] Bug An existing feature does not function as intended labels Jun 5, 2025

fabiankaegy reviewed Jun 5, 2025

View reviewed changes

fabiankaegy requested changes Jun 5, 2025

View reviewed changes

coderGtm requested a review from fabiankaegy June 9, 2025 11:34

coderGtm closed this Jun 10, 2025

coderGtm force-pushed the trunk branch from 6207ef4 to 22c55f6 Compare June 10, 2025 06:09

feat: restore code

9a1a576

coderGtm reopened this Jun 10, 2025

coderGtm added 2 commits June 17, 2025 12:40

feat: clarify label & add help text with link

95ebc0d

i18n: remove en-US preset from doc link

7a0e65c

coderGtm added 2 commits June 20, 2025 12:52

Merge branch 'WordPress:trunk' into trunk

87d4657

Merge branch 'WordPress:trunk' into fix/link-rel-text

3c8418a

coderGtm and others added 5 commits September 1, 2025 18:22

Merge remote-tracking branch 'upstream/trunk' into trunk

df5efda

Merge branch 'trunk' into fix/link-rel-text

0047bd8

Merge branch 'WordPress:trunk' into fix/link-rel-text

6288f0e

Merge branch 'fix/link-rel-text' of https://github.com/coderGtm/guten…

6d46aee

…berg into fix/link-rel-text

fix: replace span with react fragment

9c17788

coderGtm mentioned this pull request Sep 4, 2025

feat: clarify label & add help text with link #70451

Merged

fix: remove unrelated changes

fcf900b

coderGtm requested a review from ellatrix as a code owner September 5, 2025 08:34

coderGtm added 2 commits September 5, 2025 14:10

fix: branching issues

632d5e0

fix: remove unrelated changes

543017d

Mamaduka reviewed Sep 15, 2025

View reviewed changes

packages/block-library/src/code/edit.js Outdated Show resolved Hide resolved

Mamaduka requested a review from jasmussen September 15, 2025 11:31

Mamaduka removed the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 15, 2025

fix: optimize break-spaces support check

39dd94a

Mamaduka reviewed Sep 16, 2025

View reviewed changes

fix: remove unnecessary comments for break-spaces support

acc1937

Fix overflow of Highlighted white-space in Code Block #70301

Are you sure you want to change the base?

Fix overflow of Highlighted white-space in Code Block #70301

Uh oh!

Conversation

coderGtm commented Jun 3, 2025

What?

Why?

How?

Testing Instructions

Screenshots

Note

Uh oh!

github-actions bot commented Jun 3, 2025

Uh oh!

github-actions bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderGtm commented Jun 3, 2025

Uh oh!

fabiankaegy Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

fabiankaegy left a comment

Choose a reason for hiding this comment

Uh oh!

coderGtm commented Jun 5, 2025

Uh oh!

yyppsk commented Jun 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderGtm commented Jun 18, 2025

Uh oh!

coderGtm commented Jul 1, 2025

Uh oh!

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Mamaduka Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

coderGtm Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Mamaduka Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

Mamaduka Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

coderGtm Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

coderGtm commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jasmussen commented Sep 18, 2025

Uh oh!

Mamaduka commented Sep 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

github-actions bot commented Jun 3, 2025 •

edited

Loading

yyppsk commented Jun 14, 2025 •

edited

Loading

coderGtm commented Sep 16, 2025 •

edited

Loading