Gutenberg Blocks for WordPress and React Developers (Udemy.com)

Use Your ReactJS and Redux Knowledge to Create Complex Gutenberg Blocks and Plugins from scratch.

( 20 Reviews )

Created by: Ali Alaa

Produced in 2021

What you will learn

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

Quality Score

Content Quality

Video Quality

Qualified Instructor

Course Pace

Course Depth & Coverage

Overall Score : 92 / 100

Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a redux course? Or looking for more detail on Ali Alaa's Gutenberg Blocks for WordPress and React Developers? Feel free to chat below.

Join CourseDuck's Online Learning Discord Community

Course Description

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.
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, lifecycle method 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 have a webpack tutorial. This section will not deal with any of the WordPress stuff. It will be purely webpack. webpack is the tool that we will use in order to transpile and bundle out Javascript and CSS files.
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.

Who this course is for:

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.

Time: 11h

*Some courses are excluded from this sale. Coupon not working? If the link above doesn't drop prices, clear the cookies in your browser and then click this link here.
Also, you may need to apply the coupon code directly on the cart page to get the discount.

Coupon Code

Instructor Details

Ali Alaa

4.6 Rating
20 Reviews

Hey there! I am Ali Alaa, a front-end web developer. 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 front-end developer for about 7 years. After all these years, I decided to start creating on udemy and share my knowledge with you.

error finding courses_global jsonerror finding courses_global jsonerror finding courses_global json

Reviews

4.6

20 total reviews

5 star 4 star 3 star 2 star 1 star

Write a Review

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.

By Mohit Jindal

This course is great, I liked how Ali Alaa works, his workflow is very clear and refactoring oriented.

he Exactly provdied what you need to learn the new WordPress Block editor. Simple, straightforward and practical.

Best part for me was the Complex Nested Block! - major time-saver - and the Advanced Techniques and Tips so far.

Not only there were demo examples of how to build blocks in a development environment

but also how to make the architecture scalable and how to put everything in production mode. Great!

Thanks Sir For Creating This Course.

By Shijith K U

So far so good :) Very happy with his presentation style.

By Rarri Enzo

I think it's the best course about Gutenberg blocks.

Never regretted, the lecturer explains everything clear and simply. I advise everyone to this course!

By Sagar Deshmukh

Just Excellent

By Towfiq I.

Excellent Course! The instructor is very knowledgeable in Gutenberg development. This course blows every other Gutenberg course out of water. Thanks for the excellent course, you saved tons of times which otherwise I had to waste sifting through the core gutenberg files and other github repos.

By Aurelien Dallaserra

Loving this so far! With this understanding, I think Wordpress is making a come back into my life fast

By NUCSSA IT

Awesome Job! Most comprehensive material on Gutenberg ever?

By Aniel Feyt

Ali really explains all the important concepts well. This course gives a really good "bonus" by making use of Webpack and setting up a workflow.

By Deepak Mahendrakar

Course material is methodical, the tutor explanation is amazing!

By Leandro

This course has helped me to understand and develop gutenberg blocks. I think that is very complete and cover a lot of scenarios that we will find while developing blocks.

The teacher answer me quickly when i had a question.

And to finish I would like that the teacher put the code in a repo and link each tutorial with the specific commit. It would be sooo useful to avoid to lose time copy pasting.

In spite of the detail i mentioned above, this course is 5 starts without any doubt.