Cómo crear bloques personalizados de WordPress usando Telex – Speckyboy

Introducción al télex

Primero, necesita una cuenta gratuita de WordPress.com para usar Telex y guardar su proyecto. hacer clic Acceso en la esquina superior derecha de la pantalla para comenzar.

Una vez procesado esto, es hora de presentar su proyecto a Telex. La interfaz debería resultarle familiar a cualquiera que haya utilizado ChatGPT, Gemini u otros modelos de IA populares.

Ingrese sus pensamientos en el campo de texto y la herramienta se encargará del resto. Genera código para tus bloques personalizados e incluso te permite probarlo en una instalación real de WordPress (gracias Zona de juegos de WordPress).

¿No suena esto de otro mundo? Siga mientras creamos un bloque de demostración.

Crea bloques de línea de tiempo personalizados

A primera vista, esto no parece demasiado lejano para Telex. hay muchos ejemplos creativos aparecer en la web.

Para nuestros propósitos, intentaremos que sea práctico. Crearemos un bloque de línea de tiempo que nos permita resaltar fechas importantes con estilo.

Estos son los consejos que utilizamos:

Create a Timeline block that allows me to highlight important dates in a vertical format. It should have fields for the following:

1. Year
2. Content

The design should feature the Year on the left and the Content on the right. A vertical line should be displayed between the Year and the Content. The Year should be bold text and stand out.

pista: Telex tiene una función de “mensaje mejorado” que utilizará inteligencia artificial para reescribir sus mensajes. Si tiene problemas para describir lo que quiere, inténtelo. Probamos la función y agregó algunos elementos en los que no habíamos pensado, incluido el estilo responsivo.

hacer clic Hospedarse Una vez que esté satisfecho con el mensaje, haga clic en el botón.

Construya y pruebe nuestros bloques personalizados

Telex comenzará a construir su bloque en vista normal. La interfaz de usuario muestra indicaciones en la parte superior de la pantalla, mientras que los cuadros de diálogo internos de la aplicación se desplazan hacia abajo.

En nuestro caso, el proceso tardó unos dos minutos en completarse. Una vez completado, fuimos redirigidos a la instalación de WordPress y nos colocaron en el editor de bloques.

¡Aquí es donde comienza la diversión! Telex brinda la oportunidad de probar nuestro nuevo bloque y comprender cómo funciona. Podemos utilizar el panel de chat en el lado derecho de la pantalla para hacer preguntas o realizar ediciones.

juzgar los resultados preliminares

A primera vista, nuestro bloque de línea de tiempo se parece a lo que imaginamos. Telex sigue nuestras instrucciones con la ayuda de sus mejoras de inteligencia artificial. También agrega algunos detalles en los que no habíamos pensado, como la capacidad de diseñar el color y el espaciado de los bloques.

Incluso hay un práctico ícono más (+) para agregar hitos adicionales a nuestros bloques. Como se prometió, el bloque también responde. Los bloques de año y contenido están apilados en pantallas pequeñas para facilitar la lectura.

Este es un buen comienzo. Sin embargo, creemos que hay margen de mejora. ¿Puede ayudarnos Telex?

Mejorando nuestro bloque de línea de tiempo

Quizás lo que más falta en nuestros bloques es la posibilidad de personalizar la tipografía. Estaremos encantados de cambiar el tamaño y el espaciado de la fuente. Pidamos ayuda a Telex:

Can you add font size and spacing settings to the Year and Content fields?

Telex recibió nuestro aviso e inmediatamente comenzó a modificar el bloqueo. Una vez completado, el editor de bloques se actualizará y será hora de comprobar si hay cambios.

Efectivamente, nuestro bloque ahora tiene configuraciones de diseño para los campos Año y Contenido. ¡DE ACUERDO!

Estamos un paso más cerca de completarlo. Sin embargo, también queremos hacer algunos otros pequeños ajustes:

I notice the line between entries isn't connected. Can we change that?

Also, I'd love the ability to horizontally align each entry to the Top, Middle, or Bottom.

El télex respondió en cierta medida correctamente a ambas solicitudes. Ahora podemos ajustar nuestros hitos horizontalmente. Sin embargo, la línea de conexión ahora se mueve hacia la izquierda, que no es lo que queremos. Recuerde que esta línea está en el medio.

Can you move the connecting line back to the middle? It should be connected to the icon between the Year and Content fields.

Fueron necesarios varios intentos para recuperarse de una falla de PHP dentro de WordPress Playground. Telex finalmente movió las líneas al medio y ajustó el estilo para que los hitos se conecten en la parte frontal (todavía hay un poco de espacio en el editor).

Las cosas van bien, así que haremos clic descargar botón en la esquina superior derecha de la pantalla. Telex proporciona un archivo ZIP que contiene el complemento para nuestros bloques personalizados.

¡Ahora podemos instalar el complemento en cualquier sitio web de WordPress!

Crea bloques personalizados ahora

Nuestra experiencia con Telex ha sido agradable. En 30 minutos, teníamos un prototipo funcional de nuestro bloque de línea de tiempo personalizado. Incluso los desarrolladores de React más talentosos tienen dificultades para mantener esta velocidad.

Por supuesto, hubo algunos contratiempos en el camino. Esto es lo que se espera de cualquier herramienta de inteligencia artificial. Sin embargo, el télex produjo los resultados que esperábamos.

¿Qué tal la seguridad? Ejecutamos el complemento Verificación de complementoslo que nos da el visto bueno. Recomendamos utilizar esta herramienta para cada bloque personalizado que genere. Además, verifique el código manualmente. No dé por sentada la seguridad.

Al momento de escribir estas líneas, Telex todavía se encuentra en la etapa “experimental”. Sin embargo, es seguro decir que el futuro parece muy brillante.