Gutenberg Blocks for WordPress and React Developers [2022]

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

4.79 (547 reviews)
Udemy
platform
English
language
Web Development
category
instructor
3,565
students
16.5 hours
content
Jan 2022
last update
$99.99
regular price

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.

Learn how to create your own data stores stores in order to share data between blocks.

Learn different ways to manage meta fields in the block editor.

Learn how to create a custom sidebar in the block editor and manage your meta fields inside of it.

Learn how to extend the existing block editor's sidebar.

Learn about features like patterns, context, formatting API and templates.

Modify existing block's behavior with JavaScript & PHP filters.

Internationalize blocks by generating and loading translation files.

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.


Screenshots

Gutenberg Blocks for WordPress and React Developers [2022] - Screenshot_01Gutenberg Blocks for WordPress and React Developers [2022] - Screenshot_02Gutenberg Blocks for WordPress and React Developers [2022] - Screenshot_03Gutenberg Blocks for WordPress and React Developers [2022] - Screenshot_04

Content

An Introduction to the Block Editor

Course Source Code
Installing a Theme & Cloning the Gutenberg Repository
The Editor Interface
The Block Interface
Block Design - Best Practices & Guidelines
How Our Gutenberg Post is Saved in the Database
How the Visual Editor is Reconstructed From Plain HTML
A Brief Introduction to Redux in Gutenberg
The Post State Array in Action

Using Webpack to Process JavaScript & SASS Files

Writing a React Component Without JSX
Preparing Our Files for Webpack & NPM
Using Webpack to Bundle Our JS Files
Using Webpack Loaders to Transpile ES6 into ES5
Transpiling JSX with Webpack
React Babel Preset Development Mode
Exploring Source-mapping Options in Webpack
Compiling & Loading SASS Files with Webpack
Adding Autoprefixer to Our CSS
Moving the CSS Bundle into a Separate File Using Webpack Plugins
Minifying the CSS Bundle with Webpack

Creating Our First Block

Creating a Plugin & Registering a Block with ES5
Block Server Side Registration
Using React Properly in Gutenberg Blocks
Changing the Block Icons and Filtering Keywords
Applying Webpack to our WordPress Plugin
Enqueuing Our New Bundle & Refactoring PHP Registration
Registering a Block With ES6 & JSX
Styling Our Block in the Editor Page
Creating a New Webpack Bundle for Editor+Frontend Styles & Scripts
Understanding & Using the Webpack Externals Feature
Adding Gulp to the Workflow to Produce a Zipped version of the plugin
[Optional] Integrating ESLint in Our Project
[Optional] Running ESLint Before Creating a production Bundle
[Optional] Adding Prettier to Our Project
[Optional] Disabling ESLint Rules that Prettier Will Fix
[Optional] Running Prettier Before Committing to Repository Using Husky Hooks

Adding Theme Support for Gutenberg Features

Adding align-wide & align-full support
Creating a Custom Colour Palette
Making Gutenberg's Embedded Content Responsive
Adding Editor Styles to Resemble Front-end

Exploring Block Features by Creating A Simple Block

The "wp.editor" & "wp.components" Modules
Using the RichText Component in the Editor
Using the RichText Component in the save() Function
Avoiding Saving Attributes in Block Delimiters and Parsing them from the HTML
An Overview of the BlockControls Component
Using the AlignmentToolbar Component
An Overview of the InspectorControls Component
Using the PanelColorSettings Component
Adding Multiple Styles to our Block
Adding a Custom Category to the Block Library
Moving the Edit Component into a Separate File
Porting the Edit Function from a Functional to a Class Component
Introducing the withColors Higher Order Component
Using withColors HOC in the Editor
Using withColors HOC in the Front-end
Adding a Toggle Shadow Option in the Block Toolbar
Adding a Shadow Opacity Option Using RangeControl
Adding Deprecated Versions to your Block to Avoid Validation Errors
Migrating Old Attributes in Deprecations
Transforming Other Block Types into Our Block
Transforming Our Block Type into Other Block Types

