Gutenberg WordPress Tutorial In 12 Minutes

The Objective

In this guide, I will be showing you the basic step-by-step for the Gutenberg WordPress tutorial. I believe many people including me previously did not even try to use Gutenberg because of the past bad experience and review.

When I first create a page in Gutenberg editor, I feel stuck and confuse and don’t even know where to begin. Due to the evolution of this block editor base on speed and performance and now the default build-in page builder in WordPress, Gutenberg is what you really need to pay attention to.

Why I Switch From Pagebuilder To Gutenberg?

• The default block editor in WordPress 5.x and above
• Free and easy to use
• Very lightweight and can easily make your website load faster by simply replace your pagebuilder to Gutenberg. Try to test your site speed here. What is the reading? I guest you hardly get more than 90 if you are using pagebuilder.
• Much more flexible than bloated pagebuilder. You are free to use or combine any third party blocks templates, free or premium, your choice they can work together
• Due to the WordPress evolution, I believe Gutenberg will keep improving and can be use for a long time and everyone should learn it now. Sorry to say that, I am currently stop using any other pagebuilder until if they can beat Gutenberg block editor.

The Goal Of this Guide

The goal of this guide is to help beginners to be familiar and understand what is Gutenberg and be able to use the basic tools and functions to build a website and will answer common questions like:

• How do I use Gutenberg editor in WordPress?
• How do I use Gutenberg blocks in WordPress?
• What is WordPress Gutenberg?
• Is Gutenberg for WordPress free?

Watch the tutorial video below for better understanding, because it is very hard for me to explain everything in written words:

What is Gutenberg?

Gutenberg is now the default page builder or block editor for WordPress just like Elementor, Thrive Architect, and any other page builder that you can use to build your website page or post.

Take note that I will go through every button functions In Gutenberg Editor from the top left main menu to the right of the main menu.

How To Add Blocks

• Hover pointer to the + sign at the top left menu
• Hover pointer around the right side of a blank block and click the + sign.
• Hover pointer at top or bottom of an existing block, and click the + sign
• Type / from an empty block.
• You can hover your pointer to preview the sample blocks that you want.

Title And Permalink

• You can name your title at the top title bar and it will become your page or post permalink.
• You can change your page or post to custom permalink you want at the page option.

Patterns Block

• The second tab after the block, is the patterns block tab.
• Patterns block are pre-build block templates, they are actually combination of blocks that group together and been configured and ready to use.
• You can use it to build your site quickly rather than build everything from scratch.

Reusable Block

• Reusable block are block that have been created and you can save it as a template to use it again and again.
• Any block can save to reusable block.
• This is very useful if you need certain element that you want to use over and over again on your website.
• If you make change to reusable block and save it, it will also change globally on your website that use that reusable block.
• If you only want certain page or post for some changes, you need to convert it to regular block. After converted to regular block, any changes you make will only save on that page or post.

Edit Mode

• Edit mode is the pencil icon next to the + sign on main top right
• If you click on edit mode, anywhere you selected can be edit directly.
• If you change it to select mode, you can only select any blocks by clicking on it.

Undo An Redo

• Next to the edit mode pencil is the undo and redo icon.
• I use this very often to undo or redo my mistake quickly.

Details Button

• Next to undo and redo is the i icon which is the details button.
• If you click on it you can view the summary of total characters, words, headings, paragraphs and blocks use on that page or post.

Navigation Button

• Next to the details button is the navigation button.
• This navigation function is useful when you have a long page or post where you can jump to that blocks easily.

Save Draft Button

• On the right of the top main menu is the save draft button for you to save your progress
• If you click on this button after you publish, this button will bring that page or post back to draft mode

Preview Button

• Where you can preview your page or post in desktop, tablet or mobile mode.
• Always check your preview on mobile mode too and make sure everything looks good in mobile as most people is using mobile nowadays.

Publish Or Update Button

• If you already publish the page or post, this button will change to update button.
• By default, after you click on this button it will bring up a menu where you can also schedule your post here.

Settings Button

• After you click on the gear icon, you can see all the settings you can play around on that page or post.
• If you click on the next tab which is the block settings tab is where you can make the settings to the selected block.
• There are many customizing sections you can play around here.

Theme Settings

• Next to the gear icon normally will be your theme settings, depend on the theme or the plugins you installed.
• Here you can customize your theme settings
• One of the frequent function to change here is to enable or disable the header and footer.

Option Button

• The 3 dot button is the option button.
• This option button is where you can customize your Gutenberg editor preference.
• You can play around to select your preference setting for your Gutenberg editor things like where to display your toolbar, full screen display, switching from visual editor to code editor, etc.
• If you have other plugin installed, example like SEO plugin, you can see the option for that plugin will be located here

Conclusion

In my opinion, Gutenberg is what you really need to pay attention at. If you follow through the walkthrough in this guide, you will be more confident to use Gutenberg. You can also easily improve your site performance by eliminating your website pagebuilder to Gutenberg editor. What do you think? Will Gutenberg really can replace other paid page builder in the future?

To start a WordPress website click here