Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luisherranz/wceu2023
Building Interactive Blocks: a step-by-step workshop
https://github.com/luisherranz/wceu2023
interactivity-api wordcamp workshop
Last synced: 10 days ago
JSON representation
Building Interactive Blocks: a step-by-step workshop
- Host: GitHub
- URL: https://github.com/luisherranz/wceu2023
- Owner: luisherranz
- License: gpl-3.0
- Created: 2023-05-24T19:48:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-06T06:55:58.000Z (6 months ago)
- Last Synced: 2024-11-02T08:51:33.300Z (17 days ago)
- Topics: interactivity-api, wordcamp, workshop
- Language: JavaScript
- Homepage:
- Size: 132 KB
- Stars: 10
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Building Interactive Blocks workshop
Welcome to the GitHub repository of the [WordCamp Europe 2023 workshop, Building Interactive blocks](https://europe.wordcamp.org/2023/session/building-interactive-blocks-a-step-by-step-workshop/) by [Luis Herranz](https://twitter.com/luisherranz).
In this workshop, we learned how to create interactive blocks using the [Interactivity API](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/).
---
### [-– 📺 Click here to watch the workshop –-](https://wordpress.tv/2023/10/01/building-interactive-blocks-a-step-by-step-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](https://github.com/luisherranz/wceu2023/commits/step22/)
## Preparation steps 🧑🍳
1. [Download Node](https://nodejs.org/)
_Not necessary if you have Node >= 18._
2. Clone this repository, or [download it](https://github.com/luisherranz/wceu23/archive/refs/heads/step0.zip)
_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](https://github.com/luisherranz/wceu23/commits/step-22)**
_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](https://github.com/luisherranz/wceu23/commits/step-22).
## Get involved! 🦸
Got questions or feedback about it? We'd love to hear from you in the [GitHub Discussions](https://github.com/WordPress/gutenberg/discussions).
Are you interested on contributing with code or documentation? Come to the [repository](https://github.com/WordPress/gutenberg)!
You can also find me in [Twitter](https://twitter.com/luisherranz), [GitHub](https://github.com/luisherranz/), or [Slack](https://wordpress.slack.com/client/T024MFP4J/D1KL49H6D) (always as `@luisherranz`).