WordPress 5.0 is now available with all new editor experience. It’s a big change in WordPress history. I think they are going towards the trends of a Website Builder.
Gutenberg, All new WordPress editor with block has similar experience like other website builders. And this is a big step forward to give engaging and rich visual experience to users.
Their goal is to give the best experience to those who don’t know how to code.
Today, we will learn more about what is Gutenberg and how to use Gutenberg effectively?
What is Gutenberg?
Gutenberg is more than an editor. It is a project to refresh the WordPress editor experience and more. It has three different stages where they will improve overall experience by adding full website customization.
Gutenberg uses a set of blocks which allows you to focus more on content without worrying about any code.
Experience Gutenberg
The first step is to update your WordPress version to 5.0. When you upgrade, make a backup of your current website. In case, you find any issues after the upgrade, you can rollback to the older version.
After the upgrade, you can keep existing post as it is or you can upgrade it with new Gutenberg experience. I suggest to leave it until you learn more about the new editor.
Next step is to click on the new blog or page. It will open ups the new editor. At first, it looks like below screenshot.
As you can see It has more space than the current editor. You can click on setting icon on the top right corner to hide the right sidebar.
Let’s go through options available on the above screen.
On top left corner you can see option for “Add Block”, “Undo”, “Redo”, “Content Structure”, and “Block Navigation”.
On top right corner you can see option for “Save Draft”, “Preview”, “Publish”, “Settings”, and “More”.
In setting right sidebar, You will see an option for Document and Block.
Document: You will get option for “Status & Visibility”, “Permalink”, “Categories”, “Tags”, “Featured Image” and more.
Block: Whenever you click on any block in the editor, you will see the option for that respected block. You can add/edit those options.
Let’s dive into a few important options which help you understand effective use of the editor.
Add Block
You can add block from plus icon from the top left corner. It has plenty of options. Check below screenshot.
They have added all required blocks to design a page. Here is the available blocks list. paragraph, heading, image, gallery, list, video, audio, table, quote, button, columns, spacer, line, shortcode, archive, category and many more.
You can also move your block to up or down or drag and drop to rearrange your block.
With every block, you will find a quick option on the top left corner which allows you to swiftly edit your block content’s appearance.
Block Options
With every block, you will see block “More Option” with three vertical dots icon.
Using these more option, you can see a very good option which helps you to perform some operations.
You can duplicate the block. You can insert block before or after this block. You can edit this block HTML or add this block to reusable blocks. Last option is to remove the block from this page.
Reusable block section helps you save your customize block and reuse it. The spacer could be one of a good example. You can adjust the spacing between the block and add it as a reusable block to use it across your post or even website.
In conclusion, All these options help you while drafting your post or page content.
Post Heading and Paragraph
Post heading has the option to change your post or page URL. Click on Post heading option to update the page URL and heading text.
You will see a quick option to add a new block or start writing in the existing paragraph block.
If you are not sure how to use blocks or you don’t want to use block, you can write your post content like you were doing it earlier.
Adding Image
Adding image is very easy now. Earlier with old editor, It opens a media popup where you need to upload the image or select it. With this image block, you can upload or drag and drop an image on the go in the small image section.
You can select image block to ad image to your post or page. Once you add, your block will look like below screenshot.
You can even open media library or insert an image from URL from above option apart from uploading an image. You will get an alignment option on the top left corner of the block.
Adding List
Many blog or page needs a bullet list to explain your topic. It is one of the most important features for your blogging.
As you see in the above screenshot, you will get all the basic options to format your list. You can add bullet or number for your list and format your list font with given options.
Layout Elements
With Gutenberg, you can design your page or page easily. You will get some options as below to design your layout.
With these options, You can add the button to your page. Add columns if you are going to display your content in different columns.
There is an option to add text with image or video. You can display image and text side by side in your post or page.
The spacer is also a very important option which helps you to give space between 2 blocks. Many times you need this option to make your page looks good.
You can also add More, Page-break or Separator to your page as per your need.
Widgets
Gutenberg introduced a new option to add widgets to the page. You can add Categories, Latest Post, Archives, Shortcode and Latest Comments to your page.
You can add any of the above options as per your need. All these options are dynamic. You can control how many categories or latest post will be displayed on the page.
There are different ways of displaying the options. You can change the display arrangements of the widgets.
Embeds
You may need to add video, audio or any third-party feed to your post or page. Embed option comes handy when you need this.
You can add any blog URL, social media feed, YouTube video, Spotify audio, and many more options. There are many options available to embed in your post or page.
Conclusion
I have covered all the basics of the new WordPress editor.
I covered all the basics of the new WordPress editor. This editor is still new. And there are more to come in the future.
Blocks are a great way to design a page. I would say this is a step forward towards making WordPress to Website Builder. After this, you won’t need any website builder plugin in WordPress.
Overall, I liked Gutenberg and hope to see more features in time to come.
Additionally, I have also experienced some issues while using it. After adding few blocks, this editor slows you down while writing content.
You may experience such issues initially however it will stabilize in the next few months.
I have started using Gutenberg with this post. Did you? Leave a comment below.
1 thought on “Learn how to use Gutenberg? : All New WordPress Editor”
Comments are closed.