Quiella di WordPress 5.8 sarà una release epocale. A parte l’incredibile numero di funzionalità, miglioramenti e correzioni di bug, WP 5.8 introduce un nuovo modo di costruire siti web con l’introduzione delle prime funzionalità che rientrano nel più ampio progetto noto come Full Site Editing.

Oltre al Full Site Editing, WordPress 5.8 ci porta tantissime modifiche e miglioramenti in diverse aree del CMS.

Gli utenti di WordPress che non utilizzano il plugin Gutenberg troveranno tutte insieme le funzionalità e i miglioramenti introdotti da ben nove versioni di Gutenberg (per un’analisi approfindita di ogni versione, si veda Gutenberg 9.9, 10.0, 10.1, 10. 2, 10.3, 10.4, 10.5, 10.6, 10.7).

Una novità importante per gli utenti che prendono sul serio le prestazioni dei propri siti è il supporto del formato WebP.

Gli sviluppatori apprezzeranno sicuramente la rimozione di IE11 dall’elenco dei browser supportati, la nuova configurazione dei blocchi e il meccanismo di configurazione e stile basato sul file theme.json, il migliorato sistema di registrazione dei blocchi basato sul file block.json e i molti miglioramenti alle API in arrivo con la seconda release del 2021.

Quindi, mettetevi comodi perché sarà una lunga carrellata di funzionalità e miglioramenti che aprono la strada a nuovi potenti strumenti di site-building che saranno progressivamente rilasciati nei prossimi mesi.

Important

Ci sono tantissime novità in WordPress 5.8. Per evitare qualsiasi rischio di incorrere in conflitti imprevisti con il tema e con i plugin, consigliamo vivamente di eseguire un backup del sito web e testare la nuova versione in un ambiente di stage prima di aggiornare il sito live.

Funzionalità di Full Site Editing in WordPress 5.8

La visione alla base del Full Site Editing è quella di fornire un insieme di strumenti e funzionalità che permettano agli utenti di WordPress di costruire un intero sito web utilizzando i blocchi. Con il Full Site Editing, avremo a disposizione blocchi per creare qualsiasi elemento sulla pagina, dai menu di navigazione al site branding, dai widget della sidebar ai template e molto altro.

Anche se WordPress 5.8 introduce diverse funzionalità che rientrano nell’ambito del Full Site Editing (FSE), non possiamo aspettarci di vedere un ambiente di costruzione visiva del sito completa in tutte le sue funzionalità. Il FSE è ancora in pieno sviluppo, e il rilascio di WordPress 5.8 apre una sorta di fase beta pubblica. Secondo Josepha Haden Chomphosy:

Il full site editing è un insieme di progetti che insieme rappresentano un grande cambiamento, probabilmente troppo grande per una sola release. La cosa più importante da condividere è che non viene fornito come esperienza completa e predefinita per gli utenti. Uno dei feedback più chiari che abbiamo ricevuto durante la Fase Uno del processo di fusione è stato che non c’era abbastanza tempo per i nostri estensori (agenzie, autori di temi, sviluppatori di plugin, costruttori di siti, ecc) per prepararsi ai cambiamenti in arrivo.

Con questo bene in mente, il processo di fusione non porterà un interruttore on/off. Il focus ora non è tanto su un’esperienza utente completa e sfumata, ma più su una beta pubblica aperta all’interno di WordPress 5.8.

.
Quindi non dobbiamo aspettarci di vedere un’esperienza FSE perfetta e completa in questo momento. Piuttosto vedremo nuove funzionalità aggiunte e migliorate nel tempo, a partire proprio dalla versione 5.8. Per lo stesso motivo, possiamo presumere che WordPress 5.8 non avrà un impatto drastico sul modo in cui siamo abituati a costruire siti web.

Al momento in cui scriviamo, i proprietari di siti e gli amministratori devono ancora optare consapevolmente per l’FSE installando un tema a blocchi, come Twenty-Twenty One Blocks (la versione a blocchi di Twenty-Twenty One), e attivando il plugin Gutenberg.

Il Full Site Editing comprende una serie di sottoprogetti separati, tra cui Site Editor, Global Styles, Query block, Navigation block, Templates, temi a blocchi e molto altro. Ma la cosa più vicina al Site Editing che vedremo in WordPress 5.8 è la Modalità di Template Editing e i corrispondenti Blocchi per i temi disponibili in questa modalità, come vedremo più avanti in questo articolo.

Dunque, immergiamoci nelle prime funzionalità del FSE confluite nel Core con WordPress 5.8.

Modalità di Template Editing

Il Template Editing Mode fornisce un modo per creare template di post e pagine utilizzando blocchi. È un ottimo modo per ridurre la complessità della costruzione di un sito, permettendo agli utenti di approfittare di diverse funzioni di modifica del sito dal di fuori dell’interfaccia dell’editor del sito, mentre ci si abitua a lavorare con i blocchi. È anche ottimo per gli utenti che non utilizzano temi basati su blocchi, ma cercano comunque un modo semplice per creare e modificare i template dall’interfaccia utente dell’editor di blocchi.

Personalizzare i temi non è mai stato così facile in WordPress. Ora non è più necessario creare un child theme per creare template personalizzati. Il Template Editing non è limitato ai temi a blocchi, ma è anche disponibile per i temi classici, anche se nei temi classici la funzionalità deve essere abilitata dall’utente.

L'editor dei template.

L’editor dei template.

Per creare un nuovo template, è sufficiente attivare la modalità di modifica del template nella barra laterale delle Impostazioni. QUi è disponibile il nuovo pannello Template che permette agli utenti di cambiare la modalità di editing (si veda la nota di sviluppo di Gutenberg 10.5).

Pannello dei Template nella Sidebar dell'editor di blocchi.

Pannello dei Template nella Sidebar dell’editor di blocchi.

Dal pannello Template, è possibile creare un nuovo template o modificarne uno esistente.

Impostazione del nome di un template.

Per creare un nuovo template, fate clic su Nuovo. Quindi inserite un nome per il template nel modale e poi su Crea, e siete pronti per le vostre modifiche.

Template Editing Mode in WordPress 5.8.

Template Editing Mode in WordPress 5.8.

Nella modalità di template editing, è possibile creare i propri template utilizzando tutti i blocchi disponibili, compresi i blocchi del FSE come Site Title, Site Tagline, Login/out e molti altri.

Una volta che si è soddisfatti delle modifiche, si può tornare alla modalità di editing del Post e salvare il template separatamente dal contenuto del post o della pagina, come mostrato nell’immagine qui sotto:

Le opzioni di salvataggio del template.

Le opzioni di salvataggio del template.

I template sono memorizzati nel database di WordPress come custom post type dal nome wp_template. Questo non solo permette di modificare un template dall’interfaccia dell’editor, ma anche di importare o esportare facilmente i template. È anche possibile utilizzare un template su diversi siti web (al momento in cui scriviamo, questa funzionalità è disponibile solo attivando il plugin Gutenberg).

Esportazione di template e parti di template.

Esportazione di template e parti di template.

Info

Si noti che se si imposta un template a blocchi per una pagina o un articolo del blog, per generare la pagina non sarà più utilizzato il normale template PHP. Verrà invece utilizzato il template a blocchi.

Mentre scriviamo, la modalità di Template Editing presenta ancora alcuni bug, come riportato in questo invito ai test e questo esperimento di Justin Tadlock.

Errore nell'allineamento a larghezza piena nel tema classico Twenty Twenty-One.

Errore nell’allineamento a larghezza piena nel tema classico Twenty Twenty-One.

Ma basta avere un po’ di pazienza e aspettare che i principali errori vengano risolti per comprendere appieno come il Template Editing cambierà il modo di personalizzare l’aspetto dei propri siti.

Gli utenti non avranno più bisogno di competenze da sviluppatore per avere il controllo completo sul layout e sull’aspetto generale del proprio sito web.

L'errore nell'allineamento a larghezza piena è stato risolto.

L’errore nell’allineamento a larghezza piena è stato risolto.

Il Template Editing era inizialmente disponibile sia per i temi a blocchi che per i temi classici. Dopo un’attenta discussione nel canale dei lead della versione 5.8, è stato deciso di rendere l’editor dei template opzionale per i temi classici e predefinito per i temi a blocchi (si veda anche pull #32858).

Secondo Carolina Nymark:

Inizialmente, la modifica dei template era abilitata per tutti i temi. Gli sviluppatori di temi hanno espresso la preoccupazione di non poter aggiornare tutti i loro temi classici esistenti per supportare questa nuova funzionalità. Con un cambiamento tardivo, la release squad e l’editor team hanno deciso di cambiare l’editing dei template rendendolo opzionale per i temi classici.

Per l’opt-in nei temi classici, ora gli sviluppatori dovrebbero aggiungere il supporto ai temi:

add_theme_support( 'block-templates' );

I temi classici che usano il theme.json possono rimuovere il supporto del tema come segue:

remove_theme_support( 'block-templates' );

Per una panoramica più dettagliata del Template Editing Mode in WordPress 5.8 e alcuni utili esempi di utilizzo, non perdete questo video di Anne McCarty:

Blocchi dei Temi

Come accennato in precedenza, il FSE non è una singola funzionalità, ma un insieme completo di funzioni di site-building che non sono solo legate all’editor del sito. Il Template Editing ne è solo un esempio. Ma, insieme al Template Editing, WordPress 5.8 introduce anche molti blocchi per i temi che permettono di visualizzare informazioni recuperate dinamicamente dal database. Alcuni di questi blocchi possono essere utilizzati anche in contesti diversi dal FSE (si veda la issue #28744).

Blocchi del Full Site Editor disponibili in contesti non-FSE a partire da WordPress 5.8.

Blocchi del Full Site Editor disponibili in contesti non-FSE a partire da WordPress 5.8.

I blocchi dei temi estendono le funzionalità dei template tag ai temi classici e si possono utilizzare allo stesso modo dei blocchi regolari. Ad esempio, è possibile aggiungere i tag del post o l’immagine di anteprima del post in qualsiasi punto del contenuto del post o del template. Per avere un’idea del numero di blocchi dei temi aggiunti al core con WordPress 5.8, basta digitare /post nel segnaposto del blocco:

Blocchi dei temi suggeriti

Blocchi dei temi suggeriti.

Un utile blocco di tema disponibile con WordPress 5.8 è il blocco Login/out, che fornisce link di login e logout. Il blocco può anche essere configurato in modo da visualizzare il modulo di login invece di un link. Gli amministratori di siti WordPress possono anche personalizzare il target di redirect (vedi PR #29766).

Il blocco Login/out e le rispettive impostazioni nell'editor di blocchi.

Il blocco Login/out e le rispettive impostazioni nell’editor di blocchi.

Per un’analisi più approfondita dei blocchi del FSE, si veda “Enabling Full Site Editor blocks in classic themes” su Github.

Il Blocco Query Loop

Quante volte ci siamo trovati nella situazione di dover visualizzare una lista personalizzata di articoli del blog o di custom post type? Si pensi a elenchi di prodotti, di eventi, di immobili… Naturalmente, ci sono tantissimi plugin tra cui scegliere per creare simili liste, ma la capacità di creare query altamente personalizzate spesso richiede competenze da sviluppatore per cimentarsi con il Loop di WordPress.

Con l’introduzione del blocco Query Loop nel Core di WordPress, i proprietari e gli amministratori di siti possono creare elenchi di articoli e CPT senza scrivere codice complesso o dover assumere uno sviluppatore, almeno nei casi di utilizzo più comuni.

Dunque, cosa fa il blocco Query Loop?

In breve, fa lo stesso lavoro del Loop di WordPress, ma nel contesto visuale dell’editor di blocchi.

Il blocco Query Loop esegue sul database di WordPress una query basata sulle impostazioni dell’utente, esegue un loop su ogni post recuperato e visualizza i dati sulla pagina.

Dopo un intenso sviluppo, questo blocco ha raggiunto la sua struttura attuale e ora consiste di due blocchi annidati: i blocchi Query e Post Template.

La List View di un blocco Query Loop.

La List View di un blocco Query Loop.

Essendo una funzionalità avanzata, il blocco Query Loop richiede alcune configurazioni.

In primo luogo, è possibile scegliere tra diversi modelli di blocco (block pattern) visualizzati come Carousel e Griglia. Una volta scelto il modello, basta cliccare su Scegli, e il blocco Query Loop genererà un elenco personalizzato di post.

Modelli di blocco Query Loop in visualizzazione Griglia.

Modelli di blocco Query Loop in visualizzazione Griglia.

Facendo clic su Start blank, si vedrà una lista di quattro varianti Core del blocco: Titolo & Data; Titolo & Estratto; Titolo, Data & Campo; Immagine, Data & Titolo (si veda Offering Patterns on Block setup).

Varianti del blocco Query Loop.

Varianti del blocco Query Loop.

Una volta in posizione, selezionando il blocco Query Loop verrà visualizzata la barra laterale delle impostazioni del blocco, dove è possibile costruire la query. Si può ereditare la query dall’URL o personalizzare gli argomenti della query: il tipo di post da includere nella lista, l’ordine di visualizzazione e se avere o meno post fissi.

È anche possibile impostare diversi filtri, scegliendo tra categorie, autori e parole chiave.

Il blocco Query Loop con le impostazioni della barra laterale.

Il blocco Query Loop con le impostazioni della barra laterale.

Inoltre, un pulsante Impostazioni di Visualizzazione (Display settings) nella barra degli strumenti del blocco fornisce altre impostazioni che permettono di controllare il numero di elementi per pagina, l’offset e il numero massimo di pagine da mostrare.

Impostazioni di visualizzazone del blocco Query Loop.

Impostazioni di visualizzazone del blocco Query Loop.

In effetti il blocco Query Loop è uno strumento potente, che permette ai proprietari di siti di creare elenchi finemente personalizzati di post e custom post type.

Ma se si dà un’occhiata ai parametri della classe WP_Query, è chiaro che il livello di personalizzazione ottenibile utilizzando il codice è molto più granulare di quanto sia possibile utilizzando il blocco Query Loop.

Tuttavia, è davvero uno strumento prezioso e flessibile che si presta a svariati impieghi, e molto probabilmente vedremo ulteriori miglioramenti in futuro.

Info

I blocchi Query Loop e Post Template sono stati rinominati diverse volte nelle ultime settimane. La denominazione finale è stata raggiunta con Gutenberg 10.9.

Persistent List View nell’Editor dei Post

Un’altra caratteristica dell’FSE estesa al Post Editor è la Persistent List View. Prima di WordPress 5.8 (e Gutenberg 10.7), la List View veniva visualizzata in un popover. Quando si spostava il focus fuori dal popover, l’elenco scompariva.

Al contrario, il Site Editor mostrava la List View in una barra laterale contenente l’intero albero dei blocchi.

Con WordPress 5.8, la List View è visualizzata in una barra laterale anche nel Post Editor, permettendo agli utenti di navigare nell’albero dei blocchi in modo più rapido e preciso.

La barra laterale della List View in WordPress 5.8.

La barra laterale della List View in WordPress 5.8.

Facendo clic su un elemento nella List View si evidenzia la voce dell’elenco e si sposta il focus sul blocco corrispondente nell’editor del Post. Inoltre, se si passa il mouse sopra gli elementi presenti nella List View, vengono evidenziati sia l’elemento che il blocco corrispondente nell’Editor del Post.

Passaggio del mouse sugli elementi della List View.

Passaggio del mouse sugli elementi della List View.

Infine, aggiungendo un’ancora a un blocco, questa apparirà anche accanto all’elemento corrispondente nella List View.

Aggiungere un'ancora ai blocchi in WordPress 5.8.

Aggiungere un’ancora ai blocchi in WordPress 5.8.

Con tutti questi miglioramenti alla List View, la navigazione di documenti complessi dovrebbe essere molto più semplice e rapida.

Widget Editor a Blocchi e Widget a Blocchi nel Customizer

L’editor a blocchi dei widget è un progetto di ampio respiro che mira a portare l’interfaccia dell’editor di blocchi ai widget dei temi classici.

Il nuovo editor di widget offre molti vantaggi a coloro che utilizzano ancora i temi classici, che sono ancora la grande maggioranza di utenti. Allo stesso tempo, permette loro di familiarizzare con l’interfaccia a blocchi prima che diventi standard per tutti gli utenti di WordPress.

Modale dei widget a blocchi.

Modale dei widget a blocchi.

Come sottolineato da Anne McCarty, i widget a blocchi forniscono diversi vantaggi, tra cui:

Anche Andrei Draganescu sottolinea i vantaggi offerti dalla possibilità di modificare i widget da un’interfaccia basata sui blocchi:

Il vantaggio principale dell’aggiornamento della funzionalità dei widget ai blocchi deriva dalla possibilità di modificare direttamente i widget utilizzando la familiare interazione dei blocchi che si usa quando si modifica una pagina o un post sul proprio sito. Essere in grado di utilizzare i blocchi apre una moltitudine di nuove possibilità creative, dai mini layout senza codice alla disponibilità della vasta libreria di blocchi core e di terze parti per creare contenuti.

Non dovete preoccuparvi che i vostri widget possano smettere di funzionare con WordPress 5.8 perché la community ha lavorato duramente per garantire la retrocompatibilità in modo che “i widget esistenti e i widget di terze parti continuino a funzionare e possano essere utilizzati insieme ai blocchi” (si legga al riguardo Block-based widgets editor in WordPress 5.8).

Ma, di nuovo, per evitare qualsiasi problema di compatibilità sulla vostra installazione esistente di WordPress, prima di aggiornare il vostro sito live non dimenticate di testare la nuova versione in un ambiente di staging.

Per chi sceglie di non utilizzare subito l’editor di widget basato sui blocchi, è ancora possibile ripristinare la classica schermata dei Widgets in tre modi diversi:

  1. È possibile installare il plugin ufficiale Classic Widgets, che ripristina la precedente interfaccia della schermata dei widget. Il plugin “sarà supportato e mantenuto almeno fino al 2022, o per tutto il tempo necessario”.
  2. Gli sviluppatori di temi possono disabilitare l’editor di widget a blocchi rimuovendo il supporto del tema come al solito:
    remove_theme_support( 'widgets-block-editor' );
  3. Si può utilizzare anche il nuovo filtro use_widgets_block_editor:
    add_filter( 'use_widgets_block_editor', '__return_false' );

Si veda anche Restoring the classic widgets editor in Widget Block Editor Overview.

Widget a Blocchi nel Customizer

Come parte dello stesso progetto, WordPress 5.8 porta anche i widget a blocchi nel customizer.

Widget a blocchi nel customizer.

Widget a blocchi nel customizer.

Aggiungere un widget a blocchi nel customizer è abbastanza semplice. È possibile lanciare il pannello di inserimento dei widget facendo clic sull’icona più (+) che si trova nell’angolo in alto a destra del pannello dei widget.

Il pannello di inserimento Personalizza Widget.

Il pannello di inserimento Personalizza Widget.

È anche possibile lanciare il quick inserter dalla parte inferiore del pannello dei widget, come mostrato nell’immagine che segue.

Il quick inserter del pannello Personalizza Widget.

Il quick inserter del pannello Personalizza Widget.

Al momento in cui si scrive questo articolo, la nuova interfaccia di modifica dei widget richiede ancora miglioramenti e correzioni di bug, ma le possibilità di personalizzazione sono praticamente illimitate.

Fondamentalmente, a partire da WordPress 5.8, si avrà a disposizione la potenza del block editor nel customizer, e si potranno creare senza difficoltà barre laterali altamente personalizzate.

Mostra altre impostazioni.

Mostra altre impostazioni.

La nota di sviluppo sull’editor di widget a blocchi fornisce una panoramica più approfondita sui widget a blocchi, con esempi e risorse per gli sviluppatori.

Funzionalità e Miglioramenti nell’Editor di Blocchi

Oltre alla prima implementazione dell’FSE, WordPress 5.8 porta con sé anche nuove funzionalità e modifiche a diversi elementi dell’editor di blocchi, che migliorano significativamente l’esperienza complessiva di editing.

Queste modifiche includono:

Miglioramenti al Blocco Media & Text

Trasformare un blocco in un blocco colonne è possibile da un po’ di tempo. Tuttavia, tutti i blocchi trasformati in blocchi colonne hanno una sola colonna. Questo potrebbe portare a risultati non ottimali per il blocco Media & Text, per il quale una singola colonna non è solitamente adatta.

Trasformazioni e stili dell blocco Media & Text.

Trasformazioni e stili dell blocco Media & Text.

A partire da WordPress 5.8 (e Gutenberg 10.2), la trasformazione del blocco Media & Text in un blocco colonne aggiunge automaticamente due colonne: una per l’immagine e una per il testo.

Trasformazione in due colonne per il blocco Media e Testo.

Trasformazione in due colonne per il blocco Media e Testo.

Miglioramenti ai Blocchi Riutilizzabili

I blocchi riutilizzabili permettono all’utente di salvare un blocco o un gruppo di blocchi per il successivo riutilizzo in qualsiasi post o pagina di un sito web. Questo è utile soprattutto per gli utenti che inseriscono ripetutamente lo stesso blocco o gruppo di blocchi in diversi post/pagine.

Un modale nel flusso di creazione dei blocchi riutilizzabili.

Un modale nel flusso di creazione dei blocchi riutilizzabili.

Con WordPress 5.8, i blocchi riutilizzabili sono visivamente più chiari e più facili da gestire per gli utenti di WordPress.

Un blocco riutilizzabile in WordPress 5.8.

Un blocco riutilizzabile in WordPress 5.8.

Ecco un rapido elenco di miglioramenti dei blocchi riutilizzabili che gli utenti troveranno dopo aver aggiornato i propri siti a WordPress 5.8:

Blocchi riutilizzabili evidenziati.

Blocchi riutilizzabili evidenziati.

Toolbar dei Blocchi Normalizzate

Le barre degli strumenti di diversi blocchi sono state riorganizzate per fornire una UI coerente per tutti i blocchi e migliorare l’esperienza utente. Ora, i controlli delle barre degli strumenti sono raggruppati seguendo l’ordine semantico “meta, block-level, inline”.

Toolbar del blocco Intestazione.

Toolbar del blocco Intestazione.

A partire da Gutenberg 10.1 e Gutenberg 10.3, un intero set di barre degli strumenti di blocchi è stato normalizzato. Tra questi ricordiamo i blocchi immagine, pulsante, pulsanti, lista, titolo, paragrafo, citazione, audio, file, media & testo, video, e altro.

Secondo Matias Ventura:

I raggruppamenti semantici che abbiamo nella barra degli strumenti – meta, block level, inline – dovrebbero avere anche una rappresentazione visiva con i bordi. In questo momento controlli separati a livello di blocco hanno rappresentazioni diverse, compresi casi come il blocco Navigation, in cui ogni singolo controllo ha dei bordi.

.

Toolbar del blocco immagine normalizzata.

Toolbar del blocco immagine normalizzata.

Così, a partire da WordPress 5.8, la toolbar dei blocchi raggruppa i controlli in segmenti circondati da bordi. Inoltre:

L’immagine qui sotto mette a confronto la barra degli strumenti del blocco immagine in WordPress 5.7 e 5.8:

Toolbar del blocco Immagine in WordPress 5.7 e WordPress 5.8.

Toolbar del blocco Immagine in WordPress 5.7 e WordPress 5.8.

Miglioramenti alla Barra degli Strumenti Superiore

Nelle precedenti versioni di WordPress, con la modalità top toolbar attiva, la barra degli strumenti superiore e la barra degli strumenti dei blocchi venivano visualizzate fianco a fianco, come mostrato nella seguente immagine:

La barra degli strumenti superiore su schermi larghi in WordPress 5.7.

La barra degli strumenti superiore su schermi larghi in WordPress 5.7.

Con WordPress 5.8, l’abilitazione della visualizzazione della barra degli strumenti superiore fisserà la barra degli strumenti a blocchi nella parte superiore dell’editor, proprio sotto la top toolbar. Questo avviene indipendentemente dalla larghezza della finestra del browser e dovrebbe migliorare significativamente l’esperienza utente.

La barra degli strumenti superiore su schermi larghi in WordPress 5.8.

La barra degli strumenti superiore su schermi larghi in WordPress 5.8.

Questo miglioramento porta anche delle novità per gli sviluppatori in quanto unifica le API della barra degli strumenti nel componente <BlockTools /> (vedi PR #31134).

PDF Incorporati

Quando viene aggiunto al documento un file PDF attraverso il blocco file, un nuovo interruttore nella barra laterale permette di abilitare/disabilitare una versione incorporata del PDF (si veda PR #30857).

Un PDF incorporato in WordPress 5.8.

Un PDF incorporato in WordPress 5.8.

È possibile trascinare il file direttamente sull’area di editing dell’editor o semplicemente selezionarlo dalla libreria. È anche possibile regolare manualmente l’altezza del visualizzatore del PDF o utilizzando il controllo della barra laterale.

Tutti i principali browser web supportano il visualizzatore PDF, eccetto i browser mobili.

Bicromia dei Blocchi (Duotone)

Una delle funzionalità più interessanti confluite nel Core con WordPress 5.8 è il filtro a due tonalità, introdotto per la prima volta con Gutenberg 10.6.

Il nuovo strumento di design a due tonalità in un blocco immagine.

Il nuovo strumento di design a due tonalità in un blocco immagine.

Disponibile come funzione “block supports”, il filtro bicromia è abilitato di default nei blocchi core immagine e cover. Nel blocco cover, però, non funziona con gli sfondi fissi.

Il nuovo selettore di bicromia in WordPress 5.8.

Il nuovo selettore di bicromia in WordPress 5.8.

Le barre degli strumenti dei blocchi immagine e copertina ora mostrano un controllo Applica filtro bicromia che mostra un selettore di bicromia con molte combinazioni predefinite tra cui scegliere.

Due sottocontrolli permettono di personalizzare separatamente le ombre e le luci. L’effetto è applicato con un filtro SVG nascosto con stili in linea e applicato utilizzando un nome di classe specifico.

Ispezione del filtro bicromia SVG in Chrome DevTools.

Ispezione del filtro bicromia SVG in Chrome DevTools.

Il nuovo strumento arriva in coppia con la nuova proprietà color.__experimentalDuotone, che permette agli sviluppatori di aggiungere il filtro bicromia a blocchi o parti di blocchi nel file block.json (maggiori informazioni su questo punto in color object reference):

supports: {
	color: {
		__experimentalDuotone: '> .duotone-img, > .duotone-video',
		background: false,
		text: false
	}
}

Quando un blocco dichiara il supporto per color.__experimentalDuotone, può essere utilizzato l’attributo style per impostare colori predefiniti personalizzati:

attributes: {
	style: {
		type: 'object',
		default: {
			color: {
				duotone: [
					'#FFF',
					'#000
				]
			}
		}
	}
}

Qui sotto si vede la stessa immagine con due diversi effetti di bicromia:

Il filtro bicromia applicato ad un'immagine.

Il filtro bicromia applicato ad un’immagine.

Un diverso filtro di bicromia applicato alla stessa immagine.

Un diverso filtro bicromia applicato alla stessa immagine.

Gli sviluppatori possono definire i set predefiniti di bicromia nel file theme.json (si veda la sezione successiva), come mostrato nel seguente snippet:

{
"version": 1,
"settings": {
	"color": {
		"duotone": [
			{
				"colors": [ "#000", "#7f7f7f" ],
				"slug": "black-and-white",
				"name": "dark-grayscale"
			}
		],
	...

Per approfindire il discorso sui filtri bicromia, si legga Coloring Your Images With Duotone Filters.

Colori e Bordi nel Blocco Tabella

WordPress 5.8 porta anche alcuni miglioramenti al blocco Tabella, tra cui un migliore controllo sui colori di sfondo e di primo piano della tabella.

Impostazioni colore del blocco Tabella migliorate.

Impostazioni colore del blocco Tabella migliorate.

Un’altra aggiunta al blocco Tabella è il supporto dei bordi del blocco, che dà agli utenti la possibilità di controllare il colore, lo stile e la larghezza dei bordi.

Se il tema attivo supporta la nuova funzionalità, un nuovo pannello di configurazione dei bordi fornisce tre nuovi controlli per le personalizzazioni dell’utente.

Controlli dei bordi del blocco Tabella in WordPress 5.8 and TT1 Blocks.

Controlli dei bordi del blocco Tabella in WordPress 5.8 and TT1 Blocks.

Gli sviluppatori possono aggiungere il supporto dei bordi del blocco ai loro temi aggiungendo il seguente codice al file theme.json:

"border": {
	"customColor": true,
	"customStyle": true,
	"customWidth": true
}

Miglioramenti al Block Inserter

In WordPress 5.8, il pannello di inserimento dei blocchi è stato migliorato con diverse aggiunte (PR #26938 e #21080):

Premendo la freccia su e giù si sposta il focus sulla riga.

Premendo la freccia su e giù si sposta il focus sulla riga.

1. Navigazione in due dimensioni da tastiera sul pannello di inserimento dei blocchi. Ora è possibile navigare tra i blocchi in modo più preciso e intuitivo.

.
2. In Full Site Editing adesso appare nel pannello di inserimento una nuova categoria “Tema” per le parti e le varianti dei template (vedi PR #30020).

3. Sono ora permesse parole multiple nel suggerimento di ricerca (vedi PR #29939).

Altri Miglioramenti dell’Editor di Blocchi

WordPress 5.8 introduce moltissimi cambiamenti piccoli e medi che meritano un riferimento. Tra questi miglioramenti, citiamo i seguenti:

Supporto del Drag and Drop nei Blocchi Copertina

Ora è possibile trascinare le immagini dal desktop per sostituire lo sfondo di un blocco copertina (vedi Gutenberg 10.3 e PR #29813).

Drag-and-drop delle immagini di sfondo nel blocco copertina.

Drag-and-drop delle immagini di sfondo nel blocco copertina.

UI di Pubblicazione Migliorata

A partire da WordPress 5.8, l’interfaccia di pubblicazione mostra l’icona del sito e il titolo per rendere più chiaro dove si stanno pubblicando i propri post o pagine (Gutenberg 10.4).

Interfaccia di pubblicazione in WordPress 5.7.

Interfaccia di pubblicazione in WordPress 5.7.

Interfaccia di pubblicazione in WordPress 5.8.

Interfaccia di pubblicazione in WordPress 5.8.

Questo novità è utile soprattutto se si lavora in modalità a schermo intero o su dispositivi mobili.

Impostazioni e Stili dei Blocchi con il File theme.json

Con WordPress 5.8, il file theme.json diventa “un punto centrale di configurazione”, offrendo agli sviluppatori di temi un nuovo modo per personalizzare le impostazioni e gli stili dell’editor.

Con il file theme.json, i temi possono impostare preset personalizzati e/o aggiungere il supporto di nuove funzionalità, come la bicromia e i bordi delle tabelle (vedi Global Settings & Styles).

Secondo André Maneiro:

Questo nuovo meccanismo mira a riprendere e consolidare tutte le varie chiamate add_theme_support che erano precedentemente necessarie per controllare l’editor.

Ad esempio, è possibile impostare globalmente un preset personalizzato di bicromia con il seguente codice:

{
	"version": 1,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#000", "#0FF" ],
					"slug": "black-cyan",
					"name": "Black Cyan"
				}
			],

Questo codice sovrascriverebbe i preset predefiniti, e offrirà all’utente una sola opzione di bicromia:

Preset di bicromia personalizzato nel file theme.json.

Preset di bicromia personalizzato nel file theme.json.

Il nuovo meccanismo fornisce un modo per controllare le impostazioni sia a livello globale che in base al blocco. Ad esempio, è possibile aggiungere una dimensione di font personalizzata di 12px a livello globale aggiungendo il seguente preset al file theme.json:

{
	"version": 1,
	"settings": {
		"typography": {
			"customLineHeight": true,
			"fontSizes": [
				{
					"slug": "extra-extra-small",
					"size": "12px",
					"name": "Extra extra small"
				},
				{...}

Questo si traduce in una nuova dimensione di font che gli utenti possono utilizzare nel proprio contenuto con qualsiasi blocco di testo.

Hai bisogno di un hosting incredibilmente veloce, affidabile e completamente sicuro per il tuo sito WordPress? Kinsta garantisce tutto questo e un supporto di classe mondiale 24/7 da parte di esperti di WordPress. Scopri i nostri piani

Una dimensione del font personalizzata definita a livello globale nel file theme.json.

Una dimensione del font personalizzata definita a livello globale nel file theme.json.

Se si vuole personalizzare solo il blocco paragrafo, il codice sarà leggermente diverso:

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"fontSizes": [
						{
							"slug": "extra-extra-small",
							"size": "12px",
							"name": "Extra extra small"
						},
						{
							"slug": "extra-small",
							"size": "16px",
							"name": "Extra small"
						},
						{
							"slug": "small",
							"size": "18px",
							"name": "Small"
						},
						{
							"slug": "normal",
							"size": "20px",
							"name": "Normal"
						},
						{
							"slug": "large",
							"size": "24px",
							"name": "Large"
						}
					]
				}
			}
		}
	}
}

Ecco fatto! Avete appena impostato i vostri preset personalizzati delle dimensioni del font sul blocco paragrafo.

Un blocco paragrafo con preset personalizzati delle dimensioni del font.

Un blocco paragrafo con preset personalizzati delle dimensioni del font.

I blocchi core sono stati adeguati al nuovo meccanismo, mentre i blocchi di terze parti possono adattarsi al nuovo sistema utilizzando l’hook di React useSetting (si legga di più su questa funzione nella nota di sviluppo e nella documentazione dell’API):

const isEnabled = useSetting( 'spacing.margin' );
Info

Le impostazioni dichiarate nel file theme.json avranno la precedenza sulle impostazioni dichiarate tramite add_theme_support.

Il nuovo meccanismo basato sul file theme.json non si applica solo alle impostazioni di blocco. Infatti, a partire da WordPress 5.8, non sarà più necessario creare stili per l’editor ed accodarli. Sarà sufficiente dichiarare dei preset all’interno del file theme.json; il motore genererà le classi e le accoderà automaticamente sia per l’editor che per il frontend.

Il motore genererà anche le corrispondenti Proprietà CSS Personalizzate.

Nell’esempio precedente, abbiamo impostato cinque fontSizes per il blocco paragrafo. Per queste impostazioni, verranno generate le seguenti proprietà CSS personalizzate:

p {
	--wp--preset--font-size--extra-extra-small: 12px;
	--wp--preset--font-size--extra-small: 16px;
	--wp--preset--font-size--small: 18px;
	--wp--preset--font-size--normal: 20px;
	--wp--preset--font-size--large: 24px;
}

Una volta che è stata impostata la dimensione del carattere del paragrafo nel file theme.json, il corrispondente elemento p prenderà la classe has-{preset-slug}-{preset-category}.

Questo significa che un paragrafo con una dimensione del carattere extra-extra-small avrà la classe has-extra-extra-small-font-size:

<p class="has-extra-extra-small-font-size">Lorem ipsum dolor...</p>

Ed ecco il blocco di dichiarazioni CSS:

p.has-extra-extra-small-font-size {
	font-size: var(--wp--preset--font-size--extra-extra-small) !important;
}

Per un’analisi più dettagliata delle impostazioni e degli stili tramite il file theme.json, si legga la nota di sviluppo e la documentazione dell’API.

Infine, si dia anche un’occhiata all’call for testing per il FSE di Anne McCarty per un’utile lettura e un’interessante sfida per gli sviluppatori che vogliono esplorare le nuove funzionalità del file theme.json.

Miglioramenti delle API dei blocchi

Meritano particolare attenzione da parte degli sviluppatori di plugin i miglioramenti delle API dei blocchi in arrivo con WordPress 5.8.

È ora incoraggiato l’utilizzo del file block.json come metodo canonico per registrare i tipi di blocco. Il nuovo metodo offre diversi vantaggi:

Modifiche alla Funzione register_block_type

A partire da WordPress 5.8, la funzione register_block_type è stata migliorata in modo da leggere i metadati dal file block.json. Ora, il primo parametro della funzione accetta il percorso della cartella dove si trova il file block.json.

La funzione può essere utilizzata come mostrato nel seguente esempio:

function create_custom_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );

La funzione restituisce il tipo di blocco registrato o false in caso di insuccesso.

Come si può notare, la funzione register_block_type è ora utilizzata allo stesso modo della funzione register_block_type_from_metadata, che in precedenza era l’unica funzione disponibile per registrare un tipo di blocco leggendo i metadati dal file block.json. Come spiegato da Greg Ziółkowski:

Abbiamo deciso di consolidare nella funzione register_block_type la preesistente funzionalità disponibile con il metodo register_block_type_from_metadata per evitare una certa confusione che si era creata. È possibile utilizzare entrambe le funzioni, ma d’ora in poi abbiamo intenzione di usare nei documenti e strumenti ufficiali solo la versione più corta.

.
Una volta che il blocco è registrato sul server, bisogna solo registrare le impostazioni sul client utilizzando lo stesso nome del blocco nel file index.js.

Per una panoramica più approfondita dei miglioramenti alle API dei Blocchi introdotti da WordPress 5.8, si legga la nota di sviluppo di Greg Ziółkowski.

Supporto WebP in WordPress 5.8

Da Kinsta siamo ossessionati dalla velocità dei siti web e dalle prestazioni di WordPress. Ecco perché è così entusiasmante per noi la notizia del supporto del formato WebP in WordPress 5.8.

Considerato un formato di ultima generazione, WebP è un formato immagine sviluppato da Google per offrire “una migliore compressione rispetto a PNG o JPEG, il che significa download più veloci e minore consumo di dati.”

Google Lighthouse consiglia di utilizzare formati immagine di ultima generazione.

Google Lighthouse consiglia di utilizzare formati immagine di ultima generazione.

Secondo la definizione di Google:

WebP è un moderno formato immagine che offre una compressione lossless e lossy superiore per le immagini sul web. Grazie a WebP, i webmaster e gli sviluppatori web possono creare immagini più piccole e più ricche che rendono il web più veloce.

Le immagini WebP lossless sono più piccole del 26% rispetto alle PNG. Le immagini WebP lossy sono più piccole del 25-34% rispetto alle immagini JPEG comparabili con un indice di qualità SSIM equivalente.

A partire da WordPress 5.8, sarà possibile utilizzare il formato immagine WebP allo stesso modo dei formati JPEG, PNG e GIF. Basta caricare le immagini nella Libreria Media e inserirle nei contenuti.

In un articolo precedente, abbiamo analizzato in modo approfondito il formato WebP e gli strumenti disponibili per utilizzarlo in WordPress. Ora, per via del supporto delle immagini WebP in WordPress 5.8, le cose potrebbero cambiare un po’. Dato che il formato WebP è supportato nativamente, non è necessario installare plugin di terze parti per caricare immagini WebP in WordPress, almeno nei casi d’uso più frequenti.

Si noti che, anche se ora è possibile caricare le immagini WebP su WordPress utilizzando la Libreria Media, WordPress non supporta la conversione automatica delle immagini in formato WebP. Per abilitare questa funzionalità, si avrà ancora bisogno di un plugin WebP per WordPress plugin di terze parti.

Come Utilizzare le Immagini WebP in WordPress

È possibile convertire le immagini in WebP in molti modi:

Esporta immagine come WebP in GIMP.

Esporta immagine come WebP in GIMP.

Se optate per uno strumento a riga di comando, potete codificare e decodificare le vostre immagini utilizzando le utility cwebp e dwebp. Ad esempio, il seguente comando esegue una conversione base da JPEG a WebP:

cwebp [options] original_image.jpg -o compressed_image.webp

È anche possibile eseguire una conversione in blocco delle immagini utilizzando Bash e cwebp (esempio di Jeremy Wagner):

find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} \;

Il comando qui sopra converte tutte le immagini .png in formato .webp con un fattore di compressione di 75.

Confronto tra fattore di compressione e dimensioni dei file.

Confronto tra fattore di compressione e dimensioni dei file.

Una volta che sia hanno a disposizione le immagini WebP, basta semplicemente caricarle dalla Libreria Media di WordPress. Qui sotto si può vedere un’immagine JPEG da 127 KB nella Libreria Media prima della conversione:

Il file JPEG compresso è di 127 KB.

Il file JPEG compresso è di 127 KB.

La dimensione dell’immagine compressa WebP è del 42% più piccola dell’immagine JPEG originale!

La stessa immagine in formato WebP è 74 KB.

La stessa immagine in formato WebP è 74 KB.

Infine, le immagini WebP dispongono delle stesse funzionalità di editing delle immagini JPEG, PNG e GIF. È possibile ritagliarle, ruotarle, capovolgerle e scalarle e applicare le modifiche alle dimensioni dell’immagine.

Avvertenze su WebP in WordPress 5.8

Secondo Adam Silverstein,

Le immagini WebP supportano la compressione lossy e lossless, un formato animato e le immagini trasparenti. In WordPress, il formato WebP lossless è supportato solo quando il server di hosting utilizza Imagick (la libreria PHP) finché non sarà aggiunto il supporto in LibGD. Inoltre, i formati animati e alfa non sono ancora supportati per le immagini ridimensionate (quando si caricano immagini in questi formati vengono invece create immagini lossy).

Se il web host non supporta le immagini WebP, quando si cercherà di caricarle si riceverà un messaggio di errore. Se non si è sicuri che il proprio host web supporti la libreria Imagick, la scheda Info del Site Health contiene un campo Libreria Imagick che fornisce questa informazione.

Kinsta supporta la libreria Imagick.

Kinsta supporta la libreria Imagick.

Con il supporto del formato WebP, WordPress 5.8 introduce anche due campi aggiuntivi alla sezione Gestione Media in Site Health: Versione Imagick e Formati file supportati da ImageMagick.

Campo versione ImageMagick in Site Heath.

Campo Versione ImageMagick in Site Heath.

Se WebP non è nell’elenco dei tipi di file supportati, bisognerà contattare il proprio host web per chiedere supporto.

La nota di sviluppo fornisce informazioni aggiuntive sul supporto del formato WebP in WordPress 5.8, con utili FAQ e ulteriori risorse.

Chi è interessato all’ottimizzazione delle immagini, potrebbe apprezzare anche i seguenti tutorial:

Altre Funzionalità per Sviluppatori

Ci sono decine di funzionalità interessanti per sviluppatori in WordPress 5.8. In questo articolo abbiamo prestato più attenzione a quelle che dovrebbero avere l’impatto più significativo sul lavoro di sviluppo. Ma ci sono davvero molte nuove funzionalità che meritano attenzione, tra cui le seguenti:

Block Supports API

WordPress 5.8 aggiunge nuovi flag di supporto dei blocchi che permettono agli sviluppatori di personalizzare i blocchi registrati con le ultime funzionalità dei blocchi.

Oltre allo sperimentale supporto al bicromia dei blocchi di cui si è parlato in precedenza (color._experimentalDuotone), WordPress 5.8 aggiunge anche il supporto per il colore dei link. Per sfruttare questa funzionalità, basta aggiungere il seguente flag ai metadati del blocco:

supports: {
	color: {
		link: true;
	}
}

È possibile impostare valori predefiniti utilizzando gli attributi, come mostrato nel seguente esempio, o impostare i propri preset nel file theme.json:

attributes: {
	style: {
		type: 'object',
		default: {
			color: {
				link: '#FF0000',
			}
		}

Tra le altre modifiche all’API dei blocchi ricordiamo:

.
Maggiori informazioni sulla Block Supports API in WordPress 5.8 sono nella nota di sviluppo Block supports API updates.

Per una visione più ravvicinata all’utilizzo della Block Supports API, si faccia riferimento alla documentazione ufficiale della Block Supports API.

Schede Personalizzate in Salute del Sito

Due nuovi hook ora permettono agli sviluppatori di aggiungere schede personalizzate all’interfaccia di Salute del Sito e personalizzare le schermate disponibili.

Il filtro site_health_navigation_tabs è un array associativo di ID di schede ed etichette che permette di registrare una nuova scheda nella schermata Salute del Sito. È possibile utilizzare il filtro aggiungendo il seguente codice di esempio al file functions.php del tema o ad un plugin personalizzato:

function kinsta_site_health_navigation_tabs( $tabs ) {
	$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );

	return $tabs;
}
add_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );

L’immagine qui sotto mostra la nuova scheda Salute del Sito:

Una scheda personalizzata aggiunta al menu di navigazione di Salute del Sito.

Una scheda personalizzata aggiunta al menu di navigazione di Salute del Sito.

Inoltre, grazie al filtro site_health_navigation_tabs, è possibile riordinare le schede o rimuovere uno o più elementi.

L’azione site_health_tab_content si attiva quando un utente visita la schermata Salute del Sito, ad eccezione della schermata predefinita Stato. È possibile utilizzare questo hook come mostrato nel seguente frammento di codice (esempio tratto dalla nota di sviluppo):

function kinsta_site_health_tab_content( $tab ) {
	// Return if this is not your tab.
	if ( 'kinsta-site-health-tab' !== $tab ) {
		return;
	}

	// Include the interface, kept in a separate file just to differentiate code from views.
	include trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views/kinsta-site-health-tab.php';
}
add_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );

QUesto codice rileva in primo luogo se la scheda corrente è la scheda personalizzata, poi carica il contenuto della schermata Salute del Sito da un file .php. L’azione site_health_tab_content permette agli sviluppatori anche di estendere la scheda predefinita Info aggiungendo informazioni specifiche ai propri temi o plugin.

Modifiche alla Block Editor API per il Supporto in Diverse Pagine di Amministrazione

Con WordPress 5.8, il post editor non è più l’unica pagina di amministrazione ad utilizzare l’editor di blocchi (la schermata dei widget è un esempio).

I core contributor hanno trovato diversi hook definiti sul server che dipendono dall’oggetto $post. Questo oggetto non è presente nelle schermate di modifica del sito, dei widget e di navigazione. Andando avanti, diversi filtri sono stati deprecati e sostituiti con alternative in grado di rilevare il contesto.

Inoltre, è stata introdotta la nuova classe WP_Block_Editor_Context che rappresenta il contesto corrente dell’editor di blocchi e diversi metodi.

Queste modifiche miglioreranno queste pagine di amministrazione e permetteranno agli sviluppatori di aggiungere le proprie personalizzazioni.

Per un elenco completo delle modifiche all’API del Block Editor relative alle pagine di amministrazione, si veda la nota di sviluppo di Greg Ziółkowski.

Ulteriori Funzionalità e Miglioramenti

Ci sono tantissime nuove funzionalità e aggiunte per gli sviluppatori introdotte da WordPress 5.8 che sarebbe impossibile per noi menzionarle tutte in questo articolo. Ma abbiamo raccolto una lista di note di sviluppo non trattate in questo articolo per ulteriori letture:

WordPress 5.8 introduce la prima implementazione del Full Site Editing 🎁 Vuoi scoprire il futuro di WordPress? Non perdere la nostra panoramica approfondita delle principali funzionalità e delle novità in arrivo con WordPress 5.8 🚀Click to Tweet

Riepilogo

WordPress 5.8 segna una pietra miliare sulla strada verso il Full Site Editing. Ma la seconda release dell’anno porta molto più del FSE. Gli utenti e gli sviluppatori troveranno una quantità di miglioramenti all’editor di blocchi, un nuovo meccanismo basato sul file theme.json, una Block API più potente, il supporto del formato immagine WebP e molto altro.

Siamo stati particolarmente colpiti dai tanti miglioramenti, piccoli e grandi, all’editor di blocchi e alla sua UI. Ci piace moltissimo la migliore navigabilità tra i blocchi, la toolbar dei blocchi rinnovata, la maggiore chiarezza dell’interfaccia e i miglioramenti a diversi blocchi.

Questi piccoli cambiamenti migliorano l’esperienza di editing poco a poco, e, senza quasi rendercene conto, ci ritroviamo ad usare un software migliore e più robusto. Questo è WordPress!

Adesso tocca a voi! Cosa pensate del Full Site Editing? E quali sono le novità che preferite in WordPress 5.8?


Se questo articolo ti è piaciuto, allora amerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ottieni supporto 24/7 dal nostro team esperto di WordPress. La nostra infrastruttura alimentata da Google Cloud si concentra su scalabilità, prestazioni e sicurezza. Lascia che ti mostriamo la differenza di Kinsta! Scopri i nostri piani