Wordpress: The Gutenberg Editor Problem

WordPress users are soon going to be forced to use this thing called “Gutenberg Editor” (what kind of name is that?) to make entries on our blogs and news sites. Some people are complaining that this represents a learning curve that not all are comfortable confronting.

The first problem I confronted using the Getenberg Editor writing this article was the problem you see right in front of you. I inserted an image further down in the article and the image appears twice. Annoying.

So in this article we will examine what the Gutenberg Editor actually is and does.

“The goal of this new editor is to make adding rich content to WordPress simple and enjoyable.”

Well, who can argue with that goal? It seems laudable enough. However, people can and do argue with that goal because it requires a learning curve they might not be comfortable confronting. The old WordPress editor seemed pretty simple.

Well, it turns out the Gutenberg Editor (I still can’t get over the name), is pretty handy and doesn’t represent a difficult learning curve. The article you are reading was typed with the new editor, and I learned as I went.

True, it’s different, but it does allow you to move your paragraphs around quickly and efficiently. It’s especially cool how it allows you to utilize images in your work.

Gutenberg works in what they call “blocks.” It sounds like a complicated concept at first but it isn’t. Each paragraph you place in a different invisible block, and you can move that paragraph up or down or edit the style and formatting separately and easily within that block.

It turns out the whole process is quite intuitive and doesn’t take a long time to learn at all.

There are different kinds of blocks. The most basic is a text block, but there are many other kinds of blocks as well.

Headings are another kind of block which you can move around and format as you like.

You’ll notice in the image below I inserted a caption. As you will see, although in the Gutenberg editor it looked fine, after publishing the caption got all messed up and I don’t know why.

Beautiful landscape
Picture blocks allow you to easily add captions and move the picture and caption around as you please. You don’t have to be careful about selecting the image or caption along with other material by mistake.

Adding blocks is a simple as finding the + in the editor, which is all over the place and easy. Types of blocks you can insert include:

  • Text & Headings
  • Images & Videos
  • Galleries
  • Embeds, like YouTube, Tweets, or other WordPress posts.
  • Layout blocks, like Buttons, Hero Images, Separators, etc.
  • And Lists like this one of course 🙂

You can change the amount of columns in your galleries by dragging a slider in the block inspector in the sidebar.

If you combine the new wide and full-wide alignments with galleries, you can create a very media rich layout, very quickly:

Accessibility is important — don’t forget image alt attribute

Sure, the full-wide image can be pretty big. But sometimes the image is worth it.

The above is a gallery with just two images. It’s an easier way to create visually appealing layouts, without having to deal with floats. You can also easily convert the gallery back to individual images again, by using the block switcher.

Any block can opt into these alignments. The embed block has them also, and is responsive out of the box:

You can build any block you like, static or dynamic, decorative or plain. Here’s a pullquote block:

Code is Poetry

The WordPress community

Let's hear what you have to say. Write a comment.

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: