Gutenberg is Coming, Ready or Not!

A new WordPress release, which includes the fabled Gutenberg editor, will be released on Thursday, December 6. Normally, I don’t say much about WordPress releases specifically or the readiness of EWWW IO. However, this is a big one, being version 5.0 and all.

Now, I don’t want to go into the politics much, but the question you may be wondering…

Is EWWW IO Ready for Gutenberg?

Yes, EWWW IO most certainly is ready for WordPress 5.0. I’ve been following Gutenberg development as it relates to image handling, along with some help from a local WordPress consultant. As of version 4.5.1, we resolved all known issues with EWWW IO and the new Gutenberg editor.

We didn’t have to make any major changes to get EWWW IO ready, except for our ExactDN service. The classic editor uses admin-ajax.php to handle images, and Gutenberg uses the WordPress REST API. You don’t necessarily need to know what all that means. Mostly, you simply need to know that we prohibit ExactDN from running in the WordPress admin. This prohibition includes admin-ajax.php automatically, and thus the classic editor. However, the WordPress REST API is not a part of the WP admin, so a new exclusion was necessary. This exclusion prevents ExactDN from mangling the REST API responses (which otherwise would trigger a minor bug in Gutenberg).

Am I Ready for Gutenberg?

Like all things that change, it’s going to take some time to get used to doing things differently. There are a variety of articles out there that deal with how to use Gutenberg (get your Google-fu out), but I’ll dig into some image specifics:

Image Blocks

Image Block with settings pane.

Gutenberg considers all content, from a list to a paragraph, to be a “block”. Inserting images is the same. Just drag an image into an article, and Gutenberg will insert it for you. Note that you need to drag it specifically to where you want the image to appear. You should see a little blue line appear in the editor that indicates where your image will be inserted. Some themes will even be clever enough to tell Gutenberg which “size” (or thumbnail) of an image is the best. But do take care that you choose an appropriate size so that you don’t insert over-sized images in your content.

Inserting an image in Gutenberg

Happily, it’s easier to change the size than ever before. When you click on an image, you will have a dock/panel on the right side where you can easily change the image size. You can choose from Medium or Large, use a Thumbnail, or take advantage of any sizes your theme might generate.

Gallery Blocks

Gutenberg gives the stock WordPress galleries a big face-lift from the traditional grid. The new gallery block is more of a fluid layout in the masonry/mosaic style (if there’s actually a difference between masonry and mosaic, feel free to enlighten me). To add a gallery block, click the Add Block button (the + sign with a circle around it), and choose Gallery. You can select images in the same was you always did, but now you can add captions too. Once inserted, you can drag images onto the gallery block to add them in, or click on them and hit the X button to remove them. Clicking on an image in a gallery also allows you to edit the image caption directly.

The revamped gallery block

The gallery blocks don’t allow you to choose the size of images used. Instead, the gallery block attempts to use the core WordPress functions to pick the best size. It doesn’t do a perfect job of this, but there are plans to add some extra markup within the gallery code. This will allow ExactDN and other plugins to further fine-tune the image layout. Plus, the galleries are responsive, so mobile devices won’t be loading huge full-resolution images.

Cover Blocks

The new cover block, with an image of an owl to show the overlay

This is a cool-looking block, that lets you insert an image with a text overlay, and also a color-shaded overlay. By default, it dims it with a black/gray overlay so the text is easier to read. However, you can pick custom colors, and make it look pretty slick.

Cover block settings

However, this one comes with a very big caveat: it does NOT allow you to choose anything other than the original image. As a result, you must resize any image you use in a Cover block to fit the space where it will be displayed. Further, the editor inserts it as a background image, and does not apply any of the usual WP image filters. So unfortunately, ExactDN can’t do much except plain compression. If you use a Cover block, just make sure you resize it appropriately.

Is the World Ready for Gutenberg?

I’ll admit, even though I’ve been following the development process, the December 6 date initially surprised me. That is, until I remembered that WCUS is this weekend. No matter why you think Matt Mullenweg rushed the process, there is no doubt he chose December 6th because of WCUS. Otherwise, once they started the RC (release candidate) phase, delaying until January was nearly impossible from a development standpoint. So from my vantage point, Matt had two choices: get the release out the door, or wait until the week after WCUS. I know I would choose the former, even though some would be upset by the decision…

cat yawning, looking kind of angry, definitely not ready for Gutenberg
Some folks just aren’t ready!

For the rest of us, it’s a major release, so it isn’t automatic, and even when you ARE ready to upgrade to 5.0, you can still use the Classic Editor plugin to use Gutenberg selectively. Use Gutenberg as much (or as little) as you want, until you are comfortable with it. The Classic Editor plugin has been available for at least a year, and it’s not going anywhere anytime soon. So just take a deep breath, and relax.

I’m Ready, Will You Join Me?

I’m really excited about the potential of the block-editing style introduced in Gutenberg. Even though image handling isn’t perfect, I know there will be improvements with future releases. The core media team has been brainstorming all sorts of ideas. So after they release Gutenberg, the media folks can get to work implementing some of those ideas. This is also an opportunity for page builders, of all shapes and sizes, to standardize on using blocks. Then they can focus on making some really great blocks that make our lives easier (instead of having to rebuild everything when we migrate from builder X to builder Y).

I’ll admit, Gutenberg has already spoiled me with how easy it is to insert images. So much so, that I installed the Gutenberg plugin so I could finish this article with it! I think you’ll really like the new editor once you get comfy, and when you start adding some new images, EWWW IO will be ready to make them as efficient as possible.

2 thoughts on “Gutenberg is Coming, Ready or Not!

  1. Thanks for the post. One thing I’ve noticed is that it doesn’t seem possible to put an image in the top right of the blog post with Gutenberg. Previously, you could put an opening thumbnail there, aligned right, with the text flowing around it. With the Gutenberg blocks there’s always a new line between them so if you put an image in first and align it right then your text begins one line down. It’s a shame.

    1. Looks like if you do the same thing it still works. Insert an image block at the top, above your text. Then, choose the Thumbnail size, click the right-align button, and it seems to do exactly what you mentioned. It’s possible that some themes might not handle that properly, but I’m pretty sure Gutenberg has no issue with that setup. Do be sure to flush all caches, especially Autoptimize, as Gutenberg might not function 100% if the front-end JS/CSS doesn’t get loaded.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.