Telex is een experimentele, browsergebaseerde gratis tool van Automattic die AI gebruikt om WordPress blokken te genereren uit vragen in natuurlijke taal.

In plaats van een lokale ontwikkelomgeving op te zetten, bouwtools te configureren en met de hand een blok te maken, kun je met Telex beschrijven wat je wilt, het resultaat bekijken en een kant-en-klare plugin downloaden.

Dit artikel onderzoekt hoe die workflow er in de praktijk uitziet en voor welk soort blokken het vandaag de dag realistisch gezien geschikt is. Aan de hand van twee voorbeelden uit de praktijk, waaronder een complexer editor-only blok, bekijken we hoe ver Telex je kan brengen en waar handmatige interventie nog steeds nodig is.

Telex gebruikersinterface.
Telex gebruikersinterface.

Hoe Telex in de praktijk werkt

Telex volgt de werkwijze van een lopende band. Je beschrijft het blok dat je wilt met behulp van natuurlijke taal, waarna Telex dat verzoek in kaart brengt in een vooraf gedefinieerde WordPress blokstructuur op basis van de standaard create-block tooling.

Hoe Telex werkt.
Hoe Telex werkt.

Van daaruit vult AI de details in, zoals de metadata van het blok, de editor UI, de rendering logica en de basisstyling binnen die beperkingen. Het blok wordt dan gebouwd in een gehoste Node.js-omgeving, vooraf bekeken in WordPress Playground en verpakt als een ZIP-plugin die klaar is om te uploaden.

Onder de motorkap volgt de gegenereerde plugin een bekende structuur, die nauw aansluit bij create-block:

block-name/
├── build/
├── src/
│   ├── edit.js
│   ├── save.js
│   ├── index.js
│   ├── style.scss
│   └── editor.scss
├── block.json
├── package.json
├── readme.md
└── .gitignore

Laten we onze eerste van twee blokken bouwen.

Vibecoden van een Embed ChatGPT blok

Je herinnert je misschien de tijd dat het gebruikelijk was om een Google zoekvak te zien ingebed in een webpagina, waarmee gebruikers een site of het web konden doorzoeken. Als je een dergelijke ervaring wilt bieden aan je gebruikers, maar deze keer met ChatGPT invoer, dan doen we het zo.

Dit is een geweldige plek om te beginnen, omdat je je kunt richten op het vertrouwd raken met de UI van Telex zonder je al te veel zorgen te maken over snelle verfijning of meerdere iteraties.

Begin als een ingelogde gebruiker met WordPress.com referenties en je kunt je eerste prompt beschrijven. Dit is wat wij hebben gebruikt:

We would like to create a block that embeds the ChatGPT prompt to allow users to use it on the frontend.

Zie de UI hieronder:

Initiële Telex invoerprompt.
Initiële Telex invoerprompt.

Telex creëert het ChatGPT embed blok, dat het prompt-invoerveld, de weergave van de berichtgeschiedenis en de styling die overeenkomt met de esthetiek van ChatGPT bevat.

Hier geeft het blok een foutmelding in de editor UI.

Blok met foutmelding.
Blok met foutmelding.

We vroegen Telex om het probleem op te lossen en werden begeleid bij het genereren van een ChatGPT API-sleutel en het toevoegen ervan aan het blok via de zijbalk van de Inspector. In dit geval vonden we dat het gebruik van een externe API voor het blok geen onnodig veiligheidsrisico met zich meebracht.

ChatGPT API-sleutel toegevoegd aan de Block Inspector.
ChatGPT API-sleutel toegevoegd aan de Block Inspector.

Tot slot voerden we een snelle test uit op de frontend om te bevestigen dat alles werkte zoals verwacht.

Frontend toont initiële prompt en antwoord.
Frontend toont initiële prompt en antwoord.

Vibecoden van een Social Draft blok

Laten we voor ons tweede voorbeeld Telex wat verder pushen door een intern blok te bouwen voor het opstellen van berichten voor sociale media (een blok waarmee inhoud kan worden geschreven, beoordeeld en geëxporteerd voor planning zonder dat daar een aparte samenwerkingstool of een betaald teamabonnement voor nodig is).

We kunnen beginnen met deze installatieprompt:

Build a custom WordPress block named ‘Social Draft’. We will give you further instructions after you set up.

In plaats van Telex te overladen met instructies, is het vaak beter om een andere AI-tool (zoals ChatGPT) te gebruiken om eerst een degelijke set vereisten uit te werken. Deze bevat het definiëren van je doelen, hoe de frontend eruit moet zien, hoe gegevens worden opgeslagen, hoe gebruikers met het systeem omgaan en meer. Hier is een uittreksel van waar ChatGPT mee terugkwam:

