Experience with Gutenberg on Wordpress.com – Late Sept 2018

From late September 2018, selected WordPress.com users have been given the opportunity to try Gutenberg out. I have been trying it out on this website. My main objective has been to ensure that my existing content will work with Gutenberg. I currently use the Independent Publisher 2 theme which is aimed at people who want a simple theme where the word is king.

Please note that all observations in this post relate to tests that were performed during the last week of September, 2018. If you are reading this some months later it is possible that things may have moved on. Caveat lector (let the reader beware).

You probably know that there are two ways to invoke the editor in WordPress.com, via the original WP Admin dashboard or via Calypso. If you activate Gutenberg at the current time you will find that it only operates through the dashboard where you can decide whether to open a post / page in the Gutenberg editor (the default) or in the Classic editor. Opening a post or page in Calypso is limited to the use of the Classic Editor.

You may not have heard the term Calypso but WordPress.com users should recognise it from this screen capture. Clicking Site Pages or Blog Posts invokes the editor.

I started off with my largest document “A potted history of Association Football in England” which weighed in at 21K words. This is not a straightforward document. It includes: a quotes paragraph; a self-built HTML table of contents with links so that a reader can jump straight to a specific section; standard images from the media library; images from the Getty Images library (which are implemented by using shortcodes); and a number of bordered sections built with HTML which contain information which does not really fit in with the natural flow of the text. A brief explanation of shortcodes. They are essentially macros. One use is to provide the same functionality in the main body of a post or page that is available in some of the popular widgets, e.g. to display a gallery.

Opening the page in the Gutenberg editor for the first time results in the display of a single Classic block. This can be edited in a similar fashion to how you work now. You could in fact keep the document as a single Classic block if you so wished. However, the major drawback at the moment is that you cannot insert an image or a contact form into a Classic block. I have previously mentioned this deficiency. To me, this renders the Classic block practically unusable. I do not know if they are going to rectify this problem.

One of the options is to convert this single Classic block into multiple native Gutenberg blocks. This task took 25 seconds for my large document. While this was not unexpected, there was no indication that anything was happening, leading to the “did I really click on that option? .. should I click it again?” syndrome. Now, it has to be said that the vast majority of posts and pages are relatively small and they should observe no significant delay when performing block conversion.

Observations on how successful the converter was

Standard WordPress facilities were converted without any trouble. This is good news.

However, where a user makes use of HTML to produce effects that the current version of WordPress does not provide “out of the box”, the converter struggles.

My table of contents no longer worked. The section labels (they call them anchors in HTML) had disappeared. It appears that the converter is quite fussy about how they are defined, whereas the current version of WordPress is not. I had to manually alter all my section labels in the original version of the footie document, and then the converter worked OK.

My bordered sections which are enclosed in HTML div and /div statements were also not correctly converted. The borders disappeared and what should have been one block turned into two, and sometimes more, blocks. I was forced to set up a custom HTML block and recreate the bordered section from scratch. This was a bit painful. Fortunately, there are only four of them in this document.

I subsequently extended the testing to various other documents on this site.

The local history of Sunninghill & Ascot is currently the most popular item on the site. It includes several shortcodes to display galleries. They converted without any trouble. It also contains a table of contents. Forewarned by my experience with the footie history, I manually changed the section labels so that the converter would not get upset.

I use HTML-created tables in various places on other pages in my website. The converter recognised the fact that they were tables and created table blocks, albeit not very satisfactorily. Cells that contain images were not displayed in the editor but did appear on the rendered website page, while empty cells just disappeared totally. In addition, a table block, whether an existing table that has been converted or a newly inserted table block, insists on making each column the same width, not something that I want. Somewhat bizarrely, my converted tables appeared with the correct column widths in the editor but not on the website. I have to say that I am not impressed with table blocks at the moment. When I implemented the original HTML tables as custom HTML blocks they worked satisfactorily. I propose to adopt this approach until such time as the table block is improved.

Other Observations

One idiosyncrasy of WordPress is that the display of a post or page may look different in the editor from how it looks on the website, i.e. you do not necessarily get WYSIWYG. The degree of difference can vary from theme to theme. It seemed to me to be more pronounced in Gutenberg, but this may just be the Independent Publisher 2 theme that I am using?

Please note that any existing posts / pages whose content remains unchanged will display satisfactorily on the site, i.e. it is not necessary to convert them.

Re performance, loading the very large footie history page on the website was sluggish on the existing version of WordPress, and it was even slower on the Gutenberg version of the page. I had already decided to split it up into multiple pages .. something which I have now done.

Finally, I tried out a copy and paste from another application. I have been in the habit of penning the initial drafty words of my articles in Microsoft Word, and then at some point copying and pasting them into WordPress. The words in this post were originally part of a larger article in Word. When I pasted this content into a paragraph block it included the Word formatting as well as the text. In WordPress 4.x there is an option to just paste the text, but there appears to be no similar option in the paragraph block. My workaround was to create a Classic block, set the paste as text option, perform the paste, and lastly convert the classic block into Gutenberg blocks.