WordPress 6.3 “Lionel” è online! La nuova versione è l’ultima major release della Fase 2 della roadmap di WordPress.

Durante la seconda fase, lo sviluppo si è concentrato principalmente sull’Editor del sito, aumentandone le funzionalità e migliorando l’interfaccia e l’usabilità.

Ora i creatori di siti possono progettare layout e gestire i contenuti all’interno della stessa interfaccia, senza dover passare da un’area di amministrazione all’altra e senza dover scrivere una sola riga di codice.

Con WordPress 6.3, 10 versioni del plugin Gutenberg sono state integrate nel core e chi non usa il plugin Gutenberg sul proprio sito web vedrà molti cambiamenti nell’interfaccia dell’editor del sito.

Con WordPress 6.3, l’esperienza di editing è stata notevolmente migliorata. Diverse modifiche tecniche hanno interessato l’Editor del sito, dando vita a un nuovo modo di esplorare i temi a blocchi e di utilizzare lo stesso Editor del sito. La navigazione è migliorata e sono state introdotte modalità senza distrazioni, anteprime dei temi a blocchi, revisioni degli stili, una nuova palette di comandi e molto altro.

Ci sono molte cose da dire su WordPress 6.3. Quindi, andiamo subito a scoprire cosa ci riserva l’ultima release della Fase 2.

Navigazione migliorata nell’editor del sito

Con WordPress 6.3, la navigazione dell’editor del sito è stata notevolmente migliorata con l’aggiunta di nuovi punti di accesso a diverse aree dell’editor. Prima della versione 6.3, queste sezioni di amministrazione erano raggiungibili da punti di accesso collocati in diversi menu e schermate della bacheca. Il risultato di queste modifiche è un’esperienza di editing più semplice e coerente.

L’immagine seguente mette a confronto il menu di navigazione dell’editor in WordPress 6.2 e 6.3.

Navigazione dell'editor del sito in WordPress 6.2 vs. 6.3
Navigazione dell’editor del sito in WordPress 6.2 vs. 6.3

La prima cosa che si può notare nell’immagine qui sopra sono i due pulsanti che compaiono nell’angolo superiore destro della barra laterale dell’editor. Il pulsante Visualizza sito appare al passaggio del mouse e consente di accedere rapidamente al front-end. Si tratta di una piccola ma utile aggiunta che permette di accedere rapidamente alle pagine del sito indipendentemente dalla posizione in cui ci si trovi nell’editor del sito quando il menu di navigazione è aperto.

Il pulsante Apri palette dei comandi (l’icona della lente) consente di accedere a una nuova funzione di WordPress 6.3, la Palette dei comandi (vedi sotto).

Pulsanti Visualizza sito e Apri palette dei comandi nell'editor del sito
Pulsanti Visualizza sito e Apri palette dei comandi nell’editor del sito

La nuova navigazione dell’editor include i seguenti elementi.

Navigazione

Una volta creato un menu di navigazione, questo appare nel menu Navigazione dell’Editor del sito. Qui è possibile spostare le voci del menu verso l’alto o verso il basso oppure eliminarle da un menu a tendina. È anche possibile trascinare e rilasciare le voci per organizzare l’ordine del menu.

Menu di navigazione nell'Editor del sito
Menu di navigazione nell’Editor del sito

Cliccando su una voce di menu si accede ai dettagli della pagina. Qui è possibile modificare il contenuto e il layout della pagina (vedi sotto).

Stili

Dal menu Stili si accede alle varianti degli stili in modalità di navigazione. Qui si può vedere l’anteprima degli stili disponibili, applicarne uno e apportare eventuali personalizzazioni.

Menu Stili in WordPress 6.3
Menu Stili in WordPress 6.3

L’icona dell’occhio lancia lo Style book, una funzione introdotta con la versione 6.2 che offre un’anteprima dei blocchi disponibili con i diversi stili applicati senza lasciare l’interfaccia dell’editor.

Dal pannello Stili dell'Editor del Sito si accede allo Style book
Dal pannello Stili dell’Editor del Sito si accede allo Style book

Pagine

La voce di menu Pagine permette di accedere alle 10 pagine del sito aggiornate più di recente e a diverse funzionalità di modifica. In questa sezione si possono creare nuove pagine, si può modificare il contenuto e il layout delle pagine esistenti, si può accedere ai dettagli delle pagine e altro ancora.

