Over the last 18 years, WordPress has undergone huge changes and advancements. But the biggest shift happened back in 2017 when they first introduced the new content editor Gutenberg to the world of WordPress users and developers.
Now, Gutenberg is supposed to be the future of WordPress and is also regarded as the default WordPress editor. This block editor transforms the process of creating and publishing content in WordPress. That means if you are a WordPress fan, you need a strong grip on Gutenberg.
To help you out, here we cover everything you need to know about Gutenberg WordPress Editor with step-by-step easy guidelines.
Table of Contents
- An Introduction to the WordPress Gutenberg Editor
- How to Use the WordPress Gutenberg Editor (Step by Step Guide)
- How Does the Gutenberg Editor Interface Actually Work
- How Do I Enable Gutenberg Editor in WordPress
- Bonus Tip: Introducing Some Advanced Gutenberg Blocks in WordPress
- Let’s Start Over Gutenberg, Otherwise You Go Out of The Trend!
Without any further delay, let’s explore the things together.
An Introduction to the Gutenberg WordPress Editor
The Gutenberg Editor brings some significant changes in the way you edit in WordPress. It replaced the TinyMCE editor as the default WordPress editor, when the 5.0 WordPress version was launched on December 6, 2018.
With Gutenberg blocks, you can easily add different types of content into your posts or pages and then rearrange the layout directly within the editor. It will enhance your entire editing experience to the next level.
The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take short codes, custom HTML, or “mystery meat” embed discovery.
Matt Mullenweg, co-founder of WordPress
Also, it allows you to create dynamic content applying different styles and settings. At first, it seems complex to you if you are using the classic editor for a long time. But gradually as much you get habituated to it, you can feel the usefulness.
Nevertheless, it reduces your hassle to get extra plugins and extensions. On top of these, this new WordPress editor has a ton of possibilities for everyone including bloggers, writers, photographers, and businesses.
You can find the image below where you’ll see the Gutenberg block editor.
If you want to get the most from this tool, you have to learn about the Gutenberg in details. In this ultimate Gutenberg user guide, we’ll focus on how a user can handle the Gutenberg editor more effectively.
You can quickly check out the complete story of WordPress Gutenberg Blocks.
Let’s dive into deep.
How to Use the WordPress Gutenberg Editor (Step by Step Guide)
The major change that Gutenberg brings in the WordPress editor is a block-based editing approach. A block can be anything like:
- A heading
- A paragraph of text
- An image
- An embedded video
- A quote
- A button and others
After clicking on the “+” button you will get a window including all available blocks. You can search for your required block from here and use it in your content:
Now, we’ll try to demonstrate how to use some popular blocks that people usually need while creating content.
1. Add Title to Your Post/Page
Every content has a title. So you have to add a title in your post or page. In Gutenberg, you can add your title through this process.
2. Write Your Text Using Paragraph Block
To add a paragraph first you need to add a Paragraph block. Then you just write your content on the block. Here how it works.
Note: The sub-menu above the block lets you change the text alignment and text formatting of your block content. You can do further customization from the right menu of the editor.
3. Change the Color of Your Text
Sometimes you need to change your text color you can do it here.
4. Add A Heading Block
Like the paragraph, you can easily add your heading in your post content using the Heading block.
5. Add & Style Button Block
The button is one of the important elements of content. In Gutenberg, you can add your button very easy way. Besides, you also can insert multiple buttons in the same row.
Moreover, you can change the color of your button text or background same as we showed above.
6. Insert an Image Block
Let’s add an image in your content following this example.
7. Add Embed Videos to Your Content
Gutenberg also allows you to insert any types of embed videos in your post. Let’s see how you can use this Embed Videos block.
See, how easy it is! Now you can use the Gutenberg block editor following the above examples. You can also add other types of block content as well and customize them using Gutenberg editor.
In addition, if you want to know more about the use of the Gutenberg editor you can find it here.
Let’s See How Does the Gutenberg Editor Interface Work
Gutenberg is a powerful block editor for WordPress that allows you to edit your post content very easily. Most importantly, it comes with tons of advanced blocks so you can easily build your web content effortlessly.
Using Gutenberg blocks is easy and fun. It just drags & drops the blocks that you need. Moreover, you don’t need to focus on coding knowledge.
In fact, whenever you want to edit something on the Gutenberg blocks you get the full freedom to do whatever you want to do. For your concern take a look at this blog to know about Gutenberg block editing.
Let’s see how you can use the Gutenberg editor & blocks with real-life examples.
1. Different Writing Modes
In the Gutenberg editor, you’ll find three different writing modes for helping your writing styles.
Top Toolbar: Top Toolbar helps to display all of your blocks in the same spot.
Spotlight Mode: Spotlight is completely different from the Top Toolbar mode. In fact, when you select this option you can only edit a block that wants to edit. And the other block remains to disable.
Full-Screen Mode: It removes all of your dashboards left sidebar and allows you to work on the fullscreen mode.
2. Gutenberg Keyboard Shortcuts to Speed Up Your Workflow
There are lots of keyboard shortcuts in this editor. By using those shortcuts you can also lightweight work and save more times.
- Ctrl + Alt Backspace delete the select block
- To insert a new block before the selected block(s)- Control + Alt + T
- To insert a new block after the selected block(s)- Ctrl + Alt + Y
- Display help – shift + Alt + H
- Save your changes – Ctrl + S
- Undo your last changes – Ctrl + Z
- Redo your last undo – Ctrl + Shift + Z
- Show or hide the settings sidebar Ctrl + Shift +,
- Go to the next part of the editor Ctrl + ’
3. Search Block from Library
Searching a block is very easy in the current default WordPress editor. You can search for a particular block from the searchable index of the Gutenberg Block Library. You will get the window just by clicking on the “+” button.
4. Switch Between Visual Editor & Code Editor
In addition, sometimes you need to switch between the visual editor to the code editor to make some changes. You do it right here.
5. Gutenberg Outlines Your Document
A content outline is a very important part of your content structure. You will find a little “i” in a circle in the top left corner of your editor. By clicking on this, you can see the complete structure of your blog at a glance.
6. Reusable Block Template
By using this, you able to use your previous block design that you have saved earlier. So it saves your time a lot. Here, how you use it.
Get some useful tips about this block editor through from here.
How to Enable Gutenberg Editor in WordPress
Here we’ll discuss how users can enable Gutenberg block editor in your WordPress dashboard. If you are using WordPress 5.0 and above, you won’t need to enable it separately. Because now WordPress comes with Gutenberg by default.
On the other hand, if you’re still using the classic editor and planning to shift to Gutenberg editor. Then you can easily install and activate the Gutenberg plugin like the other plugins activation process.
You find the Gutenberg download link here.
Bonus: Introducing Some Advanced Gutenberg Blocks in WordPress
As we said Gutenberg is all about lots of different useful blocks that we always use to design posts or pages. Here we will cover some of those powerful blocks that you can use to give an extra slick look to your blog.
Generally, Gutenberg separates their blocks into 7 several categories. You’ll find in the following lists:
- Most Used
- Common blocks
- Formatting
- Layout elements
- Widgets
- Embeds
- Reusable
Let’s focus on some useful blocks.
Quote: We often see the use of quotations in blogs or articles. In this new WordPress editor, you can use the “Quote” block to add a quotation. You can apply different styles to showcase your quote in an appealing way.
Shortcode: It is another essential block that you can use on your website page or post. With this shortcode block, you can easily add your desired affiliate banner, product image, and more.
Classic: Sometimes you’ll need back your WordPress classic editor to edit your post content. Thanks to the Gutenberg for having this amazing block so that you can easily use your old editor.
Custom HTML: This block also helps you to add custom HTML code in your blog posts.
Furthermore, you can explore more Gutenberg blocks by using third party plugins.
Let’s Start Over Gutenberg & Get Ahead of Everyone!
The Gutenberg Editor is one of the major shifts in WordPress history. It may take some time to adjust to this completely new interface. But in the long run it will make your hands more powerful to create amazing content.
Hopefully, this ultimate Gutenberg WordPress editor guide will help you learn many useful aspects of this amazing block editor. Thus, you can deal with this block editor seamlessly.
So, what do you think about the Gutenberg editor so far? Do you find it useful or not? Share your experience or queries regarding the Gutenberg WordPress editor by placing a comment below.
9 Responses