Table of Contents
Best Gutenberg Courses 2021
Gutenberg Blocks for WordPress and React Developers
Recently, WordPress decided to change its old WYSIWYG editor to a new ReactJS based editor called “Gutenberg”. WordPress Gutenberg, also known as the block editor, is block-based. Your message will therefore consist of a few blocks and each block will have a purpose. You can have a block that displays a button or an image or text and so on. In this course, you will learn everything you need to know to create custom blocks for Gutenberg editor. We will start with a simple block and then we will create more complex blocks.
In order to get the most out of this Gutenberg tutorial, you should have some knowledge of WordPress theme / plugin development. JavaScript knowledge is required for this course. You should be familiar with basic JavaScript concepts and preferably with recent versions of ES6 +. Knowledge of ReactJS is also required for this course. So concepts like component condition, lifecycle method, and basic reaction concepts don’t have to be new to you. Advanced concepts such as knowledge of higher order components would also be ideal, but these will be briefly covered in the course. Knowledge of Redux is also ideal. Not all blocks will require the use of redux, but in some blocks we will be using redux a lot. So it would be ideal if you are familiar with redux concepts such as stores, stocks, reducers etc.
The course content will be as follows:
First and foremost, before any coding, we’ll discuss some design guidelines that you should follow when designing a block.
We’ll take a look at how your Gutenberg post is saved to your database and what goes behind the scenes in order to build your ReactJS-based user interface from the content saved to the database.
In section 2 we will have a webpack tutorial. This section will not cover any of the WordPress elements. It will be purely Webpack. webpack is the tool we’ll use to transpile and bundle JavaScript and CSS files.
In section 3, we will create a WordPress plugin. In this plugin, we will save the first Gutenberg block. We will also use the knowledge of the webpack in order to process JS and CSS files in this plugin.
In section 3 we will also have bonus content. In this content, we are going to learn how to integrate ESLint, prettier and rougher for an improved workflow.
In section 4, we are going to take a look at some things you can do in your WordPress theme that will allow you to change / add certain features in the Gutenberg editor.
In section 5, we’ll create a simple block. However, in this simple block we will learn a lot about what we can do in a block.
In Section 6, we’ll use our knowledge to create a more complex block with advanced functionality. These features include how to add blocks inside other blocks, how to manage images and many more.
Section 7 will focus on creating dynamic blocks. The blocks can therefore be static or in other words generate only static HTML. But they can also be dynamic, for example they can retrieve something from the database.
Section 8 will learn more about redux in Gutenberg. We will see how to use the existing redux stores and also create our own store.
Finally, in section 9, we will see different ways that we can follow to manage metadata in Gutenberg. We will manage the metadata using a block. And we will also learn how to create a custom sidebar plugin and manage the metadata in that sidebar.
How to Use the WordPress Gutenberg Editor
WordPress 5.0 introduced the new block editor called Gutenberg, but its use is not always intuitive. Maybe you’ve tried using it but didn’t quite understand it, or you’re not sure how all the blocks and settings work. In this course, you will learn how to use all the blocks currently available when you install WordPress. You’ll start by visiting the general interface of an article, then familiarize yourself with the standard interface for each Gutenberg block. Then you will see how each block works in detail.
If you can’t find a way to do what you want using the blocks that come with WordPress, you’ll learn how you can add even more blocks to your editing toolkit. You will also learn how to reuse blocks, and if you really like a block that you created and want to use it on more than one website, you will also learn how to do it. It doesn’t matter if you are a seasoned WordPress user or are new to WordPress, sometimes you just want someone to show you how to do something so you don’t have to spend hours researching it yourself. -even. After taking this course, you will be comfortable with the WordPress Gutenberg editor and be on your way to structuring your content exactly the way you want it.
Learn WordPress Gutenberg
You probably know that most websites now use the WordPress platform to run and manage their websites. Recently, WordPress made a major overhaul of its editor. It went from the classic editor to what they called the Gutenberg editor. This specific training has been designed to help you understand how to use the WordPress Gutenberg editor in more depth, even if you are a beginner.
You will find the editing experience much more enjoyable and productive.
Topics covered:
Introduction to Gutenberg
Quick user interface overview
Understanding the types of blocks
Using the sidebar
Common blocks
Formatting blocks
Layout elements
Not ready for Gutenberg?
More editor options