La novità più interessante è che ora è possibile creare nuove pagine senza uscire dall’interfaccia dell’editor.

Cliccando sull’icona + nel pannello Navigazione, un nuovo modale al centro della pagina permette di impostare un titolo per la nuova pagina, mostrando anche un tooltip con i suggerimenti.

Creare una nuova pagina in WordPress 6.3
Creare una nuova pagina in WordPress 6.3

Facendo clic su Crea bozza, si viene reindirizzati all’editor dei post con una nuova pagina.

Nella sezione Pagine, è possibile modificare il contenuto della pagina direttamente dall’Editor del sito.

Menu Pagine in WordPress 6.3
Menu Pagine in WordPress 6.3

Ora è possibile modificare sia il contenuto che lo stile della pagina nello stesso punto. Questo offre un maggiore controllo su tutti gli aspetti della pagina e dovrebbe migliorare notevolmente l’esperienza di editing.

In modalità di editing, è possibile passare facilmente dall’editor della pagina all’editor del template. Questo dovrebbe evitare confusione su ciò che si sta modificando e permette di stabilire se le modifiche devono riguardare solo la pagina corrente o anche le altre pagine che utilizzano lo stesso template.

La stessa schermata mostra anche i dettagli della pagina.

Dettagli della pagina nell'Editor del sito
Dettagli della pagina nell’Editor del sito

I dettagli attualmente includono:

  • Stato
  • Slug
  • Modello
  • Genitore
  • Parole
  • Tempo di lettura
  • Ultima modifica

Template

Da qui si accede ai template di pagina. La struttura della schermata dei Template non cambia molto. Tuttavia, con WordPress 6.3, quando si crea un nuovo template, una nuova finestra modale offre un elenco di pagine da scegliere per il template.

Un nuovo modale fornisce un elenco di pagine predefinite tra cui scegliere quando si crea un nuovo template
Un nuovo modale fornisce un elenco di pagine predefinite tra cui scegliere quando si crea un nuovo template

In un secondo momento, una nuova finestra di dialogo fornisce un elenco di pattern da utilizzare per costruire un nuovo template.

La scelta del pattern durante la fase di creazione del template
La scelta del pattern durante la fase di creazione del template

Pattern

Chiamata Library in una precedente iterazione, la sezione di amministrazione dei Pattern riflette una serie di importanti modifiche che riguardano il sistema dei block pattern. Non si tratta solo di modifiche all’interfaccia utente. Si tratta di una revisione generale dell’intera architettura dei pattern.

La schermata Pattern in WordPress 6.3
La schermata Pattern in WordPress 6.3

Nella sezione di amministrazione Pattern, è possibile gestire Pattern e Template part. Qui si trova un menu che dà accesso alle parti dei template e ai block pattern divisi per categoria. Un’icona a forma di lucchetto contrassegna i pattern del tema che non possono essere modificati dall’utente.

Parti di template e pattern dei temi nella nuova sezione Pattern dell'Editor del sito
Parti di template e pattern dei temi nella nuova sezione Pattern dell’Editor del sito

In questa sezione è possibile creare nuovi block pattern e template part personalizzati e gestirli insieme ai pattern del tema.

Creare nuovi block pattern e template part in WordPress 6.3
Creare nuovi block pattern e template part in WordPress 6.3

Facendo clic sul pulsante Crea pattern, un nuovo popup modale permette di assegnare un nome al pattern e di impostare il tipo di pattern che si desidera creare, sincronizzato o non sincronizzato.

Creazione di un pattern sincronizzato in WordPress 6.3
Creazione di un pattern sincronizzato in WordPress 6.3

Una volta creato almeno un block pattern personalizzato, sarà possibile accedervi da I miei pattern, che apparirà nella parte superiore del menu Pattern.

I miei pattern in WordPress 6.3
I miei pattern in WordPress 6.3

È possibile selezionare il pattern e accedere a un nuovo pannello in cui visualizzare i dettagli del pattern. Spostando la maniglia a destra o a sinistra, si avrà un’anteprima del pattern a diverse risoluzioni e si potrà verificarne la reattività.

La sezione Dettagli mostra lo stato di sincronizzazione del pattern corrente.

