The wait is finally over! WordPress 5.0 has come up with something cool and captivating; it’s the new WordPress Gutenberg Editor.
This new interface on WordPress has stirred up all sorts of discussion on both sides of the aisle.
Also, people all around the world are talking about the new editor and WordPress 5.0 “Bebo”. There was no way we could ignore it!
So, here we are, with the ultimate Gutenberg guide. Let’s unveil the Gutenberg Editor usage in WordPress 5.0.
For your convenience and better understanding, we have divided this detailed tour in following sub-sections.
1. Gutenberg Editor in WordPress 5.0
2. How to use Gutenberg WordPress Editor
3. Writing a Blog post using WordPress Gutenberg editor
4. How was Our Experience with Gutenberg
6. The Verdict
Note: Being your friend, we recommend you to use your staging platform first, to learn the WordPress Gutenberg editor and be familiar with it. Once you tweak and excel, you can anytime use it on your live site.
Now, without much ado let’s dive straight into the WordPress Gutenberg tutorial and learn how to use it.
1. Gutenberg Editor in WordPress 5.0
If you had been detached from the online world for some time and don’t know what is Gutenberg Editor, let’s first know a bit about WordPress Gutenberg.
Gutenberg is a new WordPress editor named after Johannes Gutenberg. It comes with the new WP version 5.0. The layout is easy for both, beginners and professionals.
Main Aim of Gutenberg WordPress Editor
- It will create content and post editing experience rich and advanced.
- It looks forward to developing further into initiating full site customization rather than just being used as an editor.
Released on 27th November 2018, Gutenberg is the new replacement to the WordPress TinyMCE editor.
Gutenberg WordPress editor wants to make it easy for everyone to create rich, and flexible content layouts with a block-based UI.
A block can basically be anything. It can be:
- A regular paragraph of text
- An image
- A Table
- A CTA button
- An embedded video
The biggest difference between Gutenberg and classic WordPress editor is the absence of the single text box that you currently use to write and format all your content. Rather, the Gutenberg Editor uses blocks to build different parts of your content.
Here are the blocks types WordPress Gutenberg Editor has to offer:
These “blocks” will help you create your content while making the process fun.
In a nutshell: With Gutenberg interface, you will have one big white area that starts with ‘Write your story’. And you will have to use blocks to create your posts.
1.1 Why Start using Gutenberg Today?
The WordPress users who have already updated their WP version to WordPress 5.0 are going to use and love the Gutenberg editor. However, if you have still not updated your WordPress version, you should do it today!
Why?
Because the WordPress team has announced that the Classic Editor plugin (the current WordPress editor) will be officially supported only until December 31, 2021.
So, if not today, you’ll have to learn to use the new hot Gutenberg editor sooner or later.
So, why not start using it today and become an expert until 2023?
1.2 How to install Gutenberg Editor?
You can meet this whole new interface in just two steps:
- Update your WP version to WordPress 5.0.
- Go to Add New option on the Post section in Dashboard
You have just opened this whole new canvas to create amazing blog posts:
Note: If you still want to use the Classic WordPress editor, it will be available as a Plugin now. Moreover, you’re free to use other third-party plugins too. However, no matter which WordPress version you use, third-party plugins can still create security loopholes on your WordPress site.
You can read our post on the best security wall for your website. It will help you keep your WordPress 5.0 safe and secure from the hackers and botnets.
Now, let’s move on to our next segment: How to use the WordPress Gutenberg editor.
2. How to use Gutenberg Editor?
Well, before knowing how to use Gutenberg WordPress editor, you must be familiar with the elements of this new interface. Navigate through following two sub-segments to know and use the editor:
2.1 Know the Editor
You’ll have to be friends with the following elements on the Gutenberg interface:
a) Icons on the top Left:
This is the bar that you can find on the top right of the white Gutenberg canvas. It has Add Block, Undo, Redo, Content Structure and Block Navigation buttons on it.
Let’s see what we can do with them:
1. Add Button (+):
The very first icon the bar shown above is the add block button. When you click on this (+) button, you can add a new block. It can be anything from text to paragraphs, from images to quotes, and from audios to videos, oh yeah, list and tables too!
2. Undo/Redo Buttons
When you want to move forward or backward to edit easily, just use these buttons to do it. You remember Microsoft Word right!
3. Content Structure
When you click on Content structure button, you can see the details regarding your post. For example, how many blocks you’ve used, how many paragraphs you’ve written, Number of total words and headings etc.
4. Navigation Button
The Navigation button on the top left toolbar lets you see and navigate through your blog post. Means you can the whole structure of your blog post, and also navigate through each block without really scrolling through the whole page.
This really makes everything easy, especially when you want to make changes to a specific block.
b) Icons on the Top Right
You can find these 4 icons on the top right of the new Gutenberg canvas. It has Preview, Publish, Settings, Other Tools & Options on it.
Let’s know these options in detail:
1. Preview and Publish
Much similar to the WordPress classic editor interface, the Preview and Publish buttons let you preview your content before you post it, and publish your post when it’s ready.
2. Settings Icon
On the top right of the interface, next to the Preview and Publish button, the third button you will see is the Settings button. As you click it, you will see 2 subheads: Document and Block.
a) Document Section
The Document section has the following 7 sub-sections:
Although there are many similar options as of the WordPress classic editor sidebar, Document sidebar still has many other amazing features and options to offer.
Here’s what you can do on the document slider bar:
i)) Status and Visibility:
Check the status of your post, change its visibility, select the post format you like, tick box for pending review, schedule the date for publish, and switch author between demo and admin; all under the Status and visibility section of Document bar.
ii) Permalink
Here, you can set the permanent link (slug/URL) for your post and also see the preview for it.
iii) Categories
Add new category anytime. Select the category for your post type from the category list you made. for example on ServerGuy, we have many categories for our posts such as Magento, AWS, DigitalOcean, Security, News and many more.
iv) Tags
You know the importance of tags when you write and post a content. It helps the readers to locate you when they have similar interest. You can add relevant tags to your post on the document bar easily.
v) Featured Image
A picture says a thousand word; this phrase is apt when talked about featured image. a featured image makes your blog more attractive and also conveys a lot about your post.
Add it within the Document section under the Settings option.
vi) Excerpt
An excerpt is a term for post summary in WordPress with a link to the whole entry. Now add an excerpt directly on Document section.
vii) Discussion
Allow post comments to know what your customers want to say about your post. Also, you must know that positive comments and no. of comments help increase your rankings on search engines.
Also, allow Trackback and ping-backs with this option.
b) Block Section
Block section is your playground on WordPress Gutenberg editor. It has got many customization options that you will fall in love with, as we did.
When you select an individual block, you can do settings that are specific to that block.
i) Text Setting
When you select a specific block to edit. You can change the font size, make it medium, large or small. Even you can custom its size as per your choice. This sub-section also has a cool new feature called “Drop Cap”. this again is inspired by the MS Word.
Drop Cap: It enlarges the first letter and makes a Toggle to show a large initial letter.
ii) Color Setting
Play with colors in the block!
You can also choose different colors for the background of the text and also add different colors to your text. Both the options are available.
3. More Tools and Options
When you click on the last button on the top right bar, you will see a panel of more options and features. Here, you can click to use:
- More toolbar options and access all block and document tools in a single place. You will see these options on the top of the writing box.
- Spotlight mode, that allows you to focus on one block at a time.
- Also, there is an amazing option called fullscreen Mode to work without distraction
2.2 How to Use Gutenberg?
Now, after exploring Gutenberg, its major elements and their usage, let’s move onto our next segment, how to use the ultimate Gutenberg WordPress Editor:
1. Adding Text
First off, let’s learn how to add some text on this new editor. Just follow the given steps:
- You will see “Add Title” on the screen. On this section, you have to enter the title or heading of your post.
- Then in the block below, type your content. you can add more blocks anytime you wish to; by just clicking on that “+” button.
- If you wish to make it simpler, just hit Enter. As you do this, it will automatically create a new block just below your present block.
P.S. In case you want to change your block type, type “/” to see the options on which kind of block you want. Moreover, you can change the alignment and format of the text entered. Just visit the block section in the settings option as described above.
2. Adding Images
No blog post is complete without relevant, attractive images. Here’s how to add images to your WordPress Gutenberg editor:
- To add images, click on “+” in the top left corner and select images block.
- You will find it in the most used section.
- As you click on it, the image block will be inserted. It will look like this:
- You can easily upload a new image or select an image from your Media Library.
P.S. WordPress Gutenberg editor also lets you add a caption, and make the modification to the image uploaded.
3. Adding Videos
The process remains the same for videos too. In fact, anything (any block) you want to add, just click on “+” button, and choose your block type.
Coming back to adding videos, follow the steps below:
- To add a video you can choose the video block to upload the video from your system just like you upload an image.
- To embed a Youtube video, click on Youtube under the Embed section in the “+” menu.
- Now, just paste the URL that you want to add, and click ‘Embed’.
- The video will get embedded in your post and you will be able to view it on the editor itself.
Note: You can also add tables (rows and columns) in one click with Gutenberg WordPress editor. However, we had to use a specific plugin for this if we wish to add them with Classic WordPress editor.
4. What Else You can do with Gutenberg?
Well, there is nothing that you can’t do with WordPress Gutenberg editor.
With this new interface, you can not just add text, images, videos, and tables, but can also add audio, gallery, quotes, list, files, and cover.
Moreover, you can also add CTA buttons, columns, media & text, page breaks, separator and spacer in WordPress 5.0.
3. Writing a Blog Post in Gutenberg
Creating a masterpiece post in Gutenberg WordPress editor is very simple. You just need to get acquainted with the steps that we described in this post.
The image below is an example of a blog post (speed up Magento 2) written on WordPress Gutenberg editor.
As you practice and excel, you will see that it’s as easy as pie. In fact, it’s more fun to work on this advanced editor, new in WordPress 5.0.
Just add text, images, slug (permalink), videos, and whatever you want to your post and then schedule it to publish.
The best part? You can add colors to your background and the text and change its font with Gutenberg!
Note: Don’t worry, Gutenberg doesn’t make any difference in the visual presentation of your posts to your visitors.
4. Our Experience with Gutenberg Editor
We tried our hands on this Gutenberg editor which is new in WordPress, and we’re loving it!
We love it for the following 4 reasons:
- The most interesting part about this amazing WordPress editor is building with “Blocks”.
- It doesn’t change the way any of your content looks to your visitors. It just lets you insert any type of multimedia in a snap and rearrange beautifully.
- It’s very easy to manage and navigate through the blocks as each piece of content will be in its own block.
- If you’re a coder with HTML and CSS know-how, the blocks won’t stand in your way; WordPress is here to simplify the process.
Note: We used it on our staging environment first to avoid any problems. Therefore, we advise all our readers to test Gutenberg on a staging environment first and make sure to take a complete backup of your site data before upgrading your live site to WordPress 5.0.
Or Try Gutenberg Demo here!
5. The Verdict
Everyone is talking about WordPress 5.0 and its new editor.
However, there is a lot more that’s new in WordPress 5.0 apart from the new Gutenberg editor.
Other new features include PHP 7.3 compatibility, JavaScript internationalization support, and the new Twenty Nineteen theme. These new features will leave you stunned!
Note: These new features in WordPress 5.0 can make your website slow, make sure to switch to a better, managed WordPress hosting for a faster and secure WordPress site.
Also, if you’ve already updated to WordPress 5.0 and using Gutenberg, share your experience with us in the comments section below.
