luisherranz/wceu2023

Building Interactive Blocks: a step-by-step workshop

Building Interactive Blocks workshop

Welcome to the GitHub repository of the WordCamp Europe 2023 workshop, Building Interactive blocks by Luis Herranz.

In this workshop, we learned how to create interactive blocks using the Interactivity API.

---

-– 📺 Click here to watch the workshop –-

---

⚠️ Important note: At the time of the workshop, the version of the Interactivity API was different and still wasn't included in WordPress Core. The workshop recording still refers to the old code

The code of the main branch has been updated to the latest version of the Interactivity API so you can run it using the latest version of WordPress.

If you want, you can still view the old code on the step branches: old code

Preparation steps 🧑‍🍳

1. Download Node

   Not necessary if you have Node >= 18.

2. Clone this repository, or download it

   Cloning is recommended, but downloading is also fine.

3. Run npm install

   This may take a while, so do it as soon as you get the repository.

That's it! You don't need to install anything or do anything else just yet.

Time to code! 🧑‍💻

Hey, wait until it's time to code… 🤫

Is time to code? Ok, let's go!

Start the project 🚀

1. Run npm start
2. Go to localhost:8881

That's it 💥

How to follow the workshop 🧐

The workshop is divided in steps.

You can…

1. Write all the code

   Not recommended unless you are already familiar with the Interactivity API.

2. Copy and paste the code snippets of each step from here

   Only recommended if you are familiar with block development.

3. Use git to move through the steps

   The easiest one! Good to follow along even if you're not familiar with block development.

   To move through the steps, you can use this command:

   • git checkout step0
   • git checkout step1
   • ...

Important: you can see the changes of each step here.

Get involved! 🦸

Got questions or feedback about it? We'd love to hear from you in the GitHub Discussions.

Are you interested on contributing with code or documentation? Come to the repository!

You can also find me in Twitter, GitHub, or Slack (always as @luisherranz).