Anteprima di un block pattern personalizzato in WordPress 6.3
Anteprima di un block pattern personalizzato in WordPress 6.3

In fondo al menu Pattern, si trovano anche un paio di link: Gestisci tutte le parti di template e Gestisci tutti i miei pattern. Questi link consentono di accedere direttamente alle parti di template e ai pattern personalizzati.

Questo è quanto riguarda la nuova interfaccia di amministrazione dei pattern nell’Editor del sito. Ora scopriamo cosa cambia nella struttura e nella funzionalità del sistema di block pattern.

Un nuovo sistema di block pattern

A partire da WordPress 6.3 (e Gutenberg 16.1):

  • I blocchi riutilizzabili sono stati rinominati in Pattern sincronizzati,
  • i normali block pattern sono ora denominati Pattern non sincronizzati,
  • il tipo di post personalizzato wp_block è stato esteso in modo da supportare i campi personalizzati ed è stato aggiunto un nuovo meta-campo wp_block_sync_status per memorizzare lo stato di sincronizzazione di un pattern,
  • è stata aggiunta una proprietà source allo schema e alla risposta dei block pattern per distinguere i pattern core da quelli user,
  • l’API REST è stata ampliata con un nuovo attributo
wp-block-sync-status
Il campo meta wp_block_sync_status viene utilizzato per memorizzare lo stato di sincronizzazione di un block pattern

Ora è più chiaro che tutte le modifiche apportate a un pattern sincronizzato saranno applicate a tutte le occorrenze di quel pattern sull’intero sito web.

Al contrario, le modifiche apportate a un block pattern non sincronizzato avranno effetto solo su quella specifica istanza del pattern e non saranno applicate a nessun’altra istanza che possa essere stata aggiunta ad altri post o pagine del sito.

Grazie al nuovo sistema di gestione dei pattern, ora è possibile creare block pattern sincronizzati e non sincronizzati direttamente dall’editor del sito o dei post, mentre prima era possibile creare solo blocchi riutilizzabili (ora pattern sincronizzati).

Per provare questa nuova funzione nell’editor dei post, basta aprire la bacheca di WordPress e andare su Articoli -> Aggiungi nuovo. Una volta lì, bisognerà creare un nuovo gruppo di blocchi o selezionare semplicemente i blocchi che si desidera aggiungere al proprio block pattern. Quindi selezionare Crea pattern/blocco riutilizzabile dal menu a scomparsa della barra degli strumenti dei blocchi.

Crea pattern/blocco riutilizzabile nell'editor dei post
Crea pattern/blocco riutilizzabile nell’editor dei post

Inoltre, nell’editor del sito, il pulsante Crea pattern permette di creare un nuovo template part o un nuovo block pattern.

Creazione di un nuovo pattern nell'editor del sito
Creazione di un nuovo pattern nell’editor del sito

Cliccando su Crea template part si apre una modale/pop-up in cui aggiungere il nome del template part e l’area della pagina a cui è destinato.

Creazione di un pattern nell'editor del sito
Creazione di un pattern nell’editor del sito

Cliccando su Crea pattern, un altro modal/pop-up chiede di impostare il nome del pattern e di scegliere se creare un pattern sincronizzato o non sincronizzato.

Creazione di un pattern nell'editor del sito
Creazione di un pattern nell’editor del sito

Quindi si dovrà confermare per creare il pattern o la parte di template nell’editor del sito.

Crearezione di un block pattern nell'editor del sito
Crearezione di un block pattern nell’editor del sito

Una volta soddisfatti delle modifiche, si potrà salvare il block pattern e tornare all’editor del sito. Ora si potrà accedere al block pattern personalizzato dalla sezione Pattern, cliccando su Gestisci tutti i miei pattern.

La schermata dei pattern in WordPress 6.3
La schermata dei pattern in WordPress 6.3

I block pattern sfruttano anche i controlli delle proporzioni del blocco Immagine. Ora, impostando le proporzioni per un’immagine, queste saranno mantenute quando si sostituisce l’immagine con un’altra di dimensioni diverse. Questo sarà utile soprattutto con i block pattern, in quanto non sarà più necessario preoccuparsi delle dimensioni delle immagini quando vengono sostituite.

Il controllo delle proporzioni del blocco immagine
Il controllo delle proporzioni del blocco immagine

