Deploying the new Gutenberg Block Editor on my Personal Blog

Deploying the new Gutenberg Block Editor on my Personal Blog

This morning I deployed the Gutenberg block editor, the upcoming block-based editor for WordPress core, on this blog — and guess what? My website didn’t implode and disappear into the abyss! 😅

While the migration was not completely clean cut, the operation was pretty smooth. Here’s what went down on my journey migrating richtabor.com to use the Gutenberg block editor.

Activating Gutenberg 🤞

When Gutenberg is first activated, all of your content within Gutenberg-enabled post types is put into one singular Classic Block. The idea here is that your content should be completely intact with Gutenberg enabled, replicating the old school visual editor we’re all pretty familiar with.

Converting content to blocks within the Gutenberg Classic Block

It’s then up to the end user to decide whether or not to convert the content within that singular Classic Block into separate blocks. I appreciate this cautious, yet rather smart approach, as it lets folks update each post to use the block editor individually.

Obviously, splitting the Classic Block into individual blocks is what we want to do; otherwise, why use Gutenberg in the first place? So, I went through each of my articles here, converting each to a full Gutenberg implementation.

And here’s what went down…


Block Migration Quirks

For the most part, content seemed to convert to blocks well — though I did run into a few minor quirks here and there.

1. Shortcodes

First, I found a few quirks with shortcodes that I currently deploy on my site, namely call to action and click to tweet shortcodes. Some of them didn’t convert to use the new Shortcode Block properly, while others did.

Replacing shortcodes within Gutenberg content with the new Shortcodes Block

While the shortcodes still performed properly on the front end, the inconsistency within the block editor added a little doubt to whether or not they would — so I went in and removed the old shortcodes, then pasted them into the new Shortcode block.


2. Images & Image Captions

Throughout my blog, a number of my images have accompanying captions. I found that about 30% of my captioned images did not properly convert with the initial Classic Block conversion. I’m not sure why.

Fixing image captions within the Gutenberg block editor

I had to go in and delete the odd caption shortcodes and add the caption text to the actual image. I also found that some left and right aligned images did not retain their image sizes. When/if you deploy Gutenberg, I highly recommend double-checking all your posts with images to ensure they’re properly displayed.


2. Video Embeds

Often I’ll add really short videos to highlight projects I’m working on. I found that most of my Vimeo embeds were converted to HTML Blocks with the embed script added.

Old school video embeds need updating too

I went in, deleted those various HTML Blocks and added the Vimeo Embed block with the Vimeo URL inserted. Now, my videos were rendering properly within the block editor.


3. GitHub Gists

I have been using the oEmbed Gist WordPress plugin to easily add GitHub gists to my posts, as embedded Gists do not render properly within WordPress. Unfortunately, the shortcodes rendered by oEmbed Gist were not converted to use Shortcode Block.

Gists converted to Embeds, which are not rendered within Gutenberg

Instead, each oEmbed Gist shortcode was implemented with the core Embed Block, which also does not support embedding GitHub gists — at least within the block editor. On the front end however, the gists were in fact displaying properly.

While this isn’t a huge issue, it does detract from the WYSIWYG facet of Gutenberg — and the work I’ve put in to have my WordPress theme, Tabor, emulate that front end styling within the editor.

I saw this coming early on and actually started writing a Gutenberg block plugin to easily embed GitHub Gists.

Check this out:

Adding gists with the CoBlocks Github Gist Block (coming soon)

I went to each post showcasing embedded gists and replaced the Embed Block with my new GitHub Gist Block. While the block is not quite ready for production yet, subscribe here and I’ll let know when it is.

Spoiler alert — it’s soon! I’ve released the GitHub Gist Block as part of my block plugin, CoBlocks. Download CoBlocks on WordPress.org today.


Closing

Admittedly, I do have a fair advantage over many folks who will be faced with the pending release of WordPress 5.0 and Gutenberg. I’m already quite familiar with the block editor: it’s features, strong suits, quirks and all. And as the developer of my blog’s WordPress theme, Tabor, I was able to push out hot fixes quite often as I ran into little issues here and there.

There are still a few minor oddities that I’m wrapping my head around, but for the most part — I’m enjoying writing my first official post in Gutenberg. In fact, this is the first post that I’ve written mostly within WordPress itself. My typical workflow consists of writing off-site in Ulysses, then adding it to the site. Gutenberg ups the content creation game quite a bit.

And as I’m working on Writy, CoBlocks, and updating my WordPress theme catalog to support the Gutenberg block editor, what better way is there to learn the ropes than by using the software day-in and day-out?

So, are you ready?

    1. Indeed it has! I haven’t announced it yet, still working on the website/assets. I’m pretty sure the “Gutenberg” name will stick around for developers, though I bet everyday users won’t necessarily know of it. I suspect the editor will be coined the “block editor”, and eventually just the “editor”.

      I planned for it!

  1. Hey Rich,

    Thanks a million for sharing your experiences. I have been checking it on my blog(s) and client site, which I support. I have some similar issues, and am working with a couple of developers for work around or fixes. It is going to be interesting when 5.0 is released.

    Daniel

  2. Thanks Rich! I am also ready and had a similar experience. My main hiccup was video embeds as well since I don’t publish articles like you do.

    I also used Manager for Gutenberg to keep functionality to my posts initially.

    I still don’t understand or totally agree with each paragraph in a separate block. What is the virtue and value of having every distinct section of a piece of writing, a paragraph, rendering into its own component?

    1. That’s an interesting plugin, a good find!

      I’d say that each paragraph is it’s own unit so that they can be easily dragged/dropped/positioned, and that content can be also more-easily added in-between paragraphs/blocks. It also makes the interaction of adding blocks no different in-between paragraphs, than in-between other blocks.

      It’s a good call UX-wise, though it does take some getting use to, especially if you’re a veteran WordPress user.

      1. The split paragraph or how the converter handled it caused me the most headache because I had to work to get all my paragraphs, split. I suspect that inline styles in my markup is why some paragraphs didn’t auto split, but I am not sure.

        So, how often would you write your content out of order and need to drag and drop it into the appropriate spot? Let’s get real the issue is that there has to be a clear way to insert content that is not a paragraph. I think this could be thought out better, just my opinion. If we could insert a block in the middle of existing blocks content, thus splitting the existing block and inserting a new it would be more intuitive.

  3. This could be a time consuming task if you have a lot of content to deal with. Is it not yet possible to convert all posts in bulk for Gutenburg?

    If that did become available I suppose there would be a warning to backup the site first before proceeding with the auto conversion.

  4. This sounds like a real headache. I run a long-established literary and magazine with a lot of longform articles (up to 20,000 words) and graphics-heavy content. The content and layout of each of our 1,000+ pages is very important and each page has been checked carefully proofread before publishing.

    If Gutenberg sometimes breaks things like captions, it’s going to take me many months to re-proofread and check for issues.

    Tha’s a huge problem — as it is, I barely have time enough to put together new issues of the magazine and certainly don’t have the resources to go through each page to see if this new WordPress feature has screwed up my site.

    I have no need or desire to break paragraphs into “blocks.” Doing that would make getting each of my contributing authors’ or artist’s pieces onto the site a much lengthier process.

    Gutenberg might be good for bloggers — but for those of us who write essays and articles in Word, then post them on a website, it won’t be.

    I am dreading Gutenberg.

    1. Hi Denise!

      It’s clearly a good bit of work to migrate each post, but if you just leave your older posts alone, they should be fine. The quirks I uncovered happened when I converted a post to utilize blocks. Also, Gutenberg is still actively in development and there’s improvements being made nearly every calendar day.

      I also use Google docs as well for each of my articles (albeit they’re not quite as long as yours) and copying/pasting paragraphs, and images, into Gutenberg really works well.

      There absolutely will be a learning curve, but I’m confident that once Gutenberg is solid and we’ve adapted to the new editor, we’ll look back and wonder how we published content without Gutenberg.

      1. Thanks for the clarification, Rich.

        Another thing that concerns me is that it’s no longer possible to choose from standard image sizes or to select “none” from the alignment options. I hope they’ll restore that functionality so that it’s easier to maintain consistency in our layouts.

  5. You said that you deployed the Gutenberg editor on this blog and it didn’t implode. The key term here is BLOG. Try doing the same on a site with custom post types, metaboxes, tinymce customizations and multiple languages and the outcome won’t be so bright.

    1. Hey Pete. I wanted to make it clear that this move was on my blog, not on a more-complex site such as an EDD or WooCommerce shop. Naturally, taking smaller steps is the way to go, so we can start to understand where things may snag.

      And while more complex websites will likely have more issues to work though (naturally), I have been testing the migration of my EDD theme shop site, ThemeBeans, and I have not run into any major issues. That’s not to say there won’t be major issues, just that I’m actively searching for them ahead of time – so I’m prepared for Gutenberg.

      Anyhow, testing – and sharing the results – only makes us collectively more prepared for WordPress 5.0. 👍

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Up Next:

Highlights of WordCamp Atlanta 2018

Highlights of WordCamp Atlanta 2018