If you’re one of those many bloggers who cringe every time they have to write an article and adorn it with different media files like GIFs, images, videos etc. then they need to worry no more. The new WordPress Gutenberg Editor is here to save you the trouble that you have to face when creating content-rich articles.
Although, over the years, the traditional WordPress editor has come a long way and has been improving gradually but still, sometimes, creating and editing content becomes a nightmare for those who are not “tech-savvy” or don’t know about HTML, CSS etc.
For those, WordPress is working on a new visual editor that will help them create content like a breeze. There are already numerous articles written about this new editor. Some have even dived deep into the sea of technical wizardry. However, in this article, I will discuss how the new WordPress visual editor is for the non-coding folks out there.
What is Gutenberg?
Gutenberg is the new WordPress editor to help to help the “non-coding” bloggers create articles in a more robust way. The beta version of the editor has been released to collect feedback from the real-world users and improve it from there.
When will the Gutenberg Visual Editor Officially release?
WordPress will release the fully functional version of the editor with WordPress 5.0. Currently, Gutenberg is in the beta phase seeking feedback from the users.
How can you install the Gutenberg editor?
Since the editor is just like any other plugin (for now), you can download Gutenberg from the “plugins” section of your WordPress account. Once installed, don’t forget to activate it.
However, a point to note is that that the editor is still in the phase of finalization, therefore, you can expect a bunch of glitches and bugs.
As soon as the full version is doled out, the current editor will be replaced by the Gutenberg making it the default editor. However, the WordPress users can still use the classical editor as a plugin.
As a matter of fact, I also thought of giving it a hit, however, instead of taking the risk of installing Gutenberg directly on this blog, I installed it on the WordPress version that I’ve installed locally on my Windows 10 machine.
After checking its features, I’ve decided to write a review of it just to serve as a guideline for the bloggers so that they understand how the new WordPress Gutenberg Editor provides you more flexibility and convenience to create rich content without any technical knowledge.
WordPress Gutenberg Editor Review
Blocks, Blocks Everywhere…!
Let’s start with the very basic distinctive feature that stands out the new editor from its classical counterpart.
And this is the feature of “blocks”.
The blocks form the basis of Gutenberg.
Any new paragraph you want to add, any new image you want to upload, you can do this within these blocks.
What is a block?
A block is a section within which you can add content. Each block serves as a stand-alone area which you can manipulate and maneuver independently of other blocks.
So what’s so great about Gutenberg blocks?
Well, if you’ve been using the current WordPress editor, you must’ve noticed that sometimes, editing an article turns into a really messy business.
You need to make sure that the selection is pixel-perfect or the changes made will be applied to the piece of the content that you don’t want to change.
For instance, say you want to end the list and start writing a normal paragraph. Sometimes, it does not matter how many times you hit the “Enter” button to end the list. WordPress editor just keeps adding a new bullet point underneath.
Similarly, and I’ve been a victim of this glitch (or whatever you may prefer to call it) quite a few times. What happens is that you want to turn a particular line into a heading. After carefully selecting that line you press SHIFT+ALT+2 (shortcut code for H2 WordPress heading) and in addition to that single line, the whole paragraph beneath turns into a heading as well. As usual, one of the best duo in the world, CTRL+Z saves the day for you but still, it’s quite irritating. Hiccups like these really disturb the creative flow and disrupt the tempo.
So how do the Gutenberg blocks help you with this problem?
Well, you can dedicate a separate block for every element in the new WordPress editor.
Which means that the chances of messing up inextricably are minimum.
So the best thing about the new WordPress editor is that it’s being developed with those users in view who are not fond of meddling with the HTML/CSS code.
Previously, you’ve had to learn at least the basics of these web-based languages to make your articles media-rich but with the new WordPress editor, relying on third-party plugins and tweaking codes is a thing of the past.
The editor will create a new page- and post-building experience that makes writing media-rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg
Maneuver Your Content With Ease and Flexibility
With these blocks, you can move around your content with ease and flexibility. All you have to do is click the small arrows present on the side of every piece of content:
…And you can stack your blocks in whatever order you want. This is a huge improvement from its predecessor where the only way you can move your content around is by copying and pasting it. That’s not neat at all and sometimes results in tangled arrangements.
The new Gutenberg editor provides a robust and cleaner way to move, organize, reorder and stack different pieces of content over each other.
Different Blocks of Gutenberg
There are more than a dozen different types of block elements that you can add in your articles with just a few clicks.
Previously, you’d require either to use a plugin or to gain some basic understanding of HTML and CSS to make your article appear more lively. However, now, with the help of the sleek UI of the Gutenberg visual editor, you can achieve the same much quickly and with just a few clicks.
Some of these blocks are image gallery block, button block, cover image block, page break block, table block etc..
Though there are many other blocks as well but for this article, I’ll discuss the most fascinating ones. However, one thing to keep in mind is that we’re still in the beta phase, it’s quite possible that the features explained in this article might not appear in the later versions. Things are changing quickly and the features are being added by the WordPress developers instantaneously so expecting all the blocks explained in this article to show up in your editor may not be the case. Just for the reference, this article has used Gutenberg 3.6.2
#1. Gallery Block
Add as many images in a single line as a gallery without needing to tweak a single code. Set how many columns the gallery will span if you want to crop the images to match the content size and bunch of other options to manage your images.
#2. Table Block
Adding tables in your article is now quite simple. Previously, you had to rely on the third-party plugins or old-school HTML to create tables. And even then you had to worry about the responsiveness. With Gutenberg editor, you can add tables as blocks.
There’s one catch though. Currently, you can only add a table of 2×2 grid however, we can expect that sooner or later this number is going to go up.
#3. Live HTML Block
Secondly, and most importantly, with the Live HTML block, you can easily view what your HTML code will look like. You don’t need to save your work or go through the trouble of loading an entirely new screen and see the “end result”.
Just toggle between the “HTML” and “Preview” tabs to switch back and forth between the bare bones and the final versions of your page.
Now, you can buttons on your website/article without applying any CSS design skills or installing any plugins. The button block lets you place buttons within your content, change the color, add/edit the text and add a call-to-action feature in your articles. Although there are not many options when it comes to buttons but still, this is a huge help.
#5. Pull Quotes
For the folks who have little or no idea how pull quotes are different from normal quotes, the former is an excerpt already present in the text. Pull quotes are used to give prominence to a particular section of the content. To understand the distinction even better, here’s an article that will surely help you learn more about pull quotes.
With Gutenberg visual editor, you can now add pull quotes (in addition to the normal blockquotes) in your articles. A couple of new alignment options come with these pull quotes such as align-wide and align full-width etc.
#6. Page Break
This one’s my favorite. Previously, you had to rely on plugins and some technical sorcery to introduce pagination in your articles. People have written articles upon articles on how to achieve this with the older visual editor.
However, now, you can span your single article to more than one pages by adding a simple page break block.
This block adds page numbers beneath your article and anything below this block goes to the next page.
Pagination is a great source of enhancing your readability as well as bringing your bounce rate down. Which in turn, boosts your SERP.
First, have a look at this image:
The above will metamorphose into this:
#7. Headings & Subheadings Block
Well, this one’s not as exciting as the others but the heading block has one sub-feature for which I was longing for a long time.
Adding a heading was never a problem with the older version of the WordPress editor but there’s a feature of “Anchor Support” which makes your content (especially the long form content) much more accessible and readable.
What happens with the anchor support is that you can assign an anchor to a particular section of your article. This way, your readers are able to jump to that section within no time. This enhances the user experience as well as reduces the bounce rate of your website.
Due to the lower bounce rate and an additional URL to sift through for the search engine bots, you can also expect an improvement in your search engine rankings.
#8. Embed Options
From Youtube to Facebook, Twitter to Instagram, Soundcloud to Vimeo, you can now embed the media from these websites into your article with just a few clicks.
The main purpose of the Gutenberg visual editor is to make it easy for the non-technical bloggers to create a media-rich content and with the new embed options, you can integrate the media from the other prominent websites on the go with absolute ease.
Gutenberg allows you to embed media from more than 30 prominent (social media) websites.
Some Good Blocks and features that were part of earlier versions of Gutenberg
Being in the beta stage, the visual editor is continuously evolving. Which means that new features are continuously being added and some features are being shown the exit gate.
This also means that sometimes, even some promising features become the victim of the witch-hunt.
While researching about this editor, I came across a couple of features and blocks which were part of the earlier version and were quite effective but for unknown reasons, they’ve been excluded in the current version. I hope this is temporary and will make a comeback soon.
One of these features are:
Table of Content
This one’s not a block and used to be on the sidebar. With this feature, one could add a table of content (TOC) within an article.
Equipped with the built-in anchor support (we talked about above) the readers would have a field day going through your articles. Instead of reading the whole article and process the redundant information, just click the topic of interest and jump to that particular section.
You can still create the table of contents manually but that’d require an extra hard work now.
All in all, WordPress Gutenberg Editor is here to radically change the overall environment and experience around creating content.
However, the factor that makes sure that the “finished product” is up to the mark is the users’ feedback.
If you want a visual editor to address your needs, you need to be a part of this development project.
However, you don’t need to mess up your current WordPress website by installing Gutenberg on your production site. I’ve already written an article about installing WordPress on Windows 10 machine. You can follow it to install a copy of WordPress and then try out the features of this editor.
Whenever you encounter an error, make sure that you communicate it with the WordPress. This will make sure that the bugs are resolved and new patches are released. That’s being a healthy member of the community and doing your part. Additionally, you can also suggest new features for Gutenberg that you feel should be a part of it. Here’s a link to follow up with all the development process related to this new WordPress editor.