Get WordPress

Developing your first WordPress block

Welcome to the first week of the Learn WordPress Developing your first WordPress Block course cohort.

Hey there, and welcome to this Learn WordPress course cohort.

Allow me to introduce myself. My name is Jonathan, and I am one of the facilitators of this course cohort. I’m a sponsored member of the training team, and I’m excited to share this knowledge with you.

I wanted to take a moment to describe how this cohort differs from the usual online self-learning process.

In a typical online course, you work through the course material on your own, at your own pace. There are often no deadlines or check ins, but also no way to get help from the course creator or anyone else taking the same course.

In this cohort, you’ll be working through the course material at the same time as the rest of the group. You’ll be able to ask questions and get help from other participants, and I and the other course facilitators will be there to help out as well. However, this does mean to get the most out of the experience, each week you should try to complete the assigned work.

The goal of this cohort is to try and emulate the experience of taking a course in person but in an online setting. I hope you’ll find this process beneficial, and that you’ll be able to learn a lot from this course.

Before you begin, I’d like to remind you that every week, there will be one real-time video call with your fellow participants. These sessions will be run over Zoom, and the link will be shared with you beforehand in the Slack group. They will also be recorded in the event that you are not able to attend. I recommend that you try to make it to each session live, as it will give you an opportunity to ask questions and learn together with your fellow participants.

I would like to encourage you to complete the work for each week before that week’s Zoom session, as it will give you an opportunity to ask questions in real-time about anything you may be struggling with.

I would also like to invite you to make use of the Slack channel for the course cohort. This will be a place where you can ask questions, and get help from the other participants, as well as the cohort facilitators who invited you to the channel. 

While I and the other facilitators won’t be available to answer questions in real-time, we will do our best to respond within 24 hours. 

One final note. This course cohort follows the WordPress Community Code of Conduct, which you can find at https://make.wordpress.org/handbook/community-code-of-conduct/.

Please take a moment to read through it, and familiarize yourself with it. If you have any questions, or if you feel anyone that is part of this cohort is acting in a way that is inappropriate, threatening, offensive, or harmful, please reach out to one of the cohort facilitators via private message in Slack. If, for whatever reason, you don’t feel comfortable to chat with them about it, you can also email reports@wordpress.org, and a member of the community incident response team will get back to you.

It is important that we all share this space without fear of harassment or discrimination, and I will do my best to ensure that this is the case.

With all that out of the way, I would like to wish you all the best for this course, and I hope that you will find it beneficial.

Happy coding!

Additional resources

Start the course

When you’re ready to start, click the button below to access the course content.

Week 1: Introduction, preparing your environment for block development.

During week 1 you will focus on preparing your development environment for block development. You’ll learn about the tools you need to have installed on your computer, and why they are necessary.

Lessons

Getting set up Installing Node.js and npm All about the terminal Why install Chocolatey for Windows? Why install nvm to install node.js, and npm Week 1 wrap up

Week 2: Using create-block to scaffold a new block.

During week 2 you will learn how to use the create-block tool to scaffold a new block. You will learn about the different pieces of code that create-block generates, what they are used for, and how they help with block development. At the end, you’ll also start making some small changes to the block files.

Lessons

Welcome to week 2 Introducing create-block Why use create-block? What does create-block generate? package.json block.json Activity: Making some changes and building your block Week 2 wrap up

Week 3: My Reading List, anatomy of a block, block styling, block supports.

During week 3 you will start developing the My Reading List plugin while learning more about the different pieces of your block. You’ll also learn about block styling and enabling specific features through block supports.

Lessons

Welcome to week 3 My Reading List Block Registration The import declaration Internationalisation Block Styling useBlockProps Wrap up

Week 4: Interacting with WordPress data.

During week 4 you will learn how to interact with core WordPress data in your block.

Lessons

Welcome to week 4 Accessing WordPress data Developer Tools and the Console JavaScript concepts React concepts Block editor concepts Wrap up

Week 5: Block attributes, block components.

During week 5 you will learn how to create your own reusable block components to simplify your code and make your block’s data user-editable with block attributes and block controls.

Lessons

Welcome to week 5 Block Components, Block Attributes, and Block Controls Block Components Block Attributes Wrap up

Week 6: Dynamic blocks.

During week 6 you will learn about dynamic blocks, and how to develop them.

Lessons

Welcome to week 6 The save function, and dynamic blocks Dynamic blocks Preparing your block plugin for distribution Wrap up