WordPress 6.5 “Regina” è stato rilasciato il 2 aprile e noi siamo qui per mostrare le fantastiche funzionalità che lo accompagnano.

La versione 6.5 introduce nuove e potenti API che porteranno dei notevoli miglioramenti all’esperienza di sviluppo di WordPress. Ma WordPress 6.5 porta anche moltissime novità che faranno felici gli utenti del CMS nel creare siti e contenuti.

Grazie alla nuova Font Library, sarà possibile iniettare valori di custom field nel contenuto dei blocchi core e scaricare e installare Google Fonts direttamente dall’editor del sito. Nuovi strumenti di progettazione e diversi correzioni nell’interfaccia utente miglioreranno l’esperienza generale di editing.

Ma questi sono solo alcuni degli aggiornamenti in arrivo con WordPress 6.5. La nuova versione raccoglie talmente tanti miglioramenti e novità che sarebbe impossibile citarli tutti in un unico post. Per questo motivo, abbiamo raccolto i più interessanti e innovativi in questo lungo e dettagliato articolo.

Iniziamo il viaggio alla scoperta di WordPress 6.5.

La nuova libreria di font di WordPress

Innanzitutto, WordPress 6.5 introduce una nuova funzione che consente di gestire i font dall’interfaccia degli stili.

La nuova Font Library di WordPress permette di gestire i font in modo simile ai media nella Media Library.

Grazie alla libreria dei font, è possibile installare/disinstallare facilmente font locali e Google Font e scegliere quelli che si desidera attivare/disattivare indipendentemente dal tema attivo.

Non è fantastico? Ora abbiamo un controllo maggiore su un aspetto critico di ogni sito web: la tipografia. Per utilizzare i font personalizzati in WordPress, non bisognerà più affidarsi ai font del tema o giocare con i CSS.

L’utilizzo è piuttosto semplice. Nell’interfaccia dell’editor del sito, apriamo la barra laterale degli Stili globali e selezioniamo Tipografia.

Il nuovo pannello Tipografia in WordPress 6.5
Il nuovo pannello Tipografia in WordPress 6.5

Qui vedremo un elenco dei font e degli elementi disponibili. Facendo clic sul pulsante Gestisci font a destra, apparirà un popup con tre schede.

L'interfaccia della libreria dei font in WordPress 6.5
L’interfaccia della libreria dei font in WordPress 6.5

La scheda Libreria offre un’anteprima dei font disponibili, la scheda Carica include un’area drag-and-drop per caricare i font dal computer e la scheda Installa font permette di installare i font da Google Fonts.

Nella scheda Install Fonts, viene chiesto di collegarsi a Google Fonts
Nella scheda Install Fonts, viene chiesto di collegarsi a Google Fonts

Una volta collegati a Google Fonts, nello stesso pannello apparirà un elenco di tutti i font disponibili.

Google Fonts
Google Fonts

È possibile anche cercare i font per nome.

Ricerca di font per nome in WordPress 6.5
Ricerca di font per nome in WordPress 6.5

Scegliamo le varianti di font di cui abbiamo bisogno, clicchiamo su Installa e il gioco è fatto.

Varianti di font Ubuntu su Google Fonts
Varianti di font Ubuntu su Google Fonts

Quando si installa un nuovo font, la libreria dei font aggiunge la definizione della famiglia di font ai font installati e scarica l’asset del font nella cartella wp-content/uploads/fonts.

Disattivare la libreria di font

Gli sviluppatori di plugin e temi possono disabilitare la libreria di font utilizzando il nuovo filtro PHP fontLibraryEnabled:

function disable_font_library_ui( $editor_settings ) { 
	$editor_settings['fontLibraryEnabled'] = false;
	return $editor_settings; 
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );

DataViews

Il DataViews è un componente che permette di rendere i dataset utilizzando diversi tipi di layout, come tabelle, griglie, elenchi e altro.

Con questa iterazione, sono state introdotte nel core nuove visualizzazioni e le relative funzionalità per la gestione di pagine, pattern e template; possiamo aspettarci ulteriori miglioramenti con le prossime release di WordPress.

