Cosa c’è di Nuovo in WordPress 5.9 – Full Site Editing, Stili Globali, Blocchi, Pattern, API, Miglioramenti dell’Interfaccia Utente e Molto Altro

WordPress 5.9 Josephine è qui! Il rilascio della prima versione dell’anno di WordPress 5.9 era inizialmente previsto per il 14 dicembre 2021. A causa di diverse issue ancora aperte e bug irrisolti, il rilascio finale è stato rinviato fino al 25 gennaio 2022.

Se vi state chiedendo cosa c’è di nuovo in WordPress 5.9, la risposta breve è Full Site Editing (FSE).

E infatti, molte funzionalità della 5.9 sono disponibili solo se utilizzate un tema che supporti il Full Site Editing, come il nuovissimo tema predefinito, Twenty Twenty-Two.

Con WordPress 5.9, entriamo nel vivo della seconda fase della roadmap di Gutenberg: la fase di personalizzazione, che si concentra principalmente sul Full SIte Editing, sui Block Pattern, sulla Block Directory e sui temi a blocchi.

Con la 5.9, che uscirà il mese prossimo, siamo – direi – al MVP, il Minimum Viable Product di questa fase di personalizzazione di Gutenberg.

Queste parole di Matt Mullenweg al 2021 State of the Word riassumono al meglio le funzionalità principali della prossima release di WordPress.

Detto questo, cosa possiamo aspettarci di vedere con la prima release di WordPress del 2022?

Scopriamolo insieme!

Global Styles: Un’interfaccia grafica per il theme.json

Con il rilascio di WordPress 5.8 nel 2021, manipolare il file theme.json è diventato il modo standard per gli sviluppatori di temi per personalizzare le impostazioni e gli stili dell’editor.

WordPress 5.9 porta le cose al livello successivo, introducendo un’interfaccia grafica che permette agli utenti di personalizzare i preset di stile per i propri siti web, sia a livello globale che di blocco, senza scrivere una sola riga di codice.

Il meccanismo dei Global Styles dovrebbe modificare significativamente il modo in cui siamo abituati a personalizzare l’aspetto dei nostri siti web, perché gli stili globali influenzano diversi aspetti del design dei siti WordPress.

Prima di tutto, l’interfaccia degli Stili Globali sostituisce il Customizer ed è ora l’unico modo per personalizzare le impostazioni e gli stili nei temi a blocchi. Allo stesso modo, le complesse pagine di amministrazione delle opzioni di alcuni temi non saranno più necessarie. Questo offre un nuovo modo standard di configurare le impostazioni e gli stili dei temi e, allo stesso tempo, dovrebbe semplificare il flusso di lavoro di sviluppo dei temi.

Con gli Stili Globali, gli utenti di WordPress ottengono un maggiore controllo sulla presentazione dei propri siti web, sia a livello globale che per tipo di blocco, al di là del contesto delle singole pagine o post.

È ora disponibile nell’editor del sito una nuova barra laterale, in cima alla quale si troverà un piccolo pannello di anteprima e quattro componenti nel seguente ordine:

• Tipografia
• Colori
• Layout
• Blocchi

Possiamo aspettarci che vengano aggiunti nel tempo nuovi componenti.

Diamo un’occhiata più da vicino alla nuova interfaccia.

Anteprima degli Stili

Il primo elemento nella barra degli stili globali è il pannello di anteprima. Questo pannello vi permette di controllare il risultato delle vostre personalizzazioni ed è utile soprattutto quando si effettuano modifiche su elementi non visibili nell’editor del sito.

L’immagine che segue mostra tre diverse combinazioni di stili a confronto:

Tipografia

Nel pannello Tipografia si controlla la tipografia del sito web. Naturalmente, i controlli disponibili in questo pannello dipendono dalle impostazioni del vostro theme.json.

Per esempio, il tema Twenty Twenty-One Blocks (TT1 Blocks) dichiara le seguenti proprietà di tipografia:

"settings": {
	"typography": {
		"customLineHeight": true,
		"fontSizes": [],
		"fontFamilies": []
	}
}

L’immagine che segue mostra le impostazioni della tipografia risultanti nella sidebar degli stili globali:

Andiamo un po’ più a fondo e vediamo come sono dichiarate le fontFamilies nel tema TT1 Blocks:

"fontFamilies": [
	{
		"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
		"slug": "system-font",
		"name": "System Font"
	},
	{
		"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
		"slug": "helvetica-arial"
	},
	{
		"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
		"slug": "geneva-verdana"
	},
	{
		"fontFamily": "Cambria, Georgia, serif",
		"slug": "cambria-georgia"
	},
	{
		"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
		"slug": "hoefler-times-new-roman"
	}
]

Potete controllare queste famiglie di caratteri nel pannello di anteprima degli Stili Globali:

Colori

