Develop A WordPress Block

A hands-on tutorial on creating a WordPress content block.

Rob Stinson created this tutorial's block.

And this uses Kent C. Dodds' format for exercises.

What will you learn?

How to create a content block in WordPress.

This isn't a React course. It's a course on React in WordPress.

You'll learn how to develop for the WP block editor.

And you'll see typical setup of a WP block plugin.

What should you know first?

The basics of React and modern JavaScript.

The first 12 lessons in The Beginner's Guide To React should look familiar.

Requirements

Node Version Manager, Composer

Development

Use the correct Node version:

nvm use

Install dependencies:

npm install && composer install

Watch for changes:

npm run dev

Environment

You can checkout this plugin to your own local WordPress environment.

Or you can use the bundled environment:

npm run wp-env start

That will require Docker.

Go to http://localhost:8888 for your environment.

The username is admin and the password is password.

For the other wp-env commands, see the Command Reference.

Exercises

1. Block Registration
2. Edit Component
3. Progress Indicator Component
4. Save Component

Exercise Steps

This format is taken from Kent C. Dodds.

1. checkout the branch for the exercise, like exercise/1-block-json
2. Read INSTRUCTIONS.md
3. Find the Files heading in INSTRUCTIONS.md, and edit its files
4. 🚧 will show where to edit
5. Watch the video for the exercise solution
6. Go to the next exercise, and repeat steps 1-5