Per il momento, WordPress 6.5 introduce le seguenti viste nell’Editor del sito:

  • Templates > Manage all templates: Layout a tabella e a griglia.
  • Patterns > Template parts > Manage all template parts: Layout a tabella e a griglia.
  • Patterns: Layout a griglia.
  • Pages > Manage all pages: Layout a tabella e a griglia.
Impostazione del layout a griglia per i template
Impostazione del layout a griglia per i template

Oltre ai layout, le data view aggiungono diverse funzioni di visualizzazione, tra cui filtri, ricerca, paginazione, ordinamento, nascondimento e visualizzazione dei campi.

Impostazione dei campi per la vista Templates
Impostazione dei campi per la vista Templates

Il pulsante Modifica in blocco permette di eseguire diverse azioni in blocco a seconda del set di dati corrente. Per le Pagine, si può Spostare nel cestino, Ripristinare ed Eliminare definitivamente.

Modificare le pagine in blocco in WordPress 6.5
Modificare le pagine in blocco in WordPress 6.5

Le visualizzazioni dei dati sono dotate anche di una nuova Primary filter API che consente di aggiungere un tipo speciale di filtro, sempre visibile sullo schermo, alle visualizzazioni dei dati. L’immagine qui sotto mostra il nuovo filtro primario Sync Status nella sezione di amministrazione Patterns.

Il filtro primario Sync Status per i pattern
Il filtro primario Sync Status per i pattern

La DataViews API viene fornita con il nuovo pacchetto npm @wordpress/dataviews che consente agli sviluppatori di fare i primi esperimenti con le visualizzazioni dei dati.

Block Bindings API

La Block Bindings API è una nuova API che ha lo scopo di collegare gli attributi dei blocchi a valori provenienti da diverse fonti di dati. Questi valori possono variare a seconda del contesto. Un semplice esempio potrebbe essere un titolo contenente il nome dell’autore che cambia con il valore post_author.

Si tratta di un miglioramento notevole perché estende le funzionalità di diversi blocchi core. Grazie alla nuova API, è possibile associare dati dinamici provenienti da qualsiasi fonte a un attributo del blocco.

Le fonti di dati possono essere le più diverse: Dati del sito, campi personalizzati, dati degli utenti, pattern, shortcode, altri blocchi e persino strumenti esterni che utilizzano Gutenberg. Un esempio potrebbe essere un sito web Drupal con Gutenberg.

Da un punto di vista tecnico, possiamo descrivere il funzionamento della Block Bindings API come un processo in tre fasi:

  1. Innanzitutto, si crea un legame (binding) tra gli attributi del blocco e una origine dati utilizzando un oggetto bindings.
  2. L’API ottiene il valore dall’origine dati definita nel binding.
  3. Poi aggiorna l’HTML del blocco utilizzando i valori ricevuti dall’origine dati.

La prima implementazione della Block Bindings API in arrivo con WordPress 6.5 permette di collegare gli attributi dei blocchi e i campi personalizzati. La seconda implementazione annunciata, Synced Patterns Overrides, è stata rimandata a una versione futura.

Inizialmente, solo un numero limitato di blocchi, come titoli, paragrafi, immagini e pulsanti, supporterà la Block Bindings API. Con le future iterazioni, saranno aggiunti all’elenco altri blocchi, anche personalizzati.

Questa prima implementazione dell’API consente agli sviluppatori di plugin di registrare le loro origini dati nello stesso modo in cui Gutenberg registra l’origine dati core/post-meta. Sulla base dell’esempio di Santos Guillamot, è possibile registrare l’origine dati di un plugin in questo modo:

register_block_bindings_source(
	'myplugin/plugin-data',
	array(
		'label'              => _x( 'Plugin Data', 'block bindings source' ),
		'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
	)
);

Poi si aggiunge un oggetto bindings al blocco:

