Tutorial on WordPress Gutenberg: How to Utilize the Recent Block Editor in WordPress 5.0

After a very long duration, WordPress has undergone one of the most significant changes, following the release of WordPress 5.0.

Furthermore, WordPress 5.0 comes with a recent default content editor, known as Gutenberg. Therefore, the default TinyMCE editor which you have used for years will get substituted by the Gutenberg block editor. In turn, the way you have been creating content on your WordPress website will transform entirely.  

Here is a WordPress Gutenberg tutorial, to assist in making the change as easier as possible. Thus, you can continue working immediately after updating your website to WordPress 5.0.

What makes the WordPress Gutenberg Block Editor Different?

To clarify this, here is the appearance of TinyMCE editor:

On the other hand, here is the look of the recent Gutenberg Block editor:

So, have you seen the difference? “block” is the only significant difference.

Unlike in TinyMCE editor where you were using one field to post all your content, Gutenberg offers each paragraph a single block.  

Deductions from the above:

• Every paragraph stands a single block.
• An image is also a single block.
• Any embedded video appears a separate block.
• Basically, anything that you will apply is likely to utilize its separate block.

Do Blocks offer any benefit? Why transform things from how they were?

To clarify these questions, it is much easier to make complex layouts using Gutenberg block editor. Also, it is easier to apply extra fun content kinds. In addition, the editor is more visual, because you can get an exact preview of each block appearance.

For instance, assume you need to add a button to your blog post.  While using Gutenberg, you only need to add the Button block, and have its view on the editor. On the contrary, when using TinyMCE editor, you must use the Text tab, to include a CSS class. Alternatively, apply a short-code from the button plugin.

Another main advantage of Gutenberg is that blocks work with short-codes. However, short-codes are not that natural or visible means of adding content. When using Gutenberg, plugin developers can develop their personal blocks with ease, rather than depending on short-codes. As a result, adding “plugin content” is easier.

How to apply the new Gutenbergeditor?

In this section, we shall get into the “how-to” question. But, for clarity purposes, we decided to make two parts of the Gutenberg editor tutorial.

At the start, you will learn how to apply Gutenberg in doing things that you have been doing with TinyMCE editor. The first tutorial part aims to enable you to continue making the content you have been making with TinyMCE without hindrances.

After the first section, we shall go into detailed and improved productivity hints, and new things that you can do with Gutenberg.

How to Make a Page or Blog Post using Gutenberg

It is easier to add normal text to Gutenberg. The process did not change, because you only need to copy and paste. However, the new Gutenberg comes with some difference, because it makes a new paragraph block, whenever you press enter.

Further, after you stop typing a floating toolbar appears. You will use the toolbar in formatting your text. For example, to align and bold among others.

Nonetheless, the “floating toolbar” is not pleasant to most people. Therefore, you can use the TinyMCE fixed toolbar approach, if that is your preference. To “fix” the toolbar, go to the top-right corner of the editor, and click the drop-down menu. After expansion, select the Top Toolbar option.

Inserting a new Block

Whenever you are writing, typing automatically makes new blocks. But, for other things like videos, images and headings among others, you must add a new block.

Here are the various means of adding new blocks:

1. At the top-left corner of the editor, click the plus (+) icon, when creating a new block at the bottom.
2. If you want to create a new block between blocks that are in existence, hover your mouse where you intend add the block, then click the (+) icon.

After clicking any of the above plus icons, you will see a popup, listing all available blocks. Besides, at the top of the popup, you will see a list of blocks that you use often.

Alternatively, you can:

1. Search for a block using its name, through the search box.
2. Have a view of accordion tabs of all categories of blocks available, by scrolling down.

Forclarity, here are some examples, if you want to:

• Insert an Image

You should start by adding an image block. After that, apply the available choices, to determine where you will upload the image from:

• Embed a YouTube Video

Adding the YouTube block is the first step. Once you are done, paste the URL of the video, to get a live preview:

• Insert a heading (h2, h3, h4…)

Add the heading block, and then use the toolbar to select the heading level:

Alternatively, you can select an existing paragraph block, then “convert” into a heading block using the toolbar:

Configuring a Block

Use the toolbar to perform basic things, such as alignment, italics, and bold among others. Even so, you will be using the Block tab on the right side bar, to perform other block settings. For instance, after adding a Button block, you can change its colors using the right sidebar:

Re-arranging Content

To re-arrange content in the TinyMCE editor, you must use the cut and paste options. However, you have two options when using Gutenberg:

• Up/down arrows, which moves a block either up or down a spot.
• Drag & drop functionality, which allows you to drag a block wherever you want.

To activate the options, you should hover your cursor over the block you are planning to move.

Our WordPress team provides WordPress support services, if you need help for your content and design for your WordPress site.

Are you planning to use the drag & drop functionality? If so, hover the mouse over the six dots that are between the arrows. After that, you will be in a position to drag & drop as indicated below:

