WordPress Gutenberg Guide for Beginners – The New WordPress Editor

To all the WordPress users, we like to notify that WordPress has introduced the new WordPress editor called “Gutenberg” which is the first ever biggest changes in the WordPress history.

Gutenberg Editor will bring the huge changes in the WordPress world and it is the new future of the WordPress that will give you the unique experience in the WordPress. However, it is still in development but you can test it in its current state.

The current TinyMCE text editor will be replaced with the Gutenberg editor very soon, so be prepared to use it.

In this article, we’ll be going to provide you the detail information of Gutenberg. Check out:-

• What is Gutenberg?
• Pros of Gutenberg Editor
• Cons of Gutenberg Editor
• How to Install and test Gutenberg on your site?
• How to create a post using the Gutenberg editor?

What is Gutenberg?

In short, Gutenberg is the new editor that will replace the current TinyMCE text editor in the WordPress.The ultimate goal of this editor is to make things work easily however the current editor require to utilize shortcodes and HTML to complete the work.

With Gutenberg, you can add content blocks and page builder-like functionality that gives entire editing experiences to the users. The use of blocks allows you to focus on your content that will look without the distraction of other configuration options.

Pros of WordPress Gutenberg Editor

• Gutenberg introduced the great tool called “Blocks”, you can add a block, rearrange, insert and style multimedia content without having coding knowledge. Only focus on the content.
• Gutenberg can greatly aid users who want to modify themes. For themes like Divi that have the content block builder embedded into a theme, switch themes will cause major issues. Gratefully, several of these themes (Divi included) provide a standalone builder plugin to allow Divi blocks to be used while not the Divi theme, however, this could be an advanced method to complete.
• The complete block system is mobile-friendly. Most of content block plugins don’t work well enough on devices. However, the Gutenberg editor throws a superb technology for the desktop and devices. Similar functionality and work are currently supported on mobile devices also.
• It is quite easier for newbies.

Cons of WordPress Gutenberg Editor

• The markdown support is currently missing.
• Still in the beta version and for testing purpose.
• The overall review is poor. Rating is 2.5 out of 5.

How to Install and test Gutenberg on your site?

Although Gutenberg will be integrated soon in version 5.0 in WordPress you can install it on the WordPress version 4.8 to use it which is available as a plugin.

Recommend: Do not install the Gutenberg plugin in a live website because it is still in beta.

• Go to Plugins >> Add New.
• Search “Gutenberg” in the search box.
• Click on the “Install” button.
• After Installed, Click on the “Activate” button.

Now the editor is ready to work, your site will automatically use the Gutenberg editor then

Go to Post >>Add New.

Adding Blocks to Gutenberg

Click the “+plus” icon and choose the type of content as you want:

While you click on the plus button, you can see the six tabs are displayed as

• Most Used: In this tab, the blocks that are used mostly will display as most used.
• Common Blocks: Similarly, the basic building blocks that are commonly used in the post will show up under that tab.
• Formatting: Under this tab, you can select the various blocks for formatting the content like code, pull quote, etc.
• Layout Elements: You can select any of the listed layout elements like button, page break, etc. where you want to put it.
• Widgets: In the widgets tab, it will let you add shortcodes, latest posts, or categories. It’s even possible to display sidebar widgets right in Gutenberg.
• Embeds: In Embeds tab, you can select the various blocks from various social media platforms and popular websites for embedding audio, videos and other contents.

How to create a post using the Gutenberg editor?

Let us help you with creating a post by using the Gutenberg editor so that you can create your own post easily without any complications. Basically, there are includes lots of post layouts but we are inserting some of them for an example. Let’s begin:

• Regular Text
• An Image
• Pull quote
• CTA button
• An embedded YouTube video

Adding Regular Text

In a title box and a story box, you can add the title and the paragraph of your post.

Insert an Image

• Go to  “+Plus” icon >> Most Used >> Image.
• Click on the upload/media library to select the image.

You can easily add the image anywhere between content by clicking the “+plus” button.

Pull quote

• Go to  “+Plus” icon >> Formatting >> Pull quote.
• Type some text.

It used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article.

CTA button

• Go to  “+Plus” icon >> Button.
• Give the name and insert the URL to the page.

To add and customize the Call to Action Button, you can easily insert by this process.

An embedded YouTube video

• Go to  “+Plus” icon >> Embeds>> Youtube.
• Enter the URL to display the video on the post.

That’s how to can embed the video, image  into your post.

Wrapping Up

WordPress is upcoming with the huge changes introducing “Gutenberg”, the new WordPress editor which will provide the unique experiences to the WordPress users. Hope this article will helpful and effective to all of the readers.

If you want to read a more informative article about WordPress then check out:-

• WordPress.com vs WordPress.org – What’s the difference?
• Tips to Optimize and Speed Up WordPress Sites
• Blogging for beginners – How to start a WordPress blog