<!-- wp:paragraph 
{
	"metadata": {
		"bindings": {
			"content": {
				"source": "myplugin/plugin-data",
				"args": {
					"key":"plugin_key"
				}
			}
		}
	}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->

Ecco una descrizione di ogni proprietà:

  • metadata: un oggetto di metadati del blocco.
  • bindings: un oggetto contenente uno o più legami.
  • content: l’attributo del blocco da associare a un’origine dati. In questo esempio, l’attributo content di un blocco Paragraph.
  • source: la fonte dei binding.
  • args: un oggetto di argomenti da passare all’origine dei binding del blocco.

Le future iterazioni aggiungeranno altre funzionalità all’API. Inoltre, presto saremo in grado di creare legami dall’editor visuale, di collegare gli attributi dei blocchi con altre fonti di dati, come i dati del sito o i dati della tassonomia, e di utilizzare questa funzione con altri blocchi.

Detto questo, scopriamo la prima implementazione della Block Bindings API.

Collegare i campi personalizzati ai blocchi

Prima di WordPress 6.5, non esisteva un modo per iniettare i valori dei campi personalizzati nel contenuto dei blocchi core. Gli sviluppatori potevano solo creare blocchi personalizzati per visualizzare i custom field sul frontend.

A partire da WordPress 6.5, è possibile visualizzare i dati memorizzati nei custom field all’interno dei blocchi core, compresi pulsanti, intestazioni, immagini e paragrafi.

Come già accennato, la Block Bindings API permette di collegare gli attributi dei blocchi e diverse fonti di dati, tra cui la fonte “meta_fields”. Per utilizzare questa funzione, bisogna prima abilitare i custom field nell’editor da Opzioni -> Preferenze -> Generale -> Avanzate.

La maschera delle preferenze nell'editor dei post
La maschera delle preferenze nell’editor dei post

Si noti che, a partire da WordPress 6.5, non esiste un controllo dell’interfaccia utente per collegare il valore di un custom field ad un attributo di un blocco.

Quindi, una volta aggiunti la chiave e il valore del custom field, sarà necessario passare all’editor di codice e aggiungere un oggetto “bindings” all’interno del delimitatore del blocco, come mostrato nel seguente codice:

<!-- wp:paragraph 
	{
		"metadata": {
			"bindings": {
				"content": {
					"source":"core/post-meta",
					"args": {
						"key":"my_custom_field"
					}
				}
			}
		}
	} -->
	<p>Paragraph</p>
<!-- /wp:paragraph -->

L’aggiunta di un campo personalizzato a un blocco blocca i controlli appropriati, rendendo il contenuto del blocco non modificabile.

Vediamo ora come funziona con un blocco Immagine. Aggiungiamo due campi personalizzati per gli attributi alt e src.

Due campi personalizzati per memorizzare i valori alt e src
Due campi personalizzati per memorizzare i valori alt e src

Quindi aggiungiamo un blocco Immagine, passiamo all’editor di codice e aggiungiamo un oggetto bindings al blocco come nell’esempio seguente:

<!-- wp:image {
	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"img_src"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"img_alt"
				}
			}
		}
	}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->

Si noterà che non è permesso sostituire la fonte dell’immagine utilizzando i controlli dell’editor.

Il segnaposto immagine senza controlli multimediali
Il segnaposto immagine senza controlli multimediali

Con questa prima iterazione, solo i seguenti attributi di blocco possono essere collegati ai campi personalizzati:

  • Paragrafo: content.
  • Titolo: content.
  • Immagine: URL, alt e title.
  • Pulsante: text, URL, linkTarget, rel.

Per una panoramica più ampia sul collegamento dei campi personalizzati con gli attributi di blocco, si legga questa introduzione completa ai Block Bindings.

Miglioramenti al sistema delle revisioni

Le revisioni ci danno la certezza di poter annullare in qualsiasi momento una modifica ripristinando una versione precedente dell’aspetto del sito. Data l’importanza di un sistema di revisioni affidabile nei siti web collaborativi, le revisioni dello stile hanno un posto di rilievo nell’attuale fase di sviluppo di WordPress. WordPress 6.5 apporta diversi significativi miglioramenti al sistema delle revisioni.

Ecco le novità relative alle revisioni in WordPress 6.5.

Descrizione delle modifiche

Nella versione precedente di WordPress, erano visibili solo la data, l’ora e l’autore di ogni revisione. A partire da WordPress 6.5, oltre a questi dati, vedremo anche un breve riassunto e altri dettagli di quella versione.

Riassunto della revisione in WordPress 6.5
Riassunto della revisione in WordPress 6.5

Revisioni illimitate e paginazione

