Have a question?
Message sent Close

Gutenberg Blocks for WordPress and React Developers

Use Your ReactJS and Redux Knowledge to Create Complex Gutenberg Blocks and Plugins from scratch.
Instructor
Ali Alaa
5,396 students enrolled
4.58
806 reviews
  • Description
  • Curriculum
  • FAQ
  • Reviews
5372

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.

Let's Create our First Block
Adding Theme Support for the Block Editor
Let's Create a Complex Nested Block!
Dynamic Blocks
Creating a Plugin Boilerplate for Block Editor Features
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.58
806 reviews
Stars 5
538
Stars 4
197
Stars 3
46
Stars 2
13
Stars 1
12
30-Day Money-Back Guarantee
Course details
Lectures 2
Quizzes 1
Video 16 hours
Certificate of Completion

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed
Gutenberg Blocks for WordPress and React Developers
4.58
806 reviews
Get course