Embracing the block: Why it’s finally time to switch to Gutenberg

Gutenberg has evolved from a clumsy UX mess into an elegant must use editor. Here’s why you should consider switching to it and how it can help you create better content for both readers and search engines.

When the new WordPress editor, Gutenberg, was first announced, I was intrigued. I consider myself a first-adopter of new technology because I want to experience innovation first-hand. So I had to give Gutenberg a try.

WordPress made the new editor initially available as a beta plugin that, when activated, would override the native editor, TinyMCE. When I installed and activated Gutenberg, I didn’t like the experience at all. It was slow and clunky, and I couldn’t see how this approach would ever replace TinyMCE.

TinyMCE has been around for a while, and it’s a reliable editing tool that allows authors to edit text visually or with HTML. It also does it within a single block, similar to how most word processors work. And for someone like myself that prefers to hand-code HTML, the text-only view has been perfect for my needs.

Alternatively, Gutenberg turned everything into a block. Headings are blocks, paragraphs are blocks, and images are blocks. Everything is a block! At first, this didn’t make much sense to me. Coupled with its poor UX, I couldn’t understand why anyone would ever want to use Gutenberg.

Gutenberg was eventually added to WordPress’ core files, turned into the default editor, and TinyMCE was made into an add-on plugin and labeled the Classic Editor. Nevertheless, I continued to turn off Gutenberg and use TinyMCE the Classic Editor instead.

Sometimes, when I created a new WordPress install, I would leave Gutenberg in place and test out its progress. While I was able to notice UX improvements, it was never at a place that would convince me to switch to it.

Why I finally switched to Gutenberg

Change often occurs when you’re stuck. It happens when your current solution can’t solve a new problem. That was the situation I was in when I was developing Coywolf Reviews. The available review plugins were bloated and didn’t do what I needed, and the Classic Editor didn’t help me either. As I researched it further, it became evident that Gutenberg provided the best and most elegant solution to my problem.

This article describes how Gutenberg solved my problem, how I discovered a multitude of new uses for it via custom blocks, and why I ultimately learned to love and prefer the new editor that I once eschewed.

Gutenberg was made for reviews

As I was building out the Coywolf Reviews site, I hit a wall trying to figure out how I would display the review rating, and the pros and cons list. I also wanted the solution to generate the related review Schema automatically.

While there are several review plugins available for WordPress, none of them have everything I need. Their limitations – poor designs, lack of Schema options, and not well maintained – forced me to look for a different solution.

The solution I landed on was to build a custom block using the BlockLab plugin and commit to using Gutenberg for the reviews site.

Using BlockLab to create a review block

BlockLab makes it easy to create custom blocks in WordPress, especially if you have experience working with theme files. All you have to do is:

  1. Create the block (similar to creating a new post)
  2. Add custom fields that will be used with the block
  3. Create the HTML template in your themes folder

Using BlockLab, I created a block called Review Summary. I then added custom fields that would be used to populate the review summary (rating, and pros and cons list) and the related rating Schema values.

Creating custom block
Creating a custom block in WordPress with BlockLab

Each block has a template path that it uses for displaying custom HTML. For example, the template path for my Review Summary block is located at /wp-content/themes/coywolf-reviews/blocks/block-review.php. I created the folder blocks and then created a blank PHP file named block-review.php.

The block template functions as an include. When you are editing a post and add the block, it will use the HTML from the template to display the block. The template can also dynamically insert the custom field values you enter in the editor using the <?php block_field( 'rating' ); ?> function. This is the code I have in my template.

<div class="ratingsummary">
    <div class="rating">
        <div><span title="Rating: <?php block_field( 'rating' ); ?> out of 10"><?php block_field( 'rating' ); ?></span></div>
    </div>
    <div class="pros">
        <h2>What I liked most</h2>
        <?php block_field( 'strengths' ); ?>
    </div>
    <div class="cons">
        <h2>Could be better</h2>
        <?php block_field( 'shortcomings' ); ?>
    </div>
</div>

When I add the block in a post and have it selected, it displays the block in edit mode. In this mode, I can fill in the input fields associated with the block I made.

custom block
Editing a custom block in Gutenberg

When I move away from the block – click outside the block or select another block on the post – it displays the text I entered and uses the HTML from the block template I created.

block design in Gutenberg
Viewing a custom block in Gutenberg

When I view the published post, this is how it appears.

Custom block on website
Viewing the custom block rendered on a web page

Additionally, the block I created has more fields that I didn’t show in the screenshot. I use them to populate the ratings Schema by using the <?php block_field( '' ); ?> function to dynamically insert values.

The many benefits of using blocks

As a result of creating custom blocks, I realized how beneficial it was to use Gutenberg over the Classic Editor.

Consistency of content

Blocks have structure, and in some cases, rules. Using blocks ensure each content type always looks consistent on each page.

Editing HTML is easier

With the Classic Editor, if you wanted to edit the HTML directly, you had to switch the view and search for the content. With Gutenberg, you can edit the HTML directly on the block.

Edit HTML view
HTML block view in Gutenberg

Sharing code examples is easier

Using a plugin like SyntaxHighlighter Evolved, you can add code examples as blocks. The plugin will then automatically format and stylize it, making the appearance of the code consistent and sharable.

<p>This is an example of code using the <strong>SyntaxHighlighter Evolved</strong> plugin</p>

Applying custom styles to images is easier

With the Classic Editor I used to add special classes or inline styles to images. Now I just add the class name to the sidebar, and the editor adds them for me. For example, if I add frame it will put a light border around the image, and if I add reduce, it will make the image smaller and centered.

block sidebar
Applying classes to an image in Gutenberg

Native blocks are future-proofed

I embed MP3s for podcasts and full interviews. If I use the native Audio block, it will not only embed the audio file with a player, it will also be future-proofed if and when WordPress updates the block.

Audio embed
Using the native Audio block in Gutenberg

Access to features only available to Gutenberg

Yoast SEO supports adding FAQPage and Howto Schema, but only if you’re using Gutenberg. Switching from the Classic Editor opens up the ability to get more out of the plugins you use and love.

Pasting large chunks of HTML works flawlessly now

My writing workflow is to write in Ulysses, export as HTML and optimize in Sublime Text, and then copy and paste everything into WordPress. In the past, pasting a large amount of HTML from Sublime Text into Gutenberg turned into a mess. It now does an excellent job of parsing and creating blocks for every element.

How to get started with Gutenberg

Switching from Classic Editor to Gutenberg is as simple or complex as you want it to be. The first step is to go to the WordPress Admin and navigate to Settings > Writing. Choose Block Editor and then click on Save Changes. You are now using Gutenberg.

When you create a new post or page, the editor will now use Gutenberg. All of the existing posts and pages will be treated as Classic Editor posts within Gutenberg. It’s a strange state for them to be in, but it’s fine if you want to leave them as-is. That’s the easy way.

The more time-consuming and challenging way is to convert them all to blocks. The reason you may want to do that is that the older content will benefit from sharing native blocks. For example, I have older posts that include code examples. If I want them to take advantage of the SyntaxHighlighter Evolved plugin, I need to convert the posts to blocks and then redo the code to use the plugin’s block.

To convert an existing post to blocks, navigate to the Edit view and select Convert to Blocks at the top of the editor. The post will be converted, but before you save it, make sure you preview it. Depending on the complexity of the post, you may need to update and fix some blocks.

Convert to Blocks
Converting a post into block in Gutenberg

I encourage you to consider Gutenberg if you haven’t made the transition yet. I love it so much that even creating this post in Gutenberg was a joy. If you have questions about Gutenberg, let’s discuss it in the forum.