I decided to use Gutenberg on a client site recently. The decision was based on the following:
- I wanted the user to be able to add their own content without having to learn HTML and CSS
- I wanted to stay up to date with what was happening with WordPress
I found using Gutenberg problematic in places. However, for me, while not plain sailing, it was manageable. I will continue to use Gutenberg.
Today, on the 16th April 2019, I’m quite happy, typing this post using the Gutenberg block editor. The block editor works well (as I’ve no doubt mentioned before), especially if your content is comprised of headings, paragraph text, lists and standard inline images.
Third Party Gutenberg Blocks
Gutenberg is a little less cool when you start using third party blocks that purport to do fancier things. Frankly, you still need to know HTML, CSS and have an appreciation of what is going on under the hood to survive some of the third party Gutenberg blocks out there, or know when to abandon their use.
But as the site designer, you can set things up using Gutenberg such that your client can enter their own content without technical difficulties.
WordPress Is In Transition
WordPress is clearly going through a transition period. It is in that awkward space between the old and the new. That’s great for WordPress, but we users still need to get our work done and rank in the search engines. My advice to myself is still to use the simplest and best tools for the job and keep pages clean.
In my world this normally means making full use of HTML and CSS, because you can’t get simpler than that. But as some Gutenberg blocks have proved useful, I will take a hybrid approach for my sites, for now.
Some of my content will be Gutenberg blocks and some will still be short codes. Not all plugins – including our own – have become Gutenberg blocks just yet. We too are in a transition period – but do not worry. A plugin can be Gutenberg compatible but still use short codes.
The Problem With Gutenberg Today
Issues arose when I tried adding accordions, and the other more interesting blocks. I’ve found that once you step away from the simple stuff, the quality of what has been provided via Gutenberg blocks by third parties, varies considerably.
I think part of the problem is that they are trying to achieve, what is on some level, impossible. A way for users to create attractive pages with varied layout options without knowing anything about code. To a point you can do it, but it has the potential to get messy fast.
What’s Going On?
A number of basic Gutenberg blocks are supplied by WordPress as part of the core. These blocks tend to be reliable, but not very exciting. They are the basic paragraph text, headers, lists, block quotes, inline images and so on.
If you want more, you can install Gutenberg blocks by third party development teams. I installed the following Gutenberg block plugins on my client’s site
- Atomic Blocks
- Ultimate Addons For Gutenberg
There are others, but I didn’t want to overdo it.
The first thing you’ll notice is that each plugin house delivers the same type of Gutenberg functionality. So, for example, both Stackable and Atomic have created an Accordion block.
Normally I choose to install a WordPress plugin because it gives me the specific functionality I need. Further, I don’t tend to install the same type of plugin multiple times. For example, although I have seen people do this (weird), I don’t use two SEO plugins at the same time. I choose the one SEO plugin I like best. If I get fed up with that SEO plugin, I can change my mind and use a different one.
This is not the case with Gutenberg blocks. Each Gutenberg development team develops a collection of blocks, and depending on the block’s author, there isn’t always the choice to switch the ones you will never use, off. So if you install several collections, you will inevitably get the same blocks (implemented differently) by all of them.
If you change your mind and want to change from one, say, accordion to another, then you have to re-enter the content into the new blocks. This happened to me. I initially implemented an accordion FAQ on my client’s site using the Stackable Accordion.
But I found it was buggy. My client sent me this screenshot. When you opened the last accordion on the page, it overlapped with any content beneath it.
On investigation I found there was no way I could easily code around this. They had not enclosed the accordion in any type of container to mark its end.
So I abandoned the Stackable accordion and used the Atomic Blocks accordion instead. Theirs worked well, but wasn’t as functionally rich as the Stackable one was supposed to be.
Because blocks are delivered as collections, so you might want one block from this collection and two blocks from that collection and so on. You will probably end up installing several Gutenberg block collections just to get the particular set of blocks that you like.
Normally, if I want to include a call to action on every page (or on certain pages) on a site I’d put some content into a widget area that appears on every page. Then I’d control which page it appears on using the Widget Logic plugin. I’d do the work once and it would be done.
As we know widgets and widget areas are going to be removed from WordPress at some point soon, I thought I’d use a reusable block instead.
I created a call to action block, turned it into a reusable block and then manually added it to the bottom of every page I wanted it to appear on. This was tedious. I had to remember to do it every single time.
If I’d added the call to action in the normal way, via a widget area with visibility controlled by Widget Logic, I would not have had to manually add it each time. However because it was a reusable block, if I changed the content in one place it automatically made the change everywhere that I’d used the block. I can see how this would appeal to non-coders.
Blocks Are Not Available Everywhere
As I am still using widget areas on the home page of the Genesis child theme I used for the client site, I had no easy and reliable way to use Gutenberg blocks within those widget areas. So for some things I had to fall back to good old reliable, pre-Gutenberg compatible plugins.
For example I wanted a testimonial slider on the home page and I used a plugin to do it. There was no block solution available that I could find. None, unless I abandoned the Genesis widgetised home page and replaced it with an ordinary page. But why would I do that?
Abandoning the Genesis home page to create your own home page from scratch is a lot of work. It seems pointless when I’d already selected a Genesis child theme specifically because I liked the home page layout.
Further there is the question of preparing an ordinary page to become the home page. Some themes will provide a blank canvas on which to make a new home page, and some will require that you alter code to create the canvas.
In my case, I’d have had to clear the page out with Genesis Dambuster to get the space to create full-width, edge to edge sections, that are typical of most home pages. Then I’d either have to code the whole page by hand, or hope there were Gutenberg blocks available to give me the layout I want.
Gutenberg isn’t ready for full-on, big-time home pages just yet.
Colors are normally defined by a theme. With Gutenberg, there will surely be a day when themes are no longer required. You’ll be able to create whole sites using Gutenberg and so why would you need a theme?
However, right now during this long, awkward transition period we have themes. But practically every Gutenberg block allows the user to set the colours used in the block. Users may like this, but it could ruin a good design. It allows the user to easily choose any colour they like for anything. It could end up looking a bit of a mess.
In order to get around this, I added the code shown below. It removed the default colors and the color picker from all Gutenberg blocks, and replaced with them with the color scheme of my client’s business.
I added the code easily via Extender Pro. Now my client can only select colors for any blocks they use, from the short list of colors I have specified.
Oh my goodness, this was the worst aspect of using Gutenberg. Sometimes you need to nest blocks within other blocks. But trying to manipulate Gutenberg sections (from any block provider) was not easy. Good luck with that.
I managed to use Atomic Blocks Sections and I may write a post about it. Most normal (non-tech) users will find outer section blocks unintuitive.
I can see the requirement to add enclosing sections or divs, causing problems. Why? Because if you know about the need for these, you can probably build pages with a text editor anyway.
If you didn’t know about the need for enclosing divs, once you’ve figured out you need them, whoever you are, they are difficult to use in practice. For example, I’ve spent whole minutes trying to find the corner of one so I can select it.
If you can remember that using a <div> tag used to be a matter of literally typing it, the shenanigans now required to set up an enclosing <div>, has all by itself, the potential to make you hate Gutenberg.
Despite some blocks having media queries built in, they may not provide device size settings for every aspect of the block.
The point is, even with some attempt to provide point and click media queries, at the moment, CSS is required by many blocks to manipulate certain blocks on different screen sizes anyway.
The Gutenberg blocks built by the Elementor team ( Ultimate Addons For Gutenberg ) do have this media query feature. It’s clearly been migrated across from Elementor page builder-land. But sadly, so has Elementor’s passion for canyons of deeply nested divs.
For this reason I avoided all the blocks from the Ultimate Addons For Gutenberg collection. The divception (too many unnecessary nested divs) was beyond what I could tolerate and overriding their CSS, which I still had to do, was painful.
Despite the misgivings laid out here, I will use the native Gutenberg blocks for my client developments and for my own sites. But I will supplement them with some additional CSS, restricted colors, and a few easy to use blocks from third parties. This will make updating content easy for non-tech clients. I will try to only use blocks that are lightweight and easy to style.
I will also use our plugin WPMagiq. It is Gutenberg compatible, but we are not adding block functionality to it until we better understand where Gutenberg is going with coding standards for block development.
At the moment, official documentation for Gutenberg is still very incomplete, and even much of the existing documentation is outdated and incorrect. So, it can be tough to figure out how to build blocks, and what options there are to make the process of building blocks, easier.Jason Bahl
At the moment it’s like the wild, wild west.
I will stick with Genesis and continue to use the widgetised home page of child themes. That said, Genesis have started to bring out child themes where you can use Gutenberg to build home pages – i.e they are starting to step way from the widgetised home page.
Or, if you want to build a homepage yourself with Gutenberg, you may have to use Genesis Dambuster or a theme that allows for a totally cleared out page (no margins, no padding, no wrap) so you can rebuild the homepage, and its wrap, from scratch.
There are plenty of choices, but it seems to me, that to recognise there are choices, and then to make them, you can’t really be a WordPress beginner.
If you want to do as I do, and navigate your way efficiently through what is happening in WordPress, then do revisit this site to hear more about my ideas on how to build a blog.