javascript - How to remove pbr elements from gutenbergs editor

We updated to Wordpress 5.0 on our website, problem is that this includes the new gutenberg editor.

Before this I already removed the WP function that sometimes places <p> and <br> elementsin your message after you safe with 'wpautop'. However the new editor gives a new problem, the new gutenberg editor places the <p> elements in your message when you tab and when you press safe.

Here is an example:

I know that adding js code directly in your post is not the best option, however it works fairly easy for quickly testing. Is it just not possible to use JS in the new gutenberg editor?

Edit: I hope to find a solution that solves the problem. As I mentioned before we installed the classic editor plugin. This currently is for us a temporary fix as I hope to get a way to use the latest software of Wordpress without relying on plugins.

We updated to Wordpress 5.0 on our website, problem is that this includes the new gutenberg editor.

Before this I already removed the WP function that sometimes places <p> and <br> elementsin your message after you safe with 'wpautop'. However the new editor gives a new problem, the new gutenberg editor places the <p> elements in your message when you tab and when you press safe.

Here is an example:

I know that adding js code directly in your post is not the best option, however it works fairly easy for quickly testing. Is it just not possible to use JS in the new gutenberg editor?

Edit: I hope to find a solution that solves the problem. As I mentioned before we installed the classic editor plugin. This currently is for us a temporary fix as I hope to get a way to use the latest software of Wordpress without relying on plugins.

• javascript
• block-editor

Share Improve this question edited Dec 14, 2018 at 7:51 Kevin M. asked Dec 11, 2018 at 10:42 Kevin M.Kevin M. 6388 bronze badges 3

• Are you using the HTML block? – Jacob Peattie Commented Dec 11, 2018 at 13:24
• Not sure, just using the basic page editor. It tells you there that you can write HTML. – Kevin M. Commented Dec 12, 2018 at 11:47
• Currently we installed a plugin to get the 'old' editor back. That seems to work, however this is not future proof. – Kevin M. Commented Dec 12, 2018 at 11:49

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

Possibly, try to wrap it in <pre></pre> tags.

The idea behind Gutenberg is that you would have different blocks for all the types of content that you may want to include in your post. So, obviously, what you are looking for is a "javascript block" that will not mess up your code. It will even have the advantage of semantically isolating your dubious habit of dumping scripts in the content field.

It goes a bit too far to offer a complete tutorial on how to build your own Gutenberg block here. If you google for "create Gutenberg block" you'll find plenty. Or you can install this plugin, which seems to do what you want.

Generally speaking, wrapping code blocks with the <pre>...</pre> element will format it so that it appears exactly as pasted. That means that spacing and line returns will still show up. If the Gutenberg editor checks for the <pre>...</pre> element, then it should refrain from treating line breaks as paragraph breaks within the pre element. If it does not, then that might be something for it to work on, which may show up in a future release.

If you are pasting JS code into the post field to get it to work, that is the wrong approach. It needs to be in the header or just before the bottom of the page. So, then a plugin would be the way to go. Or, you may want to check out a text editor like atom.io and combine that with Filezilla so you are treating the problem more like a developer. The post field is not intended for Javascript.