Using Gutenberg, the new WordPress editor
I want to talk about Gutenberg. It has been the default editor in WordPress for some time now but has been massively unpopular. Its rating on the WordPress plugin page is really low and one of the most popular plugins is the Classic Editor. I myself have done like many do and install the classic editor plugin by default on all new sites. I've been feeling guilty about this so have decided to give it a go.
What is Gutenberg?
It is a new editor to build the content of a page in WordPress. It works by putting everything in blocks. A could be anything. Some examples include headings, paragraph, latest posts list, image, gallery and many more. You can make your own blocks using the new API.
It is comparable to editors like WPBakery Page Builder or any number of other third party page builders. I think this has been a long time coming. WordPress has lagged behind in this area. TinyMCE hasn't been the editor the entire time I've used WordPress. Maybe having the freedom to choose editor and just have a bare bones as the default is better. In any case WordPress is moving on.
The Experiment
I figured the best way to really give Gutenberg ago was to use it on a real site with real data. As I can't inflict it on any clients I choose to use it on my own website. Prior to doing this I was using just the WordPress HTML editor with TinyMCE (Classic editor) disabled. To make the change I needed to enable the visual editor on my used and remove the Classic Editor plugin. Once that was done I had a load of pages with a single Gutenberg block in them containing all the classic editor content. To make it into a Gutenberg page I had to break out the content into Gutenberg blocks and arrange them in the same layout my custom HTML provided. I wanted to ensure all pages are identical to the ones on the original site.
How did it go?
Well alright... For this site, being so basic, there wan't much Gutenberg couldn't do out the box. There was just a few things that I needed to get involved with some code to make work. It took a while to learn how to develop for Gutenburg but once I figured it out it turned out to be pretty easy. I did run into a few bugs though.
FontAwesome Icon
A way of adding in FontAwesome Icons. I made a basic block for this to that allows me to enter in the class name of a FontAwesome icon and render it. I create a couple of addition style for the different sizes where it used in the site.
Container
I wanted to be able control different moduals on the page for example on the home page this is the main content at the top and then underneath a grid of recent posts. I want the recent posts to be a block rather than built into the template as it was. To archive this I needed to create a container block to set the width of the content and apply this off white background colour. To make this container useful I had to remove it from the theme templates.
Recent posts
Then as already mentioned I needed the recent posts grid. The latest post block that comes with gutenburg pretty much does all I need apart from having control of the layout. I wanted to display the post thumbnail for example. So I created a custom block for this. In hind sight it may of been possible to override the render function of the existing latest posts block but I didn't see any documentation of how to do this.
The issues
Although I managed to get going with developing with Gutenberg quite quickly and found it relatively easy to develop for, there has been a few bugs that I have been know about for a while but not mentioned in the developer documentation.
One example was adding styles to block that can contain other blocks causes the editor to crash. It turns out that this was caused by it showing a preview of the style and when that preview is generated it can't handle nested blocks and crashes the editor. After a search about this I found a github issue that had been around for a while with no fix. At the time of writing I believe a fix has been made but hasn't been released yet.
Another thing that makes this annoying to work with is just making a minor change to the way a block saves causes the block to break in the editor and in many cases for me its hard to resolve in some cases having to edit by html and copy out the content, recreate the structure and copy the content back in.
This just worries me its not a particularly well finished product yet. It is on the other hand good when it is working.
Future plans
I have some ideas for some plugins to develop for Gutenberg to create some new blocks. I certainly want to continue developing for Gutenberg to stay familiar with it.
I would like to use this on a client site at some point. I have a few clients that use the Bakery Page builder and I think this could be a good alternative. I feel comfortable building custom blocks quickly meaning anything that's missing can be put together pretty quickly.
Final thoughts...
I personally think it is a very easy and user friendly way of editing the content on a website. It has huge potential for plugin developers and really makes WordPress feel more modern from both a developer and a user. I really do want this to become the future of WordPress.
That being said I fear for the future of Gutenberg in some ways as it has been so unpopular. I think this is due to a few things. From a developers point of view it is a massive change in work flow. My experience working with a few different companies developing WordPress themes is that people like to make hard template and custom fields to allow editing of the content. The Gutenberg approach puts the page layout back into the hands of the writer and that can be a problem. I also find it can be easier to just write an HTML template with custom fields rather than creating a load of blocks to do all the things on the page. In my opinion though the Gutenberg way makes more sense than tonns of meta boxes in terms of how WordPress works. Its supposed to have all page content in post content.
From a non-technical persons point of view I see it as it just doesn't have another functionality yet. If your use to building a site in WordPress by buying a big theme with tonns of deisgn options and then a third party page builder like WPBakery Page Building then this is going to feel limited. It may not even integrate with more complex premade themes. I think until theme and plugin developers start taking Gutenberg seriously its not going to work for non-technical people.
I think right now it could work very well for new website developments with a custom built theme. This is something I would like to start doing to help WordPress progress.