So have you heard of Gutenberg, the new WordPress Visual Editor replacement for the conventional HTML editor?
If not then you will soon have because when WordPress version 5.0 is released Gutenberg will replace the current editor.
Gutenberg is more than an aesthetic design update.
The current focus may with content creation, but the eventual goal is for Gutenberg to offer full site customization and to compete with the big page builders out there.
Eventually, you will be able to build your whole site using Gutenberg.
Does Gutenberg sound good to you?
These are indeed exciting times to be a WordPress blogger.
This article will offer you a very simple guide to Gutenberg giving you some basics to get started with and showing you what is currently good and bad with the new editor.
If you can’t wait to give Gutenberg blocks a test drive then you can download right now.
How to download Gutenberg
Go to your dashboard inside WordPress and then go to
- Select “Add new”
- Search for the Gutenberg Visual Editor
- Select “Download” and then activate the plugin.
Now that you have Gutenberg
So let’s put together a Gutenberg Guide article and show you what you can and can’t do with Gutenberg and hopefully unveil a few tips and tricks along the way
Your getting started guide to Gutenberg – Introducing Blocks
Gutenberg has a very page builder feel to it when you first enter into creating content.
Every element that you add to a page or a post is now known as a “Block”
Gutenberg Blocks allow you to build more complex designs than those allowed in the current WordPress editor environment
You can have blocks for:
- Widgets (yes you can add the same sidebar widget into pages and posts)
Here is what you see when you start a new post or page.
The visual/HTML editor that we are all familiar with is now gone in favor of a very minimalist look and feel.
So let’s get started with my simple Gutenberg guide
I have created this finished guide that you are reading by using Gutenberg and as mentioned above this is my very first time of using the new editing environment.
So your instantly going to find out with me what I like about Gutenberg blocks and what I hate. I will also pass on any tips and tricks I discover along the way so be sure to follow along.
And I will also be keeping this post updated so be sure to bookmark us or link to us so you can easily find your way back.
So when presented with the title screen above add in your title for your post,
I am going to use the working title of “Getting started guide to Gutenberg”
Then add in your opening introduction to your article into a text block as shown in the screen capture below.
Adding images to Gutenberg
After writing an intro I like to add in an image for a visual element, in this case, the screen capture that you see above.
There are three methods to add an image
- You can add your image via the toolbar accessed by clicking the plus button + and then selecting an image block.
- You can also add images by using the shortcut button located below your text box.
- And of course, you can add source code. By switching the editor from blocks to code.
After you have added your image you can click it to reveal the alignment options.
You can align to the left, move your image central or move to the right.
There is also the option to edit your image via the media library and here is where the problems start with Gutenberg.
It is my understanding that when you edit an image via the media library you are editing the image as it appears on the attachment page or in other words where the image is stored. (Please correct me if I am wrong with this)
The attachment page is a very thin content page, it is basically just the image and nothing else and for SEO reasons attachment pages are very bad for SEO when Google takes notice of them.
Yoast SEO recently had an issue with attachment files that proved a big SEO problem for some users.
Working through the process of creating an article with Gutenberg I can’t find a way as of yet to add alternative text or an image title attribute, other than to revert to source code to add the required HTML or to go back to the classic editor.
Our friends over at WPBeginner explain the differences between Image Alt Text and Image Title with a great article titled:
Adding descriptions and alt tags was an image editing function that was available with the click of a button the original visual editor.
This is not good news for image optimization SEO.
There is also no easy way that I can find currently to attach a link to an image, making it clickable.
If you want to add a banner for example then you will need to add the banner as an image block as shown above then go back to the source code and add in the URL as HTML code.
Adding Quotes and Links
As you can see above I linked out to a resource (WPBeginner) within a blockquote.
Blockquotes are great for breaking up big blocks of text making reading an article easier.
They provide a great visual element to articles.
Here is how I did it:
- Click the + button to open the blocks area
- Select a Quote Block
- Add in your Quote Text
- Add a link if required
You will notice if you are observant that the above blockquote screen capture image example is different from the actual blockquote displayed in this post.
The finished quote has anchor text that has an h3 heading attached for SEO reasons.
To add the h3 tag I needed to go back to the raw source code and apply the h3 tag to the anchor text of the blockquote.
As you can see in the screen capture above there is a shortcut H tag button (heading) but when clicking this it opens up a new block to apply the heading too.
You can’t currently apply a heading within a quote block.
If you create a text blog you also can’t just add a heading part way through a text block you have to create a new text block to be able to add the heading at the start of the new block and then continue to write your article.
Any links that you add by default are do follow links, with currently no way to make them no follow without adding the no follow attribute as code.
You are given the option to open a link in a new window when adding a link.
Adding Embedded content blocks to Gutenberg
To add embedded content to a post click onto the blocks area and scroll down to Embeds. You then see the blocks screen below
Click on the type of embed that you would like to use. You are given a link box to add in your code.
I selected the YouTube option as that is mainly what I would use when creating content just to show you the process of adding a video.
Simply add in the URL to your YouTube video and you have video functionality within your post.
So what do we think of WordPress Gutenberg?
Well, Gutenberg is going to scare the living daylights out of some bloggers. But the more I use the blocks system the more I like it.
I have recently been using the content curation site Wakelet to create very simple blog articles to back up my Infobunny site and what you notice when using Wakelet is that you can create blogs in a very similar way that you create with Gutenberg blocks.
With Wakelet you can add text, video, authority links to qualify your content, images and even PDF files.
You simply add everything as individual posts to Wakelet and then reorder them if required to make your finished article and that is basically exactly how Guttenberg blocks works.
Here is an example of one of my Wakelet Blogs – How important are social media followers?
If you are used to using page builders when creating posts and pages then your not going to have any problems using Gutenberg.
Though Gutenberg does stop short of actually being a page builder as you can’t just drag and drop blocks along with other missing functionality that professional page builders provide.
If I’m honest I do prefer the old style HTML editor but that is because I am just used to it.
Hopefully, we will be given the option of clicking between both Gutenberg and the current WYSIWYG HTML editor being able to access both systems would give webmasters the best of both worlds.
I understand from reading about Gutenberg that the conventional editor will be available as a plugin.
This Gutenberg guide was created to give me insight as to how Gutenberg works.
I wanted to be ready for the inevitable release of the new block system when WordPress 5.0 lands.
And that is how you learn a new system just by jumping in feet first.
Gutenberg is designed to make creating content easier.
And I am sure it will for those who create simple content. But for those looking to do a bit more, there will be a bigger learning curve and there will certainly be some workarounds required for those who love their SEO.
SEO optimizing images is a problem currently.
Hopefully when Gutenberg has released the process of optimizing images will become much easier.
And if the Gutenberg development team don’t provide a better solution then I am sure there will be no end of 3rd party developers ready to offer some very cool block widget solutions.
One big question I have is “Are Gutenberg pages and posts compatible with AMP – Accelerated Mobile Pages?
Or will adding more complicated functionality be stripped out in favor of speed.
That’s all for now.
I hope you have found my simple guide to Gutenberg useful and picked up a few tips along the way.
Are you ready for Gutengerg?
Do you have any Gutenberg tips you would like to add to this post or offer any solutions to the problems outlined?
Let me know in the comments section below.
Make sure that you subscribe to comments so you are notified when I reply