Desarrolla bloques de WordPress como un profesional con Telex

Desarrollar en WordPress te da la posibilidad de crear todo tipo de bloques, desde un simple bloque de iconos hasta formularios, carruseles o bloques de contenido dinámico. Sin embargo, es un proceso técnico exigente que requiere un buen dominio del funcionamiento interno de WordPress y experiencia con React, JavaScript, PHP y otras tecnologías.

Existen otras herramientas para crear estructuras, como create-block de WordPress, que pueden ser útiles, así como editores de código modernos con IA como Cursor o asistentes como Claude Code. Con la configuración y el contexto adecuados, puedes reducir en gran medida la complejidad del proceso. El problema es que sigues teniendo que dotar a la IA del contexto específico de WordPress y asegurarte de que todo queda bien atado. Para un desarrollador es el pan de cada día, pero sigue siendo bastante complejo para el común de los mortales.

¿Y si fuera posible evitar esta complejidad? Pues es posible. Te presentamos Telex.

¿Qué es Telex?

Telex es una herramienta experimental creada por el equipo de IA de Automattic que convierte tus instrucciones en bloques funcionales de WordPress. Solo tienes que describir lo que quieres que haga el bloque y Telex se encarga de generarlo.

Cualquier persona puede utilizar Telex:

• Propietarios de sitios que quieran añadir funcionalidades personalizadas adaptadas a su web o que les apetezca experimentar con nuevas ideas.
• Agencias y freelancers que necesiten generar prototipos o pequeños bloques puntuales para proyectos de clientes.
• Desarrolladores que busquen una estructura rápida con la idea de refinar ese código más adelante.
• Desarrolladores principiantes que prefieren aprender con un ejemplo real delante, a la vez que ven el código que hay detrás.

Telex crea un plugin con tu bloque y te da una vista previa en tu navegador usando la tecnología de WordPress Playground. No es necesario configurar nada. Puedes refinar el bloque dándole más instrucciones a la IA o editar el código directamente para luego descargar el plugin e instalarlo en tu sitio. También puedes compartir tu bloque con un enlace a la propia vista previa de Playground.

Telex es todavía un experimento, de forma que los resultados pueden variar y pueden surgir bugs o fallos durante el proceso. El objetivo es investigar los lugares en los que la IA puede resultar más útil para crear bloques de manera más fluida. No funciona como creador web, sino que es más bien una IA que te ayuda a crear pequeñas herramientas funcionales en forma de bloques.

En este momento Telex es una herramienta gratuita y puedes utilizarla para crear tantos bloques como quieras. ¡Pruébalo ya!

Creación de bloques con Telex

Lo primero es pensar qué quieres que haga el bloque. Podría ser una funcionalidad que le falta a tu web o una idea que se te ha ocurrido para probar hasta dónde puede llegar Telex. Dada su naturaleza experimental, todo lo que sea explorar y descubrir es más que bienvenido. Si necesitas algo de inspiración, puedes echarle un vistazo a alguno de los proyectos que aparecen en la página de inicio de Telex.

En este artículo nos vamos a meter en la piel de un bloguero gastronómico: quiero compartir una receta de galletas con pepitas de chocolate, con una lista de ingredientes que pueda ampliarse fácilmente. También quiero que los lectores puedan marcar los ingredientes según los vayan incorporando. Además, quiero que haya un botón para copiar la lista de ingredientes. En el editor, quiero que los ingredientes se añadan en una tabla sencilla con tres columnas: cantidad, unidad e ingrediente. Quiero poder eliminar y reordenar los ingredientes de la tabla mediante unos botones.

Empiezo con este prompt en Telex:

Por favor, crea un bloque donde incluir una lista de ingredientes (como para un blog de cocina) en la que los lectores puedan tachar los elementos. Añade un botón de copiar en el front-end que copie la lista de ingredientes en el portapapeles. Incluye una herramienta integrada para escalar x2, x3 y x4 veces la receta, y que se actualicen las cantidades de los ingredientes automáticamente. En el editor, quiero introducir los ingredientes en una tabla con tres columnas: cantidad, unidad e ingrediente. También quiero poder eliminar y reordenar los ingredientes de la tabla mediante unos botones.

Con solo hacer clic en el botón Build, Telex se pone a trabajar. 

Cuanto más contexto incluyas en la petición inicial, mejor. Pero también puedes utilizar instrucciones más directas. Es posible generar tantos bloques como quieras, incluso a la vez. Solo tienes que abrir una nueva pestaña del navegador.

En aproximadamente dos minutos, el bloque de WordPress está listo con todas las funcionalidades que hemos pedido. Échale un vistazo a la vista del editor con la lista de los ingredientes de la receta dentro de la tabla. Fíjate que también están los botones para reordenarlos.

