Vibe code any WordPress block with Telex

This year’s edition of WordCamp US, in Portland, Oregon, was highly focused on AI.

New tools are emerging every day, most of which can accomplish nearly anything.

The thing with things that can do anything (sic) is that they tend to lose the opportunity to be focused on a specific context, and as you probably know by now, when vibe coding, context is paramount.

Telex is a new Automattic experiment that is laser-focused on creating blocks for the WordPress editor. As that’s its sole purpose, it provides a lot of context about how Gutenberg blocks are intended to work.

What’s great is that Gutenberg blocks can do many different things, with the limits more or less set by your imagination (and, right now, by the fact that Telex can’t yet handle child blocks).

Here’s something I had Telex make in a few minutes: click on the Shuffle button, then have fun playing by clicking on free tiles…

All it took was this prompt:

I want a block that takes an image, like the core image block, and displays it.
But the block shows a “shuffle” button in the front end, and clicking on it
does the following:

Divide the image into a grid of 5×5 equal rectangles.
Remove the rectangle in the bottom right corner.
Shuffle the rectangles like a jigsaw puzzle,
leaving the empty space in a random position.
From there, clicking on a piece adjacent to the empty space
moves that piece into the empty space, leaving a new empty space
where the piece used to be.

Clicking on a piece that is not adjacent to an empty space,
or clicking on the empty space itself, has no effect.

Once the image is reconstructed exactly as it was,
the original image shows again, not split into a grid anymore,
and the “shuffle” button reappears.

The resulting block was working, but the puzzle was too long to finish. I later asked Telex to reduce the grid to 3×3 and finally to add animations when the tiles slid.

For some reason, I haven’t investigated (and probably won’t as this is just a demo), the animation works in all directions but from top down… go figure 😉

Telex is an experiment, but it solves a real problem: Gutenberg blocks are powerful, but complex to create, and using a generic coding assistant to do it is really hard due to the missing specific context. One can certainly create specific instructions, but that’s where Telex truly shines. It doesn’t require preparation and delivers a zip file directly that you can upload and install on your WordPress site, just like I did a few minutes ago.

Try it!