br tags being added instead of line breaks

[emrikol]

On a recent post, I have this block in the editor:

<!-- wp:code -->
<pre class="wp-block-code"><code>test<br>12<br>34<br>56</code></pre>
<!-- /wp:code -->

Which renders like this when the plugin is enabled:

and like this when the plugin is disabled:

[emrikol]

Oops, hit submit before finished:

Plugin version: 1.4.0
WordPress version: 6.4.1
Gutenberg version: 17.1.3
Twentytwentyfour version: 1.0

It only seems to affect new code blocks, as older ones still render fine:

<!-- wp:code -->
<pre class="wp-block-code"><code>$ average.sh --before=13.07,9.75,16.14,7.71,10.32 --after=1.22,1.28,1.13,1.19,1.26
Before average: 11.40
After average: 1.22
Average percent decreased: 89.30%
</code></pre>
<!-- /wp:code -->

From the looks of the block data, I'm wondering if a Gutenberg update is now adding the <br> tags to the block?

[emrikol]

Switching back to twentytwentythree v1.3 still gives the <br> tags, which leads me to believe it's likely something else, possibly core or gutenberg 🤔

[emrikol]

Alright! Disabling Gutenberg and rebuilding my block seems to have "fixed" it--so this is a Gutenberg change

<!-- wp:code -->
<pre class="wp-block-code"><code># Add Screen name to PS1 if we're in a screen.
if &#91; -n "$STY" ]; then
	PS1="\&#91;\e&#91;1m\](Screen: $STY)\&#91;\e&#91;0m\]\n$PS1"
fi</code></pre>
<!-- /wp:code -->

[emrikol]

I wonder if it's related to WordPress/gutenberg#55999

[westonruter]

Interesting. So the latest Gutenberg is serializing blocks with <br> tags instead of newline characters for line breaks? And this is breaking syntax-highlighting, is that right?

[emrikol]

Interesting. So the latest Gutenberg is serializing blocks with <br> tags instead of newline characters for line breaks? And this is breaking syntax-highlighting, is that right?

Correct. That's how it seems to be on my site. The plugin is treating the <br> tags as just another part of the code to be highlighted. And I can't really blame it, because the code is surrounded by <pre> tags, which are supposed to be preformatted.

[westonruter]

Here is some workaround plugin code you can use to fix the problem while this is sorted out:

add_action(
	'init',
	static function () {
		$block = WP_Block_Type_Registry::get_instance()->get_registered( 'core/code' );
		if ( $block instanceof WP_Block_Type ) {
			$old_callback = $block->render_callback;

			$block->render_callback = static function ( $attributes, $content ) use ( $old_callback ) {
				$content = str_replace( '<br>', "\n", $content );
				return $old_callback( $attributes, $content );
			};
		}
	},
	101 // Because \Syntax_Highlighting_Code_Block\init() runs at 100.
);

[westonruter]

I've opened a PR to fix the issue. There's a build of the plugin you can test: #791 (comment)

[emrikol]

Thanks! It looks like this is coming up with a JS/block error now. I'm not sure if it's related to another Gutenberg/core update or something else 🤔 Fun with automatic updates!

This seems to happen when adding a new code block to a new post or when editing existing posts with code blocks.

WP 6.4.2
Gutenberg 17.3.0

TypeError: (intermediate value).split is not a function
    c https://derrick.blog/wp-content/plugins/syntax-highlighting-code-block/build/index.js?ver=63196c8e706b8767c9ac:1
    St https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    $s https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    Sl https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    kl https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    bl https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    sl https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    dl https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    Nn https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
    ol https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18:1
[react-dom.min.js:1:53535](https://derrick.blog/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=18)

Coming from here I believe:

syntax-highlighting-code-block/src/edit.js

Line 58 in 9bd2804

{(props.value || '').split(/\n/).map((v, i) => {

[westonruter]

@emrikol sorry I'm just getting to this now. I tried to reproduce the issue with the JS error but I couldn't reproduce it. Could you re-check with the latest Gutenberg?

Nevertheless, I see another issue with the change from \n to <br> in the block: adding highlighting for the first line is now highlighting all lines, and highlighting any other line doesn't show any effect. So I need to fix that too.

[westonruter]

In WordPress/gutenberg#59627 the newlines are no longer turned into br tags in Gutenberg, which I understand will be part of WordPress 6.5. So it seems this won't actually need to be fixed in the end.