Configuring Basic Post Information like Slug, Categories and others

By following the above steps, you got everything you need to make basic posts and pages. However, you cannot configure back-end information, such as:

• Tags
• Categories
• URL Slug
• Others

The sidebar Document tab can assist you in configuring all behind-the-scenes information. It performs the same functions as the TinyMCE editor sidebar:

How About Configuring Plugins such as Yoast SEO?

Do you have other plugins like SEO and Social media plugins, which require a post-by-post configuration? If so, then how do they work?

Some plugins feature built in Gutenberg support, such as Yoast SEO. To use plugins like Yoast SEO settings which features the support, click the icon at the top-right corner. In turn, you will have the capacity to use the sidebar in configuring the plugin:

In some other plugins, using the “meta boxes” which are beneath the text editor is still possible. Similar to before, they still appear beneath the text editor:

Five Extra Improved Hints of Using the Gutenberg Block Editor

Here is the second section of the tutorial, which teaches you on how to get more from the Gutenberg Block editor:

1. For Enhanced Productivity, master the Keyboard Shortcuts

In Gutenberg, everything is a separate block, leading tomany “mouse clicks” for things to get done. As a result, this translates to slower work, more so at the start.

To avoid this problem, ensure you learn the keyboard shortcuts of the Gutenberg editor. The keyboard shortcuts will enable you to swiftly add or delete blocks required swiftly.

Press Shift + Alt + H to open the entire list of shortcuts:

1. Use Slash to Swiftly Insert Blocks

Instead of applying the insert block popup whenever you are planning to add a block, use the easier method of typing slash “/” in an empty block, and then search the block using the name. Have a look at this example:

1. Drag Images from Desktop to Gutenberg

To make the process of adding images faster, drag them directly from your desktop to a particular area in the editor. Hence, the images will be uploaded automatically to your media library by the editor.

1. For Complex Layouts, Use the Column Blocks

Gutenberg features a Columns block, which you can use to make sophisticated blocks. After adding the column block, you can go ahead and add other blocks in it:

Alternatively, you can use third party plugins like Kadence Block plugin for enhanced layouts flexibility.  

1. Utilize Third-Party Block Plugins

Among the main benefits of Gutenberg editor is the ability to use third-party plugins in adding new blocks. Many developers are in the process of creating new layout blocks and content, initiatives that willaid in enhancing the functionality of Gutenberg. Here are some that you can use:

• Improved Gutenberg.
• Stackable.
• Atomic Blocks.
• Ultimate Add-ons for Gutenberg.

Another amazing project that allows you to install particular blocks from a number of developers is the Gutenberg Cloud Plugin.

Furthermore, some plugins which you might be using will substitute short-codes with blocks. Thus, if you run a Woo-Commerce store, you will use a new block in inserting Woo-Commerce products in your content.

Will your Old Content Be Affected after you Update to WordPress 5.0?

Are you wondering what will happen to the content you had made using TinyMCE editor if you run a WordPress site? Relax, because the developers did put your old content into consideration.

Assume you created the post below with TinyMCE editor:

WordPress will consolidate all the old content into one Classic block, after you update to WordPress 5.0, as well as Gutenberg block editor. Basically, the Classic block is TinyMCE editor inside the Gutenberg interface.

Therefore, instead of every element appearing in a separate block, a single Classic block accommodates everything. Here is its appearance:

In case you want to edit the content, you can do it in the Classic block, similar to using the TinyMCE editor:

Alternatively, you can select the choice of converting to Blocks.  In case you have chosen this option, Gutenberg breaks your entire old content to separate blocks. As a result, you will have the capacity to work with it as if you are using Gutenberg to create the post from scratch.  

Is Gutenberg Editor a Must-Use? Or, you can Continue Using the TinyMCE Editor?

Using the new Gutenberg block editor is not a must. Although the official Classic Editor plugin allows you to continue using the TinyMCE editor, the default editor in WordPress 5.0 will be Gutenberg editor. Also, the TinyMCE editor will keep getting support from the WordPress main team, up to around the end of 2021.

You only need to do the installation of the plugin from WordPress.org. After activating the plugin, it will lead to deactivation of the Gutenberg block editor. Hence, you will make content as you were doing before upgrading.

Furthermore, if you wish, the plugin features another option, which allows you to apply both Gutenberg block editor and TinyMCE editor. You can use them interchangeably, but on content-by-content basis.

For activation of the setting, click the Settings icon, and select Writing. Now select the Use the Block editor by option. The choice allows the inclusion of optional links to Classic editor:

Summary

The new Gutenberg block editor has raised many debates in the WordPress community. On the contrary, the aim of our tutorial is to ensure you will continue enjoying an amazing WordPress experience with WordPress Support Maintenance servicesIn our blogs, you can learn more about Gutenberg WordPress Editor. If hope this tutorial helped you.  Do you have questions regarding Gutenberg block editor? Kindly ask in our comments section, and we shall answer.