Via con i fuochi d’artificio! Con la versione 7.0, WordPress entra in una nuova era.
Si tratta probabilmente del più grande salto della piattaforma negli ultimi anni. Ora puoi collaborare con il tuo team in tempo reale, proprio come con Google Docs, e sfruttare una “architettura agentica” pronta a interagire con i Large Language Models (LLM).
Ma questo è solo l’inizio. Oltre alla collaborazione in tempo reale, WordPress 7.0 perfeziona l’interfaccia di amministrazione e introduce nuovi blocchi e strumenti per gli sviluppatori, come l’editor di post iframed e i blocchi PHP-only.
Prepariamoci un bel caffè e mettiamoci comodi perché questa sarà una lettura lunga e interessante.
Integrazione con AI
Con la versione 7.0, WordPress ha compiuto un importante salto evolutivo. Dimentica la piattaforma di blogging dei primi tempi. Oggi WordPress è una piattaforma collaborativa pronta per l’intelligenza artificiale.
Questo ambizioso progetto mira a fornire un’infrastruttura affidabile e sicura che consenta agli utenti di WordPress e agli sviluppatori di plugin di interagire con i Large Language Models (LLM) in modo standardizzato.
Il nuovo paradigma architettonico apre la strada a “WordPress agentico”. Si tratta di un cambiamento verso l’usabilità agentica in cui WordPress è in grado di interagire in modo nativo con agenti AI esterni tramite interfacce standardizzate e di facile utilizzo.
C’è molto da dire, ma prima di entrare nei dettagli dell’integrazione dell’IA, ecco alcune definizioni preliminari.
Architettura di WordPress AI: Concetti di base
Per comprendere l’architettura AI di WordPress 7.0, è essenziale identificare quattro componenti fondamentali.
- AI Client: un’infrastruttura AI indipendente dai provider che fornisce un modo standardizzato per far interagire il codice PHP e JS di WordPress con i modelli generativi di AI. Poiché l’AI Client è indipendente dal fornitore, il sistema può operare indipendentemente da un particolare fornitore di AI.
- AI provider: l’entità o l’azienda che sviluppa, possiede e gestisce i Large Language Models (LLM), come Anthropic, Google e OpenAI.
- Connettore: il componente che consente l’integrazione tra WordPress e i fornitori di AI. WordPress 7.0 include 3 connettori predefiniti – OpenAI, Anthropic e Google – accessibili da Impostazioni > Connettori.
- Abilities API: una nuova interfaccia funzionale progettata per consentire ai plugin, ai temi e al core di WordPress di esporre le proprie funzionalità in formati leggibili sia dall’uomo che dalla macchina, consentendo agli agenti di intelligenza artificiale di interagire con le funzionalità di WordPress (ad esempio, la creazione di post o l’aggiunta di un estratto) in modo strutturato. Questo è ciò che rende WordPress 7.0 nativamente agenziale.
Connettori
Le versioni precedenti di WordPress richiedevano un plugin per ogni provider di AI che volevi utilizzare sul sito. WordPress 7.0 introduce un’interfaccia per la gestione dei connettori AI unificata in Impostazioni > Connettori.
Non dovrai più incollare le chiavi API in più punti. Inserisci le chiavi una sola volta nella schermata Connettori e tutti i plugin compatibili potranno utilizzare la connessione attraverso il client AI.
Inoltre, la nuova interfaccia permette di passare da un provider AI all’altro da un’unica posizione senza rischiare di rompere nulla.
Nell’interfaccia Connettori, clicca sul pulsante Installa per il tuo provider di IA e inserisci la chiave API. Salva le impostazioni e sarà tutto pronto per interagire con il provider di AI sul tuo sito WordPress.
Se non sai da dove cominciare, installa e attiva il plugin AI Experiments. Questo plugin permette di aggiungere immagini in primo piano generate dall’AI, testi alt, estratti e altro ancora.
La nuova integrazione AI non solo introduce una nuova interfaccia utente, ma consente anche agli sviluppatori di registrare nuovi provider AI tramite l’API Connectors.
Gli sviluppatori possono ora registrare e gestire i connettori utilizzando le nuove classi e i nuovi metodi principali. Dopo la registrazione, ogni connettore appare come una scheda nella schermata Connettori.
La nuova API fornisce anche tre funzioni pubbliche.
wp_is_connector_registered(): verifica se un connettore è registrato.wp_get_connector(): recupera i dati di un singolo connettore.wp_get_connectors(): recupera tutti i connettori registrati.
Inoltre, il nuovo hook dell’azione wp_connectors_init permette di sovrascrivere i metadati dei connettori registrati.
Costruire con il client AI
La schermata Connettori fornisce l’interfaccia AI. L’AI Client è il motore dietro le quinte, un livello di astrazione unificato che standardizza il modo in cui WordPress interagisce con l’AI. Che si tratti di OpenAI, Anthropic o Google Gemini, il tuo codice rimane lo stesso. WordPress si occupa della traduzione, permettendoti di concentrarti sulla logica della tua applicazione.
La nuova funzione wp_ai_client_prompt() è il cuore di questa implementazione.
Ecco un semplice esempio in PHP:
$ai_response = wp_ai_client_prompt( "Create a professional post about WordPress" )
->generate_text();
if ( is_wp_error( $ai_response ) ) {
wp_die( $ai_response->get_error_message() );
}
echo wp_kses_post( $ai_response );L’esempio seguente mostra come definire lo schema di risposta per rendere i dati pronti all’uso.
$taxonomy_schema = array(
'type' => 'object',
'properties' => array(
'category' => array( 'type' => 'string' ),
'tags' => array(
'type' => 'array',
'items' => array( 'type' => 'string' )
),
),
'required' => array( 'category', 'tags' ),
);
$post_body = "Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.";
$json = wp_ai_client_prompt( "Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body" )
->using_temperature( 0.1 )
->as_json_response( $taxonomy_schema )
->generate_text();
if ( is_wp_error( $json ) ) {
return $json;
}
$suggested_taxonomies = json_decode( $json, true );In questo codice,
- Con
as_json_response(), WordPress si assicura che l’output sia un JSON puro conforme allo schema specificato ($taxonomy_schema). using_temperature()controlla la risposta dell’AI, rendendola più o meno deterministica (o casuale). Una temperatura bassa (0,1) produce una maggiore precisione, mentre una temperatura alta incoraggia una risposta più creativa.- L’array
$suggested_taxonomiesfornisce le categorie e i tag generati dall’AI. Puoi assegnarle automaticamente al tuo post.
Un output strutturato garantisce risultati prevedibili e fornisce un formato ideale da utilizzare con l’API Abilities. Ad esempio, il codice qui sopra potrebbe essere utilizzato per creare automaticamente un post con la categoria e i tag specificati.
L’API non supporta solo il testo. Grazie al metodo generate_image(), l’AI Client può anche generare immagini.
Puoi richiedere più risultati con un’unica chiamata. Ad esempio, puoi richiedere 3 opzioni di testo o di immagine passando un valore numerico ai metodi generate_text() o generate_image(): la chiamata a generate_image( 3 ) restituisce 3 varianti della stessa immagine.
L’API fornisce anche una serie di metodi che restituiscono informazioni aggiuntive. Questi metodi restituiscono un oggetto GenerativeAiResult contenente numerosi metadati, come l’utilizzo del token, il provider e il modello che ha risposto alla richiesta:
generate_text_result()generate_image_result()convert_text_to_speech_result()generate_speech_result()generate_video_result()
Come puoi vedere, questi metodi offrono una serie di funzionalità aggiuntive, tra cui il supporto per la conversione da testo a voce, vocale e video.
Altri metodi API includono:
using_max_tokens(): limita la lunghezza della risposta (ad esempio->using_max_tokens( 500 ))using_model_preference(): imposta un modello specifico (ad esempio->using_model_preference( 'gemini-2.5-flash' ))
Per un’analisi più approfondita e ulteriori esempi di codice, consulta la pagina del progetto WP AI Client su GitHub e le modifiche apportate in vista di WordPress 7.0.
Collaborazione in tempo reale nell’editor a blocchi
La collaborazione in tempo reale (RTC) nell’editor a blocchi è una delle funzionalità più attese del core. WordPress 7.0 introduce la possibilità di modificare lo stesso post o la stessa pagina in modo sincrono con più utenti, in modo simile a un Google Doc.
In sostanza, WordPress 7.0 passa da una piattaforma monoutente a una multiutente. Questo rappresenta un cambiamento fondamentale per i team editoriali che lavorano con WordPress.
Questo progetto si prefigge molteplici obiettivi:
- Consentire la collaborazione in tempo reale sui contenuti, compresi post, pagine e modelli.
- Consentire la modifica offline e la sincronizzazione dei dati.
- Fornire un’esperienza di sviluppo ottimizzata in modo che gli sviluppatori non debbano preoccuparsi dell’editing collaborativo, poiché i dati sono collaborativi e sincronizzati per impostazione predefinita.
Questa prima implementazione introduce una serie di nuove funzionalità che riguardano sia gli utenti dell’editor che gli sviluppatori. Vediamo di approfondire.
Collaborazione in tempo reale nell’editor a blocchi: cosa c’è di nuovo per gli utenti
Se lavori in un team, non dovrai più aspettare che qualche collega esca dall’editor per rivedere i contenuti o apportare modifiche, perché ora è possibile collaborare in tempo reale alla produzione dei contenuti.
Per iniziare, assicurati che l’opzione Abilita collaborazione in tempo reale sia selezionata nelle impostazioni di scrittura.
Quindi, apri l’editor di post con altri membri del tuo team o apri più sessioni con utenti diversi e inizia a esplorare.
Questi sono i punti chiave dell’editing collaborativo.
Consapevolezza
Quando più utenti collaborano allo stesso post o pagina, gli avatar degli altri utenti appaiono nella barra degli strumenti superiore dell’editor a blocchi.
Le modifiche apportate da ciascun collaboratore saranno visibili al resto del team in tempo quasi reale. Quando un utente lavora su un elemento di testo, il suo avatar apparirà anche nella barra degli strumenti del blocco e si muoverà insieme al cursore.
Inoltre, quando un utente aggiunge un nuovo blocco, questo viene evidenziato con un bordo colorato.
Sincronizzazione con il backend
Grazie all’integrazione con Yjs, il sistema gestisce i conflitti in modo intelligente utilizzando CRDT. Se due utenti lavorano sullo stesso blocco o scrivono la stessa parola nello stesso momento, il sistema sincronizza senza problemi le modifiche. Anche le modifiche alle proprietà del blocco, come i colori e i font, vengono gestite senza problemi.
Modifica offline e sincronizzazione dei dati
Il sistema funziona senza problemi anche quando sei offline. Quindi, se stai lavorando in aree con connessioni lente o se vai offline per qualche minuto, puoi continuare a scrivere. Quando il segnale tornerà, le tue modifiche saranno unite a quelle degli altri e non ci saranno sovrascritture indesiderate.
L’annullamento di un’operazione (Cmd+Z) annullerà solo le tue ultime modifiche, non quelle fatte dai tuoi colleghi un secondo prima.
Non dovrai più preoccuparti di salvare continuamente il tuo lavoro per condividerlo con gli altri. La sincronizzazione avviene quasi in tempo reale. Gli altri utenti connessi che lavorano sugli stessi contenuti vedranno le tue modifiche quasi istantaneamente.
Collaborazione in tempo reale nell’edito a blocchi: un’introduzione per gli sviluppatori
Il nuovo sistema di collaborazione in tempo reale di WordPress si basa su Yjs, “un CRDT ad alte prestazioni per la creazione di applicazioni collaborative che si sincronizzano automaticamente”.
Yjs è una libreria JavaScript per la gestione di dati, come i contenuti di WordPress, che devono essere modificati simultaneamente da più persone in tempo reale. È il motore di sincronizzazione per la collaborazione in tempo reale nell’editor.
In termini tecnici, Yjs è un’implementazione di CRDT (Conflict-free Replicated Data Types):
Espone il suo modello CRDT interno come tipi di dati condivisi che possono essere manipolati simultaneamente. I tipi condivisi sono simili ai tipi di dati comuni come
MapeArray. Possono essere manipolati, generare eventi quando avvengono modifiche e unirsi automaticamente senza conflitti di fusione.
Prima di WordPress 7.0, i post venivano memorizzati come una singola stringa HTML statica. Yjs utilizza il formato Delta per descrivere il contenuto e le modifiche apportate da ciascun collaboratore. I Delta sono un formato di dati che descrive i documenti senza la complessità dell’HTML, comprese le informazioni di formattazione.
Ad esempio, consideriamo il testo “Hello WordPress”. Il seguente oggetto JSON descrive una modifica del peso del carattere:
[
{ "retain": 6 }, // Skip "Hello " (6 characters)
{ "retain": 9, "attributes": { "bold": true } } // Apply bold to the next 9 characters
]Se un utente aggiunge “7.0” alla fine della stringa, l’oggetto JSON risultante è il seguente:
[
{ "retain": 15 },
{ "insert": " 7.0" }
]L’utilizzo di Yjs e l’implementazione del Formato Delta offrono diversi vantaggi:
- Previene tutti i tipi di conflitti. Se più utenti modificano lo stesso paragrafo o addirittura la stessa parola, WordPress può identificare chi ha scritto ogni lettera. Questo permette di effettuare revisioni granulari e apre la strada al ripristino delle revisioni a livello di blocco.
- Garantisce una precisione chirurgica e una sincronizzazione istantanea. Se modifichi una sola parola in un articolo di 20.000 parole, viene registrata solo quella piccola modifica. Questo permette la sincronizzazione istantanea dei contenuti per tutti gli utenti connessi.
- Lo stesso approccio permette di sincronizzare le impostazioni dei blocchi (come i colori o le opzioni di layout) come attributi di mappa condivisi.
Per una panoramica approfondita su ciò che gli sviluppatori devono sapere per consentire la collaborazione nell’editor, consulta la nota di sviluppo e questa discussione sull’editing collaborativo.
Infrastruttura e trasporto dei dati: perché l’host è importante
Il fatto che più utenti lavorino contemporaneamente sul backend di WordPress può mettere a dura prova le risorse di un sito, quindi è importante capire cosa succede dietro le quinte durante l’editing collaborativo.
Come abbiamo già detto, l’interfaccia dell’editor e il motore Yjs costituiscono la base per la collaborazione in tempo reale. Tuttavia, non abbiamo ancora spiegato come vengono trasportati i dati tra gli utenti. Questo processo è gestito dal Transport Layer, che trasmette le modifiche dal browser al server e poi agli altri utenti che modificano lo stesso contenuto.
Tra le tante opzioni disponibili per il livello di trasporto, HTTP Polling, WebSockets e WebRTC sono quelle che hanno ricevuto maggiore attenzione. Ogni opzione ha i suoi pro e i suoi contro.
- Il polling HTTP è apprezzato per il suo supporto universale – funziona su tutti i server PHP e gli ambienti di hosting condiviso senza bisogno di ulteriori configurazioni – ma è meno efficiente a causa dell’elevato overhead delle continue richieste HTTP.
- I WebSockets eccellono per l’efficienza delle risorse e la bassa latenza, con modifiche che appaiono istantaneamente, ma richiedono un software specializzato che non è disponibile sugli host di base.
- WebRTC è molto efficiente per piccoli gruppi di utenti perché i browser inviano i dati direttamente l’uno all’altro senza un server centrale per la sincronizzazione. Tuttavia, è considerato inaffidabile.
Alla fine si è deciso di implementare la soluzione HTTP Polling. Sebbene questa soluzione garantisca la collaborazione su qualsiasi server, comporta un sovraccarico maggiore ed è l’opzione meno “in tempo reale”. WordPress è stato progettato per funzionare su qualsiasi tipo di hosting condiviso, da quello di base alle grandi infrastrutture aziendali, per questo motivo è stata scelta questa soluzione.
Tuttavia, il livello di trasporto è progettato per essere sostituito o ampliato. I fornitori di hosting o i plugin specializzati possono sostituire il sistema di polling predefinito con un provider WebSocket ad alte prestazioni.
Nuovi blocchi e strumenti di progettazione
WordPress 7.0 introduce nuovi blocchi e strumenti di progettazione che miglioreranno notevolmente l’esperienza di editing. Ecco quali sono le novità e come cambieranno i flussi di lavoro creativi.
Nuovo blocco Breadcrumb
WordPress 7.0 introduce un nuovo blocco Breadcrumb che riflette la gerarchia della pagina visualizzata.
Il nuovo blocco include un componente dinamico che interroga la struttura dei dati di WordPress per identificare automaticamente la posizione attuale degli utenti del sito in base alla gerarchia della pagina (parent/child) o ai termini della tassonomia del post.
Nell’immagine sottostante, il blocco Breadcrumb mostra la gerarchia delle categorie di un normale post del blog.
Il blocco Breadcrumb supporta anche il Query Loop. Quando aggiungi un blocco Breadcrumb a un blocco Query Loop, il blocco visualizza i percorsi dei singoli post estratti dalla query.
Il blocco Breadcrumbs ha alcune opzioni di configurazione che ti permettono di:
- Mostrare/nascondere il link alla pagina iniziale come punto di partenza della navigazione.
- Mostrare/nascondere il breadcrumb corrente.
- Cambiare il separatore dei breadcrumb.
- Mostrare il breadcrumb pagina iniziale.
- Selezionare la gerarchia dei post (predefinita) o la gerarchia dei termini della tassonomia.
Il blocco Breadcrumb supporta gli strumenti di progettazione di Gutenberg e introduce due filtri che consentono agli sviluppatori di controllare programmaticamente i breadcrumb.
Il nuovo filtro block_core_breadcrumbs_post_type_settings permette agli sviluppatori di specificare quale tassonomia e quale termine devono essere utilizzati nei breadcrumb quando un post ha più tassonomie o termini.
Nell’esempio seguente, il filtro viene utilizzato per visualizzare i tag invece delle categorie:
add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {
if ( 'post' === $post_type ) {
$settings['taxonomy'] = 'post_tag';
}
return $settings;
}, 10, 2 );Il filtro block_core_breadcrumbs_items consente agli sviluppatori di modificare, aggiungere o rimuovere elementi dal percorso finale dei breadcrumb prima che venga reso. Ecco alcuni casi d’uso:
- Sostituire l’icona della Home con un’immagine (un SVG, il logo dell’azienda, ecc.) per risparmiare spazio o per rendere il blocco più coerente con il branding del sito.
- Accorciare il titolo di un post nei breadcrumb se è troppo lungo.
- Inserire categorie o termini personalizzati, ad esempio, forzando un passaggio nel percorso dei breadcrumb.
Il codice seguente utilizza il nuovo filtro per troncare le etichette dei breadcrumb quando la lunghezza supera i 20 caratteri:
add_filter( 'block_core_breadcrumbs_items', function( $items ) {
foreach ( $items as $key => $item ) {
if ( mb_strlen( $item['label'] ) > 20 ) {
// Truncate the string to 17 characters and append '...'
$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );
}
}
return $items;
}, 10, 1 );Per una panoramica più approfondita sui filtri a blocchi di Breadcrumbs e altri esempi di codice, consulta la nota di sviluppo.
Nuovo blocco Icona
Il nuovo blocco Icona permette di aggiungere icone SVG ai contenuti. Il nuovo blocco mira a fornire una soluzione standard nativa per gestire il markup e garantire la coerenza dell’accessibilità, senza richiedere l’installazione di plugin di terze parti solo per aggiungere alcune icone.
Al momento, il nuovo blocco Icona è dotato di un set predefinito dal quale è possibile selezionare le proprie icone. Tuttavia, in futuro è prevista la possibilità per gli utenti di registrare set di icone di terze parti.
Il blocco si basa su una nuova API di registrazione delle icone SVG lato server. Questo garantisce che gli aggiornamenti del registro delle icone vengano propagati a tutti gli utenti senza errori. L’introduzione del nuovo blocco Icona è abbinata a un nuovo endpoint API /wp/v2/icons.
Sovrapposizioni di navigazione personalizzabili
Prima di WordPress 7.0, i menu di navigazione per dispositivi mobili erano fissi e non era possibile modificarne il design, il layout o il contenuto predefinito. WordPress 7.0 introduce gli overlay di navigazione personalizzabili, dandoti il pieno controllo sui tuoi menu di navigazione. Puoi creare un menu in sovrimpressione utilizzando blocchi e modelli e un nuovo blocco di chiusura dell’overlay di navigazione per aggiungere un pulsante di chiusura in qualsiasi punto dell’overlay di navigazione.
Tecnicamente, le sovrapposizioni di navigazione sono parti di un template e una volta creato il tuo, lo troverai nella sezione Pattern della barra laterale dell’Editor del sito. Ogni sovrapposizione è assegnata a un blocco di navigazione, ma puoi assegnare più blocchi di navigazione allo stesso overlay.
In pratica, si tratta di una tela di blocchi che può contenere qualsiasi tipo di blocco. Puoi aggiungere un blocco di navigazione, ma sta a te decidere quali blocchi aggiungere. Potrebbero essere icone sociali, un campo di ricerca, il logo del sito e molto altro ancora.
Gli overlay di navigazione possono essere utilizzati solo nel blocco di navigazione. Per evitare l’uso accidentale in altre parti di un template, sono esclusi dal block inserter.
Puoi creare un overlay di navigazione personalizzato dalla sezione Overlay nella barra laterale del blocco Navigazione nell’Editor del sito.
Quando selezioni il blocco Navigazione, la barra laterale del template mostra le impostazioni dell’overlay di navigazione suddivise in due sezioni. La sezione Contenuto mostra i tipi di blocco inclusi nell’overlay, mentre la sezione Design offre una serie di design predefiniti.
La barra laterale del blocco è divisa in due schede, una per le impostazioni e l’altra per gli stili del template Overlay di navigazione.
Nella scheda Stili della scheda Blocco dell’overlay di navigazione puoi personalizzare l’aspetto del tuo overlay impostando i colori, l’immagine di sfondo, la tipografia, le dimensioni, il bordo e l’ombra.
Gli sviluppatori di temi possono facilmente aggiungere ai loro temi degli overlay di navigazione predefiniti. È possibile fornire sia una parte di template di overlay predefinito (l’overlay stesso) sia una serie di template di overlay (design predefiniti che appaiono quando si modifica un overlay di navigazione).
Per una panoramica più approfondita e per esempi di codice, consulta la nota di sviluppo ufficiale e questa richiesta di pull.
Miglioramenti al blocco Paragrafo
Diverse nuove aggiunte al blocco Paragrafo offrono una maggiore flessibilità nello stile del testo.
Innanzitutto, una nuova opzione nelle impostazioni della Tipografia permette di impostare il rientro della prima riga.
Puoi controllare il rientro del testo per singoli paragrafi o applicarlo a tutti i paragrafi tramite le impostazioni dello Stile globale in Editor > Stili > Blocchi > Paragrafo.
Gli sviluppatori di temi possono attivare/disattivare e controllare in modo granulare il rientro delle righe nel file theme.json utilizzando la nuova proprietà textIndent.
Il blocco Paragrafo ora supporta anche l’allineamento ampio e completo. L’immagine seguente mostra il nuovo controllo Allineamento.
Un’altra utile aggiunta al blocco Paragrafo è il supporto delle colonne di testo. Questa nuova opzione è disponibile nelle impostazioni della Tipografia nella barra laterale del blocco.
Video di sfondo incorporati per il blocco Copertina
Con WordPress 7.0, puoi utilizzare i video incorporati, come quelli di YouTube o Vimeo, come video di sfondo per il blocco Copertina. In precedenza era possibile utilizzare solo i video caricati.
Questa funzione è particolarmente utile per chi vuole risparmiare banda ospitando i video su piattaforme esterne.
Per aggiungere un video ospitato, clicca su Aggiungi media nella barra degli strumenti del blocco di copertina, quindi seleziona Incorpora video da URL.
Ti verrà chiesto di inserire l’URL del video.
Il video incorporato apparirà come video di sfondo per il blocco Copertina, sia nell’editor che nel frontend.
Blocco griglia reattivo
Il blocco Griglia è stato aggiornato per essere reattivo in modo nativo. Nelle versioni precedenti di WordPress, gli utenti potevano scegliere solo tra le modalità Auto e Manuale. In modalità automatica, potevi impostare la larghezza minima delle colonne per rendere il blocco responsive. In modalità Manuale, potevi impostare il numero di colonne, che rimaneva fisso.
A partire da WordPress 7.0, il blocco Griglia è nativamente reattivo. Il numero di colonne ora si comporta come se fosse il massimo e puoi regolare con precisione la dimensione minima delle colonne e il numero massimo di colonne mantenendo il blocco reattivo.
Supporto CSS personalizzato per i singoli blocchi
Ora è possibile aggiungere stili personalizzati a istanze di blocchi specifici dalle impostazioni avanzate del blocco.
Quando aggiungi stili personalizzati a un blocco, WordPress aggiunge automaticamente la classe has-custom-css. Se ispezioni il blocco nell’editor di codice, vedrai un blocco di codice simile al seguente:
<!-- wp:image {
"id":848,
"sizeSlug":"large",
"linkDestination":"none",
"style":{ "css":"border: 4px solid blue;" }
} -->
<figure class="wp-block-image size-large has-custom-css">
<img src="http://example.com/wp-content/uploads/2026/03/example-768x1024.jpg" alt=" class="wp-image-848"/>
</figure>
<!-- /wp:image -->Lo stile personalizzato viene caricato dopo i valori predefiniti di WordPress e gli stili globali, assicurando che le modifiche apportate non influiscano sull’aspetto di altre istanze dello stesso blocco.
Visibilità del blocco in base al viewport
In WordPress 7.0, puoi nascondere o mostrare i blocchi individualmente a seconda che l’utente si trovi su un dispositivo mobile, tablet o desktop.
Questa prima iterazione aggiunge la nuova proprietà viewport a blockVisibility.
{
"metadata": {
"blockVisibility": {
"viewport": {
"mobile": false,
"tablet": true,
"desktop": true
}
}
}
}Puoi attivare il controllo della visibilità aggiungendo l’oggetto JSON di cui sopra al blocco direttamente nell’editor di codice o tramite la palette dei comandi.
Una volta abilitato il controllo della visibilità del blocco, puoi accedere alle opzioni di visibilità del blocco aprendo la maschera dalla barra degli strumenti del blocco, dalla barra laterale del block inspector o dalla palette dei comandi.
Le versioni future dovrebbero includere breakpoint configurabili e l’integrazione con theme.json per la visibilità dei blocchi.
Opzioni di stile per il blocco Matematica
Prima di WordPress 7.0, gli utenti non potevano personalizzare l’aspetto del blocco Matematica. La nuova versione di WordPress aggiunge le opzioni di stile Colore, Tipografia, Dimensioni e Bordo per il blocco Matematica.
L’immagine seguente fornisce un esempio di stile del blocco Matematica:
Aggiornamenti del blocco HTML
Il blocco HTML è stato completamente riprogettato. Ora, quando inserisci un blocco HTML nel tuo contenuto, appare una finestra modale con tre schede separate per l’inserimento di HTML, CSS e JavaScript.
Se hai bisogno di più spazio, un pulsante nell’angolo superiore destro della finestra modale permette di attivare o disattivare la modalità a schermo intero.
Miglioramenti al blocco Immagine
Il blocco Immagine è stato aggiornato con diversi miglioramenti che offrono maggiori opzioni di personalizzazione.
Il blocco Immagine ora supporta il controllo del rapporto di aspetto per l’allineamento ampio e completo (PR #74519). Questa nuova funzione è disponibile nella scheda Stili della barra laterale delle impostazioni del blocco.
Un’altra utile aggiunta è il controllo del punto focale. Grazie a questa nuova funzione, puoi regolare la parte visibile di un’immagine quando viene ritagliata (PR #73115)
Il componente per il ritaglio delle immagini nell’editor è stato spostato in un pacchetto specifico e ora può essere utilizzato in tutta l’applicazione e non solo nell’editor a blocchi (PR #73277).
Esperienza di amministrazione migliorata
Con il rilascio di WordPress 7.0, l’area di amministrazione di WordPress è stata ridisegnata e modernizzata. Si tratta di un miglioramento sostanziale dell’esperienza di amministrazione volto a rendere la navigazione del sito più fluida, coerente e visivamente accattivante.
Miglioramenti visivi
Quando apri il pannello di amministrazione di WordPress 7.0, noterai immediatamente come gli elementi dell’interfaccia siano diversi. Queste modifiche sono state ampiamente discusse e sono state ritenute necessarie per modernizzare l’aspetto della dashboard e ridurre le incongruenze tra la vecchia dashboard e l’editor a blocchi.
L’obiettivo è quello di modernizzare l’aspetto della bacheca, ridurre le incongruenze tra le vecchie schermate e le nuove schermate dell’editor a blocchi e dell’editor del sito e allineare meglio il sistema di design di WordPress nel suo complesso.
La riprogettazione visiva si è concentrata su una serie di componenti fondamentali che appaiono in tutta l’area di amministrazione di WordPress. Come ha sottolineato Fabian Kaegy, si tratta di modifiche puramente visive senza aggiornamenti architettonici o funzionali.
Puoi esplorare i nuovi menu, pulsanti e transizioni di WordPress 7.0 nel sistema di design ufficiale di WordPress su Figma.
Revisioni visive
Le revisioni sono ora presentate come anteprime in un’interfaccia simile a quella dell’editor che evidenzia le differenze visive. Non è più necessario leggere l’intero articolo per vedere cosa è cambiato, perché le differenze tra le versioni dello stesso contenuto sono ora evidenziate a livello di blocco. Il sistema identifica anche i cambiamenti di stile, rendendo più facile individuare le modifiche alla palette dei colori, alla tipografia, alle dimensioni e così via.
Colori diversi identificano diversi tipi di modifiche:
- Il giallo evidenzia un blocco o un testo che è stato modificato.
- Il rosso evidenzia un blocco o un testo che è stato cancellato.
- Il verde identifica un blocco o un testo che è stato aggiunto.
Con le revisioni, puoi vedere tutta la potenza di Yjs perché quando si ripristina una versione precedente, il sistema ripristina solo le modifiche apportate al documento su base individuale, non l’intero contenuto.
Si prevede che il sistema verrà migliorato con i prossimi aggiornamenti e che ci attendiamo nuove e potenti funzionalità. Per una panoramica più dettagliata di ciò che è stato fatto e di ciò che dovremmo vedere in futuro, dai un’occhiata a questo post di Mathias Ventura del 2023 e ai numeri #60096 e #61161.
View Transitions
Con WordPress 7.0, il pacchetto boot – il componente responsabile dell’inizializzazione dell’editor e della gestione delle transizioni tra le diverse schermate dell’amministrazione – riceve un aggiornamento significativo. Grazie a questa nuova infrastruttura, la navigazione tra le schermate della dashboard non richiede più un brusco ricaricamento della pagina, ma presenta eleganti transizioni che migliorano notevolmente l’esperienza dell’amministratore.
Tecnicamente parlando, implementando l’API View Transitions all’interno del pacchetto di avvio, WordPress è ora in grado di orchestrare le animazioni di zoom e slide durante i cambi di stato. In questo modo si evita di rimontare il canvas al cambio di percorso, garantendo una transizione fluida per la navigazione della root.
Cambiamenti per gli sviluppatori
WordPress 7.0 non è solo un aggiornamento visivo, ma introduce cambiamenti strutturali che semplificano drasticamente il flusso di lavoro degli sviluppatori. I punti salienti includono una riduzione dei CSS personalizzati grazie a un theme.json più potente, una gestione del layout più prevedibile grazie all’uso esteso degli iframe e nuovi strumenti dichiarativi per le interfacce di amministrazione, con API DataViews, DataForm e Field migliorate e una nuova API Abilities lato client che fornisce un modo standardizzato per esporre e interagire con le funzionalità delle applicazioni tramite JavaScript.
Se ti occupi di sviluppo, ecco i cambiamenti tecnici più significativi in arrivo con WordPress 7.0 che dovresti conoscere.
Supporto delle pseudo-classi nel file theme.json
Grandi notizie per gli sviluppatori di temi. A partire da WordPress 7.0, puoi utilizzare i selettori di pseudoclasse (:hover, :focus, :focus-visible e :active) direttamente sui tuoi blocchi e sulle variazioni di stile nel tuo theme.json.
Prima di WordPress 7.0, le pseudo-classi erano supportate solo per elementi HTML come pulsanti e link e il loro utilizzo a livello di blocco era possibile solo nel CSS personalizzato.
Per utilizzare le pseudo-classi a livello di blocco, devi aggiungere la configurazione dello stile nella sezione styles del file theme.json. Ecco un semplice esempio di utilizzo delle pseudo-classi per un blocco Pulsante (vedi anche PR #71418):
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"border": {
"width": "2px",
"style": "solid",
"color": "#000000"
},
":hover": {
"border": {
"color": "#ff4400"
},
"shadow": "0 8px 15px rgba(255, 68, 0, 0.3)",
"typography": {
"textDecoration": "underline"
}
},
":active": {
"filter": "brightness(0.8)",
"shadow": "none"
}
}
}
}
}L’immagine seguente mostra i diversi stati del blocco Pulsante.
Il seguente esempio mostra come utilizzare le pseudo-classi per una variazione del blocco nel file theme.json:
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"variations": {
"neon": {
"border": {
"width": "2px",
"style": "solid",
"color": "#00ff00"
},
"color": {
"text": "#00ff00",
"background": "transparent"
},
":hover": {
"border": {
"color": "#ffffff"
},
"shadow": "0 0 20px #00ff00, 0 0 40px #00ff00",
"color": {
"text": "#ffffff"
},
"typography": {
"textDecoration": "none"
}
},
":active": {
"filter": "brightness(1.5) blur(1px)",
"shadow": "0 0 10px #ffffff"
}
}
}
}
}
}
}Editor di post con iframe
A partire da WordPress 7.0, l’editor del post viene caricato in un iframe se il contenuto contiene solo blocchi che utilizzano la Block API versione 3 o superiore. Prima della versione 7.0, l’editor del post veniva caricato in iframe solo se tutti i blocchi registrati (anche quelli non inclusi nel contenuto) utilizzavano la Block API v3.
Il vantaggio principale del caricamento dell’editor in un iframe è che isola gli stili dell’interfaccia utente dell’editor da quelli del contenuto del tema. Senza un iframe, i fogli di stile dell’editor e del tema coesistono nello stesso documento, il che spesso porta a problemi di compatibilità e rende difficile per gli sviluppatori ottenere una coerenza visiva tra il backend e il frontend.
I principali vantaggi dell’editor di post con iframe includono:
Isolamento dello stile
- Nessun bleeding di CSS: l’iframe impedisce agli stili dell’amministrazione di WordPress di filtrare nel canvas dell’editor e viceversa, garantendo che l’aspetto dei blocchi non sia influenzato dall’interfaccia utente circostante.
- Nessuna necessità di reimpostare i CSS: gli sviluppatori non devono più reimpostare manualmente le regole CSS dell’amministrazione di WordPress per far coincidere il contenuto dell’editor con l’aspetto del frontend.
- Nessun prefisso: gli sviluppatori di temi non devono più aggiungere prefissi o selettori ad alta specificità alle loro regole CSS per evitare di danneggiare l’interfaccia di amministrazione.
Coerenza del layout
- Unità relative al viewport: senza iframe, unità come
vw(viewport width) evh(viewport height) si riferiscono all’intera pagina di amministrazione (compresa la barra laterale); dovrebbero essere utilizzate solo nel canvas dell’editor. - Query multimediali native: le query multimediali funzionano in modo nativo all’interno dell’iframe e riflettono le dimensioni del canvas dell’editor anziché dell’intera finestra del browser.
Esperienza di chi sviluppa
- Flusso di lavoro semplificato: gli autori di temi e plugin possono “trasportare” gli stili del frontend nell’editor con modifiche minime o nulle.
- Selezioni persistenti: gli iframe mantengono visibile la selezione nell’editor (ad esempio il testo selezionato) anche quando l’utente interagisce con elementi dell’interfaccia utente, come i controlli della barra laterale.
- Prevedibilità: l’editor con iframe risolve anche il problema dell’incoerenza visiva, evitando che l’editor cambi improvvisamente modalità in base ai plugin installati.
Compatibilità con il passato
Se un post contiene un blocco che utilizza versioni precedenti delle API, l’iframe viene automaticamente rimosso per garantire la compatibilità con il passato. Per trarre vantaggio da questi miglioramenti, gli sviluppatori di blocchi sono invitati ad aggiornare i loro blocchi alla versione 3 delle API dei blocchi.
Registrazione dei blocchi solo in PHP
WordPress 7.0 introduce la possibilità di registrare i blocchi esclusivamente tramite PHP con controlli dell’inspector generati automaticamente. Questa aggiunta snellisce i flussi di lavoro degli sviluppatori e incoraggia i siti che utilizzano temi ibridi o funzioni e shortcode PHP legacy ad adottare e sviluppare l’editor a blocchi. Ecco un esempio di blocco registrato tramite PHP:
/**
* Render callback (frontend and editor)
*/
function my_php_only_block_render( $attributes ) {
return '<div>
<h3>🚀 PHP-only Block</h3>
<p>This block was created with only PHP!</p>
</div>';
}
/**
* Register the block on the 'init' hook.
*/
add_action( 'init', function() {
register_block_type( 'my-plugin/php-only-test-block', array(
'title' => 'My PHP-only Block',
'icon' => 'welcome-learn-more',
'category' => 'text',
'render_callback' => 'my_php_only_block_render',
'supports' => array(
// Automatically registers the block in the Editor JS (previously auto_ssr)
'auto_register' => true,
),
) );
});Al momento in cui scriviamo, i blocchi PHP-only non sono dinamici e possono utilizzare solo controlli di configurazione specifici. Ma ci sono ancora molti casi d’uso da esplorare. Per questo motivo, abbiamo pubblicato un tutorial che tratta i blocchi PHP-only. Se sei uno sviluppatore o una sviluppatrice PHP, vale la pena darci un’occhiata.
Miglioramenti alle API DataViews, DataForm e Field
WordPress 7.0 introduce diversi miglioramenti alle DataViews, segnando un passo decisivo verso un’interfaccia amministrativa più moderna e modulare. Questo aggiornamento trasforma la gestione dei dati in un’esperienza altamente personalizzabile con un approccio dichiarativo. I developer possono ora creare complesse interfacce personalizzate semplicemente definendo le loro regole in formato JSON e permettendo al core di generare l’interfaccia.
Le nuove aggiunte includono:
- Miglioramenti nella visualizzazione dei dati (DataViews). Il nuovo layout Attività utilizza uno stile activity-feed-timeline. C’è anche una nuova modalità di visualizzazione compatta per gli elenchi.
- Miglioramenti ai moduli (DataForm). È ora disponibile il nuovo layout Dettagli e le icone di modifica per il layout Pannello. Queste icone possono essere configurate per apparire solo quando necessario.
- Miglioramenti al controllo dei dati (Field API). È disponibile la convalida automatica dei campi e nuove opzioni di personalizzazione della formattazione per i campi numerici e datari.
Di seguito trovi un esempio di come definire una vista che raggruppa e visualizza i dati in modalità compatta:
const myCompactView = {
type: 'list',
layout: {
density: 'compact'
},
groupBy: {
field: 'status',
direction: 'desc',
showLabel: true
}
};Per una panoramica dettagliata dei miglioramenti apportati alle API DataViews, DataForm e Field, consulta la nota di sviluppo.
Abilities API lato client
WordPress 6.9 ha introdotto l’API Abilities, una nuova interfaccia funzionale che fornisce un registro standardizzato per i plugin, i temi e il core di WordPress per interagire con WordPress esponendo le loro capacità in formati leggibili sia dall’uomo che dalla macchina.
Ora, WordPress 7.0 introduce un’API JavaScript che permette di implementare funzionalità lato client come la navigazione o l’aggiunta di blocchi ai tuoi contenuti direttamente da JavaScript, in modo sicuro e standardizzato.
La nuova API per le abilità lato client è suddivisa in due pacchetti.
@wordpress/core-abilities: se il tuo plugin ha bisogno di accedere alle abilità registrate dal server, dovrai collegarti al pacchetto@wordpress/core-abilities. Questo pacchetto recupera tutte le abilità e le categorie registrate tramite l’API REST e le memorizza nell’archivio@wordpress/abilities.@wordpress/abilities: Questo pacchetto fornisce l’archivio delle abilità senza caricare le abilità registrate sul server. Se il tuo plugin ha bisogno di registrare solo le abilità sul lato client e non richiede l’accesso alle abilità registrate sul server, deve richiedere@wordpress/abilities.
Per un’analisi dettagliata della nuova Abilities API lato client e per diversi esempi di codice, consulta la nota per gli sviluppatori.
Modifiche all’Interactivity API
L’Interactivity API è un’API nativa di WordPress che consente agli sviluppatori di aggiungere interattività ai loro siti web in modo standardizzato. WordPress 7.0 migliora l’Interactivity API con una nuova funzione watch() che permette di osservare programmaticamente i cambiamenti di stato. In precedenza, era possibile utilizzare solo la direttiva data-wp-watch per reagire ai cambiamenti di stato.
Altre modifiche apportate in WordPress 7.0 riguardano il core/router store.
Per una descrizione più dettagliata delle modifiche apportate all’Interactivity API, consulta la nota di sviluppo.
Altri cambiamenti per gli sviluppatori
Ecco alcune altre modifiche per gli sviluppatori che vale la pena menzionare:
- A partire da WordPress 7.0, gli attributi dei blocchi che supportano i Block Bindings supportano anche i Pattern Override. Ciò significa che puoi utilizzare gli override dei pattern con qualsiasi blocco, compresi i blocchi personalizzati.
- I pattern non sincronizzati e le parti di template sono ora impostati di default su
ContentOnly. Gli utenti vedranno prima i controlli per modificare il testo e i media, senza rischiare di rompere accidentalmente la struttura del blocco. Se hai creato dei blocchi personalizzati e vuoi che rimangano modificabili, assicurati di impostare"role": "contentOnly"nel fileblock.json. Gli sviluppatori possono escludere questa funzione tramite PHP utilizzando il filtroblock_editor_settings_allo tramite JavaScript impostandodisableContentOnlyForUnsyncedPatternssutrue. - WordPress 7.0 elimina il supporto a PHP 7.2 e 7.3. La versione minima consigliata di PHP rimane la 8.3.
- Il sistema di supporto del blocco Dimensioni è stato notevolmente migliorato. È possibile utilizzare
widtheheightcome supporti standard per i blocchi sotto la vocedimensionsinblock.jsone i temi possono definire dei preset di dimensioni nel lorotheme.json.
Guardando al futuro: 7.0 segna una nuova era per WordPress
WordPress 7.0 non è solo un aggiornamento, ma rappresenta un momento di svolta sia per gli utenti che per gli sviluppatori. Grazie all’integrazione dell’intelligenza artificiale e all’API Abilities, l’intelligenza artificiale può ora navigare nella dashboard, creare nuovi contenuti, modificare i post esistenti e collaborare con gli esseri umani in tempo reale. Riteniamo davvero di trovarci di fronte a una svolta storica e non vediamo l’ora di esplorare questi strumenti basati sull’intelligenza artificiale per iniziare a creare qualcosa di completamente nuovo.
Ma WordPress 7.0 non è solo AI e RTC. L’esperienza di editing è stata completamente ripensata, con collaborazione in tempo reale, una nuova architettura di revisione a livello di blocco, nuovi blocchi principali e aggiornamenti significativi al sistema di progettazione.
Oltre all’integrazione dell’intelligenza artificiale, gli sviluppatori potranno beneficiare di miglioramenti che snelliscono il flusso di lavoro di sviluppo e sbloccano possibilità inedite. Dall’editor con iframe al supporto delle pseudo-classi nel file theme.json, dall’Abilities API lato client ai blocchi PHP-only, WordPress 7.0 offre una moltitudine di strumenti per creare siti e applicazioni sempre più potenti.
Per sfruttare appieno le potenzialità di WordPress 7.0, hai bisogno di un servizio di hosting all’avanguardia ottimizzato per le prestazioni e la sicurezza. Su Kinsta troverai tutto ciò che ti serve per sfruttare WordPress al massimo delle sue potenzialità. Dai un’occhiata ai nostri piani e trova quello più adatto alle esigenze del tuo sito.
Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.
