How to Convert a post from Classic to Gutenberg Editor

If you have recently joined the WordPress bandwagon you likely are already working with the newest editor Gutenberg. However if you have been around the block a few times with WordPress there is a good chance you have posts that are in the Classic Editor. And if you are wanting to move them to Gutenberg here are the things you need to know.

What is a Gutenberg Block?

You likely already know some of them but the standard list of default blocks are below, I’ve bolded my favourites.

Data and Text Options

  • Heading – Add heading text like h2, h3, h4 etc to help keep your sections and content organized for your readers and search engines to understand your content.
  • List – adds a bulleted or number lists (like this one) 😉
  • Paragraph – a Basic building block for text
  • PullQuote – Gives special visual emphasis to a quote from your text.
  • Quote – gives the quoted text visual emphasis
  • Table – inserts a table for sharing charts and data
  • Verse – Inserts poetry and special formatting and spacing, or quote song lyrics.

Formating Options

  • Columns – add a block that displays content in multiple columns, then add other blocks within it.
  • Media & Text – lets you put words and pictures side by side for a richer layout
  • Page Break – lets you separate a post into a multip page experience
  • Preformatted – adds text that retains the spacing and tabs, which also allows additional styling
  • Separator – creates a visual break between ideas or sections with a horizontal separator
  • Spacer – adds white space between blocks and customize it’s height

Media Options

  • Audio – Embeds a simple audio player
  • Cover – adds an image or video with a text overlay – great for headers!
  • Embed – lets you embed videos, images, tweets, audio and lots of other content from an external source
  • Gallery – displays multiple images in a rich gallery
  • Image – inserts a photo from your Media Library
  • Video – Embeds a video from your media library

Miscelaneous Options

  • Archives – displays a monthly archive of your posts
  • Button – prompts visitors to take action with a custom button
  • Categories – Displays a list of all your categories
  • Classic – use the classic WordPress Editor.
  • Code – display code snippets that respect your spacing and tabs
  • Custom HTML – lets you add any custom HTML and preview it as you edit it.
  • File – Adds a link to a downloadable file.
  • Lastest Comment – Displays all your most recent comments
  • Latest Posts – displays a list of your most recent posts.
  • More – lets you define how much of an excerpt of your post is shown on your home page.
  • Shortcode – insert additional custom elements with a WordPress shortcode

Why you should convert to Gutenberg from Classic Editor

Gutenberg has a number of features that I find to be rather useful, including the fact that the Gutenberg blocks are easy to move around and format on the fly. Add to that the multiple types of content and media that no longer requires an additional plugin or shortcode and with the introduction of reusable blocks, you no longer have to keep that one snippet of code handy when composing or updating your posts. Simply insert the saved reusable block where ever you want it and your done, no more copy and paste and hope you grabbed the right one.

I personally love the reuseable blocks for things like my Newsletter sign up forms, and Affiliate Disclosures I format them once in the first post that I added them into and then save them for use later. If I ever need to update them I do so from the new Reuseable blocks menu and my whole site updates. No more going through each and every post to update the statement on each one individually.

Or change newsletter service providers? Add the new sign up form to the Newsletter Reuseable block and presto, what took us 3 hours last time now took 5 minutes. The time savings is awesome.

One of the other features I like is the new block editor menu to the right of your screen. Some of the setting I never use, but things like Alt text on images is now less effort to update making it simpler to keep your posts SEO friendly.

Add to that, most of the plugins that I’ve used with Classic are all compatible with Gutenberg, some even have some extra blocks available that help keep the functionality simple to add to each post. And in some cases I was even able to reduce the number of plugins on a site because Gutenberg had the native functionality I used the plugin for.

How to update in WordPress from the Classic Editor to Gutenberg Blocks in 3 simple steps and why you should

4 Things to do Before Updating to Gutenberg Blocks

Do a full backup of your site. This step is important because you’ll need a complete back up if you find that there is some conflic with your current site plugins, custom coding, or other elements. Having a back up you can restor from will save you headaches if you run into an error.

Confirm that your theme will work with the new WordPress 5.0. I recomend the Hueman Theme by Press Customizr and since you are reading a site built with it you know it works 😉

If you can test WordPress 5.0 (aka Gutenberg) in a WordPress staging environment to see if you want to update all your posts or just the new ones.

Notify anyone else who creates content on your site about the changes.

How the Gutenberg editor impacts existing posts and pages.

Posts and pages written prior to WordPress 5.0 should continue to display properly unless there is a direct conflict with a plugin or shortcode on it.

As a post (or page) author any content writen in the classic editor will appear in one big block. If you want to see these in the Gutenberg blocks you will need to convert each post manually. At the time this post was writen there was no easy way to bulk convert posts built into Gutenberg.

If you don’t convert a post to Gutenberg and wish to make changes/edits to it there really isn’t a lot of changes you need to be aware of. However there have been some comments that switching between visual and code views may return you directly to the top of the classic “Block)

How to move a post from Classic Editor to Gutenberg Blocks

If you want the full Gutenberg function accross your site you can complety convert your existing WordPress posts to Gutenberg Blocks. Here is the process I have used time and again to convert over 50 posts recently.

Turn off the Classic Editor Plugin

First, you will want to make sure that if you are using the Classic Editor plugin it is turned off. You can do this by going to your plugins (left menu) finding the Classic Editor and disabling it. Then you will want to head on over to your posts and select one that was created using the Classic Editor and open it up in the editing screen.

Note: for the purposes of this tutorial I am using a post from another blog I manage you can find the post I’m referenceing here.

Once you’ve opened the post you wish to convert you should see something like this:

Classic Editor to Gutenberg - 1

If you look just under the word “How” in the title you can see the word “classic” this is a confirmation that the post is still in the classic editor.

From here you want to try the built in converter for switching from Classic Editor to Gutenberg, so click into the text of the post on the block you will see the classic editor’s formating bar show up. It should have three little dots in the top right corner of the block. Click it then Click “Convert to Blocks”.

Where to find the "Convert to Blocks" for Classic to Gutenberg editor conversion.

Note: this may also be in a bar at the TOP of your screen if you have moved the tool bar up to the top (I usually do)

where to find the "Convert to Blocks" in the top tool bar
1. Where to set the tool bar to the Top of your window
2. Where to convert the post to blocks from the top tool bar

If nothing happens. In a number of cases, this may be all you need to convert to Gutenberg Blocks. However, if you have lots of text and or photos on your screen it may not do anything. I’ve also noticed that if there are embedded Pins most posts won’t convert using this method.

From what I gather it looks like the developers put in a stop around some formatting as well. So if it doesn’t convert for you right away, chances are you will need to “convert” it manually.

There are 3 ways to manually convert a post.

1. The Copy / Paste method

While I don’t recomend it many people will just create a new post and copy and paste everything over. Please note that if you try this the formating may go wonky when you paste it and it won’t work if you copy the html from the original to the new one as is. The new post will not paste formating it wouldn’t convert before.

Pro’s – this is likely one of the easiest ways to convert to Gutenberg if you are wanting to do it yourself. All the content will be moved over and you can insert all the original photos where ever you want them etc.

Con’s – You may need to type out the whole post again if you have a lot of custom formating in your post. Also if you have comments on the posts you may loose them when the new post is published, even with the same URL. Also takes a while to move everything over and when I tried it myself took the longest of the options I’ve tried.

2. Remove the “Problems” and convert it again

If I’m converting one of my own posts this is the one I prefer. Most of the time the “Problem” is the number of Images in the post or something about how it’s formatted like some hidden pins. Remove those and it will convert to blocks using the original method above. Plus then you just need to re-insert the removed items and any special formatting.

I’ve used this oppertunity to review all my posts that I’ve converted and refresh things like the embedded Pins for Pinterest, and any images I’ve been using.

Pro’s – quicker, keeps the comments and any social shares that were linked to the post intact with out needing to wait for a social sharing plugin update.

Con’s – it can take time to figure out what all needs to be removed. If it is just the images it can also take time to confirm what if any meta data needs to be saved for the update.

3. Hire someone to do it for you

When you are running a blog often times you juggle so many things on a daily basis already, writing new posts, newsletters, pins, social media and SO MUCH MORE. So converting all your posts to Gutenberg will take time and effort away from those tasks, and if you have a large site it could take weeks or even Months to convert them all!

That’s where hiring a Virtual Assistant can help!

Pro’s – You save time that can be used to focus on continuing to build your blog. A professional will make sure that everything gets transferred over and even set up and insert your re-useable blocks for things like Newsletter sign up forms, and Affiliate Disclosures as needed within your updated posts.

Con’s – it will cost money, depending on who you hire the cost can vary.

If you are interested in working with a professional to convert your posts you are welcome to connect with us, to get started requesting your quote please complete the form below and we would be happy to let you know our availability and pricing.