Editor choice

Gutenberg WordPress Editor Review By A WordPress User

Gutenberg Editor For WordPress Reviewed + Tutorial On How It Works.

The Gutenberg Editor, to the uninitiated, is a new way to edit content within WordPress. You will of course (if you’re using WordPress) be using the default post editor, which is powered by TinyMCE.

TinyMCE has powered the WordPress post/page editor for donkeys, and like many, I have become accustomed to its ease of use.

Having used WordPress for 8 years strong, I kind of know the TinyMCE editor inside and out, as no doubt you have.

All that’s set to change however with the advent of the Gutenberg editor, it will still use parts of TinyMCE but the layout and structure will change. Dramatically.

Please do note that this review is performed on a development version of Gutenberg, not a finished release.

About the Gutenberg editor

Gutenberg aims to streamline the post creation process, it’s developed by the same guys behind Automattic (which incidentally develop WordPress.com and .org).

The core feature of Gutenberg is Blocks, Blocks of content, which you can shift around and craft something special with.

It’s hailed by many as a revolutionary way to create content and it’s had quite a few big backers in terms of names in the WordPress Business one of them being the CEO (well he would do wouldn’t he!).

The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg

A bold statement indeed by Mr. Mullenweg, so I thought to myself why not test this out? Why not look at Gutenberg Editor as your common garden variety WordPress user?

Let’s face it there’s a shed load of reviews on the editor itself, however, a majority of these are more from a development slant, not from the people who will be using it on a daily basis.

It’s critical you know what the Gutenberg editor can do if your a WP power user, or use it on the daily, or thinking of using it (delete as applicable) you really should know what it can do. The pitfalls and of course the positives.

At this moment, I do not believe that Gutenberg will be the default editor in WordPress 5.0, but if it is, it’s key you know what it can do and cannot do.

Hence the user review. So with that in mind, let’s lift the lid on this puppy.

If you’d like to navigate the Gutenberg Editor review and skip sections etc, feel free to below:

Gutenberg user review

For this review of the Gutenberg editor, I will be using a clean install of WordPress. The web host I am using is from a company called Kinsta, if you’ve not heard of them I strongly recommend you take a look at their hosting solutions!

Anyway, like I said it’s a clean install of WordPress, with one omission I have Yoast SEO installed. The reason why? I want to see if the de-facto choice for WordPress SEO works with Gutenberg.

With so many people using Yoast SEO and potentially making the switch to the Gutenberg editor you kind of need to know if it will work right?

back to menu ↑

First step installing Gutenberg editor

To install you simply navigate to your plugins section in the back-end and search for Gutenberg, you’ll then see the below come up in your search:

installing Gutenberg

installing Gutenberg

Once you’ve found it simply hit install now and you’re away. Currently the review score is hardly favorable, however, people are quick to voice disdain for Gutenberg, predominately but not exclusively by fellow WordPress users.

This is why I think this review of Gutenberg needs to be done. It’s all very well leaving short comments on the WordPress.org plugin page, I don’t think they will help you in making your mind up. Hence this review.

So I’ve installed and activated Gutenberg, let’s take a look at it more in-depth.

back to menu ↑

Gutenberg menu items

Gutenberg will add a new menu item to your WP backend, marked by a pencil icon. It’s here you can find the following three menu items: Demo, Feedback and lastly Documentation.

As the Gutenberg plugin is new to me, it would be wise to dig into the documentation. Looking at the documentation side of things, this link takes you to WordPress.org with chapters about the Gutenberg editor itself.

back to menu ↑

Documentation menu item

As I mentioned the menu link will take you to WordPress.org and covers a wealth of topics obviously pertaining to Gutenberg, see below for a snapshot.

Gutenberg editor documentation

Gutenberg editor documentation

There’s plenty on offer here, as you will no doubt see from the menu items. I’ve had a scan through and in fairness, the documentation is more geared towards developers. Not us average users.

I’m not an idiot by any stretch of the imagination you understand, however sifting through the documentation it is more dev focussed.

back to menu ↑

Feedback menu item

This simply leads to a Polldaddy form asking you whether you’d like to submit feedback or need support.

back to menu ↑

Demo menu item

Now, this is where you will see the Gutenberg editor in action. A rather nifty feature this one, Gutenberg has an article already set up in its blocks format. So let’s take a look at it.

back to menu ↑

The Gutenberg demo

