I’ve been using WordPress since 2011. That’s more than 7 years. I’m so used to the current way of writing posts and updating my website that I can do it blindfolded.
When I first heard that Automatic, the guys behind WordPress, are going to change the current way we create content, I was stressed and at the same time excited.
We, humans, don’t quite like changes. When something is working we don’t want to use a different solution. In short, change freaks us out.
Still, I was also excited by the news. Knowing what WordPress is, I was sure that the guys who push updates will build an amazing product and will make sure that every little detail is refined. After all, WordPress is the #1 CMS system in the world.
In this post, I will talk to you about Gutenberg, the new WordPress editor that’s scheduled to be live in all WordPress installations around the world by the end of this year – 2018.
I will show you what will happen when you install this WordPress wysiwyg editor on a fully working website. Also, mention the questions I’ve asked myself before I even installed the plugin, my worries. Finally, you will find out whether I’m pleased about this new update or I despise it.
But before anything else, let see what exactly is this new editor:
What is Gutenberg?
In short, Gutenberg is the future way of creating content with WordPress.
Currently, Gutenberg is a WordPress plugin that can be installed on your CMS. It’s basically a new content editor. The newer version of the current editor we use. This one:
Guttenberg is part drag and drop plugin and part page design function. It’s based on blocks. These blocks can be easily moved up and down so that they can please your interests. It reminds me of the way you can create content on Medium.com. It’s actually really similar. Who knows, probably the guys who developed the solution got inspiration from this famous publishing platform.
The important part is: Gutenberg will soon become mandatory if you’re using WordPress. No matter if you’re only publishing posts or you’re running your business.
The plan the guys from Automatic have for this project is to embed it inside the Core of WordPress by the end of 2018. Let me clarify for those of you who didn’t understand the last sentence: this basically means that there is no way to NOT use this new WordPress editor. Well, there is, but it will mean that you will not update your WordPress to the latest version, which will make your site exposed to major vulnerabilities. Of course, the date will be met if everything with the plugin (the new content editor) works fine and there aren’t any major problems. To tell you the truth, it’s best to accept this change and try to set your site with this new solution sooner. This way, you will have enough time to get used to the new workflow.
What Does This Major Update Mean for Us?
Well, it depends on how you use WordPress:
- User: If you’re a regular user and you publish blog posts, or you have an eCommerce store, you will simply need to learn how to use this new solution to write new, or edit your old blog posts. Also, understand how to update your products on WooCommerce. A lot of these things I will cover inside this blog post.
- Developers: If you’re a plugin or a theme developer, you need to understand how this plugin will interfere with your products and make sure that by the end of the year, and even sooner, everything you have as a WordPress product will work flawlessly with Gutenberg. I’m not a developer myself so don’t ask me how you need to do that. I’ll suggest checking this article.
Since I’m a WordPress user myself, I decided to do something better than to sit around and wait for Guttenberg to become part of the WordPress Core. I decided to write this article, prepare, educate myself and hopefully also you, the people who are reading this on what to expect when you install the Gutenberg editor on your fully working WordPress site. But before I even go to make the installation, I set myself a few questions that I wanted to get an answer while playing with the plugin.
These questions are:
- What actually is Guttenberg? – We already covered this one.
- What happens when you install Guttenberg on a working website?
- What are the main features of this wysiwyg editor?
- What are the pros?
- What are the cons?
- What about WooCommerce?
- What about my on-page SEO?
- How will the Gutenberg Editor change my relationship with WordPress?
- What to expect in the near future?
So, without further ado, let’s dive deep into this practical guide. The first thing I’m eager to see, is whether this page builder – wysiwyg editor, will break my site when I install it.
Let us see:
What happens when you install Guttenberg on a fully working website?
I’ve prepared myself, I’ve made a staging copy before the installation of the Gutenberg plugin. Just to be sure I won’t have to restore my site and etc. If you have a GoGeek hosting with SiteGround, you can easily do a copy of your website and make changes without being afraid of messing around with your live site. Check my resource page for more info.
So, I will go to my dashboard > Plugins > Add new > I will search for Gutenberg > hit the Install Now button:
Activate the plugin:
That’s was easy. Still, I have to be sure. I made a quick check to see if my site and my posts are still there:
Thank you Matt Mullenweg! Everything is working.
But let’s check what are the changes on the backend. I will access the edit options inside one of my articles to see what are the consequences:
Things are way different. But in a good way.
No clutter, white space, centered layout, and a nice welcome message that it’s basically saying that there are two main options panels: One is located in the center, the other is on the right side:
If we zoom out a bit, we will see that the whole text is one big box:
On the top, we have our title, and below that, we see our existing post. So, let say you want to update something in the middle of the post. What do you do?
Nothing different, you simply click with the mouse where you want to type something and you type:
Things are different if you want to add a picture though. You will need to convert your whole current post into blocks so that you can add images or another type of media. You can do this by going to the options on the right side of your text and by clicking Convert to blocks button:
This will basically make every individual paragraph, heading, element, into an individual block:
Above every block, you will see a little plus icon that will allow you to add an additional block. The additional block may content image, code, paragraph, heading, etc. This is exactly what will cover in the next section:
What are the main features of this wysiwyg editor?
So, let’s click this little plus icon that appears above each block to see what are the available functions:
When you hit it a new empty space will appear along with a little option panel. Keep in mind that you can also insert a new block by clicking on the plus icon located on the top left. The latter, however, will add the block on the bottom of your post.
The available functions, blocks, are separated into a couple of categories:
Most used:
- Paragraph;
- Heading;
- Image;
- Inline image;
- Cover image;
Here are the three different image blocks used on my site:
One thing I don’t like right from the start is the inline image function. It adds a little thumbnail and you can make it larger but it’s not currently working as it should be. Do you see how the text sits right next to the image without space and also you can’t bring the text to the top:
- List;
- Galerry;
- Quote;
- File;
- Audio;
- Subheading;
Formatting:
- Code;
- Classic;
- Custom HTML;
- Table;
- Verse: This block is quite similar to the code block. Actually, I didn’t quite understand the difference between the two.
- Preformatted;
- Pullquote;
Layout elements:
- Button;
- Columns (beta);
- More;
- Page break;
- Separator;
- Spacer;
Widgets:
- Shortcode;
- Archives;
- Categories;
- Latest comments;
- Latest posts;
Embeds:
- This block allows you to easily embed links from the different social media channels: Facebook; Twitter; Youtube, and etc.
As you will see, the available blocks are allowing you to do pretty much the same things as the old WordPress editor, with a few additions.
I will go through the main benefits and the major flaws of this plugin one by one below:
What are the pros?
Let’s first see what are the benefits of using this plugin:
Columns (beta) block
There are a couple of blocks that will ease our use of WordPress. The first block I will introduce, that’s currently in beta, is called columns. It allows you to add two parallel elements on a horizontal:
This function is actually available inside the current editor but the Gutenberg version is refined and it’s easier for us to use it. So, you can add a picture on the left side and text on the right:
The final result will be the following:
Really cool, right?
Cover Image Block
The cover image block is actually really nice:
You can add text inside your pictures and also adjust the background opacity:
Or even make the background fixed:
Which basically removes the picture and only adds a text inside a color.
Button Block
Currently, if you add a button you will see the following line of code added inside your editor:
With Gutenberg, things are quite advanced. The button will appear beautifully inside a box where you can easily set the link and configure the style of your button: Rounded; Outline; Squared:
As you will see, you can also easily change the color of the button itself.
This is how the button will appear on your live website:
What I don’t quite like is that there isn’s enough space between the button and the text after that. I have to manually insert space to make things look good.
File Block
The file block is a really cool way to add downloadable files inside your post or page. You simply add the file block and you choose the attachment from your media library:
This is how it will look on your website:
Again, no space between the button and the text below.
Quote Block
Besides the old way to add quote or citations from smart people, we now have the Pullquote block:
This is how it looks on the front end:
It’s not that different from the current variation:
Separator Block
The separator block allows you to add 3 different types of content separation:
- Short line;
- Wide line;
- Dots:
However, as you will see, the short line is not short, it’s simply slimmer, something I think it’s a bug and it will be yet to be fixed:
I love the dot look, though.
Embed Block
The embed block is much easier to use than what we currently have. You simply load the block and you paste the link that you want inside your site:
This is how a video will appear on your website:
It fits perfectly inside your website.
Instagram and the other embeds also work fine, most of the time. You can share your Instagram posts easily using this functionality:
Way easier than before. Before you had to install a plugin.
Reusable blocks
Probably the best function so far is the “Convert to Shared Blocks” options available for every block. Everybody is talking about this function. What does this feature do?
Basically, you can save a block and you can reuse it for your future posts. A function that will surely save you a lot of time.
You click the button shown below and name your block:
Now, when you create a new post, you can insert what you previously saved by only searching for your block:
When you click on the block it will be inserted into your blog post. This is a great way to add subscription boxes inside your website so you can increase your email subscribers.
If you’re looking for plugins that will help you increase your email subscribers do check the following articles: SumoMe Plugin Review; ConvertPlus Case Study.
Are there any downsides to the new WordPress Editor?
Probably when we’re required to add the plugin most of the issues will be resolved but while I tested the plugin to write this post I stumbled on a couple of bugs, errors, that are quite irritating:
Cover Photo Issues
Sometimes when you add a cover photo with text the text will appear like that:
I refreshed a couple of times. Added a new block and eventually the above was fixed.
Strange Letters Issue
On the site that I was testing Gutenberg, I had Visual Composer installed and these lines appeared sometimes when I refreshed:
I had to disable the plugin.
Update Post Issues
In a couple of occasions, when I updated my posts, this screen stuck:
I had to go to my post and refresh to see my changes.
Button Block Issue
The button block sometimes fetches only one letter from my text and it appears like that:
You have to remove the block and add a new one if you want to make this to work.
Full-wide Image Issues
When you go to the Demo page available inside the Guttenberg menu, you will see this cool wide image:
Unfortunately, when you go to the site it looks like a single image:
Obviously, it’s not across the width of your website.
I’ve searched online and I found that this feature is enabled depending on the WordPress theme you’re using. This is what I found on the following page:
It’s because Gutenberg can’t know is there room for full width or wide, and what that even means on theme by theme. There can be sidebars in the left or right etc.
Actually, you can enable it by adding this:
You can set 'wide-images' => true, in add_theme_support( 'gutenberg' ) and after that you can set full width cover image. But alignwide or alignfull are still missing in the markup. Those should be added.
Hopefully, this will also be resolved in the following months and will allow people to use this awesome functionality.
What about WooCommerce?
I’m sure a lot of website owners are asking themselves what will happen with their online stores when they install Gutenberg. The answer is: Nothing much. At least not yet.
Currently, when you install Gutenberg and when you go to add a new product you will see the well-known editor. The one we currently use:
Still, if you want to show your products inside a page or a post, you will need to install an additional plugin to do so. The plugin is called: WooCommerce Gutenberg Products Block:
So, now, when you have a couple of products, you simply go to a post or a page, and you search for the product block:
The next option is to search for products. I will use the individual product search:
I will add my two products:
I will also adjust the columns:
This is how the products will appear on my website:
Quite similar to the current layout, but made with blocks.
What About SEO?
I was a bit scared about what will happen with the on-page SEO of my website. Thankfully, the guys behind Yoast plugin are working around the clock to ensure that the plugin will be fully compatible with the new editor.
As for now, Gutenberg works without any issues and the one-page SEO you have on your posts will remain intact:
I’ve checked several of my posts and the stats from Yoast are the same as before. So, I can stop sweating.
How will the Gutenberg Editor change my relationship with WordPress?
What about the working, the writing process when using Gutenberg?
Well, the experience is surely different. Different in a good way to be honest. You definitely need time to get used to the new layout, but it’s a nice writing experience. It’s not so different from the current workflow.
You can check the short gif below to see how I’m using Gutenberg to create a simple post for the first time:
As you will see, the experience is pretty smooth. Well, I’m still learning but it’s surely not so difficult to get the hang of the available features.
What to expect in the near future?
If you’re asking yourself how much time you have to get used to the new WordPress editor, the answer is “not much.”
With the release of WordPress 4.9.8 on July 31, website owners will see a notice in their WordPress dashboard inviting them to try the Gutenberg Editor by installing the plugin we discussed above.
The invitation screen will look like this:
You can choose one or the other option: Gutenberg or the current editor. In both scenarios, a plugin will be installed. Either Gutenberg or the Classic Editor.
This is stage 1 of implementing the editor. Even if you decide not to use it, for now, you will surely have to by the end of this year. Then, WordPress version 5.0 will be launched and it won’t include the Classic Editor. At least that’s the idea for now.
FINAL THOUGHTS
So, back to our initial question: Is Gutenberg the end or a new beginning for WordPress?
Well, it’s surely something fresh and exciting. I believe that it’s something good in the long run and that it will change the way we use WordPress.
Also, it opens a lot of doors for improvements. I already see developers creating custom blocks for Gutenberg that will additionally save us time and allows us to do things we weren’t able to do so far.
We’ll probably hate the new editor the beginning, but after few posts are published, I’m sure that we will quickly forget the old rusty classic editor that was introduced more than 15 years ago.
I’ll love to hear what are your thoughts about the plugin and the new editor. Do you think it’s a good solution or a bad move against the world?