Per una panoramica più approfondita delle modifiche apportate al sistema dei block pattern, si leggano le PR #51078, #51144 e #50028.

Revisioni degli stili esposte nell’editor del sito

L’Editor del sito ora mostra una cronologia delle revisioni che permette di scorrere le modifiche e di sceglierne una da ripristinare.

Per accedere alla cronologia delle revisioni, basta far clic sul nuovo pulsante Revisioni nel pannello degli Stili.

La cronologia delle revisioni in WordPress 6.3
La cronologia delle revisioni in WordPress 6.3

Questo pannello fornisce un elenco di revisioni in una linea temporale. Inoltre, fornisce il nome dell’autore di ogni revisione e la data e l’ora di ogni revisione in un tooltip. Si può vedere l’anteprima di tutte le revisioni e scegliere quella che si desidera ripristinare.

Revisioni degli stili in WordPress 6.3
Revisioni degli stili in WordPress 6.3

È possibile navigare tra le revisioni nell’interfaccia degli Stili globali, visualizzare l’anteprima e ripristinare i contenuti in qualsiasi momento.

Lo sviluppo delle revisioni non si ferma qui. Con l’ingresso nella Fase 3, le revisioni dovrebbero essere interessate da nuove aggiunte che ne miglioreranno ulteriormente l’usabilità e sbloccheranno nuove funzionalità.

La palette dei comandi

La palette dei comandi è un nuovo strumento che permette di eseguire azioni di uso frequente, come il salto ad altre pagine o template nell’editor, utilizzando dei comandi.

Per accedere alla palette dei comandi nell’Editor del sito, basta far clic sull’icona della lente o premere cmd + k (ctrl + k su Windows e Linux).

Quando si inizia a digitare un comando, la palette dei comandi propone una serie di comandi predefiniti. In questo modo è possibile eseguire rapidamente delle operazioni o raggiungere aree specifiche dell’Editor del sito.

La palette dei comandi in WordPress 6.3
La palette dei comandi in WordPress 6.3

La prima implementazione di questo strumento prevede una funzione di ricerca rapida e alcune azioni come la navigazione nell’editor del sito, la creazione di un nuovo post/pagina, l’attivazione di elementi dell’interfaccia utente, la reimpostazione o l’eliminazione di un template o di una parte di template e altro ancora. Altri comandi saranno aggiunti nelle prossime versioni.

Il nuovo strumento apre infinite possibilità di utilizzo. Ad esempio, la palette dei comandi potrebbe essere necessaria per mostrare le opzioni di design di specifici post o pagine.

È possibile anche registrare comandi personalizzati grazie alla nuova API della palette dei comandi per renderizzare, registrare e deregistrare comandi.

Esistono diversi modi per registrare i comandi a seconda del tipo di comando che si sta registrando.

  • Comandi statici: Gli sviluppatori possono registrare comandi statici personalizzati utilizzando l’azione wp.data.dispatch( wp.commands.store ).registerCommand o l’hook di React wp.data.useCommand.
  • Comandi dinamici: Questi comandi vengono inseriti nell’elenco dei comandi in base al termine di ricerca inserito dall’utente nel campo di input della palette dei comandi o quando un comando è disponibile solo se sono soddisfatte alcune condizioni.
  • Comandi contestuali: Questi comandi hanno la priorità in contesti specifici, il che significa che appaiono automaticamente nel contesto giusto (ad esempio quando si sta modificando un template). I comandi Ripristina template e Elimina template sono esempi di comandi contestuali. Al momento sono stati implementati due contesti:
    • site-editor: questo contesto viene impostato quando si naviga nell’editor del sito
    • site-editor-edit: questo contesto è impostato quando si modifica qualcosa (template, parte di template o pagina) nell’editor

Per ottenere l’elenco dei comandi disponibili, si può eseguire wp.data.select( wp.commands.store ).getCommands() nella console del browser.

Elenco dei comandi in WordPress 6.3
Elenco dei comandi in WordPress 6.3

Inizialmente disponibile negli editor dei Post e del Sito, in futuro la palette dei comandi dovrebbe essere estesa all’intera bacheca di WordPress.

Per un’anteprima per sviluppatori della palette dei comandi, si legga la Request for callback.

