O Telex é uma ferramenta experimental gratuita, baseada no navegador, da Automattic, que usa IA para gerar blocos do WordPress a partir de prompts em linguagem natural.
Em vez de configurar um ambiente de desenvolvimento local, configurar ferramentas de build e criar manualmente a estrutura de um bloco, o Telex permite que você descreva o que deseja, visualize o resultado e faça o download de um plugin pronto para instalação.
Este artigo explora como esse fluxo de trabalho funciona na prática e para quais tipos de blocos ele é realmente adequado hoje. Usando dois exemplos reais, incluindo um bloco mais complexo apenas para o editor, analisamos até onde o Telex pode levar você e onde a intervenção manual ainda é necessária.
Como o Telex funciona na prática
O Telex segue um fluxo de trabalho no estilo linha de montagem. Você descreve o bloco que deseja usando linguagem natural, e o Telex mapeia essa solicitação para uma estrutura predefinida de bloco do WordPress, baseada na ferramenta padrão create-block.
A partir daí, a IA preenche os detalhes, como os metadados do bloco, a interface do usuário do editor, a lógica de renderização e a estilização básica dentro dessas restrições. O bloco é então criado em um ambiente Node.js hospedado, visualizado no WordPress Playground e empacotado como um plugin em formato ZIP pronto para ser carregado.
Por trás dos bastidores, o plugin gerado segue uma estrutura familiar, fortemente alinhada ao create-block:
block-name/
├── build/
├── src/
│ ├── edit.js
│ ├── save.js
│ ├── index.js
│ ├── style.scss
│ └── editor.scss
├── block.json
├── package.json
├── readme.md
└── .gitignoreVamos criar o primeiro de dois blocos.
Vibe coding de um bloco Embed do ChatGPT
Você talvez se lembre de uma época em que era comum ver uma caixa de pesquisa do Google incorporada em uma página da web, permitindo que os usuários pesquisassem um site ou a web. Se você precisa oferecer esse tipo de experiência aos seus usuários, mas desta vez com entrada do ChatGPT, veja como fazer.
Este é um ótimo ponto de partida, pois você pode se concentrar em se familiarizar com a interface do Telex sem se preocupar muito com refinamento de prompts ou múltiplas iterações.
Comece como um usuário conectado com credenciais do wordpress.com e descreva seu prompt inicial. Aqui está o que usamos:
Queremos criar um bloco que incorpore o prompt do ChatGPT para permitir que os usuários o utilizem no frontend.Veja a interface abaixo:
O Telex cria o bloco de incorporação do ChatGPT, que inclui o campo de entrada do prompt, exibição do histórico de mensagens e estilização que corresponde à estética do ChatGPT.
Nesse ponto, o bloco exibe uma mensagem de erro na interface do editor.
Pedimos ao Telex que resolvesse o problema e fomos orientados a gerar uma chave API do ChatGPT e adicioná-la ao bloco por meio da barra lateral do Inspetor. Neste caso, entendemos que o uso de uma API externa para o bloco não representava um risco de segurança indevido.
Por fim, executamos um teste rápido no frontend para confirmar que tudo estava funcionando conforme o esperado.
Vibe coding de um bloco Social Draft
Para nosso segundo exemplo, vamos exigir um pouco mais do Telex criando um bloco interno para rascunho de publicações em redes sociais, algo que permita escrever, revisar e exportar conteúdo para agendamento sem precisar de uma ferramenta de colaboração separada ou de um plano pago para equipe.
Podemos começar com este prompt de configuração:
Crie um bloco personalizado do WordPress chamado “Social Draft”. Forneceremos instruções adicionais após a configuração inicial.Em vez de sobrecarregar o Telex com instruções, geralmente é melhor usar outra ferramenta de IA (como o ChatGPT) para elaborar um conjunto sólido de requisitos primeiro. Isso inclui definir seus objetivos, como o frontend deve se comportar, como os dados serão armazenados, como os usuários interagem com o sistema e muito mais. Veja um trecho do que o ChatGPT retornou:
Objetivo
Criar um bloco apenas para o editor que funcione como uma ferramenta interna de preparação de conteúdo para rascunhos de posts em redes sociais, semelhante a um fluxo de trabalho leve no Google Docs. O bloco deve oferecer suporte a texto, links, imagens e incorporações de vídeo, além de seleção de plataforma, versões alternativas do texto, status do post, notas e um painel de exportação otimizado para copiar o conteúdo para uma plataforma de publicação social.
O bloco não deve renderizar nada no frontend. Ele deve existir exclusivamente para fluxos de trabalho no editor, com a função save() retornando null.
Interface do editor (UI)
A área principal de rascunho (“Texto”) deve ser implementada usando InnerBlocks, em vez de um único campo RichText, permitindo parágrafos, imagens, incorporações e listas. Deve haver a opção de adicionar duas versões alternativas do texto, cada uma com a mesma flexibilidade do rascunho principal. Controles simples de duplicação única devem permitir copiar conteúdo entre seções quando necessário.
Controles adicionais incluem seleção de plataforma por meio de caixas de seleção, um único campo de status (Rascunho, Pronto para revisão, Agendado ou Não utilizado) e um campo de notas em texto simples.
Um painel de exportação deve extrair o texto simples do rascunho selecionado ou da versão alternativa, ignorar mídia e oferecer uma forma de copiar o resultado com um único clique. A mídia detectada, como imagens e incorporações, pode ser listada para referência, mas não deve ser incluída na saída copiada.
Todos os dados devem ser armazenados dentro do bloco usando atributos e InnerBlocks. Nenhuma API externa é necessária.Quando fornecemos isso ao Telex, o resultado foi uma interface conforme esperado, mas o bloco Social Draft não conseguia exibir conteúdo na área principal.
Muitas vezes, ao praticar vibe coding, é preciso passar por várias iterações, e foi exatamente o que aconteceu.
O Telex identificou problemas relacionados à forma como o InnerBlocks estava sendo inicializado e tentou reestruturar o bloco para corrigir a renderização. Essas primeiras tentativas não tiveram sucesso, e o bloco continuou sem exibir corretamente no editor.
Nesse ponto, perguntamos ao Telex se ele realmente conseguia processar nossa solicitação, pois estávamos perdendo confiança. Reiteramos que toda a interface estava exposta, exceto o que precisávamos, a capacidade de adicionar e exibir o bloco corretamente.
O Telex respondeu:
Eu entendo completamente sua frustração, e sim, consigo fazer isso. Consigo ver o problema: o useBlockProps está sendo aplicado, mas o bloco não está renderizando conteúdo visível no canvas. A questão é que, embora tenhamos todos os controles e estrutura, o wrapper do bloco não está sendo renderizado corretamente como um contêiner visível. Vou corrigir isso garantindo que o bloco tenha estrutura e visibilidade adequadas.Finalmente conseguimos nossa interface e iniciamos um teste rápido.
Após vários outros refinamentos, chegamos a um bloco funcional que atendeu nosso MVP.
Limitações e alternativas
O Telex evoluiu bastante em pouco tempo, mas quando você começa a usá-lo além de experimentos simples, algumas limitações ficam evidentes. A maioria não é impeditiva, mas influencia como e quando o Telex é mais adequado.
- Não há uma forma integrada de reverter um prompt. Você pode pedir ao Telex para desfazer uma alteração, mas uma abordagem mais confiável é salvar os prompts como texto ou Markdown, manter versionamento dos arquivos ZIP baixados ou usar Git após mover o bloco para um ambiente local.
- O Telex gera ou regenera o bloco imediatamente após o envio de um prompt, sem possibilidade de desfazer ou restaurar versões anteriores. Para evitar ações indesejadas, pergunte ao Telex “Como você faria…” antes de construir, refazer ou executar um comando semelhante.
- O Telex não é um IDE. Embora seja possível visualizar o código-fonte gerado, não há como editá-lo diretamente dentro do Telex.
- O Telex é mais adequado para brainstorming e prototipagem. Para uso em produção, é mais seguro limitá-lo a blocos muito simples, nos quais integrações externas, lógica complexa ou questões sensíveis de segurança e desempenho não sejam prioridade.
O que vem por aí na criação de blocos com IA
O Telex oferece uma visão de como a IA pode se integrar ao desenvolvimento moderno com WordPress. Ele reduz o custo de experimentação, encurta a distância entre ideia e protótipo e torna o processo de criação de blocos mais acessível.
Ao mesmo tempo, os exemplos apresentados aqui mostram que ainda é fundamental entender o editor de blocos.
Quando um bloco está pronto para ir além da experimentação, contar com um ambiente WordPress confiável, como o da Kinsta, facilita testar, iterar e lançar com confiança.
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.