En el front-end, las funcionalidades aparecen inmediatamente, aunque los estilos aún necesiten un poco de trabajo. Puedes darle más indicaciones para dejarlo todo a tu gusto.

Podemos hacer, por ejemplo, que el bloque herede los estilos del tema que estamos utilizando. Además, podemos hacer que los ingredientes se marquen con una línea de tachado y que la cantidad de los ingredientes esté en números completos o fraccionados, cuando sea posible. Y para terminar, cuando se hayan marcado todos los ingredientes, quizá pueda aparecer una pequeña animación con confeti para celebrarlo.

Cada uno de estos cambios se puede gestionar con múltiples prompts seguidos:

Simplifica el diseño haciendo que la lista de ingredientes herede los estilos del tema actual.

En el front-end, cuando el lector marque un ingrediente, aplica también un tachado.

En el front-end, convierte las cantidades de los ingredientes a números completos o fracciones cuando sea posible; sin decimales.

Para darle un toque más festivo, cuando un lector marque todos los elementos de la lista de ingredientes, llena la pantalla con una animación de confeti.

Es recomendable darle las instrucciones a Telex de una en una. Tras cuatro versiones, una por cada una de las tareas, el bloque Lista de ingredientes tenía esta pinta:

También puedes modificar el código directamente si prefieres hacer rápidos cambios localizados. Además, es una buena forma de aprender cómo se crea la estructura de un bloque.

En este caso, queremos modificar un poco los botones y la tabla en el editor, así que podemos cambiar a la vista Code y ajustar los archivos style.scss y editor.scss manualmente.

Este sería el resultado final. Tardó unos 10 minutos en total:

Nota: Los resultados de Telex no son siempre iguales. Si utilizas las instrucciones que aparecen en este artículo, es posible que recibas resultados diferentes.

Siempre se puede seguir haciendo nuevas versiones. Quizá añadiendo datos estructurados de JSON-LD a la lista de ingredientes para mejorar la optimización para los motores de búsqueda, o la posibilidad de convertir las unidades a otro sistema de medida. Las opciones son infinitas.

Cuando hayas terminado con tu bloque, tienes dos opciones: utilizar el botón Download para descargar el archivo zip del plugin, o hacer clic en el botón Share para compartirlo. Esta opción copia un enlace único en el portapapeles. Cualquier persona con el enlace puede ver tu bloque en Telex sin necesidad de iniciar sesión.

Este es el enlace al bloque que hemos creado en este artículo:

Si haces clic en el enlace anterior, también podrás descargar el bloque Lista de ingredientes en un archivo zip, de la misma manera que si hubieras creado el bloque por tu cuenta. Puedes instalarlo en cualquier sitio de WordPress compatible con subidas de plugins, o probarlo de forma local con WordPress Studio.

Solución de problemas y fallos conocidos

Telex es una herramienta experimental, así que es normal que encuentres alguna piedra en el camino. Hay veces que la IA interpreta mal las instrucciones o genera código que no funciona. Es algo habitual en todas las herramientas de IA. Si ves un aviso como el que aparece a continuación, sigue haciendo pruebas. Dile a Telex que solucione el error. También puedes copiar los detalles y crear un nuevo prompt. Describe el resultado que esperas obtener. Puedes hacerle todas las preguntas que quieras. Si la cosa se complica, abre Telex en una nueva pestaña y vuelve a introducir los requisitos de tu bloque.

Hay muchas formas de crear un bloque en WordPress y parte de este experimento es identificar las áreas que podemos mejorar en Telex. Por ejemplo, ahora mismo los bloques que necesitan bloques anidados (tabla, cita) no son compatibles. La estructura «Carrusel con un bloque superior Carrusel y un bloque inferior Campo deslizante» es muy habitual, pero si se la pides, es posible que Telex no te dé resultados consistentes.

Si te encuentras con que Telex falla de forma repetida a la hora de completar tu petición, no dudes en contárnoslo en los comentarios o compartir tus opiniones en el formulario de la web. Menciona las instrucciones que le diste, el mensaje de error y una breve descripción de lo que querías crear: esta información puede ser muy útil para mejorar Telex.

Sigue experimentando 

Telex es una aproximación a la utilización de IA para facilitar la creación de bloques. La idea es seguir mejorando la herramienta gracias a los bloques y la experiencia que compartís. No lo dudes: crea un bloque, pega el enlace y cuéntanos qué ha ido bien y qué ha ido mal.

Para el futuro, estamos considerando incluir algunas mejoras, como un historial de versiones, descripciones visuales o la posibilidad de subir y personalizar bloques ya existentes, entre muchas otras.

Juntos podemos hacer que el desarrollo de bloques de WordPress sea mucho más fluido, rápido y accesible para todos.