Nella sezione Colori, potete visualizzare e modificare le palette di colori e personalizzare il colore di diversi elementi del sito.

Cliccando su questi elementi, avrete accesso ad un nuovo pannello dove potrete scegliere i colori da tre diverse palette di colori: palette Core, Theme, e Custom (leggi di più in Colori predefiniti, Colori del tema e Colori personalizzati).

In questo pannello, potrete impostare e modificare il colore dell’elemento corrente.

Layout

L’ultimo gruppo di strumenti è destinato alla personalizzazione del layout. Nel contesto globale, questo è limitato al container del sito.

Blocchi

Con l’implementazione del meccanismo degli stili globali, ora è possibile anche cambiare l’aspetto di specifici blocchi, come Paragrafo (tipografia e colori), Pulsanti (layout) e Colonna (colori e layout).

Si noti che gli stili dei blocchi possono essere personalizzati dall’interfaccia degli Stili Globali solo se il blocco dichiara il supporto della specifica funzionalità nel corrispondente file block.json. Per esempio, il blocco core/post-title al momento supporta i seguenti stili:

"supports": {
	"align": [ "wide", "full" ],
	"html": false,
	"color": {
		"gradients": true,
		"link": true
	},
	"spacing": {
		"margin": true
	},
	"typography": {
		"fontSize": true,
		"lineHeight": true,
		"__experimentalFontFamily": true,
		"__experimentalFontWeight": true,
		"__experimentalFontStyle": true,
		"__experimentalTextTransform": true,
		"__experimentalLetterSpacing": true,
		"__experimentalDefaultControls": {
			"fontSize": true,
			"fontAppearance": true,
			"textTransform": true
		}
	}
},

Dato che il blocco core/post-title supporta i colori, la spaziatura e la tipografia, troverete le voci corrispondenti nelle impostazioni degli Stili Blobali del blocco Post Title.

L’immagine che segue mostra le impostazioni della tipografia, e potete facilmente confrontarle con il codice riportato sopra:

Vale la pena notare che WordPress 5.9 introduce solo la prima implementazione dell’interfaccia degli Stili Globali. Come sottolinea Matias Ventura, possiamo ragionevolmente aspettarci un ulteriore sviluppo della nuova funzione di controllo degli stili:

In futuro, ci saranno dei flussi incorporati nel sistema che permetteranno di passare dagli stili locali a quelli globali – come fare delle personalizzazioni ad un blocco di pulsanti e scegliere di applicarle globalmente a tutti i pulsanti di quel tipo.

Quindi potremmo vedere presto grandi miglioramenti. L’immagine qui sotto è solo un esempio di quello che possiamo aspettarci:

Ulteriori miglioramenti potrebbero includere la possibilità per i temi di fornire palette di colori alternative e variazioni multiple degli Stili Globali.

Last week I built a handful of Twenty Twenty-Two's color + font variations into super-simple child themes. They're really lightweight, and I love the idea of offering folks a drastically different site with one click.🎉https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) November 15, 2021

Gli sviluppatori possono approfondire il meccanismo degli Stili Globali nell’articolo di supporto Global Settings & Styles (theme.json). Troverete altri esempi nella nostra introduzione al tema predefinito Twenty Twenty-Two.

Il Blocco Navigation

Il blocco Navigation è stato definito “uno dei blocchi di tema di maggior impatto” e non abbiamo paura a dire che siamo d’accordo.

Il blocco è rimasto in fase embrionale per un po’ (vedi anche Navigation Block Tracking Issue e Tracking Issue i2). Tuttavia, ora che tutti i problemi gli impedimenti in sospeso elencati come must-have di WordPress 5.9 sono stati risolti, possiamo finalmente iniziare ad utilizzare una delle funzionalità più potenti inserite nel core con WordPress 5.9.

Una Rapida Panoramica dell’Interfaccia del Blocco di Navigazione

L’utilizzo del nuovo blocco potrebbe essere un po’ complicato all’inizio, ma una volta che ci si prende la mano, si apprezza tutto il suo potenziale.

Quando aggiungete per la prima volta un blocco di Navigazione, il segnaposto del blocco fornisce tre opzioni per selezionare un menu esistente basato sul blocco, creare un menu con tutte le pagine o iniziare da capo con un menu vuoto.

Il nuovo menu di Navigazione vi permette anche di importare i menu creati attraverso la schermata Aspetto – Menu che è disponibile con i temi classici.

Questo significa che, se state passando da un tema classico ad un tema a blocchi, non dovrete ricostruire i vostri menu esistenti. Dovete solo scegliere uno dei vostri “Menu classici” già disponibili e questo sarà automaticamente convertito in un menu di navigazione a blocchi.

Potete aggiungere il blocco Navigazione ovunque nelle vostre pagine. Per esempio, potreste trovarlo utile in articoli lunghi per creare un indice, permettendo agli utenti di saltare a specifiche sezioni del contenuto.

I nuovi link di navigazione vengono aggiunti istantaneamente al blocco Navigazione facendo clic sull’icona più (+) sul lato destro (vedi anche le note di rilascio di Gutenberg 11.7), a meno che altri tipi di blocchi siano già stati aggiunti al menu.

Facendo clic sul pulsante Modifica nella barra degli strumenti del blocco Navigation Link, si converte una voce di menu in un link personalizzato. Questo vi permette di aggiungere, modificare, riordinare e rimuovere le voci singolarmente.

Potete anche trasformare i link in blocchi cliccando sul pulsante Trasforma nella barra degli strumenti del blocco. Questo vi permette di aggiungere blocchi specifici direttamente al menu di navigazione.

Quando si aggiungono blocchi ai menu di navigazione ora sono esposti agli utenti i blocchi Custom Link, Spacer, Site Logo, Home Link, Social Icons, e Ricerca.

Nella barra laterale delle impostazioni, troverete un set completo di opzioni per controllare diversi aspetti dei menu di navigazione.

Il pannello Layout include controlli per la giustificazione, l’orientamento e il wrapping.

Il blocco Navigazione presenta anche il pannello delle impostazioni di visualizzazione migliorato, con un’opzione per un menu hamburger sempre attivo.

Potete anche personalizzare il testo e i colori di sfondo dei menu e sottomenu.

Un’altra utile funzionalità aggiunta di recente al blocco Navigazione è il supporto del Block Gap, che permette agli utenti di controllare la distanza tra le voci di menu.

Il pannello Tipografia fornisce una serie di controlli per la famiglia di caratteri, l’aspetto, l’altezza della linea, la decorazione e le lettere maiuscole. Tutti questi controlli possono essere attivati e disattivati da un menu a tendina che appare quando si fa clic sull’icona ellipsis sulla destra.

Il Blocco Navigazione: Sotto il Cofano

I dati del blocco Navigazione sono memorizzati nel database con il tipo di post dedicato wp_navigation.

Perché questo è interessante per gli utenti di WordPress e come funziona?

Diciamo che abbiamo creato un menu di navigazione composto da due link personalizzati e una casella di ricerca. Con il tema Twenty Twenty-Two installato, il menu potrebbe apparire come mostrato nella seguente immagine:

Il blocco Navigazione qui sopra è memorizzato nel database come post type wp_navigation come segue:

