Gutenberg Blocks for WordPress and React Developers

Gutenberg Blocks for WordPress and React Developers, available at $94.99, has an average rating of 4.22, with 236 lectures, based on 853 reviews, and has 5786 subscribers.

You will learn about 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. This course is ideal for individuals who are WordPress theme/plugin developers who are familiar with ReactJS and want to create Gutenberg blocks from scratch. or Anybody with some WordPress and ReactJS experience who wants to know everything about the Gutenberg editor. It is particularly useful for WordPress theme/plugin developers who are familiar with ReactJS and want to create Gutenberg blocks from scratch. or Anybody with some WordPress and ReactJS experience who wants to know everything about the Gutenberg editor.

Enroll now: Gutenberg Blocks for WordPress and React Developers

Summary

Title: Gutenberg Blocks for WordPress and React Developers

Price: $94.99

Average Rating: 4.22

Number of Lectures: 236

Number of Published Lectures: 114

Number of Curriculum Items: 236

Number of Published Curriculum Objects: 114

Original Price: $119.99

Quality Status: approved

Status: Live

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.

Who Should Attend

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.

Target Audiences

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.

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 editoris 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.

Course Curriculum

Chapter 1: An Introduction to the Block Editor

Lecture 1: Before Watching the Course

Lecture 2: Installing a Starter WordPress Theme

Lecture 3: The Block Editor Interface

Lecture 4: The Block Interface & Design Guidelines

Lecture 5: How is a Post in the Block Editor Saved in the Database

Lecture 6: How the Visual Editor is Reconstructed From Plain HTML

Lecture 7: A Brief Introduction to the Redux-like Data Stores in the Block Editor

Lecture 8: The Post State Array in Action

Chapter 2: Let's Create our First Block

Lecture 1: Creating a New WordPress Plugin

Lecture 2: Registering our First Block

Lecture 3: Returning React Components in the Edit & Save Functions

Lecture 4: Important Note

Lecture 5: Compiling ESNext to ES5 with wp-scripts

Lecture 6: Compiling & Loading SASS Files

Lecture 7: Generating a Block with @wordpress/create-block

Lecture 8: Configuring ESLint & Prettier for JavaScript Files

Lecture 9: Configuring Stylelint for Linting our SCSS Files

Lecture 10: Adding a Pre-commit Git Hook with Husky

Chapter 3: Adding Theme Support for the Block Editor

Lecture 1: Adding Custom Styles to the Block Editor

Lecture 2: Adding Support for Align Wide and Align Full

Lecture 3: Adding Custom Colour Pallets

Lecture 4: Adding Custom Font Sizes

Lecture 5: Custom Sizing & Custom Units

Chapter 4: Exploring Block Features by Creating a Simple Block

Lecture 1: Creating a New Clone from our Boilerplate Properly

Lecture 2: Editing the Boilerplate's Metadata

Lecture 3: Customizing the Block's Icon

Lecture 4: The RichText Component

Lecture 5: Adding Options in the Block Toolbar Using BlockControls

Lecture 6: The AlignmentToolbar Component

Lecture 7: Adding Options in the Sidebar Using InspectorControls

Lecture 8: Adding an Option to Change the Background and Text Colours

Lecture 9: Using the withColors Higher Order Component

Lecture 10: Changing the Background and Text Colours using Block Supports

Lecture 11: Adding an Option to Change the Block's Padding

Lecture 12: Adding an Option for toggling Box Shadow

Lecture 13: Adding Support for Different Style Options

Lecture 14: Examples & Variations

Lecture 15: Transforming Blocks into Other Blocks

Lecture 16: Adding Deprecated Versions for our Block

Lecture 17: Adding Deprecated Versions for our Block (Part. 2)

Chapter 5: Let's Create a Complex Nested Block!

Lecture 1: Block Overview

Lecture 2: Initializing a New Plugin for Our Block

Lecture 3: Editing the Boilerplate's Metadata

Lecture 4: Using InnerBlocks to Create a Nested Block

Lecture 5: Registering the Team Member Block

Lecture 6: Creating the edit and save functions for the name and bio

Lecture 7: Adding templates for our team members

Lecture 8: Adding an option for changing the number of columns

Lecture 9: Styling the Front-end of the Block

Lecture 10: Adding the Editor Styles for our Block

Lecture 11: Introducing the ImagePlaceholder Component

Lecture 12: Storing & Displaying the Team Member Image

Lecture 13: Handiling Inserting an Image from an External URL

Lecture 14: Displaying Image Related Errors

Lecture 15: Displaying the Image in the Save Function (Front-end)

Lecture 16: Blob URL Edge Case & Memory Optimization

Lecture 17: Replacing the Image with a Toolbar Option

Lecture 18: Removing the Image with a Toolbar Option

Lecture 19: Adding a Sidebar Option to Modify the Alt Text of the Image

Lecture 20: Adding an Option for Changing the Image Size

Lecture 21: Focusing on the Name Input After Selecting an Image

Lecture 22: Adding Alignment Options for the Team Members Block

Lecture 23: Adding & Displaying an Attribute for the Social Links

Lecture 24: Styling the Social Links for the Editor Page

Lecture 25: Selected Link State & Styling

Lecture 26: Adding New Items to the Social Links

Lecture 27: The Save Function Markup for the Social Links

Lecture 28: Extracting the Social Links Array from the HTML to Improve Efficiency

Lecture 29: Adding the Markup for the Edit Link Form

Lecture 30: Editing the Social Media Links & Icons

Lecture 31: Removing Social Links

Lecture 32: Making our Social Links Sortable (Part. 1)

Lecture 33: Making our Social Links Sortable (Part. 2)

Lecture 34: Adding an Example for the Block Preview

Lecture 35: Adding Transformations for the Team Members Block

Chapter 6: Dynamic Blocks

Lecture 1: Introduction to Dynamic Blocks

Lecture 2: Initializing our Latest Posts Block

Lecture 3: Editing the Boilerplate's Metadata

Lecture 4: Displaying Dynamic Content in the Front-end

Lecture 5: Displaying the Latest Posts in the Frond-end Using PHP

Lecture 6: Preparing Our Data for the Editor Loop

Lecture 7: Displaying the Latest Posts in the Editor

Lecture 8: Styling the Posts in the Editor and Front-end

Lecture 9: Adding Options for Number of Posts and Featured Image

Lecture 10: Adding an Option for Changing the Order of the Posts

Lecture 11: Filtering Posts by Categories

Chapter 7: Creating a Plugin Boilerplate for Block Editor Features

Lecture 1: Quick Note!

Lecture 2: Creating a New Plugin Boilerplate for the Block Editor

Lecture 3: Integrating wp-scripts in our Boilerplate

Chapter 8: Adding Custom Global Data Stores

Lecture 1: The Core Data Stores

Lecture 2: Using the Data Stored Inside the Blocks

Lecture 3: Todos Store Overview

Instructors

Ali Alaa
Front-end Web Developer

Rating Distribution

1 stars: 14 votes
2 stars: 14 votes
3 stars: 47 votes
4 stars: 208 votes
5 stars: 571 votes

Frequently Asked Questions

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!

Menu