Telex ist ein experimentelles, browserbasiertes kostenloses Tool von Automattic, das KI nutzt, um WordPress-Blöcke aus natürlichsprachlichen Eingaben zu generieren.
Anstatt eine lokale Entwicklungsumgebung einzurichten, Build-Tools zu konfigurieren und einen Block von Hand zu erstellen, kannst du mit Telex beschreiben, was du willst, eine Vorschau des Ergebnisses ansehen und ein einbaufertiges Plugin herunterladen.
In diesem Artikel wird untersucht, wie dieser Arbeitsablauf in der Praxis aussieht und für welche Arten von Blöcken er heute realistischerweise geeignet ist. Anhand von zwei realen Beispielen, darunter ein komplexer reiner Editor-Block, sehen wir uns an, wie weit du mit Telex kommen kannst und wo du noch manuell eingreifen musst.
Wie Telex in der Praxis funktioniert
Telex folgt einem fließbandartigen Arbeitsablauf. Du beschreibst den gewünschten Block in natürlicher Sprache, dann ordnet Telex diese Anfrage einem vordefinierten WordPress-Blockgerüst zu, das auf dem Standard-Tool zum Erstellen von Blöcken basiert.
Von dort aus füllt KI die Details wie Block-Metadaten, Editor-UI, Rendering-Logik und grundlegendes Styling innerhalb dieser Vorgaben aus. Der Block wird dann in einer gehosteten Node.js-Umgebung erstellt, in WordPress Playground in der Vorschau angezeigt und als ZIP-Plugin verpackt, das dann hochgeladen werden kann.
Unter der Haube folgt das generierte Plugin einer vertrauten Struktur, die sich eng an create-block orientiert:
block-name/
├── build/
├── src/
│ ├── edit.js
│ ├── save.js
│ ├── index.js
│ ├── style.scss
│ └── editor.scss
├── block.json
├── package.json
├── readme.md
└── .gitignoreLass uns den ersten von zwei Blöcken bauen.
Einen Embed ChatGPT-Block vibe koden
Vielleicht erinnerst du dich an die Zeit, als es üblich war, ein Google-Suchfeld in eine Webseite einzubetten, mit dem die Nutzer/innen eine Website oder das Web durchsuchen konnten. Wenn du deinen Nutzerinnen und Nutzern ein ähnliches Erlebnis bieten willst, aber diesmal mit ChatGPT-Eingabe, dann erfährst du hier, wie das geht.
Das ist ein guter Anfang, denn du kannst dich darauf konzentrieren, dich mit der Benutzeroberfläche von Telex vertraut zu machen, ohne dir zu viele Gedanken über eine prompte Verfeinerung oder mehrere Iterationen zu machen.
Beginne als eingeloggter Benutzer mit wordPress.com-Zugangsdaten und beschreibe deinen ersten Prompt. Wir haben das hier verwendet:
We would like to create a block that embeds the ChatGPT prompt to allow users to use it on the frontend.Siehe das UI unten:
Telex erstellt den ChatGPT-Einbettungsblock, der das Eingabefeld für die Eingabeaufforderung, die Anzeige des Nachrichtenverlaufs und ein Styling enthält, das der Ästhetik von ChatGPT entspricht.
Zu diesem Zeitpunkt gibt der Block eine Fehlermeldung in der Editoroberfläche aus.
Wir baten Telex, das Problem zu lösen, und wurden durch die Erstellung eines ChatGPT-API-Schlüssels und das Hinzufügen zu dem Block über die Seitenleiste des Inspektors geführt. In diesem Fall waren wir der Meinung, dass die Verwendung einer externen API für den Block kein ungerechtfertigtes Sicherheitsrisiko darstellte.
Zum Schluss haben wir einen kurzen Test auf dem Frontend durchgeführt, um sicherzustellen, dass alles wie erwartet funktioniert.
Vibe-Codierung eines Social Draft-Blocks
In unserem zweiten Beispiel wollen wir Telex noch ein bisschen weiter treiben und einen internen Block für die Erstellung von Beiträgen für soziale Medien erstellen (mit dem Inhalte geschrieben, überprüft und für die Planung exportiert werden können, ohne dass ein separates Kollaborationstool oder ein kostenpflichtiger Teamplan erforderlich ist).
Wir können mit dieser Eingabeaufforderung beginnen:
Build a custom WordPress block named ‘Social Draft’. We will give you further instructions after you set up.Anstatt Telex mit Anweisungen zu überfrachten, ist es oft besser, ein anderes KI-Tool (wie ChatGPT) zu verwenden, um zunächst ein solides Anforderungspaket zu erstellen. Dazu gehört, dass du deine Ziele definierst, wie das Frontend aussehen soll, wie die Daten gespeichert werden, wie die Nutzer/innen mit dem System interagieren und vieles mehr. Hier ist ein Auszug aus dem, was ChatGPT zurückgegeben hat:
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.Als wir dies an Telex weitergaben, war das Ergebnis die erwartete Benutzeroberfläche, aber der Social Draft-Block konnte nicht im Inhaltsbereich angezeigt werden.
Oft muss man beim Vibe Coding mehrere Iterationen durchlaufen, und genau das ist passiert.
Telex hat Probleme mit der Initialisierung von InnerBlocks festgestellt und versucht, den Block umzustrukturieren, um das Darstellungsproblem zu beheben. Diese ersten Versuche waren nicht erfolgreich, und der Block wurde im Editor immer noch nicht richtig angezeigt.
An diesem Punkt fragten wir Telex, ob es unsere Anfrage bearbeiten könne, da wir langsam skeptisch würden. Wir wiederholten, dass die gesamte Benutzeroberfläche offengelegt wurde, außer dem, was wir brauchten (die Möglichkeit, den Block hinzuzufügen und anzuzeigen).
Telex antwortete:
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.Wir bekamen endlich unsere UI und begannen eine schnelle Untersuchung.
Nach vielen weiteren Verfeinerungen war das Ergebnis ein funktionaler Block, mit dem wir unser MVP erreichten.
Nachteile und Workarounds
Telex hat in kurzer Zeit einen weiten Weg zurückgelegt, aber sobald du anfängst, es über einfache Experimente hinaus zu nutzen, werden ein paar Einschränkungen deutlich. Die meisten davon sind keine Blockaden, aber sie bestimmen, wie und wann Telex am besten eingesetzt wird.
- Es gibt keine eingebaute Möglichkeit, eine Eingabeaufforderung rückgängig zu machen. Du kannst Telex bitten, eine Änderung rückgängig zu machen, aber zuverlässiger ist es, Prompts als Text oder Markdown zu speichern, heruntergeladene ZIP-Dateien zu versionieren oder Git zu verwenden, sobald du den Block lokal verschiebst.
- Telex erstellt den Block sofort (neu), nachdem du eine Eingabeaufforderung übermittelt hast, ohne die Möglichkeit, frühere Versionen rückgängig zu machen oder wiederherzustellen. Um eine ungewollte Aktion zu vermeiden, frage Telex „Wie würdest du…“ für deine Eingabeaufforderung, bevor du baust, neu versuchst oder einen ähnlichen Befehl gibst.
- Telex ist keine IDE. Du kannst den erzeugten Quellcode zwar ansehen, aber nicht direkt in Telex bearbeiten.
- Telex ist am besten für Brainstorming und Prototyping geeignet. Für den Einsatz in der Produktion ist es am sichersten, es auf sehr einfache Blöcke zu beschränken, bei denen externe Integrationen, komplexe Logik oder Sicherheits- und Leistungsaspekte keine Rolle spielen.
Was kommt als Nächstes in der Applikation mit KI?
Telex bietet einen Einblick, wie KI in die moderne WordPress-Entwicklung integriert werden kann. Sie senkt die Kosten für Experimente, verkürzt den Weg von der Idee zum Prototyp und macht das Blockgerüst zugänglicher.
Gleichzeitig zeigen die Beispiele hier, dass es immer noch wichtig ist, den Block-Editor zu verstehen.
Sobald ein Block bereit ist, über das Experimentieren hinauszugehen, macht es eine zuverlässige WordPress-Umgebung wie Kinsta einfacher, ihn zu testen, zu iterieren und mit Selbstbewusstsein bereitzustellen.
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.