Prima della 6.5, a causa del limite della Rest API, era possibile visualizzare solo un massimo di 100 revisioni in un singolo pannello della barra laterale.

Grazie ai due nuovi selettori getRevisions e getRevision, introdotti con Gutenberg 17.2 e ora confluiti nel core con WordPress 6.5, il limite di 100 revisioni non esiste più. Inoltre, è possibile sfogliare tutte le revisioni esistenti suddivise in pagine di 10 elementi.

Integrazione delle revisioni nello Style Book

Un’altra modifica rende il pannello delle revisioni disponibile anche nello Style Book. Questo permette di controllare le modifiche apportate agli stili su blocchi e pattern non inclusi nel template corrente.

Lo Style Book ora supporta le revisioni
Lo Style Book ora supporta le revisioni

Revisioni per template e parti di template

Le revisioni sono disponibili anche per template e parti di template, permettendo di passare a una versione precedente di un progetto, e questo aggiungendo un ulteriore livello di sicurezza al flusso di lavoro.

Interactivity API

Prima di WordPress 6.5, per aggiungere interattività alle pagine, gli sviluppatori dovevano implementare da soli le loro librerie JavaScript preferite. Purtroppo questo portava a una mancanza di coerenza nello sviluppo JavaScript nel frontend.

A partire da WordPress 6.5, una nuova Interactivity API offre una soluzione moderna e standardizzata per aggiungere interattività al frontend dei siti WordPress.

Se vi state chiedendo cosa fa questa nuova API, ne abbiamo avuto un assaggio già in WordPress 6.4, quando i blocchi core Image, Search, File, Navigation e Query sono stati riprogettati utilizzando la versione privata dell’API. L’effetto lightbox sulle immagini è un altro buon esempio.

La paginazione dinamica, la ricerca istantanea e l’interazione in tempo reale tra i blocchi sono altri esempi di ciò che potremo implementare nei siti web utilizzando la Interactivity API:

I blocchi possono condividere dati, azioni e callback tra loro. Questo rende la comunicazione tra i blocchi più semplice e meno soggetta a errori. Ad esempio, cliccando su un blocco “aggiungi al carrello” si può aggiornare senza problemi un blocco separato “carrello”.

Ed è incredibilmente veloce. Tutti gli script necessari per aggiungere interattività vengono caricati sul frontend solo se è presente almeno un blocco interattivo nella pagina.

L’Interactivity API adotta un approccio moderno allo sviluppo del frontend che sfrutta la potenza degli attributi HTML personalizzati per ridurre la quantità di codice JavaScript necessaria per aggiungere interattività alle pagine.

Chi ha familiarità con librerie frontend come HTMX e Alpine.js, sarà felice di vedere la stessa logica implementata in WordPress con l’Interactivity API. Allora, di cosa si tratta?

Cos’è l’Interactivity API?

L’Interactivity API è un nuovo sistema standard di direttive per la creazione di blocchi interattivi che consentirà agli sviluppatori di aggiungere facilmente interattività al frontend dei blocchi in modo che i visitatori del sito possano interagire con i contenuti senza dover ricaricare la pagina. Pensiamo ad esempio alla ricerca istantanea, all’aggiunta di commenti, all’aggiunta al carrello e alla paginazione dinamica.

La nuova API soddisfa una serie di requisiti che la rendono uno strumento di sviluppo moderno, tra cui ricordiamo:

  • Supporta il rendering lato server e l’HTML idratato dal client.
  • Funziona bene con PHP e con l’attuale sistema a blocchi.
  • È retrocompatibile con gli hook di WordPress e le librerie JavaScript esistenti.
  • Segue un approccio dichiarativo anziché imperativo.
  • È performante ed estensibile.
  • È atomica e componibile: ogni direttiva controlla una piccola parte del DOM e più direttive possono essere combinate per creare applicazioni complesse.
  • È compatibile con gli strumenti di sviluppo WordPress esistenti.

Come già accennato, l’Interactivity API si basa su direttive, che sono speciali attributi HTML che permettono di associare un comportamento specifico agli elementi del DOM. Ecco un esempio di blocco interattivo:

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive='{ "namespace": "create-block" }'
	data-wp-context='{ "isOpen": false }'
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
		?>
	</p>
