Telex es una herramienta experimental y gratuita de Automattic, basada en el navegador, que utiliza la IA para generar bloques de WordPress a partir de indicaciones en lenguaje natural.

En lugar de configurar un entorno de desarrollo local, configurar herramientas de construcción y crear manualmente la estructura de un bloque, Telex te permite describir lo que deseas, obtener una vista previa del resultado y descargar un plugin listo para instalar.

Este artículo explora cómo es ese flujo de trabajo en la práctica y para qué tipo de bloques es adecuado hoy en día. Utilizando dos ejemplos reales, incluido un bloque más complejo sólo para editores, veremos hasta dónde puede llevarte Telex y dónde sigue siendo necesaria la intervención manual.

Interfaz de usuario de Telex.
Interfaz de usuario de Telex.

Cómo funciona Telex en la práctica

Telex sigue un flujo de trabajo similar al de una cadena de montaje. Tú describes el bloque que deseas utilizando lenguaje natural y, a continuación, Telex mapea esa solicitud en una estructura (scaffold) de bloques de WordPress predefinida basada en las herramientas estándar de creación de bloques.

Cómo funciona Telex.
Cómo funciona Telex.

A partir de ahí, la IA completa los detalles, como los metadatos del bloque, la interfaz de usuario del editor, la lógica de renderización y el estilo básico dentro de esas restricciones. A continuación, el bloque se construye en un entorno Node.js alojado, se previsualiza en WordPress Playground y se empaqueta como un plugin ZIP listo para cargar.

En segundo plano, el plugin generado sigue una estructura familiar, muy similar a create-block:

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

Vamos a construir el primero de los dos bloques.

Crear un bloque de inserción de ChatGPT mediante vibe coding

Puede que recuerdes una época en la que era habitual ver un cuadro de búsqueda de Google incrustado en una página web, que permitía a los usuarios buscar en un sitio o en la web. Si necesitas proporcionar ese tipo de experiencia a tus usuarios, pero esta vez con la entrada de ChatGPT, aquí te explicamos cómo hacerlo.

Este es un buen punto de partida, ya que puedes centrarte en sentirte cómodo con la interfaz de usuario de Telex sin preocuparte demasiado por el perfeccionamiento rápido o las múltiples iteraciones.

Inicia sesión con tus credenciales de wordPress.com y podrás describir tu mensaje inicial. Esto es lo que utilizamos nosotros:

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

Mira la interfaz de usuario a continuación:

Interfaz de Telex que muestra una solicitud de entrada para configurar una automatización.
Petición inicial de entrada de Telex.

Telex crea el bloque incrustado de ChatGPT, que incluye el cuadro de introducción de datos, la visualización del historial de mensajes y un estilo que coincide con la estética de ChatGPT.

En este punto, el bloque muestra un mensaje de error en la interfaz de usuario del editor.

Bloquea la visualización de un mensaje de error durante la ejecución del flujo de trabajo.
Bloque que muestra el mensaje de error.

Pedimos a Telex que resolvieran el problema y nos guiaron para generar una clave API de ChatGPT y añadirla al bloque a través de la barra lateral del Inspector. En este caso, consideramos que el uso de una API externa para el bloque no suponía un riesgo de seguridad injustificado.

Panel de inspección de bloques que muestra las opciones de configuración y los ajustes.
Clave API de ChatGPT añadida al Inspector de Bloques.

Por último, hicimos una prueba rápida en el frontend para confirmar que todo funcionaba como esperábamos.

Interfaz que muestra la respuesta inicial generada a partir de un mensaje.
El frontend muestra la solicitud y la respuesta iniciales.

Crear un bloque de Social Draft mediante vibe coding

Para nuestro segundo ejemplo, vamos a llevar a Telex un poco más lejos construyendo un bloque interno para redactar publicaciones en redes sociales (que permita redactar, revisar y exportar contenido para su programación sin necesidad de una herramienta de colaboración independiente o un plan de equipo de pago).