Goal
Build an editor-only WordPress block that acts as an internal content-prep tool for drafting social media posts, similar to a lightweight Google Docs workflow. The block should support text, links, images, and video embeds, along with platform selection, alternative versions of the copy, post status, notes, and an export panel optimized for copying content into a social publishing platform.

The block must not render anything on the frontend. It should exist solely for editor workflows, with save() returning null.

Editor UI
The main draft area (“Copy”) should be implemented using InnerBlocks rather than a single RichText field, allowing paragraphs, images, embeds, and lists. An option to add two alternative versions of the copy should be available, each with the same flexibility as the main draft. Simple one-time duplication controls should allow content to be copied between sections when needed.
Additional controls include platform selection via checkboxes, a single status field (Draft, Ready for review, Scheduled, or Not used), and a plain-text notes field.

An export panel should extract plain text from the selected draft or alternative, ignore media, and provide a one-click way to copy the result. Detected media (images and embeds) can be listed for reference, but are not included in the copied output.
All data should be stored within the block using attributes and InnerBlocks. No external APIs are required.

Toen we dit aan Telex gaven, was het resultaat UI zoals verwacht, maar het Social Draft blok kon niet worden weergegeven in het inhoudsgebied.

Blok UI ontbreekt in het inhoudsgebied.
Blok UI ontbreekt in het inhoudsgebied.

Vaak moet je verschillende iteraties doorlopen bij het vibecoden, en dat is wat er gebeurde.

Telex ontdekte problemen met de manier waarop InnerBlocks werden geïnitialiseerd en probeerde het blok te herstructureren om het renderprobleem op te lossen. Deze vroege pogingen slaagden niet en het blok werd nog steeds niet correct weergegeven in de editor.

Nu vroegen we Telex of het ons verzoek kon verwerken, omdat we langzaam het vertrouwen aan het verliezen waren. We herhaalden dat alle UI was vrijgegeven, behalve wat we nodig hadden (de mogelijkheid om het blok toe te voegen en weer te geven).

Telex antwoordde:

I completely understand your frustration, and yes, I can absolutely do this.I can see the problem - the useBlockProps is being applied but the block isn't rendering visible content in the canvas. The issue is that while we have all the controls and structure, the block wrapper isn't being properly rendered as a visible container. Let me fix this by ensuring the block has proper structure and visibility.

We kregen eindelijk onze UI en begonnen met een snelle probe.

Social media post gegevens ophalen niet geluk.
Social media post gegevens ophalen niet geluk.

Na flink wat finetunen was het resultaat een functioneel blok waarmee we onze MVP konden bereiken.

Een werkende MVP voor ons blok Social Drafts.
Een werkende MVP voor ons blok Social Drafts.

Nadelen en workarounds

Telex heeft in korte tijd een lange weg afgelegd, maar zodra je het verder gaat gebruiken dan eenvoudige experimenten, worden een paar beperkingen duidelijk. De meeste zijn geen blokkades, maar ze bepalen wel hoe en wanneer Telex het beste gebruikt kan worden.

  1. Er is geen ingebouwde manier om een prompt terug te draaien. Je kunt Telex vragen om een wijziging ongedaan te maken, maar een betrouwbaardere aanpak is om prompts op te slaan als tekst of Markdown, versie gedownloade ZIP bestanden, of Git te gebruiken zodra je het blok lokaal verplaatst.
  2. Telex genereert het blok onmiddellijk (opnieuw) nadat je een prompt hebt ingediend, zonder de mogelijkheid om eerdere versies ongedaan te maken of te herstellen. Om een ongewenste actie te voorkomen, vraag je Telex: “Hoe zou je…” voor je prompt voordat je gaat bouwen, opnieuw probeert of een soortgelijk commando geeft.
  3. Telex is geen IDE. Hoewel je de gegenereerde sourcecode kunt bekijken, is er geen manier om deze direct binnen Telex te bewerken.
  4. Telex is het meest geschikt voor brainstormen en prototypen. Voor productiegebruik is het het veiligst om het te beperken tot zeer eenvoudige blokken waar externe integraties, complexe logica of beveiligings- en prestatiegevoelige zorgen geen prioriteit zijn.

Wat is de volgende stap voor het bouwen van blokken met AI?

Telex biedt een kijkje in hoe AI kan passen in moderne WordPress ontwikkeling. Het verlaagt de kosten van experimenten, verkort de afstand tussen idee en prototype en maakt blokstructuren toegankelijker.

Tegelijkertijd laten de voorbeelden hier zien dat het nog steeds belangrijk is om de blokkeneditor te begrijpen.

Zodra een blok klaar is om verder te gaan dan experimenteren, maakt een betrouwbare WordPress omgeving zoals Kinsta het gemakkelijker om met vertrouwen te testen, itereren en verzenden.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.