WordPress, add custom HTML into Blocks using Code Editor

Introduction

I’ve been meaning to write this for a long time. When I first started using the Gutenberg Editor it took me a long time to find out about the Code Editor modes. This resulted in me creating sections using the HTML Block to add in custom HTML e.g. span tags.

This was unnecessary.

There are two methods you can use.

1. Individually edit a block.
2. Open the whole document in Editor Mode.

Option One – Individual Block Mode

This is quick and easy, probably the method you’ll use the most.

1. Open the page or post you would like to edit.
2. Click the block you would like to add HTML elements to.
3. Click the three dot menu in the top left (See Image 1.)
4. Select ‘Edit as HTML’ menu item (See Image 1.)
5. Edit the code with the updates you need (See Image 2.)
6. Click ‘Save draft’ or ‘Update’ to save your changes.

That’s it, all done. If however you’d like to be able to apply multiple edits, or copy a whole page/post as code and then search & replace or grep change then read on…

Option Two – Code Editor Mode

This where things get far more interesting. This facility will allow you to get down and dirty with the codebase and interact with it more like the old (TinyMCE) editor.

1. Open the page or post you would like to edit.
2. Click the three dots in the top right corner (See Image 1.)
3. Select ‘Code editor’ menu item (See Image 2.)
4. Edit the code with the updates you need (See Image 3.)
5. Click ‘Save draft’ or ‘Update’ to save your changes.

Quick explanation of code structure

All the block elements are contained within a wp:foo to /wp:foo structure. For example this is a heading.

<!-- wp:heading -->
…
<!-- /wp:heading -->

And this is a paragraph.

<!-- wp:paragraph -->
…
<!-- /wp:paragraph -->

It would be unwise to change / edit / delete these parts of code because if you do, that portion will resort to Classic Edit mode. Probably not a great idea.

Example code edit

In the Option Two Gallery images above I showed the <h2> “Introduction” element;

Editor HTML

<!-- wp:heading -->
<h2 class="wp-block-heading">Introduction</h2>
<!-- /wp:heading -->

Let’s say we wanted to add a waving hand emoji wrapped in a span with a CSS class that made it greyscale after the “Introduction” text.

Editor HTML

<!-- wp:heading -->
<h2 class="wp-block-heading">Introduction <span class="greyscale">👋</span></h2>
<!-- /wp:heading -->

We would add something similar to the code above, leaving the <!-- wp:heading --> & <!-- /wp:heading --> parts intact. Then if we had a CSS class like;

CSS

.greyscale {
  filter: grayscale(1);
}

Result

Introduction 👋

Voilà we have succeeded in the task we set out to do.

This is a very straight forward example but I hope you get the general idea.

Final thoughts

I mostly use the first method but occasionally having access to the raw code can be very useful. I’ve been known to copy a whole document, paste into an IDE (in my case VS Code) then search-replace or grep pattern change whole sections in one go. Very useful, very powerful.

Happy editing!

Article Information

About Dave Barr

Bristol based Scottish Expat who has 20+ years experience of Web Development and is continually on the look out to improve his skill sets. Learning new and innovative solutions for current requirements in the world of IT, WebDev and eCommerce.

Social Media Links

• Github
• Linkedin
• Mastodon
• Polywork
• Twitter

Read more about Dave