Getting Ready for Gutenberg – Part 1: Is Gutenberg Ready for Us?
If you run a WordPress website, you’re undoubtedly aware of the big change that’s coming in the platform’s next major release, WordPress 5.0. Whenever this update rolls out (should be any day now), the page building and editing interface we’re all familiar with will be replaced by Gutenberg—a new visual editor which utilizes draggable “blocks” of content to build your posts and pages. While it’s great that WordPress is focused on actively updating their product, we here at LLD – who build 95% of our sites on WordPress – wonder if this is the best direction for the platform and if, in fact, Gutenberg is stable enough to be included in its core installation. In fact, the last time we checked, Github users have logged no fewer than 1,200 issues reported by users.
We also wonder, as we’re sure many do, why this update is necessary at all. There are already several themes that feature drag-and-drop editors—such as Divi and Elementor— that provide essentially the same features, and integrate beautifully into the current WordPress framework. And with 75 million users currently happily using WP’s current interface, it’s puzzling that the people over at WordPress never asked, “if it ain’t broke, why fix it?”
Using the Gutenberg plugin included in the latest release of WordPress, LLD performed some stress tests on Gutenberg, and discovered problems significant enough to befuddle even the most experienced WordPress users, some of which are covered in this post. If you’d like to perform your own tests, we strongly recommend setting up a dev or staging area for your site where you can experiment with the new interface, and see how, exactly it will affect your site, without risking your live, public-facing site. If you have limited tech experience and want an easy way to accomplish this, check out the All-In-One WP Migration plugin which is available for free.
Before we get to the major issues we found, we’ll provide some good news. While Gutenberg will be the default editor in WordPress 5.0, you will be able to continue using the classic editor by activating a pre-installed plugin included in the release. One potential problem with this approach, however, is that there is the possibility that some of the plugins you currently use, particularly ones that aren’t frequently updated, may have unforeseen conflicts with either the “Classic” plugin, or even with Gutenberg itself. Even if you choose not to activate the plugin and use Gutenberg as your default editor, every page and post will have the option to create or edit a page using the classic editor by clicking a newly added “Classic Editor” link, as seen in the image below.
It’s also worth mentioning that the latest Gutenberg plugin update (4.1.0 on 10/24/18) included 113 fixes, which tells us that major improvements will be implemented before the official launch of the product.
So, for what it’s worth, here are some of the major issues we noticed while testing Gutenberg on our own development installation:
Theme Conflicts
While WordPress insists that Gutenberg will work with all themes, what they mean is “all themes that are commercially available from major theme developers.” If your theme was custom made for your business by an independent developer, as many are, it will be up to that developer to update that theme so that it plays nice with the new interface. Some businesses no longer have relationships with their theme developer or, if they do, it may require significant expense to have them update your theme for you. In our tests, we used a custom theme, and found that Gutenberg caused the page sidebar to be pushed down below the content. This was, for us, an easy fix. But if you’re someone who isn’t comfortable with editing the code for your theme, it could cost some money to have a developer do it.
Images
Gutenberg includes both an image block and a gallery block which are both quite easy to use, but sizing and placement of images can be a challenge. One of the most annoying problems we encountered is that there is currently no way to resize images when using the gallery block. By default, a photo gallery will resize photos in the grid to fill the entire page, which may or may not be how you’d like it laid out. For individual images, you can resize, but getting text to wrap around the image is a clunky process. First you must left align the image, and then create a new block for text. There also doesn’t appear to be away to specify the margin between the image and the text (‘margin-right/left’ in CSS or ‘hspace’ in legacy html) on the page editor, though this can always be specified in your style sheets.
Tables
Gutenberg does have a block for simple tables, but that’s all you should expect: simple tables. The block cannot seem to handle anything beyond a simple grid, and using things like table headers or columns that span multiple rows (or vice versa) doesn’t seem to be possible at this time. Even if you choose to edit the HTML of the table block to make these kinds of adjustments, they won’t stick. When you convert the table back to a block, it will simply revert back to a simple grid.
Screen Options
One of the most mysterious choices the WordPress developers made when developing Gutenberg was the decision to no longer include the familiar “Screen Options” menu. This was the feature that allowed you to choose which features to include in your admin area by checking boxes in a fly-down menu on the top right of the edit page. This is an extremely useful feature for keeping your edit screen neat and clean with only the options you need to use. Instead of tucking this away somewhere else, they seemed to have disappeared this feature completely.
HTML
Each block can be edited as HTML, but be aware that this may or may not achieve the desired results since, as mentioned, not all blocks (like tables) will behave the way you want when using HTML. Also, while it’s possible to edit the whole page as HTML, when you do this you’ll notice that the code is littered with additional markup which defines the blocks. This is not the worst thing in the world, but does take some getting used to.
Permalinks
In classic WordPress, the slug and permalink for the page is created as soon as you type in the title, and the URL appears at the top of the page. With Gutenberg, the permalink is hidden by default, and in order to see it at all you need to first save the page, and then click on the title block at the top of the page. The permalink will then pop up, but will stay visible only as long as the title block is selected. We understand that the idea is to keep the interface neat and clean and to hide things when you don’t need them, but this actually causes you an extra click, which is annoying, but perhaps something we’ll just have to get used to.
Spacers
Creating white space has always been somewhat problematic in WordPress, but whatever method you used to use to do it, the only option when using the drag-and-drop Gutenberg editor is to use a ‘Spacer’ block. This wouldn’t be so terrible if it gave you granular control over the height and width of the space, but the only way we could find to adjust the block is to drag it by the edges. If you’re thinking you’ll convert the block to HTML and fine tune it that way – good luck. When we tried, we found that when we changed it back to a block it either reverted back to the original or the block just disappeared altogether.
We’ll hopefully have a little more time before Gutenberg becomes the default editor for all WordPress installations, but it’s clear that reshaping the platform into something that we’ll all be comfortable with will be a challenge for their developers, and a hair-pulling exercise in frustration for the rest of us. At LLD, we’ve been working with WordPress for so long that we feel confident we’ll be able to make the adjustment smoothly. If you’re already feeling the dread of taking the plunge into Gutenberg, let us know, and we’ll see what we can do to help. We’d love to be able assist past, current, and new clients get over this hump, and become comfortable with the future of WordPress.
Filed under: Website Design, Wordpress