<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Memorizzare il contenuto del blocco Navigazione nel database permette agli utenti di utilizzare gli stessi menu di navigazione in diversi temi a blocchi. Se il menu non è immediatamente visibile, basta scegliere il menu di navigazione desiderato nel selettore dei menu (vedi anche issue #36087 e PR #36178).

L’immagine che segue mostra il menu qui sopra con il tema Twenty Twenty-One Blocks:

Il blocco Navigazione ha attraverso diverse iterazioni. Potete approfondire ogni implementazione nelle note di rilascio di Gutenberg 11.7, 11.8 e 11.9.

Per saperne di più sul blocco Navigazione si legga la nota di sviluppo del nuovo blocco Navigazione e l’articolo di supporto del blocco Navigazione.

Gallerie di Immagini, Immagini in Primo Piano e Icone del Sito

Con l’obiettivo di rendere le immagini più coerenti in diversi contesti, WordPress 5.9 offre nuove funzionalità e miglioramenti a diversi blocchi. Il blocco Galleria è stato completamente rivisto, mentre varie modifiche ai blocchi Immagine in Primo Piano e Icona del Sito danno agli utenti un controllo più granulare sulle rispettive immagini.

Il Nuovo Blocco Galleria

In WordPress 5.8, la capacità di personalizzare l’aspetto delle immagini nelle gallerie era un po’ limitata. Non c’era modo di cambiare lo stile dell’immagine o applicare un filtro duotone.

Inoltre, mancavano importanti funzioni per le immagini delle gallerie, come l’aggiunta di link personalizzati alle singole immagini presenti in una galleria.

Per capire meglio la ragione di questa asimmetria tra le immagini nei due diversi contesti di una singola immagine e di un’immagine in una galleria, diamo un’occhiata al blocco Galleria nella vista Codice in WordPress 5.8:

Si noti che i dettagli delle immagini sono memorizzati solo nel delimitatore del blocco Galleria (vedi anche Cos’è un Blocco Gutenberg?).

Questo ha fatto sì che le singole immagini si comportino diversamente dalle immagini nelle gallerie.

Per far sì che le immagini si comportino in modo coerente nei due diversi contesti, WordPress 5.9 introduce un blocco Galleria completamente riprogettato, che ora si comporta come container di una collezione di elementi figure invece di una lista non ordinata di immagini.

In WordPress 5.9, le immagini delle gallerie sono annidate utilizzando le API core innerBlocks, e ogni immagine memorizza il proprio set di dati, esattamente come le singole immagini.

Si tratta di un grande miglioramento, perché le immagini del blocco Galleria ora supportano le stesse funzionalità disponibili nei blocchi Immagine core, come le dimensioni dell’immagine e i filtri duotone, così come le funzionalità standard del blocco, come il drag-and-drop, le funzionalità di copia, duplicazione e rimozione.

Con il nuovo blocco Galleria, è possibile assegnare lo stile alle immagini individualmente. Questo garantisce una ampia gamma di opportunità di personalizzazione.

L’immagine qui sotto mostra più immagini in una galleria, ognuna con angoli arrotondati diversi:

È anche possibile utilizzare diversi filtri duotone su diverse immagini nella stessa galleria.

E, naturalmente, potrete assegnare una classe CSS specifica ad ogni immagine, il che vi dà altri superpoteri per aggiungere qualsiasi personalizzazione alle immagini delle vostre gallerie.

Per un’analisi più approfondita del nuovo blocco Galleria, si veda anche Gallery Block Refactor Dev Note, Upcoming Gallery Block improvements e Gutenberg 11.4 release notes.

Miglioramenti all’Immagine in Primo Piano

Sono stati apportati diversi miglioramenti anche al blocco Immagine in Primo Piano.

Controlli delle Dimensioni di Base

Il blocco Immagine in Primo Piano ora presenta un nuovo pannello di configurazione Dimensioni con controlli per altezza, larghezza e scala.

Il controllo delle dimensioni si applica anche alle immagini in primo piano presenti nei blocchi Query Loop, come mostrato nell’immagine che segue:

Filtri Duotone sulle Immagini in Primo Piano

Abbiamo detto che ora possiamo applicare il filtro duotone nelle immagini inserite nel nuovo blocco Galleria.

Ora, a partire da WordPress 5.9, i filtri duotone sono disponibili anche nei blocchi Immagine in Primo Piano in ogni contesto, dai template di post e pagine ai blocchi Query Loop.

Questa funzionalità apre la porta a combinazioni di colore creative e coerenti in tutto il sito.

Ritaglio dell’Immagine nel Logo del Sito

Prima di WordPress 5.9 (e Gutenberg 11.6), le immagini del logo potevano essere modificate solo prima di essere caricate. Con WordPress 5.9, è possibile ritagliare, ingrandire e ruotare le immagini utilizzate nel blocco Logo del Sito direttamente dalla barra degli strumenti del blocco.

Nuovi Strumenti di Progettazione, Blocchi e Miglioramenti dell’Interfaccia Utente

Undici versioni di Gutenberg vengono fuse nel core con WordPress 5.9, portanto tante funzionalità, miglioramenti e correzioni di bug che non sarebbe possibile analizzarle tutte in un singolo articolo.

Così abbiamo scelto alcune di quelle che abbiamo trovato più degne di attenzione. Per una panoramica più approfondita di queste funzionalità e miglioramenti, si possono consultare i post di rilascio di Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 e 11.9.

Detto questo, questa sezione analizzerà le seguenti novità:

UI Border Supports

A partire da WordPress 5.9, quando il theme.json dichiara le impostazioni border e un blocco dichiara il supporto dei bordi tramite la Block Supports API, un nuovo pannello di impostazioni fornirà controlli per il raggio, la larghezza, lo stile, il colore e le unità del bordo (si veda anche Gutenberg 11.1).

Il blocco Gruppo del core offre un buon esempio di questo utile miglioramento dell’interfaccia utente. Il file block.json del blocco Gruppo ora include le seguenti dichiarazioni supports:

{
	...
	"supports": {
		"align": [ "wide", "full" ],
		"anchor": true,
		"html": false,
		"color": {
			"gradients": true,
			"link": true
		},
		"spacing": {
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		...
	},
	...
}

Questa funzionalità permette agli utenti di creare effetti grafici impressionanti sui propri siti web con il minimo sforzo. Potete vederlo in azione con il nuovo tema Twenty Twenty-Two.

In un nuovo post o pagina, create un nuovo blocco Gruppo e selezionatelo. Vedrete un pannello Border nella barra laterale delle impostazioni del blocco. Cambiate la larghezza del bordo e lo stile e godetevi il risultato.

Se siete sviluppatori di temi e volete aggiungere questa funzionalità ai vostri temi, aprite il vostro file theme.json e dichiarate il supporto dei bordi come mostrato nel seguente codice:

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		}
	}
}

Salvate il file e tornate alla bacheca di WordPress. In un nuovo post o pagina, create un nuovo blocco Gruppo e selezionatelo. Ora dovreste vedere un pannello Border nella barra laterale delle impostazioni del blocco (si veda anche questo theme.json sperimentale).

Miglioramenti alla List View

Con WordPress 5.9, la List View è stata migliorata e ora dispone di drag and drop, sezioni a scomparsa e ancore HTML.

Drag and Drop nella List View

Come si legge nella pull request #33320, il drag-and-drop era stato già implementato nella Vista Elenco ma è stato poi disabilitato a causa di problemi di prestazioni.

A partire da WordPress 5.9, il drag-and-drop nella Vista Elenco è stato re-implementatoed è di nuovo possibile trascinare e rilasciare blocchi e gruppi di blocchi ovunque nella List View. Si tratta di un grande miglioramento nell’usabilità dell’editor, in quanto permette di spostare rapidamente e facilmente blocchi e gruppi di blocchi all’interno delle pagine. È fondamentale negli articoli e nelle pagine lunghe e nella gestione di strutture complesse di blocchi annidati.

Sezioni a Scomparsa nella Vista Elenco

Un altro miglioramento significativo della Vista Elenco è la possibilità di espandere/aggregare sezioni di blocchi annidati. Questo permette di navigare facilmente in strutture di blocco complesse, espandendo singoli gruppi di blocchi mentre si lascia tutto il resto compattato.

È anche possibile espandere e compattare le sezioni della Vista Elenco usando le frecce destra e sinistra.

Ancore HTML sugli Elementi della Vista Elenco

Un altro utile miglioramento è dato dalla possibilità di aggiungere ancore HTML ai blocchi nella Vista Elenco e vederli con un solo colpo d’occhio.

Controllo della Spaziatura dei Blocchi

Introdotto per la prima volta in Gutenberg 11.4 e ora incorporato nel core con WordPress 5.9, il nuovo controllo della spaziatura dei blocchi permette di impostare una distanza personalizzata tra gli elementi all’interno di un blocco. Qui sotto, vediamo un’anteprima con diversi valori di spaziatura dei blocchi in un blocco Colonne con il tema predefinito Twenty Twenty-Two:

Il Gap Spacing sarà inizialmente disponibile solo per blocchi specifici, tra cui pulsanti, immagini, colonne, titoli e navigazione, ma il supporto dovrebbe essere esteso ad altri blocchi in futuro.

I temi dovrebbero abilitare la spaziatura nel theme.json utilizzando la nuova proprietà appearanceTools. Potete leggere di più sugli strumenti relativi all’aspetto nella nostra analisi approfondita di Twenty Twenty-Two. Si vedano anche le pull request #33991 e #34630.

Anteprima Rich URL per il Controllo Link

Sfruttando il nuovo endpoint REST url-details, il controllo Link ora fornisce una anteprima Rich URL che mostra i dettagli della risorsa di destinazione del link.

Nella sua prima implementazione, questa funzionalità era disponibile solo nel componente richtext del Post Editor. Al momento in cui si scrive, è disponibile anche nell’Editor del sito, ma non negli editor di navigazione e dei widget.

Creare Pagine dal Popup dei Link

WordPress 5.9 presenta anche un’interfaccia utente migliorata per i link in linea, mostrando un nuovo pulsante per creare nuove pagine direttamente dal popup dei link. Questa funzionalità è disponibile solo all’interno dell’editor dei post.

Miglioramenti al Blocco Ricerca

Il blocco di ricerca ora mostra le impostazioni del colore del pulsante e del bordo.

Ora è possibile anche personalizzare il colore dello sfondo e del testo e il colore e il raggio del bordo.

Nuovi Controlli per le Dimensioni dei Blocchi

Un nuovo pannello di impostazioni Dimensioni è ora disponibile e permette di controllare lo spazio occupato da un blocco nella pagina. Il pannello dovrebbe includere controlli di altezza, larghezza, padding, margine e possibilmente allineamento, ma non tutti gli attributi saranno disponibili per ogni blocco.

Gli sviluppatori di blocchi troveranno il componente <DimensionControl /> documentato su GitHub, ma si noti che, mentre scriviamo, è ancora contrassegnato come funzionalità sperimentale e potrebbe essere soggetto a modifiche.

Un Nuovo blocco Widget Group Aggiunto alla Schermata dei Widget

Un nuovo blocco Widget Group è ora disponibile nell’editor dei widget a blocchi. L’ultimo blocco permette di aggiungere un gruppo di blocchi in un widget assegnando un titolo nell’Editor dei widget dei temi classici e nel Customizer.

Potete leggere di più sull’editor dei widget in Block-Based Widgets Editor and Block Widgets in the Customizer.

Flex Layout e il Nuovo Blocco Row

Introdotto come funzionalità sperimentale con Gutenberg 11.2, il layout flex è stato esteso a diversi blocchi, compresi i blocchi Link Sociali e Gruppo.

Alcuni blocchi, come il blocco Link Sociali, ora forniscono un insieme di controlli nella barra degli strumenti e di impostazioni nella barra laterale che vi permettono di personalizzare il layout flex.

Questa stessa funzionalità è disponibile nel blocco Navigazione e nel blocco Row, una nuova variazione del blocco Gruppo introdotta con Gutenberg 11.5.

L’immagine che segue mostra il blocco Row con i controlli di layout nella barra laterale delle impostazioni:

Qui sotto, potete vedere lo stesso blocco Row sul frontend e nell’inspector di Chrome.

Miglioramenti ai Block Pattern

Introdotti per la prima volta con WordPress 5.5, i block pattern permettono agli utenti di WordPress di inserire complesse strutture di blocchi annidati pronte all’uso nei loro contenuti con pochi clic.

Adesso WordPress 5.9 fa un passo in avanti verso la democratizzazione del design e il potenziamento dell’utente introducendo diversi miglioramenti al sistema dei block pattern.

Allora, cosa c’è di nuovo per i block pattern in WordPress 5.9?

Pattern in Evidenza dalla Pattern Directory

Il Block Inserter ora mostra i Featured Block Patterns (Modelli in Evidenza nella versione italiana) recuperati dinamicamente dalla Pattern Directory, fornendo agli utenti un modo semplice e veloce per trovare i modelli più popolari da utilizzare nei propri contenuti.

Allo stesso modo, dato che i modelli entrano direttamente nella bacheca di WordPress, gli sviluppatori di WordPress dovrebbero essere incoraggiati a creare e pubblicare sempre più pattern nel tempo, con il risultato di dare agli utenti capacità di design sempre più avanzate.

Un Nuovo Pattern Explorer a Tutto Schermo

Dato che il numero di block pattern disponibili nella Pattern Directory continua a crescere e sempre più temi li utilizzano, WordPress 5.9 introduce una nuova interfaccia di navigazione dei block pattern: il Pattern Explorer.

Un nuovo pulsante Esplora ora apre un modale a tutto schermo che permette agli utenti di sfogliare, cercare e inserire block pattern con pochi clic. Il risultato è un’esperienza utente migliorata.

Troverete altre note e diversi esempi di block pattern nella nostra analisi approfondita del tema di WordPress Twenty Twenty-Two.

Se siete interessati e volete saperne di più, potete anche ascoltare l’episodio 16 e l’episodio 21 del podcast di Josepha Haden Chomphosy e guardare il video YouTube Exploring WordPress 5.9 di Anne McCarthy.

Il Tema Twenty Twenty-Two e i Temi a Blocchi di WordPress

Con WordPress 5.9, non avrete più bisogno di installare il plugin Gutenberg per abilitare il Full Site Editing sul vostro sito WordPress. Avrete solo bisogno di abilitare un tema a blocchi per approfittare di tutte le funzionalità dell’FSE.

Inoltre, WordPress 5.9 viene distribuito con un nuovissimo tema predefinito, Twenty Twenty-Two, e si apre uno scenario completamente nuovo perché Twenty Twenty-Two è il primo tema a blocchi predefinito in assoluto.

Twenty Twenty-Two è un tema altamente flessibile e personalizzabile. Fornisce una sandbox perfetta per provare il nuovo flusso di editing dei template, i nuovi blocchi, i miglioramenti dell’interfaccia e tutte le funzionalità di editing del sito aggiunte al core a partire da WordPress 5.9.

Come abbiamo detto prima, tutto quello che dovete fare è installare e attivare un tema a blocchi, come Twenty Twenty-Two. Una volta che il tema è attivo, apparirà nel menu di amministrazione della bacheca di WordPress la nuova voce di menu Editor (beta).

L’interfaccia dell’editor del sito ora è caratterizzata da un flusso di editing del sito rinnovato. Dall’interfaccia di editing potrete modificare visivamente la homepage del sito, i template e le template part, oltre ad accedere all’interfaccia degli Stili globali.

Quando attivate un tema a blocchi, non troverete più il Customizer. Questo perché il Customizer non supporta i temi a blocchi, i quali utilizzano solo l’Editor del sito. Questo è anche il motivo per cui non vedrete più l’anteprima del tema per i temi a blocchi inattivi.

Quindi, a partire da WordPress 5.9, il punto di accesso al Customizer non è più disponibile nel menu di amministrazione quando è attivo un tema a blocchi (a meno che non stiate usando un plugin che ne fa uso).

Se siete ancora legati ai temi tradizionali e siete preoccupati della retrocompatibilità, potete stare tranquilli: potete continuare ad utilizzare il vostro tema.

Al momento avete quattro diverse categorie di temi tra cui scegliere:

• Temi a blocchi: Temi progettati per il Full Site Editing
• Temi universali: Temi che funzionano sia con il Customizer che con l’Editor del sito
• Temi ibridi: Temi classici che supportano le funzionalità di FSE come il theme.json
• Temi classici: Temi con template PHP, functions.php, ecc.

Per via dell’impatto che i temi a blocchi avranno probabilmente sull’ecosistema di WordPress, abbiamo dedicato un intero articolo a Twenty Twenty-Two e ai temi a blocchi di WordPress per offrire una panoramica più approfondita.

Miglioramenti delle Prestazioni

Qui da Kinsta, siamo ossessionati dalla velocità dei siti web. Ecco perché siamo entusiasti dei miglioramenti delle prestazioni in arrivo con WordPress 5.9.

Questi miglioramenti interesseranno diverse aree del CMS, dall’editor dei blocchi ai temi a blocchi, al lazy loading e altro ancora. Scopriamo le novità.

Miglioramenti del Block Inserter

A partire da WordPress 5.9, i block type, i template e le categorie sono resi nel Block Inserter con lazy loading. Il browser carica prima il contenuto a priorità più alta, dando all’utente un’esperienza di editing più fluida e prestazioni migliori.

Altri notevoli miglioramenti delle prestazioni nel contesto dell’editor di blocchi riguardano i blocchi riutilizzabili e la List View.

Meno CSS Caricati

Per quanto riguarda il frontend, WordPress 5.9 ha ridotto drasticamente la quantità di CSS caricato dai temi a blocchi, e questo fa sì che le pagine carichino in modo significativamente più veloce.

Il principale miglioramento in questo contesto è l’introduzione del meccanismo delle impostazioni e degli stili del theme.json, che evita che i temi utilizzino enormi fogli di stile, con centinaia di dichiarazioni CSS. La quantità di codice CSS utilizzata da un tema è stata ridotta a poche proprietà CSS personalizzate che qualsiasi tipo di blocco può riutilizzare.

Miglioramenti nelle Prestazioni del Lazy Loading

Il lazu loading delle immagini è stato introdotto per la prima volta in WordPress 5.5. A partire da WordPress 5.7, la funzionalità di lazy loading è stata estesa agli iframe, permettendo ai proprietari dei siti di costruire siti web più veloci e migliorare la SEO.

Tuttavia, a seguito di un’analisi del Largest Contentful Paint (LCP), si è scoperto che assegnare l’attributo loading="lazy" a tutte le immagini e agli iframe nella pagina causa una carta degradazione delle prestazioni.

Saltare semplicemente l’attributo loading="lazy" non era una soluzione perché così facendo si sarebbero persi i chiari vantaggi del lazy loading.

La soluzione ottimale sarebbe quella di omettere l’attributo loading="lazy" solo dalle immagini che appaiono sopra la piega. Tuttavia, dato che l’attributo loading="lazy" viene assegnato sul lato server, WordPress non può stabilire quali immagini vengono visualizzate esattamente sopra la piega. È qualcosa che dipende principalmente dal tema attivo.

Ora, come soluzione di compromesso, a partire da WordPress 5.9, l’attributo loading="lazy" non viene applicato alla prima immagine di contenuto o iframe. Da un’analisi condotta su 50 temi WordPress popolari si è scoperto che questa soluzione porta a notevoli miglioramenti nelle prestazioni e a pagine che caricano fino al 30% più velocemente.

Felix Arntz spiega come funziona:

… per migliorare le prestazioni nativamente senza richiedere allo sviluppatore di personalizzare il comportamento, WordPress ora salta il lazy loading della prima “immagine di contenuto o iframe” sulla pagina. Il termine “immagine di contenuto o iframe” qui denota qualsiasi immagine o iframe che si trova all’interno del contenuto di qualsiasi post nel Loop della query principale corrente, così come qualsiasi immagine in evidenza di tale post. Questo si applica sia al contenuto “singolo” che a quello “d’archivio”: In un contesto “singolo” la prima immagine o iframe del (unico) post non viene caricata pigramente, mentre in un contesto “archivio” la prima immagine o iframe del primo post nella query non viene caricata pigramente.

Gli sviluppatori di temi possono ora utilizzare il nuovo filtro wp_omit_loading_attr_threshold per cambiare il numero di immagini/iframe da non caricare con lazy loading.

Fogli di Stile Multipli per Blocco

Gli sviluppatori di blocchi e temi possono registrare fogli di stile multipli su ogni blocco e caricare stili da altri blocchi quando necessario. Questo permette di caricare i fogli di stile a seconda del contenuto della pagina, evitando che i temi carichino enormi fogli di stile su ogni pagina.

Secondo Ari Stathopoulos

I blocchi saranno ora in grado di registrare più fogli di stile e caricare gli stili da altri blocchi quando necessario. I temi saranno in grado di aggiungere stili in base al blocco invece di caricare fogli di stile monolitici che vengono caricati forzatamente ovunque. Questo ha un impatto maggiore sui temi a blocchi dove il caricamento dei fogli di stile è ottimizzato in base ai contenuti della pagina e del layout, ma può essere utilizzato anche dai temi classici.

