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 https://github.com/WordPress/gutenberg/pull/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: https://github.com/westonruter/syntax-highlighting-code-block/pull/791#issuecomment-1836945263

[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:

https://github.com/westonruter/syntax-highlighting-code-block/blob/9bd2804fdf48c0c3a5d31add63bef68ffe3f6e17/src/edit.js#L58

[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 https://github.com/WordPress/gutenberg/pull/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.