Altre funzionalità e miglioramenti per l’editor del sito

Oltre alle caratteristiche e ai miglioramenti descritti nelle sezioni precedenti, WordPress 6.3 ci porta:

Anteprima dei temi a blocchi nell’editor del sito

A partire dalla versione 6.3, un nuovo parametro theme_preview permette di caricare ogni tema a blocchi nell’Editor del sito e di visualizzarlo in anteprima prima dell’attivazione.

Anteprima del tema a blocchi TT1 nell'Editor del sito
Anteprima del tema a blocchi TT1 nell’Editor del sito

Per visualizzare l’anteprima di un tema a blocchi, bisogna accedere alla schermata Aspetto > Temi e passare il mouse sull’anteprima di un tema a blocchi. Si dovrebbe vedere un pulsante di Anteprima dal vivo sopra ogni tema. Basta cliccare su questo pulsante per avviare l’anteprima del tema nell’Editor del sito. Per i temi non a blocchi, il pulsante Anteprima dal vivo lancia il Customizer del tema.

Miglioramenti allo Stato di Caricamento

Con WordPress 6.3, lo stato di caricamento dell’editor è stato migliorato per evitare che l’utente interagisca con l’editor prima che sia completamente caricato.

Ora l'utente non può interagire con l'editor fino al completamento del caricamento
Ora l’utente non può interagire con l’editor fino al completamento del caricamento

Modalità Senza Distrazioni

WordPress 6.3 introduce una modalità di modifica senza distrazioni nell’editor del sito. Si tratta della stessa funzione disponibile nell’editor dei post a partire da WordPress 6.2

Modalità senza distrazioni nell'editor del sito
Modalità senza distrazioni nell’editor del sito

È possibile attivare questa funzione nel pannello delle opzioni dell’editor del sito. Una volta attivata la modalità senza distrazioni, le barre laterali e le barre degli strumenti scompaiono, lasciando l’utente libero di concentrarsi sull’editing.

Altri miglioramenti dell’interfaccia utente

  • Un nuovo componente <ViewLink> mostra un pulsante per aprire in una nuova finestra qualsiasi tipo di post pubblicato. Si tratta di una piccola ma utile funzione che permette di visualizzare il tipo di post corrente senza dover cercare il link nella barra laterale delle impostazioni (PR #50260)
  • Le descrizioni dei template sono state migliorate per spiegare meglio cosa fa esattamente ogni template. Questo dovrebbe aiutare gli utenti a scegliere il template giusto da personalizzare nell’Editor del sito.
  • In precedenza, le impostazioni dei filtri Duotone erano disponibili solo nella barra degli strumenti dei blocchi. Con la versione 6.3, i controlli Duotone sono ora disponibili nella barra laterale delle impostazioni (PR #49838)
  • Prima di WordPress 6.3 i caratteri di grandi dimensioni non erano sufficientemente scalabili sui piccoli schermi. Ora la tipografia fluida si ridimensiona senza problemi grazie a un fattore di scala logaritmico utilizzato per calcolare la dimensione minima dei caratteri per i piccoli schermi (PR #49707)

Nuovi blocchi e strumenti di progettazione migliorati

WordPress 6.3 offre anche alcuni utili blocchi che dovrebbero far contenti molti content writer.

Nuovo Blocco Note a Piè di Pagina

WordPress 6.3 aggiunge un utilissimo blocco Note a piè di pagina.

Una nota a piè di pagina per un blocco di testo
Una nota a piè di pagina per un blocco di testo

Grazie a questo utilissimo blocco, per aggiungere una nota a piè di pagina per un blocco di testo (paragrafi, titoli ed elenchi) bastano appena un paio di clic: posizionare il cursore nel punto in cui si vuole aggiungere il link e cliccare sul pulsante Nota a piè di pagina disponibile nel menu contestuale del blocco. In questo modo verrà aggiunta una nota in fondo alla pagina.

Il blocco Note a piè di pagina in WordPress 6.3
Il blocco Note a piè di pagina in WordPress 6.3

Il blocco Note a piè di pagina aggiunge, rimuove e riordina automaticamente le note man mano che si modifica il testo: si tratta di un’opzione estremamente utile, soprattutto per articoli molto lunghi.

Nuovo Blocco Dettagli

Ora è possibile nascondere una parte del contenuto fino a quando il lettore non è pronto a leggere le FAQ, a guardare il video o ad ascoltare un fantastico podcast grazie al nuovo blocco Dettagli.

Un blocco Dettagli vuoto con sommario e contenuto nascosto
Un blocco Dettagli vuoto con sommario e contenuto nascosto

Il nuovo blocco è composto da due elementi distinti: il sommario e il contenuto nascosto. Di default, il contenuto è nascosto ma è possibile modificare l’impostazione nella barra laterale delle impostazioni del blocco.

Un blocco Dettagli con sommario e contenuto video
Un blocco Dettagli con sommario e contenuto video

Il blocco utilizza un elemento details con un rich text summary e un div contenente l’elemento nascosto (si veda anche la PR #45055).

Miglioramenti al blocco copertina

Il blocco Copertina è stato migliorato con l’introduzione di un paio di caratteristiche di design che lo rendono più facile da usare e offrono maggiori possibilità di personalizzazione.

Innanzitutto, il Blocco copertina ora supporta lo strumento di progettazione del colore del testo. Grazie a questa aggiunta, gli utenti e gli autori di temi possono cambiare il colore di tutti i blocchi interni semplicemente impostando il colore del testo sul blocco Copertina. Questo rende anche più semplice la gestione delle trasformazioni dal blocco Media e Testo, in quanto i colori del testo ora vengono passati senza problemi ai blocchi risultanti.

Il blocco Copertina ora supporta lo strumento di progettazione del colore del testo
Il blocco Copertina ora supporta lo strumento di progettazione del colore del testo

Un’altra aggiunta al blocco Copertina in arrivo con WordPress 6.3 è il supporto di tutti gli strumenti di progettazione relativi ai bordi. Questa aggiunta dovrebbe ridurre la necessità di uno stile di blocco personalizzato.

Controlli dei bordi per il blocco Copertina
Controlli dei bordi per il blocco Copertina

WordPress 6.3 aggiunge anche il supporto del layout vincolato/di flusso al blocco Copertina che ora può essere gestito nello stesso modo del blocco Gruppo. Questa modifica rende più coerente la gestione del layout e dovrebbe anche rendere più semplice la personalizzazione sia per gli utenti che per gli sviluppatori di temi.

Impostazioni di layout per il blocco Copertina
Impostazioni di layout per il blocco Copertina

Tuttavia, gli sviluppatori di temi dovrebbero eseguire alcuni test sui propri temi esistenti, dato che il sistema di layout del blocco potrebbe ignorare le implementazioni personalizzate.

Miglioramenti al filtro Duotone

Alcune modifiche influenzano il modo in cui utilizziamo il filtro duotone.

Innanzitutto, ora è possibile impostare un filtro duotone a livello globale dal pannello Stile dell’Editor del sito. In precedenza era possibile applicare i filtri duotone solo a livello globale dal theme.json.

Applicazione del filtro duotone nel pannello Stile dell'Editor del sito
Applicazione del filtro duotone nel pannello Stile dell’Editor del sito

Questo è possibile perché i valori dei duotoni vengono ora impostati utilizzando gli slug dei colori anziché i valori. Questo significa anche che è possibile impostare i valori duotone una volta sola e applicarli indipendentemente dal tema corrente o dalla variazione del tema, purché si utilizzi lo stesso slug.

Infine, per i più esperti, gli stili Duotone vengono ora generati utilizzando il motore degli stili di WordPress e vengono memorizzati con il supporto di CSS dei blocchi invece di essere inseriti.

Ulteriori Miglioramenti

  • Il blocco Pulsante ora supporta il colore, lo stile e la larghezza del bordo (PR #44574)
  • Aggiunto il controllo della lunghezza dell’estratto al blocco Post Excerpt (PR #44964)
  • È ora possibile controllare il rapporto delle proporzioni del blocco Immagine in primo piano del post (PR #47854)
  • L’interfaccia degli Stili globali ora include controlli per il colore e la tipografia dell’elemento Didascalia (PR #49141)
  • È stata aggiunta una variazione della data di modifica del post al blocco Data del post. È utile se si desidera aggiungere rapidamente la data di modifica del post invece della data di pubblicazione (PR #49111)
  • Il logo del sito può ora essere sostituito dalla barra laterale (PR #49992)

Miglioramenti delle prestazioni e novità per gli sviluppatori

WordPress 6.3 porta anche nuove funzionalità volte a migliorare le prestazioni del sito e i flussi di lavoro degli sviluppatori. Tra le tante novità, abbiamo scelto quelle che seguono:

Eliminazione del supporto di PHP 5

A partire da WordPress 6.3, PHP 5 non sarà più supportato. La nuova versione minima supportata sarà PHP 7.0.0. La versione raccomandata di PHP è la 7.4 o superiore. La 7.4 è anche la versione più utilizzata dagli utenti di WordPress, con il 50,8% dei siti WordPress.

Versioni PHP utilizzate nei siti WordPress esistenti a luglio 2023
Versioni PHP utilizzate nei siti WordPress esistenti a luglio 2023 (Fonte: WordPress.org)

Questo aspetto è importante non solo per gli sviluppatori ma anche per tutti gli utenti di WordPress, in quanto migliora la sicurezza e le prestazioni dei siti web.

Ed è anche questo il motivo per cui l’hosting di Kinsta offre solo versioni supportate di PHP. Eseguiamo regolarmente i nostri benchmark delle prestazioni delle versioni supportate di PHP per verificare in prima persona i miglioramenti delle prestazioni che si ottengono con le nuove versioni.

Versioni PHP supportate a luglio 2023
Versioni PHP supportate a luglio 2023 (Fonte: PHP.net)

Miglioramenti delle Prestazioni nel Caricamento delle Immagini

A partire da WordPress 6.3, all’immagine viene assegnato l’attributo fetchpriority con un valore di "high" per stabilire se si tratta di un’immagine LCP (Largest Contentful Pain), dove il Largest Contentful Pain è un indicatore che riporta il tempo di rendering dell’elemento più grande all’interno del viewport.

L’attributo fetchpriority indica al browser di dare priorità a questa immagine, anche prima che il layout sia stato calcolato.

Un altro miglioramento è la gestione automatica del lazy loading delle immagini con l’attributo loading. Questo attributo è stato introdotto per la prima volta in WordPress 5.5, poi ne è stata migliorata l’implementazione con WordPress 5.9 in modo da omettere l’attributo loading="lazy" per la prima immagine del contenuto (si veda anche Miglioramenti delle prestazioni del lazy loading in WordPress 5.9). Con WordPress 6.3, tutti i problemi residui dovrebbero essere stati risolti e le prestazioni migliorate.

Entrambi gli attributi fetchpriority e loading sono ora controllati dalla nuova funzione wp_get_loading_optimization_attributes(). Questa funzione restituisce un array associativo di attributi per ottimizzare le prestazioni del caricamento. Attualmente, la funzione può restituire uno dei seguenti attributi:

  • loading con un valore di "lazy"
  • fetchpriority con un valore di "high"

Si noti che nessun elemento dovrebbe avere entrambi gli attributi perché si escludono a vicenda. Se un elemento dovesse contenere entrambi gli attributi, verrà emesso un avviso.

Per una panoramica più approfondita della funzione wp_get_loading_optimization_attributes() e degli attributi fetchpriority e loading, con alcuni esempi di utilizzo, si legga Miglioramenti delle prestazioni delle immagini in WordPress 6.3.

Supporto degli Attributi HTML 5 async e defer

async e defer sono due attributi HTML 5 che dicono al browser di scaricare JavaScript senza mettere in pausa il parsing dell’HTML.

C’è una differenza fondamentale tra i due attributi:

  • Gli script con l’attributo async vengono eseguiti in modo asincrono non appena vengono caricati. Una volta caricato lo script, il browser mette in pausa il parsing dell’HTML ed esegue lo script.
  • Gli script con l’attributo defer vengono eseguiti solo al termine del parsing della pagina.

A partire da WordPress 6.3, è possibile registrare gli script con gli attributi async e defer utilizzando il parametro booleano $in_footer delle funzioni wp_register_script() o wp_enqueue_script() (si veda anche Come eseguire l’encoding delle risorse in WordPress).

Questo parametro è stato potenziato e ora accetta un nuovo parametro array $args che permette di specificare una strategia di caricamento per gli script.

Ecco un esempio di come definire una strategia di differimento nel file PHP di un plugin utilizzando wp_register_script (il codice sarebbe lo stesso con wp_enqueue_script):

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'strategy' => 'defer'
	) 
);

La retro-compatibilità è garantita, quindi si può continuare a istruire WordPress in modo che carichi gli script nel footer:

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'in_footer' => true,
		'strategy' => 'defer'
	) 
);

Grazie alle nuove implementazioni, è ora possibile evitare che uno script venga caricato in un ordine imprevisto nell’albero delle dipendenze degli script, cosa che non era possibile con gli strumenti disponibili prima di WordPress 6.3. Per una panoramica più dettagliata delle modifiche apportate alla Script API, con esempi e dettagli tecnici, si legga la nota di sviluppo di Simon Dowdles.

Modalità di Sviluppo

WordPress 6.3 introduce una nuova modalità di sviluppo che gli sviluppatori possono attivare utilizzando la nuova costante WP_DEVELOPMENT_MODE. Questa nuova costante è consigliata per qualsiasi sito di sviluppo e il suo valore dipende dal tipo di sviluppo in corso.

WP_DEVELOPMENT_MODE può assumere uno dei seguenti valori:

  • core: indica che un sito web è utilizzato come ambiente di sviluppo principale.
  • plugin: utilizzato per lo sviluppo di plugin.
  • theme: utilizzato per lo sviluppo di temi.
  • all: questo valore indica che un sito web viene utilizzato per tutti e tre i tipi di sviluppo.
  • Una stringa vuota è l’impostazione predefinita e indica che il sito web non è utilizzato come ambiente di sviluppo.

WP_DEVELOPMENT_MODE dovrebbe essere utilizzato solo nelle installazioni di sviluppo. Non è rilevante in produzione.

La modalità di sviluppo influisce su alcuni aspetti di basso livello del comportamento di WordPress. Al momento in cui scriviamo, l’unica differenza riguarda la cache del file theme.json, che viene bypassata quando WP_DEVELOPMENT_MODE è impostato su 'theme'.

WP_DEVELOPMENT_MODE funziona diversamente dalle costanti WP_DEBUG e WP_ENVIRONMENT_TYPE spesso utilizzate in fase di sviluppo, in quanto WP_DEBUG e WP_ENVIRONMENT_TYPE non influiscono in alcun modo sul comportamento di WordPress. Probabilmente si dovrebbe utilizzare WP_DEVELOPMENT_MODE quando WP_ENVIRONMENT_TYPE è impostato su 'development' o 'local', perché lo sviluppo non dovrebbe mai avvenire su siti web di produzione.

Per attivare la modalità di sviluppo si può procedere in questo modo:

define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3 introduce anche una nuova funzione wp_in_development_mode() che permette di verificare se il sito è in modalità di sviluppo. La nuova funzione permette anche di verificare il tipo di sviluppo in corso, grazie a un parametro $mode i cui valori possibili sono 'core', 'plugin' e 'theme':

if ( wp_in_development_mode( 'theme' ) ) { ... }

Si può controllare il valore attuale di WP_DEVELOPMENT_MODE anche nel pannello Info dello strumento Salute del Sito.

Ulteriori Modifiche per gli Sviluppatori

Riepilogo

Con WordPress 6.3 arriviamo alla fine della Fase 2: Personalizzazione della roadmap di sviluppo di Gutenberg. Questa nuova versione apporta miglioramenti significativi all’esperienza di editing, tra cui nuove funzioni di modifica all’interno dell’editor del sito, un sistema di block pattern nuovo e più flessibile, nuovi blocchi, migliori prestazioni, miglioramenti all’accessibilità e all’internazionalizzazione e molto altro.

Con la successiva versione di WordPress, prevista per novembre 2023, entreremo nella Fase 3: Collaborazione, il cui obiettivo principale è quello di portare nell’editor funzionalità di collaborazione avanzate.

Se volete testare e/o contribuire a WordPress, dovete provare la nostra suite di sviluppo WordPress locale gratuita DevKinsta.

Ora tocca a voi: avete già testato WordPress 6.3 nel vostro ambiente di sviluppo? Quali sono le funzionalità della versione 6.3 che vi piacciono di più? Scrivetecelo nei commenti qui sotto.

Carlo Daniele Kinsta

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.