</div>

WordPress elabora queste direttive sul server e genera il markup corrispondente.

Come iniziare con la Interactivity API

L’implementazione dell’Interactivity API non influisce sul flusso di lavoro di creazione dei blocchi. È possibile creare un plugin che registri un blocco interattivo utilizzando il comando @wordpress/create-block e un template interattivo specifico.

Avviamo il nostro strumento a riga di comando preferito, navighiamo nella directory plugin ed eseguiamo il seguente comando:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

Questo genera un blocco interattivo da un template che utilizza il campo di metadati viewScriptModule. Il modulo di script dichiarato in viewScriptModule verrà richiesto quando il blocco verrà visualizzato sul frontend (si leggano anche le note di sviluppo di viewScriptModule e Script Modules).

Un progetto di blocco interattivo in Visual Studio Code
Un progetto di blocco interattivo in Visual Studio Code

Una volta completato il processo di installazione, troveremo un nuovo plugin nella dashboard di WordPress. Attiviamolo e torniamo alla riga di comando, navighiamo nella directory del nuovo plugin e avviamo il servizio:

cd my-interactive-block && npm start

Ora, creiamo un nuovo post o una nuova pagina, apriamo il pannello di inserimento dei blocchi e scorriamo fino alla sezione Widget. Lì troveremo un nuovo blocco chiamato My interactive block che potremo utilizzare come modello per nuove creazioni interattive:

Un blocco di sviluppo interattivo
Un blocco di sviluppo interattivo

Aggiungiamo il blocco al contenuto e salviamo il post. L’anteprima mostrerà un pulsante che nasconde/mostra un testo fittizio. E questo è tutto. Ora è possibile iniziare a creare blocchi interattivi.

Maggiori informazioni su come creare blocchi interattivi utilizzando l’Interactivity API sul blog WordPress Core, sulla documentazione di GitHub e sulla nota di sviluppo dell’API.

Un ottimo esempio di Interactivity API all’opera è il sito demo wpmovies.dev.

Nuovi strumenti di progettazione

WordPress 6.5 introduce anche nuovi strumenti di progettazione che permettono di personalizzare ulteriormente il design senza dover ricorrere a codice CSS personalizzato.

Supporto delle dimensioni e della ripetizione dell’immagine di sfondo per il blocco Gruppo

Il blocco Gruppo ora supporta le funzioni di dimensione e ripetizione per le immagini di sfondo. Questo permette di impostare le dimensioni dell’immagine di sfondo in modo da coprirla o contenerla, mantenendo lo stesso rapporto d’aspetto.

Controllo delle dimensioni dell'immagine di sfondo per un blocco Gruppo
Controllo delle dimensioni dell’immagine di sfondo per un blocco Gruppo

Inoltre, quando si imposta la dimensione dello sfondo su Fisso, viene visualizzato un interruttore Ripeti che permette di attivare o disattivare la ripetizione dello sfondo.

Supporto delle proporzioni per il blocco Cover

Il blocco Cover ora supporta le proporzioni. È possibile controllare le proporzioni del blocco a livello globale dall’interfaccia degli Stili globali o regolarle individualmente nei contenuti.

Il controllo delle proporzioni per il blocco Copertina
Il controllo delle proporzioni per il blocco Copertina

Supporto delle ombreggiature per altri blocchi

Finora il blocco Button era l’unico a supportare le ombreggiature. WordPress 6.5 aggiunge il supporto delle ombreggiature ai blocchi Colonne, Colonna e Immagine.

È possibile aggiungere l’ombreggiatura a questi blocchi dalla scheda Stili del blocco nelle impostazioni del blocco.

Il blocco Immagine ora supporta l'ombreggiatura
Il blocco Immagine ora supporta l’ombreggiatura

Aggiornamenti dell’editor del sito

Diversi modifiche all’editor del sito dovrebbero migliorare significativamente l’esperienza di editing e snellire il flusso di lavoro.

Miglioramenti alla list view

La list view è un elemento centrale del lavoro di progettazione e WordPress 6.5 introduce una serie di miglioramenti.

