An exploratory plugin for using different ways of creating interactive blocks in Gutenberg.
This demos are part of the lightning talk Creating interactive blocks: old, new, and good ways of the WordCamp Europe 2022
The block revolution is here. Full site editing has been unleashed to the world, and even though it is still in its infancy, it already takes WordPress configurability and extensibility to a whole new level. But in this new world, one question still remains: How do we add client interactivity to our custom blocks? Should we use the same old techniques we used for classic themes and plugins? Or should we take this opportunity to adopt some techniques from other modern web development ecosystems to improve our interactive blocks' performance and developer experience?
In this repository you'll find several approaches to create interactive blocks and a brief description of pros & cons of each approach
TBD
- Clone repository into
wp-content/plugins/gutenberg-interactive
of your WordPress site. - Run
npm install
- Run
composer install
- Run
npm run build
- Go to your WordPress site and activate this plugin.
To set up WordPress locally, you can use something like Local or with Docker you can also do npx wp-env start
- Add a more complex (interesting) block to the demo
- Quiz with several questions
- State in each question
- State in the overall quiz
- Each quesiton allow different types of blocks (images, text...)