4.49 out of 5
4.49
329 reviews on Udemy

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
2,160 students enrolled
English
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.

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.

An Introduction to the Block Editor

1
Course Source Code
2
Installing a Theme & Cloning the Gutenberg Repository

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.

3
The Editor Interface

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.

4
The Block 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.

5
Block Design - Best Practices & Guidelines

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

6
How Our Gutenberg Post is Saved in the Database

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.

7
How the Visual Editor is Reconstructed From Plain HTML

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

8
A Brief Introduction to Redux in Gutenberg

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

9
The Post State Array in Action

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.

Using Webpack to Process JavaScript & SASS Files

1
Writing a React Component Without JSX

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

2
Preparing Our Files for Webpack & NPM

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

3
Using Webpack to Bundle Our JS Files

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.

4
Using Webpack Loaders to Transpile ES6 into ES5

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.

5
Transpiling JSX with Webpack

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

6
React Babel Preset Development Mode

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

7
Exploring Source-mapping Options in Webpack

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

8
Compiling & Loading SASS Files with Webpack

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

9
Adding Autoprefixer to Our CSS

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

10
Moving the CSS Bundle into a Separate File Using Webpack Plugins

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

11
Minifying the CSS Bundle with Webpack

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

Creating Our First Block

1
Creating a Plugin & Registering a Block with ES5

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.

2
Block Server Side Registration

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.

3
Using React Properly in Gutenberg Blocks

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

4
Changing the Block Icons and Filtering Keywords

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.

5
Applying Webpack to our WordPress Plugin

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

6
Enqueuing Our New Bundle & Refactoring PHP Registration

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.

7
Registering a Block With ES6 & JSX

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

8
Styling Our Block in the Editor Page

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

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

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.

10
Understanding & Using the Webpack Externals Feature

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.

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

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.

12
[Optional] Integrating ESLint in Our Project

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.

13
[Optional] Running ESLint Before Creating a production Bundle

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.

14
[Optional] Adding Prettier to Our Project

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

15
[Optional] Disabling ESLint Rules that Prettier Will Fix

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

16
[Optional] Running Prettier Before Committing to Repository Using Husky Hooks

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

Adding Theme Support for Gutenberg Features

1
Adding align-wide & align-full support

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

2
Creating a Custom Colour Palette

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

3
Making Gutenberg's Embedded Content Responsive

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

4
Adding Editor Styles to Resemble Front-end

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.

Exploring Block Features by Creating A Simple Block

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

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.

2
Using the RichText Component in the Editor

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

3
Using the RichText Component in the save() Function

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.

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

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

5
An Overview of the BlockControls Component

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

6
Using the AlignmentToolbar 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.

7
An Overview of the InspectorControls Component

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

8
Using the PanelColorSettings Component

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

9
Adding Multiple Styles to our Block

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

10
Adding a Custom Category to the Block Library

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

11
Moving the Edit Component into a Separate File

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

12
Porting the Edit Function from a Functional to a Class Component

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

13
Introducing the withColors Higher Order 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.

14
Using withColors HOC in the Editor

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

15
Using withColors HOC in the Front-end

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.

16
Adding a Toggle Shadow Option in the Block Toolbar

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.

17
Adding a Shadow Opacity Option Using RangeControl

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.

18
Adding Deprecated Versions to your Block to Avoid Validation Errors

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.

19
Migrating Old Attributes in Deprecations

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.

20
Transforming Other Block Types into Our Block

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.

21
Transforming Our Block Type into Other Block Types

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

Let's Create a Complex Nested Block!

1
Block Overview
2
Setting Up Our Block

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

3
Implementing the Edit Function for Editing the Title & the Bio

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

4
Adding the Save Function for the Team Member Block

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

5
Creating the Team Members Block Using InnerBlocks

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.

6
Adding a Columns Attribute for the Parent Team Members Block

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

7
Styling the Columns in the Front-end
8
Quick Note!
9
Quick Note!
10
Styling the Columns in the Editor Page
11
Removing Unneeded Block Features
12
Introducing the MediaPlaceholder Component
13
Handling the Image Upload & Media Library Buttons
14
Handling Inserting an Image from a URL
15
Handling Image Upload Errors
16
Displaying a Responsive Image in the Front-end
17
Handling Blocks with Unfinished Image Uploads
18
Adding Edit Image & Remove Image Buttons and Functionality
19
Adding a Textarea in the Sidebar to Edit the Alt Text for the Image
20
Adding the Option to Change the Image Size
21
Populating the Image Sizes Dropdown from Redux Stores
22
Enabling "Align Wide" & "Align Full" in Our Team Members Block
23
Adding an Array Type Attribute for the Social Links and Icons
24
Adding a Selected Icon State Using React's Component State
25
Implementing the Save Function for the Team Member
26
Avoiding Saving the Social Array Attribute in the Block Delimiter
27
Adding the Markup for the Edit Social Link Form
28
Populating the Form and Updating the Social Attribute
29
Removing Items from the Social Attribute
30
Making the Social Icons Sortable Using react-sortable-hoc
31
Transforming Galleries and Images into Team Members

Dynamic Blocks

1
Setting Up Our Dynamic Block
You can view and review the lecture materials indefinitely, like an on-demand channel.
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.5
4.5 out of 5
329 Ratings

Detailed Rating

Stars 5
202
Stars 4
88
Stars 3
24
Stars 2
7
Stars 1
8
30-Day Money-Back Guarantee

Includes

11 hours on-demand video
5 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Gutenberg Blocks for WordPress and React Developers
Price:
$138.98 $105

Community

For Professionals

For Businesses

We support Sales, Marketing, Account Management and CX professionals. Learn new skills. Share your expertise. Connect with experts. Get inspired.

Community

Partnership Opportunities

Layer 1
samcx.com
Logo
Register New Account
Compare items
  • Total (0)
Compare
0