Gutenberg Blocks for WordPress and React Developers
- 11 hours on-demand video
- 5 articles
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Learn about Gutenberg blocks design guidelines.
- Discover how Gutenberg saves your post in the database and how the editor UI is constructed.
- Learn how to use webpack to transpile ES6 and JSX, compile SASS to CSS, bundle and minify your JS and CSS files and more.
- Integrating ESLint, Prettier and husky in your project to improve your workflow.
- Create a new custom Gutenberg block from scratch.
- Customize Gutenberg features in your WordPress theme.
- Discover every aspect you need to know to create a complex Gutenberg block.
- Create a nested block (a block that accepts other blocks inside of it).
- Use third party react libraries to create complex features.
- Learn about handling deprecated blocks.
- Learn how to transform your custom block into another block.
- Create a dynamic block.
- Explore how to use existing redux stores in your blocks.
- Learn how to create your own redux stores in order to share data between blocks.
- Learn different ways to manage meta fields in the gutenberg editor.
- Learn how to create a custom sidebar in Gutenberg and manage your meta fields inside of it.
- Learn how to extend the existing Gutenberg sidebar.
In this lecture we will install and activate a theme that we will use through out the course. You can use your own theme if you like since most of the work will be in a plugin. Additionally we will download the gutenberg repository from github in order to use it as a reference later.
You might ask how our gutenberg post is saved in the database? do we save 2 representations for the post? one for the frontend and one for the editor? In this lecture we will answer this question.
In this lecture we will code a very simple react component without any JSX.
We will start by creating a WordPress plugin. In this plugin we will write some ES5 JS in order to register our first block. We will also learn about wp.i18n in this lecture.
After using webpack in our plugin. In this lecture we will finally register a block using JSX and ES6.
In this lecture we will integrate ESLint in our build command in order to check for JS errors before building. We will also explore a new way to get JS messages in the console.
Now that we know how to transform block types into our block type. Let's now do the opposite of this operation.
- You should be familiar with WordPress development.
- Any code editor you are comfortable with, I will use VS Code in this code.
- A local server like MAMP, WAMP, XAMPP, Laragon or any other software you are familiar with. I will use MAMP through out this course.
- NodeJS and NPM or Yarn installed on your machine.
Recently WordPress decided to change their old WYSIWYG editor into a new ReactJS based editor called 'Gutenberg'. Gutenberg also known as the block editor is based on blocks. So your post will be composed of some blocks and each block will have a purpose. You can have a block that displays a button or an image or some text and so on.
In this course you will learn everything you need to know in order to create custom blocks for Gutenberg. We will start by a simple block and then we will create some more complex blocks.
The course content will go as follows:
First and before any coding we will discuss some design guidelines that you should follow when designing a block.
We will take a look on how your Gutenberg post is saved in your database and what happens behind the scenes in order to construct your ReactJS based UI from the content saved in the database.
In Section 3, we will create a WordPress plugin. Inside this plugin we will register out first Gutenberg block. We will also use out webpack knowledge in order to process JS and CSS files in this plugin.
In section 3 we will also have some bonus content. In this content we will learn how to integrate ESLint, prettier and husky for an improved workflow.
In section 4, we will take a quick look on some stuff that you can do in your WordPress theme that will allow you to modify/add some features in the Gutenberg editor.
In section 5 we will 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 will use our knowledge to create a more complex block with some advanced features. These features include how to add blocks inside of other blocks, how to handle images and many more.
Section 7 will be about creating dynamic blocks. So blocks can be static or in other words only generate some static HTML. But also they can be dynamic for example they can fetch something from the database.
Section 8 will discover 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 in order to manage metadata in Gutenberg. We will manage metadata using a block. And we will also learn how to create a custom sidebar plugin and manage metadata in this sidebar.
- WordPress theme/plugin developers who are familiar with ReactJS and want to create Gutenberg blocks from scratch.
- Anybody with some WordPress and ReactJS experience who wants to know everything about the Gutenberg editor.