Building Interactive Blocks: a step-by-step workshop
GPL-3.0 License
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.
β οΈ 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
Not necessary if you have Node >= 18.
Clone this repository, or download it
Cloning is recommended, but downloading is also fine.
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.
Is time to code? Ok, let's go!
npm start
localhost:8881
That's it π₯
The workshop is divided in steps.
You canβ¦
Write all the code
Not recommended unless you are already familiar with the Interactivity API.
Copy and paste the code snippets of each step from here
Only recommended if you are familiar with block development.
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.
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
).