Gutenberg Allows You To Replace Code Insertion Plugins

For a long time now, web pages have been more than just text on a screen. Even posts in WordPress which are ostensibly articles, are now a lot more than just the posts themselves. There are all kinds of hidden elements in pages that are not visible to the use. Schema markup, HTML tags, tracking scripts, and much more.

WordPress was originally designed to deal with “text only” in its posts. The standard way to insert HTML was to use the “Text” or “Code” editor tab and writer your HTML there. And even then, it was far from perfect for two reasons:

1. You couldn’t see non-rendering HTML
2. WordPress would mess up your HTML while converting it to the visual layout

As a result, it was unpredictable at best and outright terrible at worst, to use the HTML or code layout in the traditional WordPress editor to insert snippets, and custom code. It was even a bad idea to use the code layout for “regular” HTML elements like <div> etc. You never knew what the classic editor was going to do to your code.

Plugins to Solve these Problems

To deal with this issue, many themes took it upon themselves to dedicate separate areas below posts to allow users to add code. This took the form of “metaboxes” as shown here:

This screenshot is from the Genesis theme framework, which gives you extra options below posts to add header and body scripts. In the same way, many other plugins were used to do the same thing – to add extra code to WordPress because the classic editor was insufficient and didn’t do the job well.

With Gutenberg however, things have changed completely. Now we can insert code – both visible and invisible – into posts, without the additional overload of using plugin and theme extensions.

Using the “HTML” Block in Gutenberg

With the introduction of “blocks” in the latest Gutenberg editor in WordPress 5.0, we can now explicitly have different types of content in the editor, without having to restrict ourselves only to text and images. That means we can use the “HTML” block to insert code for which we previously would have needed either a plugin or a theme.

One great example here is schema markup. I’d written a post earlier explaining how we can use the JSON review schema markup to get “star” ratings in the Google search results. In that tutorial, I recommended inserting the code into a metabox – either from a theme or a plugin.

But now with Gutenberg, we can just use the “Custom HTML” block at the end of the post as shown here:

Just type slash (/) followed by the name of the block – in this case HTML. And then paste the schema into the block like this:

Now when you preview the post, none of this will render because the <script> tag doesn’t output any human visible text. But when we go to the structured data testing tool provided by Google, you can see that it’s picked up the schema markup:

This is great because now that HTML block is permanently attached to our post regardless of plugin or theme. Which makes sense, because it is part of the post. And this is just one example. You can use the same HTML block for Javascript code and all other kinds of JSON that normally would have required a 3rd party solution.

So while I still find the concept of separating paragraphs into blocks annoying, this is another benefit of Gutenberg that I’ll be making full use of going forward!