How To Add Javascript To A WordPress Post With Gutenberg

WordPress’s origins as a content management system, have often clashed with its recent metamorphosis into a site builder. One of these conflicts was the awkward way of inserting code into the editor. Because it started out as a way of adding pure content via the WYSIWYG editor, it was considered unnecessary for HTML or Javascript code to be added as well.

Later on, they added the “Code” or “Text” tab to allow people to insert arbitrary code, but this had two problems:

1. The code would often get badly mangled when you
   switched between views
2. The code would be invisible in WYSIWYG mode
   because of the visual editor

The second problem was particularly pronounced when inserting stuff like JSON structured data, because there was no way of telling that the code was added!

Previously, the solution to add code like Javascript to WordPress took the form of plugins or themes. For example, the Genesis framework allowed users to insert arbitrary body code using something like this:

This allowed us to insert header or body scripts into posts on a page by page basis. But of course, this too is flawed because you don’t have control over precisely where in the document the code goes – only some general options. Not to mention that all your customizations and code would vanish if you were to change your plugins and themes. Suffice to say, that none of this was satisfactory.

However, with WordPress 5.0 and Gutenberg, all that has changed. The WordPress developers finally decided to bring the editor in line with what WordPress has become – not just a WYSIWYG editor, but a page builder. And because of that, we now have Gutenberg blocks that allow us to easily do what used to be hard.

Adding Javascript Code with Gutenberg

I initially disliked Gutenberg because I found it too distracting as a pure editor. As a writer, I might still feel that way, but as a site owner, I’ve started to see the value of “blocks”. I realize that my articles are not pure text, but consist of chunks of various types of content.

So with Gutenberg, if I want to insert a chunk of JSON code, or some Javascript, I just need to use the “Custom HTML” block as shown here:

Since I found this workflow, I’ve started using this block everywhere. For JSON structured data, for table HTML markup, for Javascript, and for some other more complex HTML code.

Security Issues with JavaScript

One thing to keep in mind, is that only users with the “unfiltered_html” permission will be allowed to insert and save JavaScript code. The reason is that JavaScript can be extremely dangerous, if inserted into a website maliciously. As a result, make sure that you only assign the “unfiltered_html” permission to people you trust.

One way to easily assign the permission to specific people without too much trouble, is to use the Capability Manager Enhanced plugin. With a series of checkboxes, you can easily assign specific permissions to people, to craft the exact policies that you need. It’s a useful plugin, and one that’s invaluable if you have a lot of writers, and need to allow them to save JavaScript code in their posts.

Bottom Line

Gutenberg has made it a lot easier to insert custom HTML code into specific posts and pages – including JavaScript. It now replaces a bunch of earlier, unsatisfactory solutions, in favor of a generalized approach that’s far more scalable and easy to maintain.