Podemos empezar con esta solicitud de configuración:

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

En lugar de sobrecargar Telex con instrucciones, a menudo es mejor utilizar otra herramienta de IA (como ChatGPT) para elaborar primero un conjunto sólido de requisitos. Esto incluye definir tus objetivos, cómo debe ser la interfaz, cómo se almacenan los datos, cómo interactúan los usuarios con el sistema y mucho más. Aquí tienes un extracto de lo que ChatGPT respondió:

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.

Cuando le entregamos esto a Telex, el resultado fue la interfaz de usuario (UI) esperada, pero el bloque de Social Draft no se podía visualizar en el área de contenido.

Bloquea la interfaz de usuario que muestra un área de contenido que falta en la interfaz.
Falta la IU del bloque en el área de contenido.

Muchas veces, hay que pasar por varias iteraciones cuando se codifica en vibe, y eso es lo que ocurrió.

Telex identificó problemas relacionados con la forma en que se inicializaban los InnerBlocks e intentó reestructurar el bloque para solucionar el problema de representación. Estos primeros intentos no tuvieron éxito, y el bloque seguía sin mostrarse correctamente en el editor.

Llegados a este punto, preguntamos a Telex si podía procesar nuestra solicitud, ya que estábamos perdiendo la confianza. Reiteramos que toda la interfaz de usuario estaba expuesta, salvo lo que necesitábamos (la capacidad de añadir y mostrar el bloque).

Telex respondió:

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.

Finalmente obtuvimos nuestra IU y empezamos un sondeo rápido.

Datos de publicaciones en redes sociales mostrados en una vista analítica estructurada.
Bloqueo de datos de publicaciones en redes sociales.

Tras muchas otras mejoras, el resultado fue un bloque funcional en el que logramos nuestro MVP.

Bloque de Social Draft mostrando un borrador de publicación para redes sociales generado.
Un MVP funcional para nuestro bloque Social Draft.

Inconvenientes y soluciones alternativas

Telex ha avanzado mucho en poco tiempo, pero una vez que empiezas a utilizarlo más allá de simples experimentos, se hacen evidentes algunas limitaciones. La mayoría de ellas no son obstáculos insuperables, pero sí determinan cómo y cuándo es mejor utilizar Telex.

  1. No hay una forma integrada de deshacer una solicitud. Puedes pedir a Télex que deshaga un cambio, pero un método más fiable es guardar los avisos como texto o Markdown, versionar archivos ZIP descargados, o utilizar Git una vez que muevas el bloque localmente.
  2. Telex (re)genera inmediatamente el bloque después de que envíes una petición, sin posibilidad de deshacer o restaurar versiones anteriores. Para evitar una acción no deseada, pregunta a Telex «¿Cómo harías…?» antes de crear, volver a intentar o ejecutar un comando similar.
  3. Telex no es un IDE. Aunque puedes ver el código fuente generado, no hay forma de editarlo directamente dentro de Telex.
  4. Telex es más adecuado para la lluvia de ideas y la creación de prototipos. Para su uso en producción, lo más seguro es limitarlo a bloques muy sencillos en los que las integraciones externas, la lógica compleja o los problemas de seguridad y rendimiento no sean una prioridad.

El futuro de la construcción de bloques con IA

Telex ofrece un vistazo a cómo la IA puede integrarse en el desarrollo moderno de WordPress. Reduce los costes de experimentación, acorta la distancia entre la idea y el prototipo, y hace que la creación de la estructura (scaffolding) de los bloques sea mucho más accesible.

Al mismo tiempo, los ejemplos aquí mostrados demuestran que sigue siendo importante comprender el editor de bloques.

Una vez que un bloque está listo para pasar de la fase experimental, contar con un entorno WordPress fiable como Kinsta facilita las pruebas, las iteraciones y el lanzamiento con confianza.

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.