It makes sense to play around with the demo from a user perspective. We could start a fresh and create a post, but if we don’t know how things will work what’s the point.

I do like the fact the Gutenberg team have this in the plugin, there’s nothing like learning by doing.

Gutenberg editor demo

Gutenberg editor demo

So this is the Gutenberg editor in all it’s resplendent refinery. Sure looks a lot different to the standard WordPress editor! Some of you may find the above daunting don’t worry though, let’s take a look at it and see how it’s done.

back to menu ↑

Gutenberg top floating menu

At the very top of the Gutenberg editor is a floating menu, by floating I mean it will follow you as you go through the post creation process.

Gutenberg top floating menu

Gutenberg top floating menu

Let’s cover these menu items a bit more in-depth. Firstly the plus icon, this deals with adding new blocks, paragraphs, images, headings and more. Don’t worry we will be covering these later on in this review, for now, take a look at the below screenshot to see what I mean.

Gutenberg add block menu item

Gutenberg add block menu item

The next two icons deal with undo and redo, which is very handy if you’ve made a mistake in the post creation process.

Next, the Preview button which allows you to preview the post, Publish for obviously making the post live the gear icon closes the menu to give you a fuller experience.

Three dot menu item

Three dot menu item

The three dots to the far right deal with enabling the visual code editor, reverting to the code editor, whether you wish to fix the toolbar to the top and lastly if you’d like to copy all content.

back to menu ↑

Anatomy of a post or page in Gutenberg

Ok so it’s installed, we know what the top menu does which is great. What about the post/page itself? What makes the demo look the way it does?

Let’s dissect this and break it down for the uninitiated.

back to menu ↑

First the document menu system

Document settings in Gutenberg

Document settings in Gutenberg

This will no doubt feel familiar to you. It’s virtually the same sidebar system that’s currently in the WordPress post/page creation pages.

We have status and visibility, whereby you can make the post public, private or password protected.

Categories for allocation of the post to the desired category of your choosing.

Tags, add tags to your post to help users identify a collection of posts pertaining to a subject that a category cannot accommodate.

Featured image, add a striking image to your post which will be shown on the post and the archives of your categories (this can be WordPress theme dependent).

Excerpts, a great way to give a brief interesting synopsis of your post content which would be shown on archive pages/blog pages, again theme dependent.

Discussion, enable or disable comments on the post itself, as well as allowing Pingbacks & Trackbacks, notifying other websites you are linking to them.

back to menu ↑

A new item is the Table of Contents.

Table of contents

Table of contents

Table of contents essentially shows you how many titles are in your article.

It’s a good way to look at the structure of your post here, sometimes when creating content in a blog post it can be difficult to see it clearly.

You need to take a step back and see if it flows properly. This for me is the step back (and I mean in a good way!).

Not only that but by clicking on the titles in this section it will actually take you to that specific heading.

Which is a great way to check post flow, and make changes to the titles for a better quality blog post/page.

back to menu ↑

Gutenberg Blocks the new way to create content

So we’ve covered the document settings in Gutenberg, no major surprises there, nothing to be scared of so far, the new addition of the table of contents is welcomed though.

Blocks are the foundation of post creation in Gutenberg. Let’s delve into these on a case by case basis.

back to menu ↑

The page title in Gutenberg

Page title in Gutenberg

Page title in Gutenberg

You will note the fact I have not changed the permalink structure, which is a nice prompt to make me do so, not unlike the old post creation screen.

Here you can edit your page title, and if you wanted to change the permalink to reflect your content, add keywords etc, etc.

back to menu ↑

Image background with text overlay

The next block in the demo is a rather nice image with an overlay of text. Which are a new feature and one that will no doubt be of interest to bloggers.

Image background text overlay

Image background text overlay

As you can see we have the image background and icons denoting our abilities to edit this particular block. It’s here we can transform the image into a heading (see the top left icon that looks like a screen), set the position left, center or right for the image.

Plus we also have options for the centering of the text and left and right respectively. Now, this block is called a “Cover Image”. See below for what it looks like and the functionality this offers.

Gutenberg cover image block settings

Here is where the meat of this block is contained. As mentioned this Gutenberg Block is called a Cover Image.

We have options to fix the background and adjust the dimness of the background image.

A great feature if you have a striking image and want to overlay some text on it.

Here you can adjust to your heart’s content and get it looking just right.

Text alignment again, left, center or right. This is the same function as the screenshot of the image with the words “Of Mountains & Printing Presses”.

