Gutenberg: I used 5.0-beta3 43764 version the posts is overflow, when inserting code.

[finip]

Describe the bug
The code inserted into Block code is overflow

To Reproduce
Steps to reproduce the behavior:

1. use 5.0-beta3 43764 inserting code the posts is overflow
2. the code scrap
   ```

什么是 Polymer？

Polymer 是一个名为 Web组件的新 web标准的垫片，它使我们能够创建完全自定义的 HTML元素。

我们每天都使用本机 web元素，例如 <input>， <checkbox>， <audio>，等等。它们的数量是有限的，它们的设计和行为是由浏览器定义的，而不是由开发人员定义的。使用Web组件，我们现在可以创建一个自定义  并定义它的样式和行为。不幸的是，由于这个标准是非常新的，所以需要一些时间才能得到所有浏览器的支持。

幸运的是，现在有几个开放源码库正在积极开发，允许创建和使用自定义元素：
Polymer (Google)和 X-Tag (Mozilla)。今年夏天，在 I/O峰会期间，Polymer 团队推出了v1.0，并宣布它现在可以生产了。

什么是自定义元素？

比如说，你有一个博客，需要在你的一些帖子中添加音频(例如，音乐曲目或播客)。要做到这一点，最方便的方法是使用本机 <audio> 元素。它使用简单，不能与任何周围的代码冲突。只要粘贴 <my-super-audio src="track.mp3"></my-super-audio>，就会得到一个 100%受控的结果，如下所示：

但如果你希望它看起来不一样呢？或者有一些额外的功能，比如显示时间和标题？最重要的是，您希望保持它的简单和模块化，就像本机解决方案一样。

比如说，我们想要建造这样的东西：

这就是 Web组件和 polymer发挥作用的地方。当我们有一个自定义元素时，我们可以像使用本机元素一样简单地使用它：

<my-super-audio src="track.mp3"></my-super-audio>

多酷啊？

```

1. Overflow and misalignment occurred without using highlighted plug-ins. If you use code highlighting plug-ins, you will not be misplaced. I checked the reasons for this because <> & lt;& gt;, where < was correctly parsed, but the end of the posts & gt; was converted into >, so the front page was misaligned. I tried several similar articles with code fragments, all of which I want to ask. The problem arises. It must be that the code block of the Gutenberg editor is automatically escaped, but I can't fix it. At present, we can only replace the insertion of multi-line code with html block, so that the front desk won't.

Desktop (please complete the following information):

• OS: Windows server 2012r2/2016 iis8.5 and iis10
• Browser chrome, firefox64bit, ie11
• Version newest

Additional context

• 5.0-beta3 43764
• No extra Gutenberg plugin installed

[designsimply]

May I ask for some help clarifying this issue? Is the problem that you are pasting incomplete code such as:

<h2>什么是 Polymer？</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Polymer</strong>&nbsp;是一个名为 <strong>Web组件</strong>的新 web标准的垫片，它使我们能够创建完全自定义的 HTML元素。</p>
<!-- /wp:paragraph -->

and it is not saving properly or is the problem that you are using a plugin that is somehow causing escaped character entities such as > to become > and break the HTML? If you are using a plugin which is causing this, can you please list the plugin name and version?

[finip]

May I ask for some help clarifying this issue? Is the problem that you are pasting incomplete code such as:

Thank you for your attention, this is not a complete code post code, I'll prepare a test of the two level demonstration site, that I said this code insertion problem, because it seems like no way the pictures here. Please wait for my post again, which includes a page address that generates overflow code.

[finip]

beta3:https://wp5beta343764.mmtheme.com/2018/11/13/create-a-custom-audio-player-element-using-polymer-2.shtml
beta4:https://wp5beta443764.mmtheme.com/2018/11/13/create-a-custom-audio-player-element-using-polymer-2.shtml

These are two versions of the insert code article pages, beta3 and beta4. Although they look similar, they are different. After upgrading the latest version today, the code overflow problem has been solved. Although it looks right on the surface, I looked specifically at the insertion code in the background. They haven't changed, because the articles on the two websites are pasted in with the same piece of code. It's strange that the < code > area is escaped < Has the problem been solved or correctly resolved? At least it still exists, but how can it be solved? I hope someone can study or understand it. I don't like to solve it without any reason, because I don't know how to solve it at all. At least tell me a list of beta4 patches, for example #823435. And where to repair it is in order to meet the needs of a program.

[finip]

My problem is not over, although beta4 is no longer misaligned and overflowed, but the first < is displayed as & lt;, both in the background code mode and in the front desk, it shows this way. And the latter is correctly parsed. This still prevents me from inserting code in the way of and only continues to insert code in the HTML block module. I hope I can continue to get help, which is really a problem.

[designsimply]

I would like to include a screenshot for reference and note that further testing is still needed. I think this is the overflow you are referring to:

^{Seen at https://wp5beta343764.mmtheme.com/2018/11/13/create-a-custom-audio-player-element-using-polymer-2.shtml using Firefox 63.0.1 on macOS 10.13.6.}

[finip]

Yes, it's only beta3 that spills over. But this problem also exists in beta5 at present, but it will not spill over again, and the problem has not really been solved, because the sign on the left <, is still parsed as & lt;, and the right is right >, which is the real problem. There is no need for demo websites anymore. I hope you will pay attention to the little problem I mentioned. After that, you can use the code block as usual, instead of the HTML block you've been using now. In fact, as mentioned earlier, this problem only appears in the code block, and single-line code is normal.

[designsimply]

I'm so sorry but I'm still having trouble understanding. Please forgive me for asking more questions.

It must be that the code block of the Gutenberg editor is automatically escaped

Near the beginning of your first code example, I see this:

<!-- wp:paragraph -->
<p>我们每天都使用本机 web元素，例如&nbsp;<code>&lt;input&gt;</code>，&nbsp;<code>&lt;checkbox&gt;</code>，&nbsp;<code>&lt;audio&gt;</code>，等等。它们的数量是有限的，它们的设计和行为是由浏览器定义的，而不是由开发人员定义的。使用Web组件，我们现在可以创建一个自定义&nbsp;<code></code>&nbsp;并定义它的样式和行为。不幸的是，由于这个标准是非常新的，所以需要一些时间才能得到所有浏览器的支持。</p>
<!-- /wp:paragraph -->

If I try copying that example from GitHub and pasting it into Gutenberg, I see this:

^{Tested with WordPress 4.9.8 and Gutenberg 4.6.1 master @ 874321773 using Firefox 63.0.3 on macOS 10.13.6.}

However, if I first copy the example to a plain text editor (such as TextEdit on macOS) and then paste into Gutenberg, I see this:

^{Tested with WordPress 4.9.8 and Gutenberg 4.6.1 master @ 874321773 using Firefox 63.0.3 on macOS 10.13.6.}

I feel this must have something to do with how the original content was created or copied, but I am not sure what or how yet. Let's go back to the start. Can you please tell me exactly what steps I can use to see the problem happen and try again to explain the expected behavior and the actual behavior? For example, is the following correct? Also, does the problem happen if you temporarily turn off all other plugins other than Gutenberg?

Steps to reproduce:

1. Go to Posts > Add New.
2. Copy the sample code from below.
3. Paste the sample code directly into a new block.

Sample code:

<!-- wp:paragraph -->
<p>我们每天都使用本机 web元素，例如&nbsp;<code>&lt;input&gt;</code>，&nbsp;<code>&lt;checkbox&gt;</code>，&nbsp;<code>&lt;audio&gt;</code>，等等。它们的数量是有限的，它们的设计和行为是由浏览器定义的，而不是由开发人员定义的。使用Web组件，我们现在可以创建一个自定义&nbsp;<code></code>&nbsp;并定义它的样式和行为。不幸的是，由于这个标准是非常新的，所以需要一些时间才能得到所有浏览器的支持。</p>
<!-- /wp:paragraph -->

Expected behavior:
I expected to see:

Actual behavior:
Instead I see:

[finip]

Thank you for your continued attention to this question, which I will test the latest version of RC3 later. Detailed explanations will be given. Thank you very much for your reply, which gives me hope to solve it. Maybe the new version does not exist, but it will be tested before the result is achieved. My English is obviously not good. I hope you can understand what I said. Please wait for my results later.

[finip]

wordpress 5.0 rc3
inserted code:
`

 & lt; my-super-audio src="track.mp3" & gt; </my-super-audio>

`

Code after posting (it changes automatically):
`

 & lt; my-super-audio src="track.mp3" > </my-super-audio>

`

I think this place has attracted your attention, as I mentioned before.
the first < is displayed as & lt;, both in the background code mode and in the front desk, it shows this way. And the latter is correctly parsed. This still prevents me from inserting code in the way of and only continues to insert code in the HTML block module.

When I insert such code directly, it parses correctly.
`

 < my-super-audio src="track.mp3" >  < /my-super-audio > 

`

left < is <,not as before & lt; right > is >,The previous right is the correct parse
Now there is only one problem, that is, when both sides use < & gt; at the same time, the left parsing is still incorrect, while the right parsing is correct. When both sides use <>, the problem does not exist, and it parses all correctly.

[designsimply]

Okay. Is your goal to be able to post this:

 & lt; my-super-audio src="track.mp3" & gt; </my-super-audio>

and have it become this?

< my-super-audio src="track.mp3" >  < /my-super-audio > 

Where is the code with the & lt; and & gt; coming from?

[finip]

i did this deliberately, because there is an extra space in the middle to correctly show what I want to say. I hope you can understand that the problem lies on the left lt, which is parsed into this, but the right one is correct.

[designsimply]

Thank you, that was helpful. I think the next thing we should do is state the problem in a list of steps that include example code. I tested with WordPress 5.0.2 and no active plugins and wrote down some steps. Does the following sound correct?

1. Go to Posts > Add New.
2. Add a Code block.
3. Add &lt; my-super-audio src="track.mp3"&gt;</my-super-audio> into the Code block.
4. Publish the post and view it.

Result: I expected &lt; my-super-audio src="track.mp3"&gt;</my-super-audio> to appear in the published code block with < and > but instead < remains and > is converted to >.

[designsimply]

I would also like to double check that you have updated to 5.0.2 now and that this is still a problem for you in version 5.0.2.

[finip]

yes, yes, what you are saying is correct. i do have this problem. yesterday's screenshot is 5.0.2. sometimes i cut a specific picture again and again. 5.0.2 also has such a problem. the lt on the left has not been properly parsed. although it does not affect the display of the front desk, it has a problem, and it does not discuss whether to install the code highlighting plug-in first, because this original problem will lead to other plug-ins and then problems, i would like to get your help to solve it.

[finip]

[finip]

[designsimply]

[designsimply]

[finip]