Let's Create a Complex Nested Block!

Block Overview
Setting Up Our Block
Implementing the Edit Function for Editing the Title & the Bio
Adding the Save Function for the Team Member Block
Creating the Team Members Block Using InnerBlocks
Adding a Columns Attribute for the Parent Team Members Block
Styling the Columns in the Front-end
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
Populating the Form and Updating the Social Attribute
Removing Items from the Social Attribute
Making the Social Icons Sortable Using react-sortable-hoc
Transforming Galleries and Images into Team Members

Dynamic Blocks

Setting Up Our Dynamic Block
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

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
Creating a Second Block that Shares the Same Redux Data

Managing Metadata, Adding Templates & Sidebar Plugins

How is Metadata Managed by Default in Gutenberg?
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

Conclusion & Next Steps
Bonus Lecture

Reviews

Tomas
May 26, 2022
Incredible course! While Gutenberg has been around for quote some time, its still very to find decent documentation that is this thorough and explains things in such detail. This is the course I've been looking for to break away from using ACF as a way to build blocks since Gutenberg first was released.
Uriel
May 18, 2022
It´s a really good course, I have been development with wordpress like 5 years, but for real I haven't seem a course as complete as this one, best investment for life
Mosanna
May 12, 2022
It could be better if the instructor have taken some halt to introduce new concept before implementing it. He is just firing it out.
Miia
April 19, 2022
Love how throughout the course is. It's nice how the course isn't just another code along, but a comprehensive deep dive into why and hows of block development. Thank you. :) <3
Marie
March 14, 2022
The most thorough gutenberg course on Udemy. This new version is up-to-date and avoid all the installation problems which made the previous one a chore ! Ali has really a gift for teaching.
Kenneth
January 6, 2022
many tutorials I have gone thru gloss over how webpack is setup. Ali uses the same methodical approach thru each lesson to keep explanations simple, each building on the last.
Miguel
January 6, 2022
An amazing course. I learned all that I have to know to build nice Gutenberg blocks to my WordPress Premium themes and also some useful React libraries and utilities.
Emir
December 29, 2021
I give you 5 stars for good lecturing to keep you motivated, but the content is old, it must be recreated soon. There was a lot of changes in Gutenberg lately.
James
December 11, 2021
I was going to wait until the end of this course to rate it but already it has exceeded my expectations. An excellent course!
John
December 1, 2021
Very complete course and really easy to understand to a non-English person. We learn the bases and get smarter step by step.
Yossef
October 14, 2021
Great course and even better - fantastic support by the course creator. i was stuck with several problem on my local Env preventing me from working with the course code. Ali gave be super quick answers and even scheduled a remote-control session helping me solving all issues. I really recommend this course and every course created by Ali.
Craig
September 6, 2021
Superb course with great information. Very in depth. Probably best resource for Gutenberg Blocks anywhere. Thank you!
Thomas
July 2, 2021
Very thorough. A perfect course for any WordPress developer wanting to get started building Gutenberg blocks.
Davinderpal
May 17, 2021
The course teaches the basics relatively well but the beginning module has too much theory and when the practical sections start the code/config is a bit dated, some of the webpack configurations that are shown in the course give errors as they relay on older packages. I would give this course a better rating if the instructor would update the webpack videos.
Janwillem
May 6, 2021
Outdated, takes to long to get to the building a block `npx @wordpress/create-block starter-block` does pretty much chapter 1-4 in one command.

Charts

Price

Gutenberg Blocks for WordPress and React Developers [2022] - Price chart

Rating

Gutenberg Blocks for WordPress and React Developers [2022] - Ratings chart

Enrollment distribution

Gutenberg Blocks for WordPress and React Developers [2022] - Distribution chart

Coupons

DateDiscountStatus
6/21/201992% OFF
expired
2183316
udemy ID
1/29/2019
course created date
6/4/2019
course indexed date
Bot
course submited by