Let Us Explore New WordPress Editor Gutenberg

What is WordPress Gutenberg?

If you are a WordPress lover then you must have heard about Gutenberg editor which is available with WordPress 5.0. Today, I am going to assist you to learn WordPress Gutenberg Editor and will guide you to know the basic difference between the classic editor and WordPress Gutenberg editor.

An Overview To WordPress Gutenberg Editor Interface

First of all, Given below is the looks of the Gutenberg editor. Before publishing an article, it is good practice to analyze the new editor. Let us check into the details now.

If you will closely observe the new editor you will notice that it is quite similar to WordPress classic editor but the main difference is the absence of textbox which you earlier used to write and publish all your content.

In a new Gutenberg editor, you would see a big white area with sections like “Add title” and “Write your story”. Within this big area, you can easily create content using block structure. Gutenberg editor gives an opportunity to create your content in the form of blocks rather than a single text input box.
You must be wondering about how block works in Gutenberg, let me explain you briefly, a block can be anything. It could be

1. An Image
2. A Paragraph
3. CTA button
4. Embedded Video

Also to add more functionality, a third-party developer can easily write their own code to make it attractive.

How to Use Gutenberg Editor?

This is the time to explore the various area of the Gutenberg Editor. So let’s dive into the new editors and check what we can do.

1. You can use click this button to add a new block
2. Undo & Redo is just similar to Microsoft word and can easily help you to move backward and forward to edit the content.
3. The setting area almost contains the same features as of the classic editor. Here you can conveniently add tags/categories, featured image, publishing date, etc.
4. If you want to select the specific block you can click to block section. The setting area includes settings which are specific and described for that block only. Here you can easily set that particular section with colors, styles, etc.
5. These two buttons would assist you to preview or publish your content.

If you click on the (+)Plus button for inserting a new block, it would open a window that would let you browse all possible blocks available to use create your content:

The Recent and Saved tabs would allow you to access blocks that you frequently use, on the other hand, the Blocks and Embeds tabs would let you browse all available blocks. To find a specific block you can also use the search box feature by typing in the block’s name.

Time to Write a Blog Post Using the Gutenberg Editor

As for example, let us say that you want to write a blog post which includes:

1. Numerous regular text
2. An image
3. A CTA button
4. Embedded YouTube video
5. A table

Previously, you might have required a few plugins or custom CSS to handle creating a table and CTA button – but now you can do everything with Gutenberg Editor.

Rule 1: Write text using Gutenberg’s paragraph block

You do not have to add a new block to write a text, just start typing it after clicking within a block like this.

Also, Gutenberg would create a new block automatically when you hit enter to start a new paragraph.

If you want to add a link, update alignment, or format the text with bold or italics, you would need to click on the text block and use the floating menu bar:

Rule 2: Adding an image block

If you want to insert photo anywhere within your blog post, what you need to do is hover over the area where you want to insert photo.
When you do that, you would find the (+) icon appearing. Clicking on the plus icon would open the block list, which would help you to choose the Image block.
When you do that, you would be able to upload a new image or select an image from your Media Library, just how you used to do with the classic editor: Once you put the image block, you would see the actual image right there in the editor.

Rule 3: Adding a YouTube block

To set a YouTube video in your blog post, you need to follow an almost similar step:

1. Float over where you want to insert your YouTube video
2. Click the + Plus icon
3. Go to the Embed tab
4. Choose YouTube

Then, all you need to do is paste in the URL of the YouTube video, click Embed, and you will see the embedded video right there in your post:

Rule 4: Adding a table block

The table block will let you insert and handle a table anywhere in your content without any difficulty.
To do so, you would need to follow the same step as the above. And if added, you can add or remove rows and easily.

Rule 5: Add and style button block

In the previous edition, it was hard to implement button but with Gutenberg Editor, using buttons is very simple. You can add a button by following the same process similar to other blocks. To edit the button’s text, all you need to do is just to click and type. You can also change the color of the button easily

Other Things That You Can Do With the WordPress Gutenberg Editor:

There are also some other inbuilt helpful features that you can easily do with Gutenberg Editor.
One of the features that are helpful is the capability to insert a unique background color to any paragraph block in your blog post:

You can also move each block up and down easily and quickly to change the positioning of the block i.e. without the old copy and paste method:

And lastly, if you would like to save time while adding new blocks, you can use Gutenberg’s autosuggest feature. Instead of using the + Plus icon for adding new block you can just start typing and use this format /block-name. As you start writing, Gutenberg would automatically auto suggest blocks that match: