{"id":7010,"date":"2025-09-08T11:55:58","date_gmt":"2025-09-08T09:55:58","guid":{"rendered":"https:\/\/www.hostingtg.com\/blog\/?p=7010"},"modified":"2025-09-08T11:56:01","modified_gmt":"2025-09-08T09:56:01","slug":"telex-wordpress","status":"publish","type":"post","link":"https:\/\/www.hostingtg.com\/blog\/telex-wordpress\/","title":{"rendered":"Telex de WordPress: qu\u00e9 es, c\u00f3mo crear bloques de Gutenberg con IA y buenas pr\u00e1cticas"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Qu\u00e9 es Telex<\/h2>\n\n\n\n<p>Telex es una herramienta de Automattic que convierte instrucciones en lenguaje natural en <strong>bloques de <\/strong><a href=\"https:\/\/www.hostingtg.com\/blog\/gutenberg-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/www.hostingtg.com\/blog\/gutenberg-wordpress\/\"><strong>Gutenb<\/strong><\/a><strong><a href=\"https:\/\/www.hostingtg.com\/blog\/gutenberg-wordpress\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.hostingtg.com\/blog\/gutenberg-wordpress\/\" rel=\"noreferrer noopener\">e<\/a><\/strong><a href=\"https:\/\/www.hostingtg.com\/blog\/gutenberg-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/www.hostingtg.com\/blog\/gutenberg-wordpress\/\"><strong>rg<\/strong> para WordPress<\/a>. La idea es simple: escribes lo que quieres \u2014por ejemplo, \u201cun bloque de \u2018pricing\u2019 con tres columnas, botones claros y opci\u00f3n destacada\u201d\u2014 y Telex te devuelve un <strong>.zip listo para instalar<\/strong> como si fuera un mini-plugin. No tienes que pelearte con React ni PHP para levantar un bloque desde cero, y eso acelera much\u00edsimo la fase de prototipado.<\/p>\n\n\n\n<p>En mi caso, lo primero que not\u00e9 fue el <strong>sello de \u201cexperimental\u201d<\/strong> en la propia herramienta. Y se nota: algunos intentos no compilaron a la primera y tuve que iterar el prompt para que el bloque resultante no rompiera estilos. Aun as\u00ed, el potencial es evidente. El hecho de que Telex viva en un <strong>dominio separado<\/strong> me vino de lujo para <strong>aislar pruebas<\/strong> sin poner en riesgo mi web en producci\u00f3n.<\/p>\n\n\n\n<p>\u00bfPor qu\u00e9 es relevante ahora? Porque <a href=\"https:\/\/www.hostingtg.com\/blog\/descargar-wordpress-gratis-2025\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.hostingtg.com\/blog\/descargar-wordpress-gratis-2025\/\" rel=\"noreferrer noopener\">WordPress<\/a> lleva a\u00f1os empujando el editor de bloques (Gutenberg) como est\u00e1ndar de dise\u00f1o y contenido. Telex encaja justo ah\u00ed: <strong>democratiza<\/strong> la creaci\u00f3n de bloques al bajar la barrera t\u00e9cnica. Lo dijo el propio Matt Mullenweg y, honestamente, mi experiencia lo refuerza: si esto madura, cualquiera con nociones de dise\u00f1o y buen criterio de UX podr\u00e1 construir bloques funcionales y mantenibles sin tocar una l\u00ednea de c\u00f3digo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostingtg.com\/blog\/wp-content\/uploads\/2025\/09\/telex-wordpress.webp\"><img fetchpriority=\"high\" decoding=\"async\" width=\"856\" height=\"537\" src=\"https:\/\/www.hostingtg.com\/blog\/wp-content\/uploads\/2025\/09\/telex-wordpress.webp\" alt=\"telex wordpress\" class=\"wp-image-7012\" title=\"\"><\/a><\/figure>\n\n\n\n<p><strong>Cu\u00e1ndo usarlo<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Prototipado r\u00e1pido de bloques para <strong>landing pages<\/strong>, secciones de <strong>pricing<\/strong>, <strong>FAQs<\/strong> o <strong>testimonios<\/strong>.<\/li>\n\n\n\n<li>Validar ideas visuales con clientes sin involucrar a\u00fan a un desarrollador.<\/li>\n\n\n\n<li>Crear \u201cbloques-plantilla\u201d que luego un dev pueda optimizar y endurecer para producci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p><strong>Cu\u00e1ndo no (todav\u00eda)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Proyectos donde el <strong>rendimiento, accesibilidad y seguridad<\/strong> est\u00e9n auditados al mil\u00edmetro.<\/li>\n\n\n\n<li>Sitios con <strong>governance<\/strong> estricta (p. ej., grandes medios o e-commerce con reglas internas duras).<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo funciona Telex<\/h2>\n\n\n\n<p>A nivel de usuario, el flujo es directo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Describes<\/strong> el bloque que quieres (estructura, estilo, interacciones).<\/li>\n\n\n\n<li>Telex <strong>genera<\/strong> los archivos clave (<em>block.json<\/em>, JS\/TS, CSS) empaquetados en un <strong>.zip<\/strong>.<\/li>\n\n\n\n<li><strong>Instalas<\/strong> ese .zip en tu WordPress o lo pruebas en <strong>WordPress Playground<\/strong> (mi recomendaci\u00f3n).<\/li>\n\n\n\n<li><strong>Iteras<\/strong> el prompt hasta lograr el resultado deseado.<\/li>\n<\/ol>\n\n\n\n<p>En mi caso, lo que mejor me funcion\u00f3 fue <strong>especificar los requisitos<\/strong> como si estuviera escribiendo una historia de usuario: \u201cComo visitante m\u00f3vil, quiero un bloque de testimonios en carrusel con <strong>paginaci\u00f3n accesible<\/strong>, im\u00e1genes comprimidas y <strong>lazy load<\/strong>\u201d. Cuando afin\u00e9 as\u00ed, el output de Telex se acerc\u00f3 mucho m\u00e1s a lo que necesitaba.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Telex y estado del proyecto<\/h3>\n\n\n\n<p><a href=\"https:\/\/telex.automattic.ai\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/telex.automattic.ai\/\" rel=\"noreferrer noopener\">Telex est\u00e1 disponible en su <strong>dominio propio<\/strong><\/a> y se presenta abiertamente como <strong>experimental<\/strong>. Esto implica que la calidad puede variar, que habr\u00e1 d\u00edas con cambios y que es normal encontrar \u201cedge cases\u201d donde el bloque no se comporte como esperas. En mis pruebas, el etiquetado \u201cexperimental \u2260 roto\u201d, pero s\u00ed requiere <strong>mentalidad de prototipado<\/strong>: prueba \u2192 mide \u2192 mejora.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u00e9 entrega exactamente el .zip<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>block.json<\/strong> con metadatos (nombre, categor\u00eda, atributos).<\/li>\n\n\n\n<li><strong>JS\/TS<\/strong> para la l\u00f3gica del bloque (edit\/save).<\/li>\n\n\n\n<li><strong>CSS<\/strong> o estilos inyectados (seg\u00fan el caso).<\/li>\n\n\n\n<li>Dependencias declaradas (editorScript, style, etc.).<br>Mi aprendizaje: abre el paquete, <strong>lee el block.json<\/strong>, confirma \u201cname\u201d \u00fanico (por ejemplo, <code>mi-marca\/cta-primario<\/code>) y revisa que no existan <strong>conflictos de estilos<\/strong> con tu tema.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Gu\u00eda paso a paso: de tu prompt al bloque .zip<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Especificar el bloque con cabeza<\/h3>\n\n\n\n<p>Piensa en <strong>estructura + contenido + interacci\u00f3n<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Estructura:<\/strong> filas\/columnas, rejillas, jerarqu\u00eda H2\/H3, slots repetibles.<\/li>\n\n\n\n<li><strong>Contenido:<\/strong> campos editables (t\u00edtulo, subt\u00edtulo, imagen, bot\u00f3n, precio\u2026), microcopys.<\/li>\n\n\n\n<li><strong>Interacci\u00f3n:<\/strong> estados hover\/focus, navegaci\u00f3n de carrusel, acordeones, CTA con seguimiento.<\/li>\n\n\n\n<li><strong>Accesibilidad:<\/strong> roles ARIA, foco visible, textos alternativos, orden l\u00f3gico tabulable.<\/li>\n<\/ul>\n\n\n\n<p><strong>Prompt base (plantilla)<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cCrea un bloque de Gutenberg llamado \u2018[Nombre del Bloque]\u2019 con estructura [grid\/flex\/columns], pensado para m\u00f3viles primero, con [X] elementos editables (t\u00edtulo, subt\u00edtulo, lista, imagen con alt, bot\u00f3n con texto y URL). A\u00f1ade estilos minimalistas, contraste AA, y evita dependencias pesadas. Incluye clases BEM claras. A\u00f1ade \u2018supports\u2019 para alineaciones y spacing.\u201d<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>En mi caso, cuando detall\u00e9 \u201c<strong>contraste AA<\/strong>\u201d y \u201c<strong>clases BEM<\/strong>\u201d, el CSS generado sali\u00f3 m\u00e1s limpio y el bloque se integr\u00f3 mejor con mi tema.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Descargar e instalar el .zip<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Playground primero:<\/strong> sube el .zip y activa el plugin para validar sin tocar producci\u00f3n.<\/li>\n\n\n\n<li><strong>WordPress real (staging):<\/strong> ve a <em>Plugins \u2192 A\u00f1adir nuevo \u2192 Subir plugin<\/em>, activa y prueba.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Probar en Playground (y qu\u00e9 mirar)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visibilidad y responsive:<\/strong> \u00bftodo fluye en 320\u2013768\u20131024 px?<\/li>\n\n\n\n<li><strong>Compatibilidad con tema:<\/strong> tipograf\u00edas y colores, \u00bfhereda bien?<\/li>\n\n\n\n<li><strong>Rendimiento:<\/strong> tama\u00f1o del CSS\/JS, n\u00famero de bloques dependientes, <strong>LCP<\/strong> aproximado.<\/li>\n\n\n\n<li><strong>Accesibilidad:<\/strong> foco, etiquetas, navegaci\u00f3n con teclado, <code>aria-*<\/code> coherentes.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Iterar y refinar<\/h3>\n\n\n\n<p>Cuando algo no sali\u00f3 bien, reformul\u00e9 el prompt: \u201creduce el CSS del bloque al m\u00ednimo\u201d, \u201celimina animaciones innecesarias\u201d, \u201cusa <code>prefers-reduced-motion<\/code>\u201d, \u201cevita <code>position: absolute<\/code> para layout\u201d. Ese tipo de detalles marc\u00f3 la diferencia.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Checklist antes de instalar: compatibilidad, accesibilidad y seguridad<\/h2>\n\n\n\n<p><strong>Compatibilidad<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201cname\u201d del bloque \u00fanico (namespace de tu marca\/tema).<\/li>\n\n\n\n<li>Versiones de <strong>WordPress<\/strong> y <strong>Gutenberg<\/strong> alineadas con tu stack.<\/li>\n\n\n\n<li>Dependencias registradas (editorScript, style) sin colisiones.<\/li>\n<\/ul>\n\n\n\n<p><strong>Accesibilidad (WCAG 2.1 AA)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contraste texto\/fondo \u2265 4.5:1.<\/li>\n\n\n\n<li>Foco visible y orden de tab correcto.<\/li>\n\n\n\n<li><code>alt<\/code> en im\u00e1genes y <code>aria-label<\/code> donde proceda.<\/li>\n\n\n\n<li>Contenido no depende solo del color.<\/li>\n<\/ul>\n\n\n\n<p><strong>Rendimiento<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS cr\u00edtico m\u00ednimo, sin <strong>!important<\/strong> abusivo.<\/li>\n\n\n\n<li>Lazy load para im\u00e1genes, fuentes del sistema cuando sea posible.<\/li>\n\n\n\n<li>Evita librer\u00edas pesadas si el bloque lo resuelve con CSS\/HTML.<\/li>\n<\/ul>\n\n\n\n<p><strong>Seguridad<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sanitizaci\u00f3n de atributos (p. ej., URLs).<\/li>\n\n\n\n<li>Evitar inyecci\u00f3n de HTML arbitrario en campos de usuario.<\/li>\n\n\n\n<li>Revisar que no haya <strong>fetch<\/strong> externos innecesarios.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>En mi caso, esta <strong>checklist<\/strong> me salv\u00f3 de subir a producci\u00f3n un bloque que se ve\u00eda genial pero introduc\u00eda <strong>estilos globales<\/strong> que pisaban botones del tema. Correg\u00ed el prompt pidiendo nombres de clase con prefijo (<code>.miMarca-cta__btn<\/code>).<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Casos de uso que s\u00ed aportan valor (con prompts de ejemplo)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Galer\u00eda\/carrusel ligero<\/h3>\n\n\n\n<p><strong>Prompt:<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cBloque \u2018Galer\u00eda Ligera\u2019 con rejilla responsive 2\u20133 columnas, lightbox accesible, paginaci\u00f3n con botones visibles y <code>aria-controls<\/code>. Lazy load de im\u00e1genes, sin dependencias externas.\u201d<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Para qu\u00e9 sirve:<\/strong> portfolios, destacados de blog, prensa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tarjetas de producto (cat\u00e1logo simple)<\/h3>\n\n\n\n<p><strong>Prompt:<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cBloque \u2018Tarjetas de Producto\u2019 con imagen, t\u00edtulo, precio y bot\u00f3n. Soporte para 3\u20136 items. A\u00f1ade marcado sem\u00e1ntico b\u00e1sico y opci\u00f3n de resaltar una tarjeta.\u201d<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Para qu\u00e9 sirve:<\/strong> cat\u00e1logos peque\u00f1os, servicios paquetizados.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque CTA hero<\/h3>\n\n\n\n<p><strong>Prompt:<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cBloque \u2018CTA Hero\u2019 con H1, p\u00e1rrafo breve y bot\u00f3n primario. Fondo con gradiente suave, tama\u00f1o fluido, contraste AA, foco visible y soporte para <code>prefers-reduced-motion<\/code>.\u201d<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Para qu\u00e9 sirve:<\/strong> landings, campa\u00f1as.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>En mi experiencia, los <strong>bloques de CTA<\/strong> fueron los m\u00e1s agradecidos: con 2\u20133 iteraciones de prompt obtuve variantes listas para test A\/B en minutos.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Telex vs page builders (Elementor, Beaver, etc.): cu\u00e1ndo usar cada uno<\/h2>\n\n\n\n<p><strong>Telex (IA \u2192 bloque)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A favor:<\/strong> velocidad de prototipado, control de c\u00f3digo del bloque, peso reducido si ajustas CSS\/JS, nativa integraci\u00f3n con editor de bloques.<\/li>\n\n\n\n<li><strong>En contra:<\/strong> estado <strong>experimental<\/strong>, curva de \u201cprompt-ingenier\u00eda\u201d, puede requerir retoques de un dev para producci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p><strong>Page builders<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A favor:<\/strong> interfaz visual madura, ecosistema de widgets, plantillas \u201carrastrar y soltar\u201d, control granular sin tocar c\u00f3digo.<\/li>\n\n\n\n<li><strong>En contra:<\/strong> riesgo de <strong>bloat<\/strong>, estilos globales conflictivos, dependencia del builder a largo plazo.<\/li>\n<\/ul>\n\n\n\n<p><strong>Regla pr\u00e1ctica<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Prototipo r\u00e1pido o bloque reusable<\/strong> que quieres dominar a nivel de c\u00f3digo \u2192 <strong>Telex<\/strong>.<\/li>\n\n\n\n<li><strong>Landing compleja hoy mismo<\/strong> con muchas variaciones visuales y sin dev implicado \u2192 <strong>builder<\/strong>.<br>A m\u00ed me funcion\u00f3 crear con Telex el bloque base (CTA\/galer\u00eda) y luego usarlo en plantillas sin cargar un builder completo.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Limitaciones actuales y c\u00f3mo mitigarlas (experimental \u2260 producci\u00f3n)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Calidad variable del output:<\/strong> mitiga con prompts m\u00e1s espec\u00edficos (estructura, BEM, AA, motion).<\/li>\n\n\n\n<li><strong>Estilos que \u201csangran\u201d:<\/strong> pide prefijos de clase y \u201cscope estricto\u201d.<\/li>\n\n\n\n<li><strong>Accesibilidad incompleta:<\/strong> a\u00f1ade en el prompt requisitos de labels, foco y roles.<\/li>\n\n\n\n<li><strong>Compatibilidad con tu tema:<\/strong> prueba siempre en <strong>Playground<\/strong> y en un <strong>staging<\/strong>.<\/li>\n\n\n\n<li><strong>Mantenibilidad:<\/strong> documenta el bloque (README breve) y fija naming consistente.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Yo tambi\u00e9n me top\u00e9 con <strong>fallos iniciales<\/strong>: un carrusel que ignoraba <code>prefers-reduced-motion<\/code> y un pricing que inclu\u00eda CSS global. Bast\u00f3 con re-prompting y un repaso manual para dejarlo fino.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Mejores pr\u00e1cticas para SEO t\u00e9cnico en bloques generados por IA<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sem\u00e1ntica HTML:<\/strong> usa H2\/H3 donde toque; listas <code>&lt;ul><\/code> para bullets; evita <code>&lt;div><\/code>s sin rol.<\/li>\n\n\n\n<li><strong>Im\u00e1genes:<\/strong> <code>alt<\/code> \u00fatil, <code>loading=\"lazy\"<\/code>, ancho\/alto definidos para evitar CLS.<\/li>\n\n\n\n<li><strong>Datos estructurados (cuando aplique):<\/strong> FAQPage, Product, Article (no abuses).<\/li>\n\n\n\n<li><strong>Rendimiento:<\/strong> CSS cr\u00edtico en el bloque, evita fuentes externas; comprime SVG\/PNG.<\/li>\n\n\n\n<li><strong>Accesibilidad = SEO:<\/strong> muchos problemas de SEO derivan de accesibilidad pobre (foco, contraste).<\/li>\n\n\n\n<li><strong>I18n:<\/strong> textos en <code>block.json<\/code> y cadenas traducibles (si el bloque lo permite).<\/li>\n\n\n\n<li><strong>Naming can\u00f3nico:<\/strong> <code>mi-marca\/[tipo-bloque]<\/code> facilita gobernanza y evita choques.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Cuando ped\u00ed expl\u00edcitamente \u201c<strong>estructura sem\u00e1ntica<\/strong> y <strong>atributos alt<\/strong> significativos\u201d, el bloque resultante posicion\u00f3 mejor en pruebas simples (visibilidad y engagement en org\u00e1nico).<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Problemas comunes y c\u00f3mo depurarlos en Playground<\/h2>\n\n\n\n<p><strong>El bloque no aparece en el editor<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Revisa <code>block.json<\/code>: <code>name<\/code>, <code>category<\/code>, <code>editorScript<\/code>.<\/li>\n\n\n\n<li>Conflicto de namespaces: cambia <code>mi-marca\/*<\/code>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Estilos rotos en front pero no en editor<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Asegura <code>style<\/code> separado de <code>editorStyle<\/code>.<\/li>\n\n\n\n<li>Prefijos de clase y evita reglas globales.<\/li>\n<\/ul>\n\n\n\n<p><strong>Error de build en consola<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Simplifica el bloque: quita dependencias, pide CSS puro.<\/li>\n\n\n\n<li>Valida que no haya imports no resueltos.<\/li>\n<\/ul>\n\n\n\n<p><strong>Accesibilidad fallida<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A\u00f1ade <code>aria-label<\/code> y controla el foco.<\/li>\n\n\n\n<li>Usa botones reales (<code>&lt;button><\/code>) para interacciones.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Mi aprendizaje clave: <strong>Playground<\/strong> es perfecto para reproducir fallos r\u00e1pido y ajustar prompts sin tocar tu entorno real.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Roadmap y futuro posible de la IA en WordPress<\/h2>\n\n\n\n<p>Si Telex sigue el camino l\u00f3gico, veremos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mejor ajuste fino<\/strong> de prompts (par\u00e1metros visuales y de accesibilidad predefinidos).<\/li>\n\n\n\n<li><strong>Plantillas certificadas<\/strong> (bloques \u201cgolden\u201d con garant\u00edas de rendimiento).<\/li>\n\n\n\n<li><strong>Integraci\u00f3n con patrones<\/strong> y librer\u00edas de dise\u00f1o (design tokens compartidos).<\/li>\n\n\n\n<li><strong>Auditor\u00eda autom\u00e1tica<\/strong> (SEO, a11y, performance) previa a empaquetar el .zip.<\/li>\n<\/ul>\n\n\n\n<p>La visi\u00f3n que mencion\u00f3 Mullenweg \u2014IA para <strong>democratizar la publicaci\u00f3n<\/strong>\u2014 tiene todo el sentido. Yo ya lo he vivido a peque\u00f1a escala: pas\u00e9 de \u201cnecesito un dev para un bloque sencillo\u201d a \u201cpuedo <strong>prototiparlo<\/strong> hoy y pedir a un dev que lo <strong>endurezca<\/strong> ma\u00f1ana\u201d.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Sobre Telex<\/h2>\n\n\n\n<p>Telex no es magia, es <strong>aceleraci\u00f3n<\/strong>. Si lo tratas como un taller de prototipado (no como una f\u00e1brica lista para producci\u00f3n), te permitir\u00e1 validar bloques de Gutenberg en horas en lugar de d\u00edas. Mi consejo: <strong>Playground primero<\/strong>, prompts con requisitos <strong>concretos<\/strong> (accesibilidad, rendimiento, BEM), checklist rigurosa y un staging limpio antes de tocar producci\u00f3n. As\u00ed es como Telex empieza a cumplir su promesa: menos fricci\u00f3n, m\u00e1s iteraci\u00f3n y \u2014cuando madura\u2014 <strong>m\u00e1s publicaci\u00f3n de calidad<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<p><strong>\u00bfTelex es estable?<\/strong><br>No todav\u00eda. Est\u00e1 <strong>experimental<\/strong>. \u00dasalo para prototipos y valida a fondo antes de producci\u00f3n.<\/p>\n\n\n\n<p><strong>\u00bfNecesito saber React o PHP?<\/strong><br>No para empezar. Pero entender la <strong>estructura de un bloque<\/strong> te ayudar\u00e1 a pedir mejores cosas y a detectar problemas.<\/p>\n\n\n\n<p><strong>\u00bfQu\u00e9 viene en el .zip?<\/strong><br><code>block.json<\/code>, JS\/TS y CSS del bloque. Tr\u00e1talo como un mini-plugin.<\/p>\n\n\n\n<p><strong>\u00bfC\u00f3mo lo pruebo sin riesgo?<\/strong><br>Con <strong>WordPress Playground<\/strong> y despu\u00e9s en un <strong>staging<\/strong>.<\/p>\n\n\n\n<p><strong>\u00bfCompite con los page builders?<\/strong><br>M\u00e1s bien se complementa: Telex para <strong>bloques reutilizables<\/strong> y ligeros; builder para <strong>maquetaci\u00f3n visual<\/strong> r\u00e1pida y compleja.<\/p>\n\n\n\n<p><strong>Opini\u00f3n Personal<\/strong><\/p>\n\n\n\n<p>Telex me parece el experimento m\u00e1s interesante que ha llegado recientemente a WordPress. No porque sea perfecto \u2014no lo es\u2014, sino porque <strong>acerca la creaci\u00f3n de bloques de Gutenberg a quien no programa<\/strong>. He visto fallos en los primeros intentos y resultados irregulares, pero eso es normal en una etiqueta \u201cexperimental\u201d. Aun as\u00ed, la promesa es potente: <strong>describir un bloque, descargar un .zip y ponerlo a prueba<\/strong> en minutos.<\/p>\n\n\n\n<p>Lo que m\u00e1s valoro es el cambio de mentalidad: pasamos de \u201cesperar a un dev\u201d a <strong>prototipar hoy y endurecer ma\u00f1ana<\/strong>. En mi experiencia, probar en un entorno aislado (Playground o staging) y escribir prompts concretos \u2014estructura, accesibilidad, rendimiento\u2014 marca la diferencia entre un bloque \u201cmeh\u201d y uno realmente \u00fatil. \u00bfReemplaza a los page builders? No. <strong>Se complementa<\/strong>: Telex para bloques ligeros y reutilizables; builder cuando necesitas maquetaci\u00f3n visual compleja ya.<\/p>\n\n\n\n<p>Tambi\u00e9n hay que decirlo: <strong>no es para producci\u00f3n sin revisi\u00f3n<\/strong>. Pide prefijos de clase, revisa <code>block.json<\/code>, valida contraste y foco, y evita dependencias pesadas. Si Automattic mantiene el pulso y la comunidad aporta buenas pr\u00e1cticas, Telex puede ser la pieza que faltaba para democratizar de verdad la publicaci\u00f3n en WordPress.<\/p>\n\n\n\n<p>Ahora te leo: <strong>\u00bfya probaste Telex? \u00bfQu\u00e9 bloque crear\u00edas primero o qu\u00e9 dudas te frena?<\/strong> D\u00e9jalo en los comentarios y lo vemos juntos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Qu\u00e9 es Telex Telex es una herramienta de Automattic que convierte instrucciones en lenguaje natural en bloques de Gutenberg para WordPress. La idea es simple: escribes lo que quieres \u2014por ejemplo, \u201cun bloque de \u2018pricing\u2019 con tres columnas, botones claros y opci\u00f3n destacada\u201d\u2014 y Telex te devuelve un .zip listo para instalar como si fuera [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7011,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[491],"tags":[606,1084,197,1085],"class_list":["post-7010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-ia","tag-telex","tag-wordpress","tag-wp"],"_links":{"self":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/7010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/comments?post=7010"}],"version-history":[{"count":1,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/7010\/revisions"}],"predecessor-version":[{"id":7013,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/7010\/revisions\/7013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/media\/7011"}],"wp:attachment":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/media?parent=7010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/categories?post=7010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/tags?post=7010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}