{"id":43494,"date":"2021-03-06T14:14:13","date_gmt":"2021-03-06T13:14:13","guid":{"rendered":"https:\/\/kinsta.com\/?p=90307"},"modified":"2023-09-26T06:33:27","modified_gmt":"2023-09-26T05:33:27","slug":"wordpress-5-7","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-5-7\/","title":{"rendered":"Le Novit\u00e0 di WordPress 5.7 (Lazy-Loading, HTTPS, Aggiornamenti UI, Nuove API e Molto Altro)"},"content":{"rendered":"

Siamo abituati a vedere piccoli e meno piccoli cambiamenti e nuove funzionalit\u00e0 aggiungersi al Core di WordPress<\/a> ogni volta che viene rilasciata una nuova versione. WordPress 5.7 non fa eccezione, ed \u00e8 bello vedere come ogni nuova release ci avvicina un po’ di pi\u00f9 alla Big Picture<\/a>.<\/p>\n

Con diverse versioni del Block Editor che entrano a far parte del Core, la nuova release migliora l’esperienza complessiva di editing e consente agli sviluppatori di costruire blocchi pi\u00f9 avanzati e aggiungere personalizzazioni pi\u00f9 spinte all’editor di blocchi.<\/p>\n

A parte l’editor, WordPress 5.7 introduce anche moltissime modifiche e funzionalit\u00e0, tra cui iframe lazy-loading, aggiornamenti dell’interfaccia di login e registrazione, link per resettare la password, un gran numero di correzioni di bug e molto altro.<\/p>\n

Abbiamo eseguito i nostri test su DevKinsta<\/a> e vogliamo condividere con voi le nostre funzionalit\u00e0 preferite e le modifiche in arrivo con WordPress 5.7, con un sacco di screenshot e esempi di codice.<\/p>\n

Se volete immergervi pi\u00f9 a fondo nella prima major release del 2021, date un’occhiata a Development Cycle<\/a>, Planning Roundup<\/a> e Field Guide<\/a> di WordPress 5.7.<\/p>\n

Quindi, mentre continuiamo ad aspettare il rilascio del Full Site Editing<\/a> (nel Core da WordPress 5.8), mettiamoci comodi e godiamoci le novit\u00e0 di WordPress 5.7!<\/p>\n\n

<\/div><\/kinsta-auto-toc>\n

Cosa c’\u00e8 di Nuovo nell’Editor di Blocchi<\/h2>\n

WordPress 5.7 porta nel Core molte versioni del plugin Gutenberg<\/a>. Sarebbe impossibile menzionare qui tutte queste novit\u00e0, oltre a tutte le modifiche e correzioni di bug aggiunti all’editor, ma potete visitare i seguenti link per approfondire le caratteristiche di ogni versione: 9.3<\/a>, 9.4<\/a>, 9.5<\/a>, 9.6<\/a>, 9.7<\/a>, 9.8<\/a>, 9.9<\/a>.<\/p>\n

Sono anche parte di WordPress 5.7 le correzioni dei bug e i miglioramenti delle prestazioni di Gutenberg 10.0 e 10.1.<\/p>\n

Detto questo, passiamo al nostro elenco scelto delle funzionalit\u00e0 pi\u00f9 interessanti e delle modifiche apportate all’editor di blocchi con WordPress 5.7:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Funzionalit\u00e0, Miglioramenti e API delle Variazioni di Blocco<\/h3>\n

Introdotte con WordPress 5.4, le Block Variation<\/a> offrono all’utente la possibilit\u00e0 di selezionare un’istanza diversa dello stesso blocco.<\/p>\n

Questa funzionalit\u00e0 va in coppia con la Block Variation API<\/a>, un potente strumento che permette agli sviluppatori di aggiungere, gestire o rimuovere variazioni di blocco.<\/p>\n

WordPress 5.7 introduce diversi miglioramenti, funzionalit\u00e0 e nuove API per le variazioni di blocco, fornendo una migliore interfaccia utente e strumenti pi\u00f9 potenti per gli sviluppatori. Scopriamoli pi\u00f9 da vicino.<\/p>\n

Trasformazioni delle Variazioni dei Blocchi<\/h4>\n

Introdotto per la prima volta con Gutenberg 9.4<\/a> e ora aggiunto a WordPress 5.7, uno switcher Trasforma in variazione<\/strong> appare sotto la scheda del blocco per i blocchi che supportano questa funzionalit\u00e0.<\/p>\n

\"Trasforma
Lo switcher Trasforma in variazione per un blocco Buttons<\/figcaption><\/figure>\n

Quando si registra una nuova variazione di blocco, gli sviluppatori di blocchi possono aggiungere lo switcher di variazione al block inspector inserendo la nuova opzione transform<\/code> al campo scope<\/code> della variazione di blocco, come mostrato nel seguente esempio (solo codice JS):<\/p>\n

wp.blocks.registerBlockVariation( 'core\/heading', { \n\tname: 'green-text',\n\ttitle: 'Green Text',\n\tdescription: 'This block has green text. It overrides the default description.',  \n\tattributes: { \n\t\tcontent: 'Green Text', \n\t\ttextColor: 'vivid-green-cyan' \n\t}, \n\ticon: 'palmtree', \n\tscope: [ 'inserter', 'transform' ] \n} );<\/code><\/pre>\n
In questo esempio, una variazione di blocco appare in due aree della UI dell’editor: il block inserter e il block inspector.<\/p>\n
\"Esempio
Esempio di Variazione di Blocco con scopo transform<\/figcaption><\/figure>\n
Per un’analisi pi\u00f9 approfondita sulle Trasformazioni in Variazione dei Blocchi, si legga anche la PR #26687<\/a>.<\/p>\n
Le Informazioni sui Blocchi ora Corrispondono alle Variazioni di Blocco<\/h4>\n
A partire da WordPress 5.7 (e Gutenberg 9.7<\/a>), la UI mostra informazioni pi\u00f9 specifiche sulle variazioni dei blocchi, mentre prima mostrava solo informazioni generiche.<\/p>\n
\"Informazioni
Prima di WordPress 5.7, gli elementi dell’interfaccia mostravano informazioni generiche sulle variazioni dei blocchi<\/figcaption><\/figure>\n
I blocchi Embed e le Social Icons sono generati come variazioni di blocco; questi forniscono buoni esempi di abbinamento delle informazioni di blocco con le variazioni di blocco.<\/p>\n
\"Informazioni
Ora gli elementi dell’interfaccia mostrano informazioni specifiche sulle variazioni dei blocchi<\/figcaption><\/figure>\n
Questi cambiamenti riguardano il block inspector, la barra di navigazione dei blocchi e i breadcrumb. A partire da Gutenberg 9.8<\/a>, questo miglioramento dell’UI si applica anche allo switcher dei blocchi.<\/p>\n
\"block
Miglioramento dell’interfaccia utente per le variazioni dei blocchi nello switcher di blocco<\/figcaption><\/figure>\n
Nuove API per le Variazioni di Blocco<\/h4>\n
WordPress 5.7 introduce anche nuove API<\/a> che gli sviluppatori possono utilizzare nella registrazione delle variazioni di blocco per mostrare le informazioni corrette di una variazione di blocco (Gutenberg 9.7<\/a>).<\/p>\n
La nuova propriet\u00e0 isActive<\/code> \u00e8 una funzione che accetta gli attributi di un blocco. Potete utilizzare gli attributi della variazione per stabilire se una variazione \u00e8 attiva (vedi anche Block API Reference<\/a>).<\/p>\n
Gli sviluppatori di blocchi possono usare questa funzione per mostrare informazioni sulla variazione invece che sul blocco. Un esempio potrebbe essere il blocco embed<\/code>, dove possiamo cambiare il valore dell’attributo providerNameSlug<\/code> (esempio tratto dalla nota di sviluppo<\/a>):<\/p>\n
const variations = [\n{\n\tname: 'wordpress',\n\ttitle: 'WordPress',\n\tkeywords: [ __( 'post' ), __( 'blog' ) ],\n\tdescription: __( 'Embed a WordPress post.' ),\n\tattributes: { providerNameSlug: 'wordpress' },\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n},\n];<\/code><\/pre>\n
Nell’esempio che segue, la propriet\u00e0 isActive<\/code> \u00e8 utilizzata per cambiare il valore dell’attributo color:<\/p>\n
variations: [\n{\n\tname: 'blue',\n\ttitle: __( 'Blue Quote' ),\n\tisDefault: true,\n\tattributes: { color: 'blue', className: 'is-style-blue-quote' },\n\ticon: 'format-quote',\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.color === variationAttributes.color\n},\n],<\/code><\/pre>\n
Il nuovo hook useBlockDisplayInformation<\/code> restituisce informazioni su un dato blocco. Il nuovo hook tiene conto della propriet\u00e0 isActive<\/code> di una variazione di blocco e restituisce title<\/code>, icon<\/code> e description<\/code> del blocco.<\/p>\n
Queste modifiche interessano Block Card (Inspector Tools), Navigation List View (barra superiore) e le Breadcrumbs (vedi anche PR #27469<\/a>).<\/p>\n
Nuove Funzionalit\u00e0 del Blocco Buttons<\/h3>\n
Un paio di nuove caratteristiche migliorano la funzionalit\u00e0 e l’interfaccia del blocco Buttons.<\/p>\n
Dimensioni dei Pulsanti<\/h4>\n
Un nuovo controllo disponibile nelle impostazioni ci permette ora di impostare una larghezza percentuale per i pulsanti inseriti nei blocchi Buttons (Gutenberg 9.4<\/a>).<\/p>\n
\"Impostazioni
Impostazioni di larghezza per i pulsanti<\/figcaption><\/figure>\n
Basta selezionare un pulsante e scegliere 25%, 50%, 75% o 100%. Le percentuali si riferiscono al container superiore. L’immagine qui sotto mostra diverse combinazioni nelle dimensioni dei pulsanti.<\/p>\n
\"buttons\"
Combinazioni di pulsanti con diversa larghezza<\/figcaption><\/figure>\n
Per approfondimenti tecnici, si fa rinvio alle pull request #25999<\/a> e #26781<\/a>.<\/p>\n
Layout Verticale<\/h4>\n
Questa nuova funzionalit\u00e0 aggiunge variazioni per l’orientamento verticale al blocco Buttons. Gli utenti possono passare da un layout orizzontale a uno verticale utilizzando il selettore delle trasformazioni disponibile nel pannello delle impostazioni del blocco (Gutenberg 9.6<\/a>).<\/p>\n
\"orientamento
Blocco Buttons con disposizione verticale<\/figcaption><\/figure>\n
Miglioramenti alle Social Icon<\/h3>\n
WordPress 5.7 aggiunge nuove opzioni di personalizzazione alle Icone sociali<\/a>: supporto delle dimensioni personalizzate e colori personalizzati.<\/p>\n
Dimensione delle Icone Sociali<\/h4>\n
Con il blocco delle Icone sociali selezionato, la barra degli strumenti del blocco mostra ora un menu di opzioni Dimensione<\/strong> con le dimensioni disponibili (Gutenberg 9.4<\/a>).<\/p>\n
\"social
Dimensione ‘enorme’ per le icone social<\/figcaption><\/figure>\n
Colori Personalizzati nelle Icone Social<\/h4>\n
Lo stesso blocco ora supporta le impostazioni di colore, permettendoci di impostare colori personalizzati diversi per le icone e gli sfondi (Gutenberg 9.9<\/a>).<\/p>\n
\"Icone
Icone social con colore di sfondo nero<\/figcaption><\/figure>\n
Ora possiamo usare la palette di colori del tema per le icone social, evitando che i colori delle icone vadano in conflitto con la combinazione di colori del sito web<\/a> (vedi anche PR #28084<\/a>).<\/p>\n
Supporto per le Dimensioni del Font<\/h3>\n
WordPress 5.7 aggiunge il supporto per le Dimensione del font<\/a> sia per i blocchi Elenco che per i blocchi Codice.<\/p>\n
Dimensione del Font nel Blocco Elenco<\/h4>\n
\u00c8 stata aggiunta alle impostazioni del blocco Elenco la scheda Tipografia, contenente i controlli per la dimensione del carattere (Gutenberg 9.4<\/a>).<\/p>\n
\"Dimensione
Dimensione del font nelle impostazioni del blocco Elenco<\/figcaption><\/figure>\n
Gli utenti possono scegliere una delle dimensioni dei caratteri disponibili per gli elementi della lista o impostare una dimensione del font personalizzata espressa in pixel. Il pulsante “Reimposta” ripristina i valori predefiniti.<\/p>\n
Supporto della Dimensione del Font nel Blocco Codice<\/h4>\n
WordPress 5.7 aggiunge anche il supporto per la gestione delle dimensioni dei caratteri all’interno dei blocchi Codice. Selezionando il blocco Codice, la barra laterale delle impostazioni del blocco visualizza un nuovo controllo Dimensione del font<\/strong>. Questo controllo consente di scegliere una delle dimensioni preimpostate disponibili nel vostro tema<\/a> o di impostare un valore personalizzato in pixel (Gutenberg 9.5<\/a>).<\/p>\n
\"Dimensioni
Dimensioni globali dei font disponibili in Twenty Twenty<\/figcaption><\/figure>\n
L’implementazione di questa funzionalit\u00e0 permette anche di utilizzare variabili di stile globali nel CSS dei blocchi di codice (vedi anche PR #27294<\/a>). L’immagine qui sotto mostra un blocco di codice sul frontend con il tema Twenty Twenty<\/a>.<\/p>\n
\"Stili
Stili CSS globali in un blocco di codice<\/figcaption><\/figure>\n
Allineamento ad Altezza Piena nel Blocco Copertina<\/h3>\n
WordPress 5.7 introduce il nuovo componente Full Height Toolbar Alignment. \u00c8 stato aggiunto per la prima volta all’editor di blocchi con Gutenberg 9.5<\/a>. Ora \u00e8 confluito nel Core e implementato nel blocco Copertina.<\/p>\n
\"Full
Full Height Alignment \u00e8 stato implementato nel blocco Cover<\/figcaption><\/figure>\n
Se si attiva il pulsante della barra degli strumenti del blocco, tenendo d’occhio il controllo dell’altezza minima, si vedr\u00e0 che l’allineamento ad altezza piena \u00e8 solo un’abbreviazione di 100vh<\/code> (si veda le lunghezze in percentuale del viewport<\/a>).<\/p>\n
\"Allineamento
Allineamento ad altezza piena in un blocco copertina<\/figcaption><\/figure>\n
Si pu\u00f2 utilizzare l’allineamento ad altezza piena in combinazione con altre impostazioni come lo sfondo fisso, la posizione del contenuto e cos\u00ec via. Probabilmente rimarrete sorpresi dal numero di effetti sorprendenti che sarete in grado di creare sulle vostre pagine.<\/p>\n
Drag & Drop di Blocchi e Modelli dall’Inseritore<\/h3>\n
L’inseritore di blocchi ora supporta il drag & drop di blocchi e modelli<\/a>. Gli utenti possono prendere qualsiasi blocco o modello dall’inseritore e posizionarlo ovunque sul canvas del post (Gutenberg 9.6<\/a> e 9.7<\/a>).<\/p>\n
\"Ora
Ora \u00e8 possibile trascinare blocchi o modelli dall’inseritore al post canvas<\/figcaption><\/figure>\n
Si noti che il drag & drop funziona solo se il tema corrente supporta i modelli di blocchi.<\/p>\n
Blocco Spazio Vuoto Semitrasparente<\/h3>\n
Al posto del precedente colore grigio opaco, il blocco Spazio Vuoto (Spacer) ora ha uno sfondo semi-trasparente (Gutenberg 9.8<\/a>).<\/p>\n
\"Un
Un blocco Spazio Vuoto opaco in WordPress 5.6<\/figcaption><\/figure>\n
Questa caratteristica dovrebbe rendere pi\u00f9 semplice l’identificazione del blocco Spazio Vuoto al di sopra di qualsiasi colore di sfondo.<\/p>\n
\"Un
Un blocco Spazio Vuoto semitrasparente in WordPress 5.7<\/figcaption><\/figure>\n
Altri Miglioramenti nell’Editor di Blocchi Degni di Nota<\/h3>\n
Il nostro elenco non copre tutte le funzionalit\u00e0 e i miglioramenti entrati a far parte del Core. Date un’occhiata alla documentazione ufficiale e alle note di sviluppo per un registro pi\u00f9 completo delle novit\u00e0 che entrano a far parte dell’editor di blocchi con WordPress 5.7.<\/p>\n
Ma, solo per citarne alcune, nella 5.7 troverete anche:<\/p>\n