Innanzitutto, ora è possibile fare clic con il tasto destro del mouse sulla list view per accedere alla tendina delle impostazioni del blocco. Si tratta di un piccolo ma utile miglioramento che dovrebbe snellire il processo di creazione in quanto semplifica l’accesso alle impostazioni dei blocchi dalla Visualizzazione Elenco.

Un secondo miglioramento permette di rinominare quasi tutti i blocchi dalla list view, ad eccezione dei seguenti:

  • core/block
  • core/template-part
  • core/pattern
  • core/navigazione

La list view è stata migliorata anche con una nuova scorciatoia da tastiera. Ora è possibile selezionare tutti i blocchi nella list view digitando CTRL + A su Windows e CMD + A su Mac. Questo permette di eseguire facilmente azioni in blocco.

Duplicare e rinominare i pattern

I pattern forniti dai temi non sono modificabili, quindi non è possibile usarli per creare i propri pattern o semplicemente per cambiare qualcosa nel pattern. WordPress 6.5 aggiunge una piccola ma utile funzione che consente di duplicare e rinominare i pattern, permettendo di cambiare le impostazioni di sincronizzazione e di modificare i pattern secondo le proprie esigenze.

Ora è possibile rinominare e cancellare i pattern
Ora è possibile rinominare e cancellare i pattern

In più, sono state aggiunte due nuove categorie di pattern: Audio e Video.

Il pannello delle categorie dei pattern in WordPress 6.5
Il pannello delle categorie dei pattern in WordPress 6.5

Miglioramenti al pannello delle preferenze

Con WordPress 6.5, il pannello delle preferenze è stato aggiornato e le impostazioni esistenti sono state riorganizzate. I principali cambiamenti sono:

  • Nuovi pannelli “Aspetto” e “Accessibilità”.
  • Una nuova impostazione della Top toolbar in Aspetto.

Abilitando la top toolbar, tutti gli strumenti del blocco e del documento vengono spostati in un’unica barra degli strumenti nella parte superiore dell’editor.

La rinnovata interfaccia delle Preferenze con la Top toolbar attivata
La rinnovata interfaccia delle Preferenze con la Top toolbar attivata

Blocco della barra degli strumenti in modalità senza distrazioni

Prima di WordPress 6.5, non era possibile accedere alla barra degli strumenti di blocco in modalità senza distrazioni ed eravamo costretti ad attivarla e disattivarla ad ogni modifica. Da WordPress 6.5 in poi, spostando il cursore sull’area superiore dell’editor, viene visualizzata la barra degli strumenti di blocco per le nostre personalizzazioni.

La barra degli strumenti di blocco in modalità senza distrazioni
La barra degli strumenti di blocco in modalità senza distrazioni

Miglioramenti al componente LinkControl

Il LinkControl è stato migliorato e ora aggiungere link è più facile. L’immagine che segue mostra il nuovo pannello che appare quando si fa clic su un link da modificare.

Modifica di un link in WordPress 6.5
Modifica di un link in WordPress 6.5

Per un elenco completo delle modifiche apportate al componente LinkControl, si legga la PR #50891.

Miglioramenti al Drag & Drop

Il Drag & Drop è stato migliorato in diverse aree dell’editor.

Nella list view:

  • Quando si trascina un blocco in un blocco compattato, il blocco compattato si espande.
  • Quando si trascinano gli elementi, appare un cursore di trascinamento.

Nell’area di progettazione dell’editor:

  • È possibile trascinare gli elementi all’inizio o alla fine del contenuto.
  • Il trascinamento di elementi tra blocchi contenitori di pari livello è stato migliorato.
  • È anche possibile trascinare i blocchi nelle parti di template.
  • Una nuova indicazione visiva informa che un blocco non è trascinabile.
  • È possibile trascinare gli elementi all’inizio o alla fine di un documento.
  • È possibile creare righe o gallerie semplicemente trascinando blocchi vicino ad altri blocchi. Ad esempio, aggiungendo un’immagine accanto a un’altra immagine il blocco Immagine esistente sarà convertito in un blocco Galleria.
Trascinamento di un'immagine vicino a un blocco Immagine
Trascinamento di un’immagine vicino a un blocco Immagine
Ora è possibile convertire un blocco Immagine in una Galleria trascinando e rilasciando le immagini
Ora è possibile convertire un blocco Immagine in una Galleria trascinando e rilasciando le immagini

