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.
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.
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’AI può ora navigare nella dashboard, creare nuovi contenuti e modificare i post esistenti. 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. 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.