Funzionalità Aggiuntive per Sviluppatori

Oltre alle molte funzionalità e ai miglioramenti dell’interfaccia utente analizzati finora, WordPress 5.9 introduce anche diverse funzionalità per sviluppatori.

Un Nuovo Attributo per Bloccare i Blocchi

Gli sviluppatori di blocchi possono ora impedire agli utenti di spostare o eliminare singoli blocchi aggiungendo un attributo lock nelle impostazioni del blocco:

{
	...
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"move": true,
				"remove": true
			}
		}
	}
}

Abilitando questa funzione, gli utenti possono modificare il contenuto del blocco, ma non possono spostare il blocco nella pagina o rimuoverlo dal canvas dell’editor. L’immagine che segue mostra un blocco personalizzato con un set standard di controlli della barra degli strumenti:

Definendo l’attributo lock, come si vede nel codice qui sopra, si nascondono le maniglie di spostamento del blocco e i controlli Move to e Remove dalla barra degli strumenti del blocco. L’immagine qui sotto mostra il risultato finale sullo schermo:

È possibile anche bloccare un blocco specifico in un block pattern. Per un esempio, si veda anche Locking Blocks in WordPress 5.9.

Nuova API per Accedere alle Impostazioni e Agli Stili Globali

WordPress 5.9 introduce una nuova API PHP pubblica per leggere i dati dal theme.json.

Leggere le Impostazioni e gli Stili dal theme.json

Ci sono due nuove funzioni per leggere i dati dalle sezioni settings e styles dichiarate nel theme.json:

wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );

• $path è un array che lista il percorso dell’impostazione specificata
• $context è un array che imposta il contesto per quei dati. Gli sviluppatori possono leggere da una specifica sezione delle impostazioni del blocco – per esempio, array( 'block_name' => 'core/paragraph' ). La chiave orygin impostata su base permette di ignorare i dati personalizzati salvati dall’utente.

Il seguente codice di esempio restituisce il valore dell’impostazione contentSize. In Twenty Twenty-Two, sarebbe 650px:

wp_get_global_settings( array( 'layout', 'contentSize' ) );

Impostando un contesto, è possibile recuperare gli stili per blocchi specifici. Il seguente codice mostra come recuperare il valore del raggio del bordo per il blocco core/button:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button' )
	);
}

La funzione qui sopra restituisce il valore della proprietà richiesta considerando le impostazioni predefinite, le impostazioni del tema e i dati dell’utente. Il valore personalizzato sarà fornito se l’utente configura il raggio del bordo del pulsante nell’interfaccia degli Stili globali.

Per ignorare i dati dell’utente, bisognerebbe utilizzare il seguente codice:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button', 'origin' => 'base' )
	);
}

Ottenere il Foglio di Stile Generato

WordPress 5.9 introduce anche una nuova funzione che permette di ottenere il foglio di stile risultante dagli stili predefiniti, del tema e personalizzati:

wp_get_global_stylesheet( $types = array() );

$types è un elenco degli stili da generare.

Potete leggere di più sulle nuove API in New API to access global settings & styles.

Altre Funzionalità per Sviluppatori

Ulteriori novità di WordPress 5.9 per sviluppatori cui potreste essere interessati includono:

• Temi a blocchi, un nuovo modo di costruire temi in WordPress 5.9
• Aggiornamenti per Impostazioni, Stili e theme.json
• Modifiche e filtri incentrati sui temi in WordPress 5.9
• Nuove query di capacità in WordPress 5.9
• Modifiche varie al core in WordPress 5.9
• Modifiche varie all’editor di blocchi in WordPress 5.9
• Maggiore controllo sulle aree interne dei blocchi (come sviluppatore di blocchi)

Riepilogo

Concludiamo questo articolo con una breve nota sulla quota di mercato di WordPress. WordPress attualmente alimenta oltre il 65% di tutti i siti web il cui sistema di gestione dei contenuti è conosciuto e si trova un po’ più su del 43% di tutti i siti web.

Questi numeri sono impressionanti, specialmente se paragonati ai concorrenti più vicini che hanno meno del 5% di quota di mercato, come Shopify.

E questo significa anche che non è possibile trascurare l’evoluzione del CMS WP. Ogni nuova versione di WordPress porta nuove funzionalità, miglioramenti dell’interfaccia, miglioramenti delle prestazioni e WordPress 5.9 non fa eccezione. Tutto ciò di cui avete bisogno per testare le nuove funzionalità è un tema a blocchi, come il nuovo tema predefinito Twenty Twenty-Two, e sarete pronti a cominciare.

A voi la parola ora! Siete pronti a passare ai temi a blocchi e al Full Site Editing? E quali sono le vostre novità preferite in arrivo con WordPress 5.9?