Gutenberg Blocks for WordPress and React Developers (Udemy.com)
Use Your ReactJS and Redux Knowledge to Create Complex Gutenberg Blocks and Plugins from scratch.
Created by: Ali Alaa
Last updated September 2025
What you will learn
- Learn about the block editor design guidelines.
- Discover how the block editor saves your post in the database and how the editor UI is constructed.
- Learn how to use wp-scripts to transpile ES6 and JSX, compile SASS to CSS, bundle and minify your JS and CSS files and more.
- Integrate ESLint, Prettier, Stylelint and Husky in your project to improve your workflow.
- Create a new custom Gutenberg block from scratch.
- Customize the block editor 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 the existing data stores in your blocks.
How it compares
Against the other 26 rated Udemy courses in Redux on CourseDuck:
- Rating4.5 out of 5higher than 73% of them
- Reviews948#8 of 27 by number of reviews
- Length16.3 hourslonger than 65% of them
- Last updatedSeptember 2025more recently than 80% of them
Course Description
Recently WordPress decided to change their old WYSIWYG editor into a new ReactJS based block editor known as '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 the block editor. We will start by a simple block and then we will create some more complex blocks.
In order to gain the most out of this course you need to have WordPress theme/plugin development knowledge. Javascript knowledge is required for this course. You should be familiar with basic JavaScript concepts and preferably the recent ES6+ versions. ReactJS knowledge is also required for this course. So concepts like component state, hooks and basic react concepts should not be new to you. Also advanced concepts like higher order component knowledge would be ideal however it will be discussed briefly in the course. Redux knowledge is also ideal. Not all blocks will require using redux, however in some blocks we will use redux heavily. So it would be ideal if you are familiar with redux concepts like stores, actions, reducers and so on.
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 2, we will create a WordPress plugin. Inside this plugin we will register out first Gutenberg block. We will also use a tool provided by WordPress called wp-scripts in order to process JS and CSS files in this plugin. We will also integrate tools like ESLint, Prettier, Stylelint and Husky for an improved development workflow.
In section 3, 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 block editor.
In section 4 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 5 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 6 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 7 will discover more about the redux-like data stores in the block editor. We will see how to use the existing data stores and also create our own store.
Section 8 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.
In the final section we are going to discuss various topics like: context, patterns, templates, formatting API, filters and internationalization.
Instructor Details
- 4.5 Rating
948 Reviews
Ali Alaa
Hey there! I am Ali Alaa. Years ago I discovered my interest in web development, especially the front-end side. I started exploring the field from HTML/CSS/JS to WordPress theming and JS frameworks. I have been working as a web developer for more than 10 years. After all these years, I decided to start creating on udemy and share my knowledge with you.
More courses by Ali Alaa
The Complete GitHub Actions & Workflows Guide (2025)
4.6 (4,087 Reviews)
Provider: Udemy
Time: 14.9h
$10.99
The Complete Guide to Building Premium WordPress Themes (2021)
4.4 (766 Reviews)
Provider: Udemy
Time: 17.8h
$79.99
React Native: Create an Unbeatable & Multiplayer Tic-Tac-Toe (2022)
4.6 (117 Reviews)
Provider: Udemy
Time: 23.1h
$69.99
More Redux courses
Build Enterprise Applications with Angular 2 (and Angular 4) (2018)
4.8 (1,569 Reviews)
Provider: Udemy
Time: 9.7h
$11.99
React - The Complete Guide (incl. Next.js, Redux) (2026)
4.6 (242,065 Reviews)
Provider: Udemy
Time: 71.4h
$199.99
Full Stack Project: Spring Boot, React, Redux (2025)
4.5 (1,806 Reviews)
Provider: Udemy
Time: 24.9h
$10.99
Redux with React JS: Learn Redux with Modern React JS (2026)
4.5 (786 Reviews)
Provider: Udemy
Time: 10.6h
$69.99
Reviews
By Gustavo Hilario on 4/14/2024
It was a great course that covered several aspects of block creation on WordPress and delved deeply into React for WordPress. The only feedback I have is that I think the explanations and information could have been a bit more detailed. Much of the content is replicable with what's already available on the WordPress documentation pages, but it's still incredibly useful to have a teacher guide us through the process.
By Crave ACraft on 11/23/2023
Hard to listen, need to read a caption. I think the tutorial should be updated. The sample plugin is not real-world situation and too simple to get things and apply to my own plugin. If he could update the tutorial, I would revise my review.
By Larissa S on 11/13/2022
My Brain after This Course -> TBH: I'm still a beginner, but with visions and ideas just waiting to be implemented. I'm sure I'll have to do some more reading and tutorials to understand even more what's going on. But: I feel brave and motivated enough to start my projects and create a structured plan how to make things happen. This course is a must-have.
By Gary Porter on 9/10/2022
Probably one of the most comprehensive course on Gutenberg block creation, I have looked everywhere and this course will answer all the questions you may have and also gives you a great base to be able to create any type of block in the future. While things have changed in the latest world of wordpress this course is still relevant and with a little googling you will have no trouble with the new features
By Jason McWhorter on 10/30/2020
I really am enjoying the detail at which each item mentioned is covered. Most of what I've seen has been review from my prior experience coming in. However, the instructor could have easily rushed through concepts and the rational behind decisions, but he didn't. He even goes as far as showing you the least optimal way to do things, followed up with reasons to not do it that way and provides a industry standard approach to handle the task. Love it
By Branko Todorovic on 10/14/2020
Probably the best course on Gutenberg blocks there is (and I saw a few of those). This course, together with block-editor handbook on Wordpress.org is enough to get you started creating your own customized blocks. The only flaws I can mention are that it is slightly dated (not using React hooks) and the custom blocks examples could have been more complex. Nevertheless, as I sad great course!
By Colin R on 8/16/2020
This is a fantastic course. A little background experience in WordPress and NPM is advised. Ali explains everything very carefully and accurately. The course is structured extremely effectively, from the basics to more advanced features covering Gutenberg Block development. I feel it has given me a great deal of knowledge of how to develop gutenberg confidently and effectively. Thanks Ali.
By Przemek M. on 6/28/2020
I enjoyed this course. Everything what was presented was well explained and clear. The subject matter was somewhat selective and at different levels of difficulty (I prefer A-Z-type courses, "from the beginner to pro"). But I definitely recommend this course - no doubt you'll be able to build your own WP editor blocks with modern workflow after it.
By John Samuel on 5/3/2020
Best course on Gutenberg Development. I hope you keep updating the course as Wordpress releases future updates. Suggestions: * In this course, we are creating the block as a plugin. However, it'd be great if you could show how to integrate the blocks with theme rather than add it as a plugin * A bonus section, as to how to configure webpack using wp-scripts and then extend the webpack config as per our requirement.
By Mark Dressel on 3/30/2020
Lots of detail, good to have a broad overview too. I had continual problems with the resolution of the videos, often being to low to read the code. The solution was to reload the page, though on some videos this required a number of reloads. This may be a problem with broadband speed but I don't have this problem when I watch videos on YouTube.
By Ali Çınaroğlu
Completely boring voice, slow motion data, its a real pain when complete first 5 lecture !
By Eric Wenger
This course needs to spend more time on getting your dev environment set up. It took me a long time to get npm start to work. He has built a lot into npm start, but it would probably be better to remove some of that and go a bit more step by step so people using various platforms that may or may not have certain dependencies don't just hit brick walls. Took a good bit of experimenting for me.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 90 / 100









