Content automatically changed in the new block editor after preview

[xuhdev]

Describe the bug

Content of the post is automatically changed after preview.

To reproduce

I can reproduce this bug on my WP installation version 5.3.2 as well as on wordpress.com (with the code block editor enabled). The bug disappears when after installing the "classic editor" plugin.

Start a new post and add the following to the block editor in code editing mode (I took out the code from https://www.topbug.net/blog/2016/09/27/make-gnu-less-more-powerful/):

Add the following to your <code>~/.bashrc</code> if you use bash or <code>~/.zshrc</code> if you use zsh:
<pre><code class="language-bash"># Set colors for less. Borrowed from https://wiki.archlinux.org/index.php/Color_output_in_console#less .
export LESS_TERMCAP_mb=$'\E[1;31m'     # begin bold
export LESS_TERMCAP_md=$'\E[1;36m'     # begin blink
export LESS_TERMCAP_me=$'\E[0m'        # reset bold/blink
export LESS_TERMCAP_so=$'\E[01;44;33m' # begin reverse video
export LESS_TERMCAP_se=$'\E[0m'        # reset reverse video
export LESS_TERMCAP_us=$'\E[1;32m'     # begin underline
export LESS_TERMCAP_ue=$'\E[0m'        # reset underline</code></pre>
Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images

Click on Preview. Close the preview. The content of the post is changed to something totally different:

Add the following to your <code>~/.bashrc</code> if you use bash or <code>~/.zshrc</code> if you use zsh:
<pre><code class="language-bash"># Set colors for less. Borrowed from https://wiki.archlinux.org/index.php/Color_output_in_console#less .
export LESS_TERMCAP_mb=

Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images
\E[1;31m'     # begin bold
export LESS_TERMCAP_md=

Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images
\E[1;36m'     # begin blink
export LESS_TERMCAP_me=

Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images
\E[0m'        # reset bold/blink
export LESS_TERMCAP_so=

Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images
\E[01;44;33m' # begin reverse video
export LESS_TERMCAP_se=

Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images
\E[0m'        # reset reverse video
export LESS_TERMCAP_us=

Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images
\E[1;32m'     # begin underline
export LESS_TERMCAP_ue=

Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images
\E[0m'        # reset underline</code></pre>
Now restart your shell and run <code>man less</code>—the manual is in colors! The difference is shown in the following two images

Expected behavior The content of the post remains unchanged.

Desktop (please complete the following information):

• OS: Linux
• Browser Firefox
• Version: 72.0.2

Additional context

• wordpress.com and WP 5.3.2

[talldan]

@xuhdev That's a curious issue. Very unusual that those lines are duplicated.

As a workaround, you could try using the Custom HTML block, which doesn't seem to suffer from this issue.

[paaljoachim]

I just tested using WordPress 5.7. Twenty Twenty One. Gutenberg plugin 10.4.1

Pasted the above code into code view:

Switched back into the visual editor:

This is what I see on the frontend: