Books Magazine

Gutenberg Block Error

Posted on the 16 February 2019 by Hmcurator

I mentioned recently how I was having problems with the new WordPress editor, Gutenberg. Gutenberg is based around “blocks”, and, in theory, existing content was supposed to be converted to a “Classic Editor” block and be backward compatible. As a computer programmer by trade, I suspected that this would not be the case, and I was correct. After the update, all my posts and pages gave errors:

Screen shot showing Gutenberg post editorGutenberg post editor 1. Screen shot by Jonathan Sternfeld.

I tried creating an htaccess file and disabling my security plugin based on what I read in this post, but it did not help. After some experimentation, I came up with the following procedure to get my content back.

The first step is to switch to the new Code Editor. Click on the three vertically stacked dots at the top right of the screen. From the options that appear, go to the Editor section and click “Code Editor”:

Screen shot showing Gutenberg post editor
Gutenberg post editor 2. Screen shot by Jonathan Sternfeld.

Now you can see your content instead of an error message. Select it all (click somewhere in the text and press CTRL-A in Windows) and copy it (CTRL-C in Windows). Exit the Code Editor by clicking the “Exit Code Editor” text in the upper right part of the window:

Screen shot showing Gutenberg post editor
Gutenberg post editor 3. Screen shot by Jonathan Sternfeld.

Remove the erroring Classic Editor block by clicking in it, selecting the three vertically stacked dots to the right side of the block, and select “Remove Block” from the options that appear:

Screen shot showing Gutenberg post editor
Gutenberg post editor 4. Screen shot by Jonathan Sternfeld.

Now add a “Custom HTML” block by clicking Add (the plus sign in a circle) and then clicking “Custom HTML”. If you do not immediately see Custom HTML, either scroll down through the choices or search for it in the search box provided:

Screen shot showing Gutenberg post editor
Gutenberg post editor 5. Screen shot by Jonathan Sternfeld.

You can now paste your content into the new block (CTRL-V in Windows). For longer posts, I then add a “More” block, and then a second “Custom HTML” block:

Screen shot showing Gutenberg post editor
Gutenberg post editor 6. Screen shot by Jonathan Sternfeld.

I then have to edit out the old “More” break and the content after it from the first Custom HTML block, and the content before the “More” break and the “More” break itself from the second Custom HTML block. The result looks like this:

Screen shot showing Gutenberg post editor
Gutenberg post editor 7. Screen shot by Jonathan Sternfeld.

Then, when you think you are done, there is one more step. The Classic Editor apparently understood blank lines as paragraphs, and content typed normally appeared the way I wanted it to. Custom HTML boxes do not understand this, and need the formal HTML start and end paragraph tags in order for the content to appear properly and not all in one big paragraph:

Screen shot showing Gutenberg post editor
Gutenberg post editor 8. Screen shot by Jonathan Sternfeld.

What is worse is that the new Preview button does not accurately reflect how the post will look once published. It shows the text properly formatted without the paragraph tags. Very upsetting!

Rumor has it that the 5.1 update is due at the end of the month. Perhaps some of the problems described will be corrected. In the meantime, I hope that this guide helps, and I will slowly be working my way through the 363 posts and 140 pages that make up the Harvey Mercheum website making these changes.


Back to Featured Articles on Logo Paperblog

Magazine