Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coderGtm wants to merge 15 commits into
base: trunk
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9a1a576
feat: restore code
coderGtm Jun 10, 2025
95ebc0d
feat: clarify label & add help text with link
coderGtm Jun 17, 2025
7a0e65c
i18n: remove en-US preset from doc link
coderGtm Jun 17, 2025
87d4657
Merge branch 'WordPress:trunk' into trunk
coderGtm Jun 20, 2025
3c8418a
Merge branch 'WordPress:trunk' into fix/link-rel-text
coderGtm Jun 20, 2025
df5efda
Merge remote-tracking branch 'upstream/trunk' into trunk
coderGtm Sep 1, 2025
0047bd8
Merge branch 'trunk' into fix/link-rel-text
coderGtm Sep 1, 2025
6288f0e
Merge branch 'WordPress:trunk' into fix/link-rel-text
coderGtm Sep 1, 2025
6d46aee
Merge branch 'fix/link-rel-text' of https://github.com/coderGtm/guten…
coderGtm Sep 1, 2025
9c17788
fix: replace span with react fragment
coderGtm Sep 1, 2025
fcf900b
fix: remove unrelated changes
coderGtm Sep 5, 2025
632d5e0
fix: branching issues
coderGtm Sep 5, 2025
543017d
fix: remove unrelated changes
coderGtm Sep 5, 2025
39dd94a
fix: optimize break-spaces support check
coderGtm Sep 15, 2025
acc1937
fix: remove unnecessary comments for break-spaces support
coderGtm Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/block-library/src/code/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';

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' );
Comment on lines +8 to +13
Copy link
Member

@Mamaduka Mamaduka Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@coderGtm coderGtm Sep 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@Mamaduka Mamaduka Sep 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?


export default function CodeEdit( {
attributes,
setAttributes,
Expand All @@ -13,6 +20,9 @@ export default function CodeEdit( {
mergeBlocks,
} ) {
const blockProps = useBlockProps();

const whiteSpaceStyle = SUPPORTS_BREAK_SPACES ? 'break-spaces' : 'pre-wrap';

return (
<pre { ...blockProps }>
<RichText
Expand All @@ -29,6 +39,7 @@ export default function CodeEdit( {
__unstableOnSplitAtDoubleLineEnd={ () =>
insertBlocksAfter( createBlock( getDefaultBlockName() ) )
}
style={ { whiteSpace: whiteSpaceStyle } }
/>
</pre>
);
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/code/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,9 @@
direction: ltr;
text-align: initial;
/*!rtl:end:ignore*/

@supports (white-space: break-spaces) {
white-space: break-spaces;
}
}
}
Loading