Gutenberg Blocks for WordPress and React Developers
4.6 (139 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
998 students enrolled

Gutenberg Blocks for WordPress and React Developers

Use Your ReactJS and Redux Knowledge to Create Complex Gutenberg Blocks and Plugins from scratch.
4.6 (139 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
998 students enrolled
Created by Ali Alaa
Last updated 5/2020
Current price: $90.99 Original price: $129.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • 5 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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 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.
Course content
Expand all 120 lectures 11:15:12
+ An Introduction to the Block Editor
9 lectures 44:46
Course Source Code

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.

Preview 05:34

In this lecture we will explore the structure of the new block editor page. We will see what every area in the editor is called and its usage.

The Editor Interface

In this lecture we will take a look at the structure of the block. We will explore the UI elements of the block and what should they do.

The Block Interface

In this lecture we will talk about some best practices and guidelines that you should follow when designing your blocks.

Block Design - Best Practices & Guidelines

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.

Preview 05:14

In this lecture we will discover how the visual editor is reconstructed by parsing the post HTML content.

How the Visual Editor is Reconstructed From Plain HTML

In this lecture we will briefly take a look on how redux is used to store centralized data in gutenberg.

A Brief Introduction to Redux in Gutenberg

In this lecture we will revisit the diagram that explains how do we reconstruct the visual editor from the HTML. But know we can inspect the post state array using redux.

The Post State Array in Action
+ Using Webpack to Process JavaScript & SASS Files
11 lectures 01:03:47

In this lecture we will code a very simple react component without any JSX.

Preview 06:27

Before using webpack, let's initialize npm in order to install our dependencies.

Preparing Our Files for Webpack & NPM

Let's now see how can use webpack to produce a JS bundle. We will also see how can we instruct Webpack to minify our bundle for production.

Using Webpack to Bundle Our JS Files

In this lecture we will install babel-loader. A loader in Webpack is what is used in order to do a transformation to bundled files. Babel is a library used to transpile new ES versions into ES5.

Using Webpack Loaders to Transpile ES6 into ES5

Now that we transpile ES6 features to ES5, we still have to also transpile JSX. Let's do that in this lecture.

Transpiling JSX with Webpack

In this lecture we will see the benifit of the 'development' option in @babel/react-preset

React Babel Preset Development Mode

In this lecture we will take a look at different sourcemaps that you can use in Webpack.

Exploring Source-mapping Options in Webpack

We will now use webpack loaders in order to compile SASS files into CSS and load them into our website.

Compiling & Loading SASS Files with Webpack

Before moving our CSS into a separate file. Let's add autoprefixing to our CSS using the postcss loader.

Adding Autoprefixer to Our CSS

In this lecture we will explore webpack plugins and use a plugin in order to generate a separate CSS bundle.

Moving the CSS Bundle into a Separate File Using Webpack Plugins

Our final step is to minify the CSS file that we generated.

Minifying the CSS Bundle with Webpack
+ Creating Our First Block
16 lectures 01:41:38

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.

Preview 06:42

In addition to registering a block in the client (JS). We also have to register the block on the server (PHP). This will allow us to specify the styles and scripts that we need to enqueue with the block.

Block Server Side Registration

In this lecture we will see how to use react properly for gutenberg blocks.

Using React Properly in Gutenberg Blocks

In this lecture we will just take a look at a couple of options that we can add to our block registration. These options will allow us to customize the block's icon and the filtering keywords.

Changing the Block Icons and Filtering Keywords

Now that we know how to register a block. And we also know how to use Webpack. Let's use both togather!

Applying Webpack to our WordPress Plugin

In the previous lecture we created a bundle that will host all the JS code for blocks' registration. Let's enqueue this bundle in this lecture.

Enqueuing Our New Bundle & Refactoring PHP Registration

After using webpack in our plugin. In this lecture we will finally register a block using JSX and ES6.

Preview 05:34

Let's make use of the class that WordPress generates for our block in order to add some styling.

Styling Our Block in the Editor Page

To be able to add styles and scripts that will be enqueued in the editor page and also in the frontend, we need to create another webpack bundle. In this lecture we will discuss how that could be done.

Creating a New Webpack Bundle for Editor+Frontend Styles & Scripts

In this lecture we will explore a feature in WordPress called 'externals'. This will allow us to use bundles from the node_modules folder during development which we don't want to include in our bundle.

Understanding & Using the Webpack Externals Feature

In this lecture we will use gulp in order to generate a production ZIP file for our plugin. This zip file will only contain the necessary files needed for the plugin to run on WordPress.

Adding Gulp to the Workflow to Produce a Zipped version of the plugin

In this lecture we will integrate the famous ESLint library in our project. By doing this we will have a much better way to detect JS errors.

[Optional] Integrating ESLint in Our Project

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.

Preview 04:06

In this lecture we will install prettier and take a look on how it works.

[Optional] Adding Prettier to Our Project

Instead of getting ESLint errors for syntax errors that prettier will fix anyway. Let's figure out a way to disable these errors.

[Optional] Disabling ESLint Rules that Prettier Will Fix

In this lecture we will use husky in order to hook into git and run prettier before committing any files.

[Optional] Running Prettier Before Committing to Repository Using Husky Hooks
+ Adding Theme Support for Gutenberg Features
4 lectures 16:04

In this lecture we will see how to support align-wide and align-full in your theme.

Adding align-wide & align-full support

In gutenberg, we have a colour palette for blocks that have colour options. Let's see how to customize this palette.

Creating a Custom Colour Palette

iframes are usually not responsive by default. In this lecture we will enable a feature that will make gutenberg's embedded content responsive.

Making Gutenberg's Embedded Content Responsive

You will probably have to add some styles to the editor page in order to make it look like the front-end as much as possible. In this lecture we will have a quick look on how to add styles for the editor page properly.

Adding Editor Styles to Resemble Front-end
+ Exploring Block Features by Creating A Simple Block
21 lectures 01:57:48

In this lecture we will see what are the wp.editor and wp.components provided by WordPress. And also we will do some adjustments to our eslint config.

The "wp.editor" & "wp.components" Modules

Let's now use the RichText Component in order to make the text in out block editable.

Using the RichText Component in the Editor

Now that we are able to manipulate our content attribute using the RichText component in the editor. Ler's see how to display the result in the front-end.

Using the RichText Component in the save() Function

Let's see how to instruct WordPress to parse our attributes from the HTML instead of adding them in the block delimiter object.

Avoiding Saving Attributes in Block Delimiters and Parsing them from the HTML

In this lecture we will talk a comprehensive look at the BlockControls component. This component is used to add icons in your block toolbar.

An Overview of the BlockControls Component

In this lecture we will add alignment options to our block. But instead of adding a toolbar with three buttons ourselves, we will use a ready to use component provided by WordPress.

Using the AlignmentToolbar Component

Let's now see how to add options in the block's sidebar using the InspectorControls component.

An Overview of the InspectorControls Component

In this lecture we will use a new component that will help us manipulate the background and text colours for our block.

Using the PanelColorSettings Component

Let's see how to add multiple styles to our component in gutenberg.

Adding Multiple Styles to our Block

Let's see how to create our own gutenberg blocks category and add our block in it.

Adding a Custom Category to the Block Library

Let's see why would we need to move our edit component into a new file and start our first steps to do it.

Moving the Edit Component into a Separate File

Now that we created a dummy class component. Let's move our edit component into it.

Porting the Edit Function from a Functional to a Class Component

Let's explore one of the HOCs that WordPress provides which is withColors. This HOC will allow us to make use of the CSS styles that we wrote in our theme to style our colour palette colours.

Introducing the withColors Higher Order Component

Now that we know what withColors is, let's now try to use it in our editor.

Using withColors HOC in the Editor

Now that we can edit our colours in the editor. Let's now modify our save function in order to adapt to these latest changes.

Using withColors HOC in the Front-end

Let's use the knowledge that we gained so far in order to add a new option in out block. This option will toggle a shadow in our text box.

Adding a Toggle Shadow Option in the Block Toolbar

Let's add a new option but this time it will be in the settings sidebar. This option will control the opacity for the shadow that we added in the previous lecture.

Adding a Shadow Opacity Option Using RangeControl

As you noticed, every-time we update our block, we get some validation errors and we won't be able to edit our block anymore. Let's solve this problem by adding deprecations to our block definition.

Adding Deprecated Versions to your Block to Avoid Validation Errors

For attributes that are not extracted from the HTML, we need to provide a way in order to tell gutenberg how to update the old attributes.

Migrating Old Attributes in Deprecations

Let's see how to add transformations to our block. This way we will be able to transform our block type into other types or vice versa.

Transforming Other Block Types into Our Block

Now that we know how to transform block types into our block type. Let's now do the opposite of this operation.

Preview 02:34
+ Let's Create a Complex Nested Block!
31 lectures 02:47:59
Block Overview

Let's start by just creating the necessary files and defining our block and its attributes.

Setting Up Our Block

Let's start creating our edit function. We will start simple by implementing the editing of the title and the bio.

Implementing the Edit Function for Editing the Title & the Bio

Let's finalize the title and the bio part by adding the save function.

Adding the Save Function for the Team Member Block

In order to create nested blocks, we will make use of powerful component provided by gutenberg. So Let's explore the InnerBlocks component in this lecture.

Creating the Team Members Block Using InnerBlocks

Let's add an attribute for our parent component in order to control the number of columns in our grid.

Adding a Columns Attribute for the Parent Team Members Block
Styling the Columns in the Front-end
Quick Note!
Quick Note!
Styling the Columns in the Editor Page
Removing Unneeded Block Features
Introducing the MediaPlaceholder Component
Handling the Image Upload & Media Library Buttons
Handling Inserting an Image from a URL
Handling Image Upload Errors
Displaying a Responsive Image in the Front-end
Handling Blocks with Unfinished Image Uploads
Adding Edit Image & Remove Image Buttons and Functionality
Adding a Textarea in the Sidebar to Edit the Alt Text for the Image
Adding the Option to Change the Image Size
Populating the Image Sizes Dropdown from Redux Stores
Enabling "Align Wide" & "Align Full" in Our Team Members Block
Adding an Array Type Attribute for the Social Links and Icons
Adding a Selected Icon State Using React's Component State
Implementing the Save Function for the Team Member
Avoiding Saving the Social Array Attribute in the Block Delimiter
Adding the Markup for the Edit Social Link Form
Removing Items from the Social Attribute
Making the Social Icons Sortable Using react-sortable-hoc
Transforming Galleries and Images into Team Members
+ Dynamic Blocks
7 lectures 40:13
Adding Attributes in a Dynamic Block
Fetching the Latest Posts Dynamically in the Render Callback Function
Fetching the Latest Posts in the JS Side using Redux
Mimicking the PHP Posts Loop Using JS in the Edit Function
Adding a Sidebar Option for the Number of Posts
Filtering the Latest Posts by Categories
+ Redux in Gutenberg
12 lectures 01:12:56
Accessing redux data & dispatching actions to redux the WRONG Way!
Using withSelect & widthDispatch together using "wp.compose"
Let's Create a Redux Store and Use it in Multiple Components!
Setting Up Our Block and Redux Store Files
Important Note for Watching the Rest of this Section
Registering our Own Redux Store
Populating Our Redux Store using an External API
Improving our Resolver using Controls and Generator Functions
Displaying our To Dos from the Redux Store in the To Do List Component
Adding a new Control to Toggle the To Do Item
Updating the To Do Items After Getting a Response from the API
+ Managing Metadata, Adding Templates & Sidebar Plugins
7 lectures 47:30
How to Get and Set Metadata using Redux Selectors and Actions
Updating Metadata Using a Block
Using Templates to Pre-define blocks in the Editor Page
Registering a Gutenberg Plugin to Add a Sidebar
Using Our Plugin to Modify the Existing Gutenberg Sidebar
Managing Metadata in the New Sidebar
+ Conclusion & Next Steps
2 lectures 02:29
Conclusion & Next Steps
Bonus Lecture
  • You should be familiar with HTML, CSS (SASS), Javascript and PHP basics.
  • You should be familiar with WordPress development.
  • You should be familiar with JavaScript, ReactJS & Redux.
  • 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.

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.