Lastly, we have Advanced. Now if you know CSS you could add a class here to change the color of the text, add a border around the image itself and more.

You will have to know CSS to create the aforementioned, which not everybody does know, unfortunately.

However, a Google search or two may well end up helping you in the long run.

back to menu ↑

Paragraph Block in Gutenberg

The next block up is the Paragraph Block in the demo, this is where you will spend most of your writing time. So let’s get stuck in and see what it can do.

Paragraph Block in Gutenberg

Paragraph Block in Gutenberg

Have you noticed anything so far from the images? The actual content of some of the blocks gives you instructions on how to use them! Well done to anyone of you who noticed 🙂

Anyway, this is where you will craft your content. You will note the TinyMCE icons above the post paragraph, these are just like the ones in the old editor in WordPress.

With the caveat of the Paragraph icon, clicking on this allows you to change the format of the box into, Heading, List, Quote, Preformatted, Subhead and last verse.

Paragraph Block in Gutenberg more settings

Paragraph Block in Gutenberg more settings

By hovering your cursor over the paragraph block, you’ll see a bin icon for deleting that paragraph block as well as another 3 dots, by clicking on these you will have the following options.

Edit as HTML, which as it sounds will convert the box contents to HTML, if you’re comfortable using HTML that is!

Duplicate as it suggests this will duplicate this specific paragraph for you. Which is handy if you have advanced settings with custom CSS you would like to keep the settings for but change the paragraph text.

Convert to Shared Block it’s a little too early in this review to go into this, however, I will be covering it later on.

Lastly, the Transform into this is the same functionality as the paragraph icon which we’ve already covered.

back to menu ↑

The Gutenberg Paragraph Block settings

Paragraph Block settings in Gutenberg

Paragraph Block settings in Gutenberg

As before we have a sidebar section dedicated to dealing with Paragraph block settings, let’s take a look through them.

Text Settings this deals with the size of the text itself, so we have Small, Medium, Large and lastly Extra Large to choose from. Along with a handy reset button.

Don’t want to use them? Then you can set your own custom text size in the next section entitled Custom Size, you can either drag the slider or input a text size you prefer numerically.

Drop Cap switching this on will give a nice drop cap effect on the first letter of the paragraph.

Background color, this is a great feature in Gutenberg. Here you can change the color of the paragraph background box itself.

The same can be applied to the next box which deals with Text color. There are 11 predetermined colors to choose from as you can see.

Not a fan of those colors? Well, there’s a handy color selector in the last color circle which will allow you to change the colors via a color picker.

Here you can enter in HEX color, RGB or HSL value to get the right color you need.

Block Alignment, here you can change the alignment of the block to left, right and of course center.

There’s also an Advanced setting drop down for entering a custom CSS Class should you need to.

back to menu ↑

Image Blocks in Gutenberg

The next few blocks in the demo are actually paragraphs, with different alignments etc. No need to cover those again, what about images?

Image block settings in Gutenberg

Image block settings in Gutenberg

This is another Gutenberg feature you should familiarise yourself with, as images really can help with blog posts. As by now you can probably guess, each block as it’s own block icons for adding in images and such.

First one deals (see in the top left of image) with transforming this into a gallery of images, which brings up a new section asking you to load images for the gallery or choose from existing images.

The next icons deal with the alignment of the image, the pencil lets you edit the image and lastly the link icon lets you set a link to your image.

The 3 dot menu item when you hover over it gives you the same options as outlined already in paragraph blocks. Now let’s take a look at the Block settings for images in our sidebar.

back to menu ↑

Block settings for images

Block settings for images

Block settings for images

Here we can adjust a few things.

The image settings section lets you describe the image as a Textual Alternative, I can only surmise by this that it’s for usage for screen readers, for the visually impaired, which if I’m right is awesome.

Next is the Source Type, here you can choose from a variety of different sizes for the image.

They are Full, Thumbnail, Medium, Medium Large, Large and the last one (this is going to be dependent on the theme you are using) in my case was Twentyseventeen Thumbnail Avatar.

Image dimensions let you set a physical size of your choosing, whatever is entered here will be reflected on the front end.

This will obviously depend on the theme you are using as to how it will be displayed measurement wise.

You can, of course, change the image size by percents, such as 25%, 50, 75 and 100%. Doing this will keep the image ratio for you.

Lastly the Advanced settings section for custom CSS Classes.

back to menu ↑

Buttons in Gutenberg

You will notice I’ve skipped a load of other Blocks from the demo, again I will be covering them later in the review. I just wanted to highlight the Button Block as I think it’s an awesome addition.

Remember when you had to use shortcodes, or perhaps some custom CSS to show CTA buttons? Yeh I do as well.

Button Block in Gutenberg

Button Block in Gutenberg

As you can see from the above, we have a rather natty button as a CTA (call to action). It’s here you can add some text to the button, give it a link, make the text bold or italic and set the alignment.

Button block settings in Gutenberg

Button block settings in Gutenberg

You’re seeing a trend right? For every Block there is a settings section!

The block settings here let you wrap the text to the button.

You can also change the background of the section for the button, preset colours or choose your own.

Change the text colour of the button itself, make it stand out more with a strong CTA.

The only thing I can’t see that I would love to see is having the ability to set a custom size for the button.

That and the option to change the edges of the button, provide an outline or border and a drop shadow to make it stand out even more.

That being said it’s a welcome addition and should help with getting visitors to click on your button!

back to menu ↑

We’ve covered the demo, lets dig in even more

Remember at the beginning I said I’d be in-depth as I could? Well this section is for you. Lets take a look at all the blocks one by one.

For this I’m going to create a new blog post, and have a play around. So here goes nothing!

back to menu ↑

Creating a post in Gutenberg

New post using Gutenberg

New post using Gutenberg

This is what you will be greeted with when creating a new post using Gutenberg, obviously, we will have the top toolbar and of course the settings to the right.

back to menu ↑

How to add a title in the Gutenberg editor

My First Post Using The Gutenberg Editor

My First Post Using The Gutenberg Editor

You will see I’ve already given it a title, the plus icon gives me some suggestions for adding a block with Suggested, Blocks, Embeds and lastly Shared.

You will note that the 3rd block in the top image that states “This is a constant” is a shared block more on that later, I called it “This is a constant” that’s how I know!

back to menu ↑

Adding a cover image in Gutenberg editor

I want to add an image firstly, to do so I will be using the cover image block as below:

Cover image block

Cover image block

Just did a quick image search on Unsplash and found the below image, image credit belongs to Alex Block, awesome image. See below for how it looks:

Cover image black with overlay of text

Cover image black with an overlay of text

Uploading an image was very easy, it’s no different to the standard post editor. Was a little bit quicker if I’m being completely honest.

The only thing I did note, it’s not immediately obvious you have to click on the image itself to add the overlay. With so much focus on the block settings in the sidebar, I thought it might have been housed there.

Figured it out in the end, but it’s a point worth noting, especially to the average user looking to use Gutenberg.

back to menu ↑

How to add a paragraph in the Gutenberg editor

Next up I’m going to add a paragraph, using the settings I have already mentioned, see below for how it looks:

Paragraph in Gutenberg

Paragraph in Gutenberg

As you can see I’ve gone to town a little bit, text isn’t the thing here so I just duplicated something. What you will see is the Drop Cap setting and the change in background and text color and the alignment was to the left.

It’s also worth noting, WordPress kindly notified me the text color and background color where very similar (as I was changing colors) and might be difficult to read. Which was quite cool.

There is a problem though with changing the color of the text and the background see below for what I mean:

Link in paragraph

Link in paragraph

Note the very hard to see the text? Well, that’s a link, the screenshot was from the front end of the Twentyseventeen theme, you see by changing colors, there are no options to change the color of links.

That’s where custom CSS classes will come in, not everyone knows CSS, so this will no doubt cause a few issues with some users, those who like there text to standout shall we say.

back to menu ↑

Adding another heading and a subheading in Gutenberg

Title and a subheading

Title and a subheading

Adding a title is a breeze in Gutenberg, personally, I’d like to see the ability to change the color of the heading and indeed the background, both would be nice to have.

When adding a title in Gutenberg, the Block settings allow you to add an HTML Anchor, which will help you link directly to the section in question.

The Subhead gives you the ability to go into detail about what this section will cover in your post. There are no color options for this section. You do however have the ability to make it bold, italic, add a strike through and lastly link it to a URL.

back to menu ↑

How to add a gallery in the Gutenberg editor

Adding a gallery in Gutenberg

Adding a gallery in Gutenberg

Adding a gallery is a simple affair, I’m just going to add some images and see how it churns it out.

Gallery section

Gallery section

Adding a caption is easy, you simply click the image and add your caption, no back-end needed to do this, it’s done directly on the image upon clicking.

back to menu ↑

Gallery Block options in Gutenberg

Gallery block options
Here you can make a few changes to the gallery itself.

You can set the number of columns for your gallery, and whether you would like to link them to the attachment page, the media file itself or none. You can choose to crop the images, or not as well, through a simple toggle system.

There will be no lightbox effect for these images, I believe if you’re using the Jetpack plugin this will enable that to happen.

I’m not here to test Jetpack so I cannot say for sure, although I do know there is a gallery option in Jetpack that shows your images in a great way.

back to menu ↑

How to add a list Block in the Gutenberg editor

Adding a list in Gutenberg

Adding a list in Gutenberg

Adding a list is a simple affair again, simply choose the block and add in your list, then choose either numerical list or bullet point. You can also set an indent, add bold text, italic, strike through and links. There are no block settings for this particular block in Gutenberg.

back to menu ↑

How to add a quote block in the Gutenberg editor

There are no options for this in the block settings in the sidebar, however, there are a couple of different versions of quotes see below:

Quote setting one

Quote setting one

Quote setting two

Quote setting two

The images above have an alignment of right and you will see they do vary in their display. That’s thanks to the speech mark box which allows you to flit between the two different outputs.

There are other options, bold italic and such. You get the picture. I do like the quote styles though whilst not vastly different they do look rather good.

back to menu ↑

How to add an audio file to the Gutenberg editor

Adding audio to Gutenberg

Adding audio to Gutenberg

Found an MP3 and uploaded it to the Gutenberg editor, this is what it looks like as a block (there are no option settings for this block)

This is what it looks like on the front end:

Audio on front end

Audio on the front end

Don’t like the fact there’s an arrow to download the file though! Not compared to the older way of doing things, see image below:

old style audio play back

old style audio playback

No download button right? I don’t want people to download an MP3 from me!

back to menu ↑

How to add a Video file block in the Gutenberg editor

Adding a video file in Gutenberg

Adding a video file in Gutenberg

As you can see it sure looks nice in the editor itself, it was relatively quick to upload. There’s no need to for you to add a cover image like the old way of doing things which is a plus and a minus.

The minus would be if your adding a self-hosted video and there are 2 seconds of blackness at the front there would be no way to add a cover image to denote the video, unlike the old style editor.

In the old style editor you could choose an image for the video, when the user clicks on it then it would display. The front end display also has the ability to download the video.

You aren’t given a choice as to whether to allow the download or not, either for audio content or video content.

back to menu ↑

Common blocks are covered, what’s next

We’ve covered the general blocks in Gutenberg that deal with content, now it’s on to formatting blocks, let’s take a quick look at them and what they offer.

back to menu ↑

Formatting Blocks in the Gutenberg editor

Formatting blocks in the Gutenberg editor

Formatting blocks in the Gutenberg editor

These were part of the classic editor in WordPress, right in the TinyMCE bar, they are still there, however, there is a new addition.

First up is Code, which simply adds a block for you to input code into.

Classic opens up the classic WordPress editor complete with all the TinyMCE options you remember and have used for ages. Nice to see it in there as an option for users.

HTML adds a block for you to add in some custom HTML, another nice feature is the ability to preview it in the editor itself, via a tab.

Preformatted block much like the classic editor before it.

Example of pull quote in Gutenberg

Example of pull quote in Gutenberg

Pull quote as above image, the block is nicely laid out and grabs the attention!

Table settings in the Gutenberg editor

Table settings in the Gutenberg editor

Table settings this is a new feature and one that is welcomed, there are no block options in the sidebar for this one save for the advanced CSS option.

It’s all done in the block itself. There’s a table icon to help you add in a row before, after, delete a row, add a column before, after and delete column.

However there are no options to hide the table border, add color to the rows etc, this again would probably be down with advanced CSS class option in the sidebar. Would have been nice to be able to do this on the block or have an option in the block sidebar to do the aforementioned.

Verse, this block again has no options in the sidebar apart from Advanced for you to add an additional CSS class. It simply (like the preformatted block) honors all spaces and line-breaks in the content attributed to it.

back to menu ↑

Layout Elements in the Gutenberg editor

Yes, Gutenberg like other page builders does have layout elements for you to tinker with. These cover:

Layout elements in the Gutenberg editor

Layout elements in the Gutenberg editor

Button, which we have already covered, the button layout is a rather nice touch. Just wish it had a few more options as I’ve already mentioned.

Columns in Gutenberg

Columns in Gutenberg

Columns (Experimental), this layout option allows you to add columns to your post.

By moving the slider you can choose from 2 columns (standard) up to 6 in total, you can use the slider or manually input the column count.

Columns are labeled experimental due to the fact that some browsers won’t display them properly according to this article from WordPress.org on the dev of Gutenberg.

The post was written a while ago, so it might be a case of the label not being changed, I don’t honestly know!

See below for what a column block looks like:

Column block in Gutenberg

Column block in Gutenberg

What you will not see from the image above is the cursor, on hover, it highlights a plus icon for you to add content to your columns be they 2,3,4,5 or indeed 6.

More block, here you can separate your content and show it, with a read more link. This block does have an option in the sidebar, you can choose to hide the teaser before the more tag.

Page break block, this option lets you separate your content on page basis so you can split your content up into 2 or more pages. No other options for this block in the sidebar.

Separator block, this block will help separate your content with a nice line denoting a change in your content.

Text columns, not unlike the other column feature, this one is purely for text. It does have options for the number of columns you wish to add.

back to menu ↑

Widgets in the Gutenberg editor

You can, in fact, add widgets to your content via widget blocks, so let’s take a look at what’s on offer.

Widgets in the Gutenberg editor

Widgets in the Gutenberg editor

back to menu ↑

How to add shortcodes in the Gutenberg editor

Shortcodes loathe them or love them, many plugins do use them as a way to display content output by them. Gutenberg does aim to eliminate the need for shortcodes, especially ones that deal with layout, columns and more.

To demonstrate the shortcode block in the Gutenberg editor, I have downloaded and installed WP Shortcode by MyThemeShop, it’s a free plugin to add different types of elements to a blog post or page.

Shortcodes in the Gutenberg editor

Shortcodes in the Gutenberg editor

As you can see by adding a shortcode block we can add in a shortcode. The problem with this box is what shortcode can we add?

I’ve installed WP Shortcode and I do not know the shortcodes off of the top of my head, this box does not give you any idea at all of the shortcodes that WP Shortcode has added.

To find that out I need to add a classic block, see below:

finding a shortcode

finding a shortcode

You see the green plus icon in the classic editor? Well that’s the icon WP Shortcode adds to the classic editor, clicking here will show up some shortcodes you wish to display.

It’s a ball ache, to be honest with you, if you use shortcodes daily then you should be able to remember them. If however, you’ve just added a new plugin (like I have) that outputs shortcode you will be sh*t out of luck.

And you’ll have to add a classic block (if the plugin adds an icon to the TinyMCE section) to find out what the code is, or get a piece of paper write it down and get used to typing it out as and when you need to.

Not great, but you can still add shortcodes, so all is not lost so to speak.

back to menu ↑

How to add a categories widget in the Gutenberg editor

Very simple to do in truth, just select the categories widget and it will output them as below image demonstrates:

Categories widget in Gutenberg

Categories widget in Gutenberg

The above image shows the output of the block within the editor itself, there are options in the sidebar for the categories widget though, see below:

Category options in Gutenberg

Category options in Gutenberg

You can choose to display categories as a drop down, show post counts and lastly show the hierarchy of categories.

Then there’s the advanced CSS box for making it look pretty and such.

back to menu ↑

How to add latest posts in the Gutenberg editor

By choosing this block we can show the latest posts within the actual post itself. Very straightforward to do, simply add the block and it will through some options at you.

Latest posts widget in Gutenberg

Latest posts widget in Gutenberg

The block options allow you to show the posts in a list or in a grid format, this is denoted by the list and grid icons in the block itself.

Latest posts options in Gutenberg

Latest posts options in Gutenberg

As with a lot of the blocks not all but some, there are in fact options for displaying latest posts in the Gutenberg editor. Here you choose to show posts from newest to oldest, choose a specific category or show them all.

As well as a slider to show how many posts you wish to display the default is 5 on the slider, however, you can choose less than five and set a maximum of 100. Unless you want your blog post to read like war and peace I’d stick with the 5 on offer!

back to menu ↑

WordPress Embeds in Gutenberg

Much has been lauded about the embed function of Gutenberg, it really is easy to use. Simply add a WordPress embed box from the Embeds menu and you’re away.

I can’t test every single Embed within the Gutenberg editor, so I will test a few to see what happens.

YouTube embed in Gutenberg

YouTube embed in Gutenberg

Twitter embed in Gutenberg

Twitter embed in Gutenberg

Instagram Embed in Gutenberg editor

Instagram Embed in Gutenberg editor

Very easy to add an Embed in Gutenberg, the above are from Twitter, YouTube, and Instagram, there are in fact 34 different platforms that are supported via Embeds, they are as follows:

Embed, Twitter, YouTube, Facebook, Instagram, WordPress, SoundCloud, Spotify, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Dailymotion, Funny or Die, Hulu, Imgur, Issuu, Kickstarter, Meetup.com, Mixcloud, Photobucket, Polldaddy, Reddit, ReverbNation, Screencast, Scribd, Slideshare, SmugMug, Speaker, TED, Tumblr, VideoPress and lastly WordPress.tv.

Quite a few on offer then, adding external content to your blog post is as simple as copying and pasting to show a video, tweet or whatever you need.

back to menu ↑

How to add Shared Blocks in Gutenberg

Previously I mentioned shared blocks, shared blocks are a way to add a block to your post that you’ve already created.

Shared blocks in Gutenberg

Shared blocks in Gutenberg

The above image shows when hovering over the three-dot menu an option to convert this to a shared block. Now shared blocks are different from duplicate blocks.

Duplicate blocks will simply duplicate the block you want to reuse within that post/page.

Shared blocks can be reused elsewhere not just on the post in question. For example, if you’re creating a new post and have a shortcode or some HTML for an email subscription box then you can simply create a shared block, give it a unique name and add it to each and every page/post you need it to.

It’s an awesome feature, you could literally create lots of custom shared content blocks and pepper them throughout your post content, without having to sit there and write them out each and every single time!

back to menu ↑

Working with pages in the Gutenberg editor

The above relates to post creation, and to a degree page creation. Pages will have the same functionality, there is one minor difference in page creation the Page attributes section.

Page creation in the Gutenberg editor

Page creation in the Gutenberg editor

It’s still there, handy if your theme supports a page template for full-width content, as the Gutenberg editors content output will really shine on a full-width page.

All the same, sections are here as in the document settings for posts.

Status & Visibility, Featured Image, Page creation in the Gutenberg editor, and obviously, the Page Attributes settings.

This will depend on your WordPress theme as to whether or not there are custom page attributes for laying out pages in a particular way.

back to menu ↑

WooCommerce and the Gutenberg editor, is it compatible?

Well for those of you who use WooCommerce and are worried about Gutenberg working with it, will be pleased to know WooCommerce works in Gutenberg. See below a screenshot of the product creation screen:

Gutenberg and WooCommerce

Gutenberg and WooCommerce

You’ll see from the above that at the very base of the product page are all the options you’re used to in the product creation process with WooCommerce.

It’s here you can follow my tutorial on adding content to the product itself via various blocks, to create a great looking product.

WooCommerce block sidebar settings

WooCommerce block sidebar settings

The sidebar document settings cover the usual elements, visibility, publish date, pending review and move to trash.

Product image is supported as you’d come to expect, however, you cannot add a product gallery as you would do in the classic editor of WooCommerce.

There’s support for the Excerpt, Discussion, and there’s even an Extended Settings section.

However this does nothing at the moment, I don’t believe Gutenberg is 100% compatible with WooCommerce as of yet.

Otherwise, this Extended Settings section would have worked right?

back to menu ↑

What about Yoast SEO and Gutenberg?

I did say I’d test it out for you didn’t I. Well you’ll be pleased to know it does work with Gutenberg. See below for an example:

Yoast SEO and Gutenberg

Yoast SEO and Gutenberg

Right at the very base of the Gutenberg editor resides the Yoast SEO administration section for on page/post SEO. It’s there and it works.

Obviously, my post is just a test one and I’ve been tinkering so no real output will show here. I literally just cut and paste some content into a paragraph box in the Gutenberg editor and Yoast SEO did pick it up to see below:

Yoast SEO Meta description

Yoast SEO Meta description

back to menu ↑

That’s the WordPress Gutenberg editor covered

I’d like to reiterate that I am not a developer, I cannot account for the creation of custom blocks from a developer point of view, nor can I offer any insight into coding practices for Gutenberg.

back to menu ↑

What I can tell about my time with Gutenberg

I’ve enjoyed myself, I really have. Gutenberg gets a lot of stick, I’m not saying it’s not warranted however from my experience I really like it.

It’s super easy to use from a content creation perspective. Dragging and dropping content around and getting a post flowing as you need it too is a breeze.

Adding text and images a cinch, Embeds are easy to include (they always were) but they feel right as a block element.

Being able to drag and drop them elsewhere in the content, add a subheading or new title it’s just a great.

Compared to the classic editor (incidentally which is what I’m using for this review of Gutenberg) it just feels better. From a user perspective, it feels intuitive and feels right.

back to menu ↑

That being said Gutenberg has some way to go

Nothings perfect, the development team working on Gutenberg have had their work cut out for them that’s for sure. It does have somethings that need tweaking.

Tables need to be changed or give them a way to make them easier to manipulate, by adding borders, removing them and such.

Shortcodes need to be handled better, not from an output perspective, but there’s got to be a way to list available shortcodes from the shortcode widget instead of users having to remember each and everyone.

With so many people using different WordPress plugins that do use shortcode, you’re going to have to make a note of them. Would have been great to see the shortcodes available and options for them.

WooCommerce needs to have better support, especially since it’s part of Automattic.

back to menu ↑

The most important question of all. Would I use Gutenberg as the default editor?

As it currently stands on any new blogs or website I develop, sure I’d use it. I’ve got to get the hang of it somehow and the only way to do that is to use it regularly.

If mass adoption is to occur then you will no doubt see a raft of articles pop up with how to do this in Gutenberg and how to do that etc.

Which is a good thing, it’s a case of education, not everyone is a developer. In fact, many of us are just plain old-fashioned users.

Would I use Gutenberg on WPin? No, no I wouldn’t. For no other reason than I have a system in place that works for me and Gutenberg as good as I believe it to be, would not be a good fit.

That being said it would be great for starting a new site with, and just using it and no other page editor/page builder. I have no doubt the Gutenberg will evolve into something very special indeed.

Especially with developers who will offer support for it in their themes, and of course the deluge of tutorials that will come from developers offering help and advice, custom blocks and more.

back to menu ↑

From WordPress 5.0 the Gutenberg editor will be standard

If Gutenberg is not for you, there will, of course, as there always is a plugin to swap back to the classic editor called funnily enough Classic Editor.

Give Gutenberg a try, seriously, don’t listen to all the negative feedback, try it out for yourself, see if it’s right for your website needs.

Hey if it does not then use the plugin mentioned above to revert back to the classic editor!

back to menu ↑

Have you tried the Gutenberg editor? Love to hear from you!

Please do let me know your thoughts on your time with the Gutenberg editor, I’d love to hear your thoughts as a user, would you recommend it? Have I missed anything in my review/tutorial?

Leave a comment and let’s chat!

 

Header image Photo by Hannes Wolf on Unsplash

Want me to review your WordPress product?
If you’d like me to review your WordPress theme/plugin or service and want me to be in-depth, drop me a line here. Look forward to hearing from you!
8.7 Total Score
Gutenberg Editor For WordPress Review Verdict

I have to say, despite the naysayers on Gutenberg, I for one quite like it. It's a bold step in content creation. It's not going to be for everyone.There will be those who are vehement supporters of the classic editor, however, things will not change for them via a plugin.New users will get along just fine with it, it's fluid and a cinch to use. The misgivings I have on Gutenberg are from a comparison perspective, new users to WordPress will take it in their stride.

Features
8
Ease of use
9
Potential
9
PROS
  • Easy to create a post or page
  • Simple interface for adding content
  • Drag and drop functionality helps you rearrange your post far easier then the classic editor can
  • Beginners can easily create something that looks good
CONS
  • Might be a little too radical a change for existing users
  • Better support for WooCommerce is needed, it could be a little confusing for some with no real distinction from an editor perspective. I.E they look the same.
  • Shortcode support needs to be improved, there are thousands upon thousands of plugins that will use some kind of shortcode system, expecting users to remember them on their blog might be a strain.
Add your review  |  Read reviews and comments
Kinsta Managed WordPress Hosting

Hey there, I run WPin.me. I blog about WordPress, write reviews and offer tips where I can, why not follow me on Twitter or something?

Get involved? Leave a comment

      Leave a reply

      Your total score

      Reset Password
      Compare items
      • Total (0)
      Compare