Per un elenco più completo dei miglioramenti apportati al drag and drop, si legga la issue del drag and drop dei blocchi.

Altre modifiche

Un attimo, non è tutto! WordPress 6.5 apporta anche altre modifiche e miglioramenti che vale la pena menzionare.

Strumenti per l’aspetto dei temi classici

I temi classici possono sfruttare alcune delle funzionalità di design introdotte nell’editor del sito, anche senza utilizzare il file theme.json. A partire da WordPress 6.5, scegliendo il supporto degli appearanceTool per i temi, possiamo utilizzare usufruire delle seguenti funzionalità di design:

  • Bordo
  • Colore
  • Spaziatura
  • Tipografia

In questo modo gli utenti dei temi classici possono avere un’anteprima delle funzionalità dell’editor del sito e facilitare la transizione dai temi classici a quelli a blocchi.

Strumenti di visualizzazione in WordPress 6.5 con il tema Twenty Twenty-One
Strumenti di visualizzazione in WordPress 6.5 con il tema Twenty Twenty-One

Supporto AVIF

WordPress 6.5 introduce anche il supporto del formato immagine AVIF, caratterizzato da un algoritmo di compressione avanzato che consente di ottenere una qualità superiore delle immagini con un rapporto di compressione elevato. Di conseguenza, AVIF produce file immagine più piccoli rispetto ai formati tradizionali, compreso il formato WebP.

Gli utenti possono ora caricare senza problemi i file AVIF tramite la libreria multimediale di WordPress, in modo simile agli altri formati immagine. Tuttavia, è bene verificare la compatibilità della piattaforma di hosting con il formato AVIF.

Supporto dei browser per il formato immagine AVIF
Supporto dei browser per il formato immagine AVIF (Fonte: Can I Use)

È possibile verificare se l’host supporta il formato immagine AVIF nella schermata Salute del sito dell’installazione di WordPress cliccando sulla scheda Info ed espandendo la sezione Gestione Media.

Dipendenze dei plugin

Alcuni plugin aggiungono nuove funzionalità ad altri plugin come estensioni e add-on. Affinché questi plugin funzionino correttamente, è necessario prima installare e attivare le loro dipendenze, ossia i plugin su cui si basano.

A partire da WordPress 6.5, gli sviluppatori di plugin possono utilizzare la nuova intestazione del plugin “Requires Plugins”. Questa intestazione semplifica il processo di installazione e attivazione delle dipendenze. Contiene un elenco di slug separati da virgole delle dipendenze necessarie al funzionamento di un plugin dipendente.

Fornisce informazioni all’utente del plugin con link al Repository dei plugin di WordPress.org per installare e attivare le dipendenze.

Inoltre, il plugin di dipendenza fornisce un campo “Richiesto da” che elenca i plugin dipendenti che ne hanno bisogno per funzionare. Si noterà anche che non è possibile eliminare il plugin di dipendenza se non si elimina il plugin dipendente.

Plugin richiesti in WordPress 6.5
Plugin richiesti in WordPress 6.5

WordPress 6.5 introduce anche un nuovo filtro wp_plugin_dependencies_slug che permette di filtrare gli slug di dipendenza in modo programmatico.

Per una discussione più approfondita, si legga la nota di sviluppo sulle dipendenze dei plugin.

Aggiornamenti all’HTML API

Con WordPress 6.5, il Tag Processor dell’HTML API ha ricevuto diversi miglioramenti e ora analizza ogni tipo di token di sintassi, compresi i token di tag e non, i commenti, le definizioni doctype e i nodi testuali.

Questo permette di modificare il testo racchiuso all’interno dei token, il cosiddetto testo modificabile, senza influenzare la struttura del documento.

Il testo modificabile è l’intero contenuto di un nodo di testo, il contenuto di un commento HTML o il contenuto tra i tag di apertura e chiusura di elementi speciali, come gli elementi script e style.

Sono stati introdotti alcuni nuovi metodi:

  • next_token() – passa al token successivo nel documento
  • get_token_type() – ottiene il tipo di token trovato
  • get_token_name() – ottiene il nome di un token
  • get_modifiable_text() – restituisce il contenuto del testo correttamente decodificato per un determinato token.
  • get_comment_type() – ottiene il tipo di commento
  • paused_at_incomplete_token() – restituisce true se il processore di tag raggiunge la fine di un documento con un token troncato a metà.

