Construire des blocs WordPress avec Telex

Telex est un outil expérimental gratuit d’Automattic, basé sur un navigateur, qui utilise l’intelligence artificielle pour générer des blocs WordPress à partir d’invites en langage naturel.

Au lieu de mettre en place un environnement de développement local, de configurer des outils de construction et d’échafauder un bloc à la main, Telex vous permet de décrire ce que vous voulez, de prévisualiser le résultat et de télécharger une extension prête à être installée.

Cet article explore ce à quoi ressemble ce flux de travail dans la pratique et quels types de blocs il est réaliste d’utiliser aujourd’hui. À l’aide de deux exemples réels, dont un bloc plus complexe réservé à l’éditeur, nous examinons jusqu’où Telex peut vous emmener et où une intervention manuelle est encore nécessaire.

Comment Telex fonctionne en pratique

Telex suit un flux de travail à la chaîne. Vous décrivez le bloc que vous souhaitez en utilisant le langage naturel, puis Telex fait correspondre cette demande à un bloc WordPress prédéfini basé sur l’outil standard de création de blocs.

A partir de là, l’IA remplit les détails tels que les métadonnées du bloc, l’interface utilisateur de l’éditeur, la logique de rendu et le style de base dans le cadre de ces contraintes. Le bloc est ensuite construit dans un environnement Node.js hébergé, prévisualisé dans WordPress Playground, et empaqueté comme une extension ZIP prête à être téléchargée.

Sous le capot, l’extension générée suit une structure familière, étroitement alignée avec create-block:

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

Construisons notre premier des deux blocs.

Codage vibe d’un bloc Embed ChatGPT

Vous vous souvenez peut-être de l’époque où il était courant de voir un champ de recherche Google intégré à une page web, permettant aux utilisateurs d’effectuer des recherches sur un site ou sur le web. Si vous avez besoin de fournir ce genre d’expérience à vos utilisateurs, mais cette fois avec une entrée ChatGPT, voici comment.

C’est un excellent point de départ, car vous pouvez vous concentrer sur l’utilisation de l’interface utilisateur de Telex sans trop vous soucier d’un raffinement rapide ou d’itérations multiples.

Commencez en tant qu’utilisateur connecté avec vos identifiants wordPress.com, et vous pouvez décrire votre message initial. Voici ce que nous avons utilisé :

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

Voir l’interface ci-dessous :

Telex crée le bloc d’intégration ChatGPT, qui comprend la boîte de saisie de l’invite, l’affichage de l’historique des messages et un style qui correspond à l’esthétique de ChatGPT.

A ce stade, le bloc affiche un message d’erreur dans l’interface utilisateur de l’éditeur.

Nous avons demandé à Telex de résoudre le problème et avons été guidés pour générer une clé API ChatGPT et l’ajouter au bloc via la colonne latérale de l’inspecteur. Dans ce cas, nous avons estimé que l’utilisation d’une API externe pour le bloc n’introduisait pas de risque de sécurité injustifié.

Enfin, nous avons effectué un test rapide sur le frontend pour confirmer que tout fonctionnait comme prévu.

Codage Vibe d’un bloc Social Draft

Pour notre deuxième exemple, poussons Telex un peu plus loin en construisant un bloc interne pour la rédaction de messages sur les médias sociaux (un bloc qui permet au contenu d’être écrit, révisé et exporté pour être planifié sans avoir besoin d’un outil de collaboration séparé ou d’un plan d’équipe payant).

Nous pouvons commencer par cette invite de configuration :

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

Au lieu de surcharger Telex d’instructions, il est souvent préférable d’utiliser un autre outil d’IA (comme ChatGPT) pour définir d’abord un ensemble solide d’exigences. Il s’agit notamment de définir vos objectifs, l’aspect de l’interface, la manière dont les données sont stockées, la manière dont les utilisateurs interagissent avec le système, et bien d’autres choses encore. Voici un extrait de la réponse de ChatGPT :

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.

Lorsque nous avons donné cela à Telex, le résultat était l’interface utilisateur comme prévu, mais le bloc Social Draft ne pouvait pas s’afficher dans la zone de contenu.

Souvent, il faut passer par plusieurs itérations lors du codage Vibe, et c’est ce qui s’est passé.

Telex a identifié des problèmes liés à la manière dont les InnerBlocks étaient initialisés et a tenté de restructurer le bloc pour résoudre le problème de rendu. Ces premières tentatives n’ont pas abouti et le bloc ne s’affichait toujours pas correctement dans l’éditeur.

À ce stade, nous avons demandé à Telex s’il pouvait traiter notre demande, car nous perdions confiance. Nous avons répété que toute l’interface utilisateur était exposée, à l’exception de ce dont nous avions besoin (la possibilité d’ajouter et d’afficher le bloc).

Telex a répondu :

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.

Nous avons finalement obtenu notre interface utilisateur et avons commencé une enquête rapide.

Après de nombreuses autres améliorations, nous avons obtenu un bloc fonctionnel dans lequel nous avons réalisé notre MVP.

Inconvénients et solutions de contournement

Telex a parcouru un long chemin en peu de temps, mais dès que vous commencez à l’utiliser au-delà de simples expériences, quelques limitations deviennent apparentes. La plupart d’entre elles ne sont pas bloquantes, mais elles déterminent comment et quand Telex est le mieux utilisé.

1. Il n’y a pas de moyen intégré d’annuler une invite. Vous pouvez demander à Telex d’annuler un changement, mais une approche plus fiable consiste à sauvegarder les invites sous forme de texte ou de Markdown, de version des fichiers ZIP téléchargés, ou d’utiliser Git une fois que vous avez déplacé le bloc localement.
2. Telex (re)génère immédiatement le bloc après que vous ayez soumis une invite, sans possibilité d’annuler ou de restaurer les versions précédentes. Pour éviter une action non désirée, demandez à Telex, « Comment feriez-vous… » pour votre invite avant de construire, réessayer, ou une commande similaire.
3. Telex n’est pas un IDE. Bien que vous puissiez visualiser le code source généré, il n’y a aucun moyen de l’éditer directement dans Telex.
4. Telex est mieux adapté au brainstorming et au prototypage. Pour une utilisation en production, il est préférable de le limiter à des blocs très simples où les intégrations externes, la logique complexe ou les questions de sécurité et de performance ne sont pas une priorité.

Prochaines étapes de la construction de blocs avec l’IA

Telex offre un aperçu de la façon dont l’IA peut s’intégrer dans le développement moderne de WordPress. Elle réduit le coût de l’expérimentation, raccourcit la distance entre l’idée et le prototype, et rend l’échafaudage de blocs plus accessible.

En même temps, les exemples présentés ici montrent que la compréhension de l’éditeur de blocs est toujours importante.

Une fois qu’un bloc est prêt à aller au-delà de l’expérimentation, avoir un environnement WordPress fiable comme Kinsta facilite les tests, les itérations et les livraisons en toute confiance.

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.