Telex è uno strumento sperimentale e gratuito basato su browser di Automattic che utilizza l’intelligenza artificiale per generare blocchi di WordPress a partire da richieste in linguaggio naturale.
Invece di configurare prima un ambiente di sviluppo locale, poi gli strumenti di compilazione e infine creare un blocco a mano, Telex permette di descrivere ciò che vuoi, visualizzare un’anteprima del risultato e scaricare un plugin pronto da installare.
Questo articolo esplora l’aspetto pratico di questo flusso di lavoro e quali sono i tipi di blocchi per cui è realisticamente adatto oggi. Utilizzando due esempi reali, tra cui un blocco più complesso per il solo editor, vedremo fino a che punto Telex può portarti e dove è ancora necessario l’intervento manuale.
Come funziona Telex in pratica
Telex segue un flusso di lavoro in stile catena di montaggio. L’utente descrive il blocco che desidera utilizzando il linguaggio naturale, quindi Telex mappa la richiesta su un’impalcatura predefinita di blocchi WordPress basata sugli strumenti standard di creazione dei blocchi.
Da lì, l’intelligenza artificiale completa i dettagli come i metadati del blocco, l’interfaccia utente dell’editor, la logica di rendering e lo stile di base all’interno di questi vincoli. Il blocco viene poi costruito in un ambiente Node.js ospitato, visualizzato in anteprima in WordPress Playground e confezionato come plugin ZIP pronto per essere caricato.
Dietro le quinte, il plugin generato segue una struttura familiare, strettamente allineata a create-block:
block-name/
├── build/
├── src/
│ ├── edit.js
│ ├── save.js
│ ├── index.js
│ ├── style.scss
│ └── editor.scss
├── block.json
├── package.json
├── readme.md
└── .gitignoreCostruiamo il primo dei due blocchi.
Codifica Vibe di un blocco Embed ChatGPT
Forse ti ricorderai di quando era comune vedere una casella di ricerca di Google incorporata in una pagina web, che permetteva agli utenti di effettuare ricerche su un sito o sul web. Se hai bisogno di offrire ai tuoi utenti un’esperienza simile, ma questa volta con l’input di ChatGPT, ecco come fare.
Questo è un ottimo punto di partenza, in quanto puoi concentrarti sull’utilizzo dell’interfaccia utente di Telex senza preoccuparti troppo di un rapido perfezionamento o di molteplici iterazioni.
Inizia come utente loggato con le credenziali di wordpress.com e descrivi il tuo prompt iniziale. Ecco quello che abbiamo usato noi:
We would like to create a block that embeds the ChatGPT prompt to allow users to use it on the frontend.Vorremmo creare un blocco che incorpori il prompt ChatGPT per consentire agli utenti di utilizzarlo sul frontend.Vedi l’interfaccia utente qui sotto:
Telex crea il blocco incorporato di ChatGPT, che include la casella di input del prompt, la visualizzazione della cronologia dei messaggi e uno stile che si adatta all’estetica di ChatGPT.
A questo punto, il blocco mostra un messaggio di errore nell’interfaccia utente dell’editor.
Abbiamo chiesto a Telex di risolvere il problema e siamo stati guidati a generare una chiave API ChatGPT e ad aggiungerla al blocco tramite la barra laterale del gestore di blocchi. In questo caso, abbiamo ritenuto che l’utilizzo di un’API esterna per il blocco non introducesse un rischio di sicurezza ingiustificato.
Infine, abbiamo eseguito un rapido test sul frontend per verificare che tutto funzionasse come previsto.
Codifica di un blocco Social Draft
Per il nostro secondo esempio, spingiamo Telex un po’ più in là costruendo un blocco interno per la stesura dei post sui social media (che permetta di scrivere, rivedere ed esportare i contenuti per la programmazione senza dover ricorrere a uno strumento di collaborazione separato o a un piano a pagamento).
Possiamo iniziare con questa richiesta di configurazione:
Build a custom WordPress block named ‘Social Draft’. We will give you further instructions after you set up.Crea un blocco WordPress personalizzato denominato "Social Draft". Ti forniremo ulteriori istruzioni dopo che avrai completato la configurazione.Invece di sovraccaricare Telex di istruzioni, spesso è meglio utilizzare un altro strumento di intelligenza artificiale (come ChatGPT) per elaborare prima una serie di requisiti. Questo include la definizione degli obiettivi, l’aspetto del frontend, l’archiviazione dei dati, il modo in cui gli utenti interagiscono con il sistema e altro ancora. Ecco un estratto di ciò che ChatGPT ci ha risposto:
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.Obiettivo
Creare un blocco WordPress solo per editor che funga da strumento interno di preparazione dei contenuti per la stesura di post sui social media, simile a un flusso di lavoro leggero di Google Docs. Il blocco deve supportare testo, link, immagini e video incorporati, insieme alla selezione della piattaforma, versioni alternative del testo, stato del post, note e un pannello di esportazione ottimizzato per copiare i contenuti in una piattaforma di pubblicazione social.
Il blocco non deve mostrare nulla sul frontend. Deve esistere esclusivamente per i flussi di lavoro dell'editor, con save() che restituisce null.
Interfaccia utente dell'editor
L'area di bozza principale (“Copia”) deve essere implementata utilizzando InnerBlocks piuttosto che un singolo campo RichText, consentendo paragrafi, immagini, incorporamenti ed elenchi. Dovrebbe essere disponibile un'opzione per aggiungere due versioni alternative della copia, ciascuna con la stessa flessibilità della bozza principale. Semplici controlli di duplicazione una tantum dovrebbero consentire di copiare i contenuti tra le sezioni quando necessario.
Ulteriori controlli includono la selezione della piattaforma tramite caselle, un singolo campo di stato (Bozza, Pronto per la revisione, Pianificato o Non utilizzato) e un campo note in testo semplice.
Un pannello di esportazione deve estrarre il testo semplice dalla bozza o dall'alternativa selezionata, ignorare i media e fornire un modo per copiare il risultato con un solo clic. I media rilevati (immagini e incorporamenti) possono essere elencati come riferimento, ma non sono inclusi nell'output copiato.
Tutti i dati dovrebbero essere memorizzati all'interno del blocco utilizzando attributi e InnerBlocks. Non sono necessarie API esterne.Quando lo abbiamo dato a Telex, il risultato era l’interfaccia utente prevista, ma il blocco Social Draft non veniva visualizzato nell’area dei contenuti.
Molte volte è necessario passare attraverso diverse iterazioni quando si codifica a braccio, ed è quello che è successo.
Telex ha individuato dei problemi legati all’inizializzazione degli InnerBlocks e ha cercato di ristrutturare il blocco per risolvere il problema di rendering. Questi primi tentativi non hanno avuto successo e il blocco non è stato visualizzato correttamente nell’editor.
A questo punto, abbiamo chiesto a Telex se poteva elaborare la nostra richiesta, perché stavamo cominciando a perdere le speranze. Abbiamo ribadito che tutta l’interfaccia utente era esposta, tranne ciò di cui avevamo bisogno (la possibilità di aggiungere e visualizzare il blocco).
Telex ci ha risposto:
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.Capisco perfettamente la tua frustrazione e sì, posso assolutamente farlo. Ho individuato il problema: useBlockProps viene applicato, ma il blocco non rende visibile il contenuto nella tela. Il problema è che, sebbene disponiamo di tutti i controlli e della struttura, il wrapper del blocco non viene reso correttamente come contenitore visibile. Lasciami risolvere il problema assicurandomi che il blocco abbia una struttura e una visibilità adeguate.Abbiamo finalmente ottenuto la nostra UI e abbiamo iniziato un rapido test.
Dopo molti altri perfezionamenti, il risultato è stato un blocco funzionale in cui abbiamo realizzato il nostro MVP.
Svantaggi e soluzioni
Telex ha fatto molta strada in poco tempo, ma quando si inizia a usarlo al di là di semplici esperimenti, alcune sue limitazioni diventano evidenti. La maggior parte di queste non sono un vero e proprio ostacolo, ma determinano le modalità e i tempi di utilizzo di Telex.
- Non esiste un modo integrato per annullare un messaggio. Puoi chiedere a Telex di annullare una modifica, ma un approccio più affidabile è quello di salvare i prompt come testo o Markdown, di fare una versione dei file ZIP scaricati o di usare Git una volta spostato il blocco in locale.
- Telex (ri)genera immediatamente il blocco dopo che hai inviato una richiesta, senza la possibilità di annullare o ripristinare le versioni precedenti. Per evitare un’azione indesiderata, chiedi a Telex “Come faresti…” per il tuo prompt prima di costruire, riprovare o eseguire un comando simile.
- Telex non è un IDE. Sebbene sia possibile visualizzare il codice sorgente generato, non c’è modo di modificarlo direttamente all’interno di Telex.
- Telex è più adatto per il brainstorming e la prototipazione. Per l’uso in produzione, è meglio limitarsi a blocchi molto semplici in cui le integrazioni esterne, la logica complessa o le preoccupazioni legate alla sicurezza e alle prestazioni non sono una priorità.
Cosa aspettarsi per la costruzione di blocchi con l’AI
Telex offre un’idea di come l’intelligenza artificiale possa inserirsi nel moderno sviluppo di WordPress. Riduce il costo della sperimentazione, accorcia la distanza tra idea e prototipo e rende l’impalcatura dei blocchi più accessibile.
Allo stesso tempo, gli esempi mostrano che la comprensione dell’editor di blocchi è ancora importante.
Una volta che un blocco è pronto per andare oltre la sperimentazione, avere un ambiente WordPress affidabile come Kinsta rende più facile testare, iterare e distribuire con sicurezza.
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.
