
Before jumping into the ocean let's see the requirements you need to work with Gutenberg editor.
The only thing you need to work with Gutenberg Editor is WordPress 5.0+ version. Because WordPress released Default Gutenberg Block Editor in WordPress 5.0 version.
Some people use the Classic Editor plugin to get back the previous editor. If you are one of them, then deactivate it. If you don't want to disable it, then navigate to settings then writing. Now select "Block Editor" as Default editor for all users and select "yes" for Allow users to switch editors option.
Now you are ready to work with Gutenberg Block Editor.
There are a few options which are necessary to work with Gutenberg Block Editor. In this lecture, I have shown you how to work with most of all the required options.
Paragraph and Image are necessary to create any page — this lecture based on how to create and style paragraph and image block.
Heading and Gallery are Gutenberg Common Block. Heading helps you to create a different type of title and with Gallery you able to showcase multiple images for your audience.
There is two type of list - ordered list and unordered list. You can add your product or service features with this list block. To arrange Quote in your webpage, add a Quote block.
It's necessary to place audio in blog post or pages sometimes. The audio block will help you to upload the custom audio file in your website. Also, you can link an audio file from an external website too. Perhaps, the cover will help you to arrange Text and Background image.
If you need to host any video in your pages, then add a video block. You can upload videos or use media library too. Files block allow you to upload any files which will be downloaded directly to your visitor's computer.
Gutenberg Block has classic editor too. You don't need to use any third party plugin to do this. In this lecture, I have explained how to use Classic editor and Table.
If you need to preview code to your audience, then try Code block. The Custom HTML block will help you to write raw HTML code in any page or post.
I have shown the perfect way to use Preformatted, Pullquote and verse in this lecture and also explained when and why you should use these blocks.
Columns and Buttons are the essential blocks to arrange a perfect landing page. Without Button, you can't generate leads. The column will help you to divide your page and organize the content layout.
Media and Text block help you to place inline image and text. In this lecture I have showed how to work with Page Break, Separator, Spacer and More blocks too.
Widget's are the most important section for any WordPress Website. You can place sort-codes, recent post, recent comments, etc with this section.
There are 33 Websites listed in this embed section. All you have to just select your desired website and add the paste URL of what you like to embeds. If you don't see your desired website block listed in the section then use "Embeds" custom block and paste the URL.
I have discussed how to find different Gutenberg Blocks Plugin and install them properly in your WordPress Website. For example, I have used Easy Blocks Gutenberg Block Editor plugin in this lecture. You can search for different Block plugin from Google too.
If you like to enjoy 100% Gutenberg Editor then you should use a Gutenberg Compatible WordPress Theme. In this lecture I am using Osaka WordPress Theme. Which is developed for Gutenberg Block editor. Also it has some custom Gutenberg Block to design your page and post.
Gutenberg Block editor is the default Editor for WordPress 5.0+ version. It comes with a lot of default block style. There is a lot of users who prefer classic editor for the blog post. That's why Gutenberg included "Classic" block too.
By default, it has Common Blocks, Formatting Blocks, Layout Elements, Widgets, and Embeds. In this "Mastering Gutenberg Block Editor" course, I will explain the configuration and use of each block.
Course Section: I have divided the course into multiple sections. It will help you to watch and practice the exact lesson.
Introduction and configuration: Check the Gutenberg Block editor Configuration and use of Options + shortcuts.
Common Blocks: There is a total of 10 common blocks. I have explained two blocks within a video and made five videos for this section. After finishing the Common Blocks section, you able to arrange a simple Page and Blog post with Gutenberg Editor.
Formatting Blocks: There are 7 Gutenberg Blocks in Formatting Section. The blocks are Classic, Preformatted, Table, Verse, Code, Custom HTML, Pullquote. If you like to arrange your blog post with Classic editor, then add a Classic block, and you are done. The formatting blocks help you to make a great landing page or post for your website. It allows you to arrange your pages with custom HTML too.
Layout Elements: 7 Layout element blocks will enhance your page structure. There are Columns, Buttons, Page Break, Media and Text, and some others. You can create a column and button for the call to action from this section. If you need to showcase image and text in the same row, then use Media and Text block.
Widgets: It's easy to insert any widget within a page or post now. By default, there are Latest Comments, Shortcode, Archives, Categories, and Latest Post widget here.
Embeds: One of the most important section for those who like to add Media (image or Video) from any social media or Video sharing Website. There is 33 website listed from where you can easily insert content. Also, you will see an Embed block too; this will allow you to place any custom embeds code here.
Gutenberg Plugin: There is a lot of Gutenberg Block Editor plugin. These third-party plugins developed huge custom Gutenberg Block to create something more with Gutenberg Editor. If you search Google for "Free Gutenberg Blocks Plugin" then you will get a lot of them. I am going to use one of free Plugin and will show you how to work with it.
Gutenberg Theme: It's necessary to install a Gutenberg Ready Theme, if you are planning to design your full Website with Gutenberg Editor. I have used Osaka Gutenberg Ready Theme in this lecture. It has some custom Gutenberg block which seems suitable for me to design any type of website. I recommend you to search for some Gutenberg Ready Theme in Google to get more example.