Per una panoramica più estesa, si legga la nota di sviluppo Updates to the HTML API in 6.5.

Unificazione dell’editor di siti e post

In WordPress 6.5, gli editor ricevono diversi aggiornamenti volti a unificare l’interfaccia utente e il comportamento.

Diversi pannelli laterali sono stati spostati dal pacchetto edit-post al pacchetto @wordpress/editor per portare le funzionalità corrispondenti nell’editor del sito:

  • Attributi della pagina (PR #57151)
  • Tassonomia dei post (PR #57049)
  • Aggiunto il link Visualizza nell’editor del sito per i tipi di post (PR #57153)
  • Aggiunto il pannello Discussione alla barra laterale dell’editor del sito per i tipi di post che lo supportano (PR #57150)
  • Aggiunto il pannello delle immagini in evidenza (PR #57053)
  • Aggiunto il pannello delle revisioni all’editor del sito (PR #57010)

Un’altra modifica consente di visualizzare l’anteprima del template durante la modifica di una pagina nell’Editor dei post, come era già possibile nell’Editor del sito, ed è possibile attivare/disattivare l’anteprima del template dalla barra laterale delle impostazioni della pagina.

Miglioramenti delle prestazioni

Oltre 110 miglioramenti delle prestazioni hanno consentito un aumento significativo della velocità e dell’efficienza sia nell’editor dei post che nell’editor del sito. I tempi di caricamento sono ora ridotti di due volte rispetto alla versione 6.4 e la velocità di elaborazione degli input è quasi quattro volte superiore. Inoltre, l’integrazione della libreria i18 Performant Translations contribuisce a ridurre l’utilizzo della memoria e i tempi di caricamento dei siti tradotti.

Miglioramenti all’accessibilità

Con il rilascio di WordPress 6.5, più di 65 aggiornamenti vengono integrati nel core per migliorare l’accessibilità del pannello di amministrazione. Questi miglioramenti includono lo stile di messa a fuoco, il rapporto di contrasto, l’ordinamento del menu del Customizer e altro ancora.

Aggiornamenti ai Block Hooks

Introdotti per la prima volta con WordPress 6.4, i Block Hooks permettono di collocare automaticamente un blocco in una posizione specifica quando un altro blocco viene aggiunto al contenuto.

In precedenza i Block Hook erano disponibili per i template, le parti di template e i pattern che non venivano modificati dall’utente. Ora possono essere utilizzati anche con i layout modificati.

Prima di WordPress 6.5, un blocco agganciato poteva essere aggiunto solo prima o dopo il blocco Navigation. Con questa iterazione, i blocchi agganciati possono essere aggiunti anche a un blocco Navigazione come primo o ultimo figlio.

Inoltre, questa iterazione introduce i nuovi filtri hooked_block e hooked_block_{$hooked_block_type}.

Per una panoramica più approfondita ed esempi di utilizzo, si legga la nota di sviluppo sugli aggiornamenti dei Block Hook.

Riepilogo

Siete pronti ad abbracciare le nuove possibilità di sviluppo offerte da WordPress? WordPress 6.5 ci porta un sacco di novità che miglioreranno l’esperienza di creazione di siti e contenuti web in WordPress.

La nuova WordPress Font Library permette di gestire i font in modo simile alla gestione dei media nella Media Library, offrendo un maggiore controllo sulla tipografia. Con le DataViews, è possibile rendere a video i set di dati utilizzando diversi layout, filtri e opzioni di ricerca, migliorando l’esperienza complessiva. Con la Block Bindings API e la Interactivity API, è possibile offrire un’esperienza più dinamica e personalizzata agli utenti del sito.

Grazie a tutte queste interessanti novità, WordPress 6.5 segna una vera e propria svolta.

Avete provato la nuova versione di WordPress in un ambiente di sviluppo? Quali sono le caratteristiche di WordPress 6.5 che preferite? Condividete la vostra esperienza nei commenti qui sotto.

Carlo Daniele Kinsta

Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.