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 Introduction to the WordPress Gutenberg Editor Interface
First of all, when you will start writing new post or page in WordPress using the new editor Gutenberg, the editor will look like this.
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.
As an alternative, you will see a big white area that starts with “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
- An Image
- A Paragraph
- CTA button
- 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.
- You can use click this button to add a new block
- Undo & Redo is just similar to Microsoft word and can easily help you to move backward and forward to edit the content.
- 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.
- If you want to select the specific block you can click to block section. This setting area includes settings which are specific to that block. Here you can easily set that particular section with colors, styles, etc.
- These two buttons will let you preview or publish your post.
If you click on the +Plus button to insert a block, it would open a window that lets you browse all possible blocks that you can use to create your content:
The Recent and Saved tabs will grant you to access blocks that you regularly use, whereas the Blocks and Embeds tabs will let you browse all available blocks. You can even use the search box to find a specific block 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:
- Numerous regular text
- An image
- A CTA button
- Embedded YouTube video
- 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 to a page like this.
What you need to do here is only to type. Moreover, when you hit enter to start a new paragraph, Gutenberg will automatically create a new block for you.
If you want to embed a link, change alignment, or format the text with bold or italics, you can just click on the text block and use the floating menu bar:
Rule 2: Adding an image block
If you want to add an image anywhere in your post, what you need to do is hover over the spot where you want to insert your image.
When you do that, you would find the Plus icon appearing. Clicking on it would open the block list, which would assist 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 like you do with the current WordPress 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:
- Float over where you want to insert your YouTube video
- Click the + Plus icon
- Go to the Embed tab
- 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 once you add it, you can add or remove rows and easily.
Rule 5: Add and style button block
The button block is one of best features added to the Gutenberg editor because buttons are something that was previously hard to implement without knowing the CSS. 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 every time you want to insert a new block, you can just start typing and use this format /block-name. As you start writing, Gutenberg would automatically suggest blocks that match: