WordPress 6.7 è quasi arrivato ed è giunto il momento di esaminare le nuove funzionalità, i cambiamenti e i miglioramenti che la nuova versione ha in serbo per noi.

Questa versione include 87 miglioramenti fondamentali, feature request e oltre 200 correzioni di bug.

Nel core di WordPress 6.7 sono incluse otto versioni di Gutenberg, dalla 18.6 alla 19.3. L’editor a blocchi riceve 445 miglioramenti, 464 correzioni di bug e 55 miglioramenti dell’accessibilità.

E nel core arrivano anche nuove potenti API per gli sviluppatori. L’interfaccia dell’editor riceve diverse aggiunte e miglioramenti, tra cui strumenti precedentemente accessibili solo tramite codice. I miglioramenti dell’usabilità e i nuovi strumenti di progettazione dovrebbero semplificare il processo di progettazione.

WordPress 6.7 presenta anche un nuovo tema predefinito, Twenty Twenty-Five, che sfrutta le ultime funzionalità della nuova versione.

Tra le tante novità e cambiamenti in arrivo con WordPress 6.7, ne abbiamo selezionate alcune che riteniamo più interessanti per sviluppatori e utenti. C’è molto da dire, quindi vediamo subito queste nuove funzionalità.

Modalità zoom out

WordPress 6.7 presenta una nuova modalità di zoom out che aiuta a creare e modificare i contenuti concentrandosi sui pattern invece che sui singoli blocchi. Questo permette di lavorare a un livello superiore e di avere una visione d’insieme della pagina in costruzione.

Le immagini seguenti mostrano la nuova funzione in azione. Un nuovo pulsante Toggle Zoom Out nella barra degli strumenti superiore permette di attivare e disattivare la visualizzazione Zoom Out, consentendo di lavorare sui pattern o, in alternativa, sui singoli blocchi.

Toggle Zoom Out in WordPress 6.7
Toggle Zoom Out in WordPress 6.7
Toggle Zoom Out in WordPress 6.7
Toggle Zoom Out in WordPress 6.7

Con la modalità Zoom out attivata, potete eseguire diverse azioni sul pattern selezionato. La barra degli strumenti del blocco offre i controlli per trascinare, spostare su/giù e mescolare. La vista Elenco offre link per eseguire diverse azioni, come Modifica, Duplica ed Elimina il pattern selezionato.

Block pattern nella vista Elenco
Block pattern nella vista Elenco

Quando lavorate con lo Zoom Out attivato, il block inserter si posiziona di default nella scheda Pattern. Anche la vista Elenco riflette la modalità di modifica e visualizza i pattern invece dei blocchi.

Per un elenco più completo delle funzionalità e delle modifiche relative alla modalità Zoom Out, consultate la sezione sul problema dell’iterazione della modalità Zoom Out e le Note degli sviluppatori di Zoom Out in WordPress 6.7.

Meta box nell’editor dei post

Nelle versioni precedenti alla 6.7, i meta box impedivano il caricamento del canvas dell’editor dei post in un iframe. Questo rendeva non disponibili diversi vantaggi, come l’isolamento dei CSS dei blocchi e dei temi dall’interfaccia utente dell’editor e l’accuratezza delle unità CSS relative per le media query e il viewport. In breve, questo problema precludeva l’uso dello stesso CSS nell’editor e nelle viste front-end.

A partire da WordPress 6.7, il contenuto dell’editor e i meta box possono coesistere nell’interfaccia dell’editor. Grazie a una nuova vista divisa, il canvas dell’editor Post viene caricato in un iframe anche quando il post/pagina corrente ha uno o più meta box. Secondo la nota di sviluppo:

Questa modifica garantisce un’esperienza “What You See Is What You Get” coerente tra l’editor e le viste front-end. Inoltre, rende i meta box più facilmente disponibili rispetto a prima. Permette di fare riferimento visivamente a qualsiasi parte del contenuto del post mentre si lavora con qualsiasi meta box o viceversa.

Iframe del canvas con meta box in WordPress 6.7
Iframe del canvas con meta box in WordPress 6.7

Questa implementazione utilizza flex per rendere scrollabile la vista del contenuto e l’area dei metabox.

Questo miglioramento apporta anche diverse modifiche all’interfaccia dell’editor dei post:

  • L’altezza dell’area del metabox è limitata al 50% per impostazione predefinita per evitare che occupi troppo spazio.
  • L’area del meta box è comprimibile o ridimensionabile a seconda dell’altezza del viewport.
  • Lo stato dell’altezza ridimensionata e lo stato aperto/chiuso sono persistenti nelle preferenze dell’utente.
Area meta box ridimensionabile in WordPress 6.7
Area meta box ridimensionabile in WordPress 6.7

Date un’occhiata alla nota di sviluppo per una panoramica più approfondita per gli sviluppatori.

Miglioramenti all’API Block Bindings

Introdotta per la prima volta con WordPress 6.5, l’API Block Bindings permette di legare gli attributi di un blocco a una fonte di dati esterna. La prima iterazione della Block Bindings API permetteva di legare i valori dei campi personalizzati agli attributi dei blocchi Titolo, Paragrafo, Pulsante e Immagine. WordPress 6.6 ha aperto le porte a una nuova interessante funzione basata sull’API Block Bindings: la Sovrascrittura dei pattern.

WordPress 6.7 ci offre nuove funzionalità e miglioramenti resi possibili dall’API Block Bindings e una nuova interfaccia predefinita per la gestione della fonte meta del post.

Nuova UI per i blocchi con associazioni

Questa iterazione offre una nuova interfaccia per la gestione dei block binding, o blocchi con associazioni, dalla barra laterale delle impostazioni, utilizzando la fonte integrata dei meta-block dei post per i blocchi Header, Paragrafo, Pulsante e Immagine.

Una volta registrati i campi personalizzati e selezionato uno dei blocchi supportati, apparirà un nuovo pannello Attributi nella barra laterale delle impostazioni dei blocchi. Quando si aggiungono uno o più campi post personalizzati, il pannello Attributi diventa interattivo e permette di collegare gli attributi del blocco ai propri campi personalizzati.

Il nuovo pannello Attributi in WordPress 6.7
Il nuovo pannello Attributi in WordPress 6.7

Questo aiuta a creare associazioni senza dover aggiungere manualmente il codice nell’editor del codice.

Per impostazione predefinita, solo gli amministratori possono creare e modificare le associazioni. Gli sviluppatori possono annullare il comportamento predefinito utilizzando i filtri block_editor_settings_all o map_meta_cap.

La nota di sviluppo avverte di due limitazioni relative alla nuova interfaccia Attributi.

  • Con questa versione non è ancora possibile collegare gli attributi dei blocchi a fonti personalizzate. Questo miglioramento dovrebbe essere implementato in una versione futura.
  • Una seconda limitazione riguarda il tipo di campi personalizzati mostrati nel pannello Attributi. Attualmente sono supportati solo i campi di tipo stringa o rich text. Anche in questo caso, possiamo aspettarci un supporto progressivo per altri tipi di campi personalizzati nelle prossime versioni.

Leggete la nota di sviluppo per un interessante caso d’uso dell’API Block Bindings migliorata con i template di post personalizzati.

Nuovo attributo meta-etichetta del post

È stato implementato un nuovo attributo label per consentire agli sviluppatori di plugin di aggiungere un’etichetta personalizzata per i campi meta dei post durante la registrazione. Ora è possibile utilizzare il seguente codice per registrare i propri campi personalizzati con le etichette:

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field',
		'label' => __('Book title')
	)
);

Se impostata, l’etichetta verrà visualizzata al posto della meta-chiave nell’interfaccia utente di Block Bindings. L’immagine seguente mostra il pannello Attributi con le etichette personalizzate:

Il pannello Attributi con le etichette dei campi personalizzati
Il pannello Attributi con le etichette dei campi personalizzati

Possibilità di modificare i blocchi con associazioni

Oltre alla nuova interfaccia dei blocchi con associazioni, è possibile utilizzare una nuova impostazione dell’editor canUpdateBlockBindings per determinare se la nuova interfaccia è interattiva per gli utenti. L’impostazione predefinita è la nuova funzionalità edit_block_binding, che è impostata su true per gli amministratori e false per gli altri utenti.

È possibile modificare il comportamento predefinito utilizzando il filtro block_editor_settings_all.

Nuove API e funzioni per gli sviluppatori

WordPress 6.7 offre agli sviluppatori nuove funzionalità per l’utilizzo dei blocchi con associazioni nell’editor.

Una nuova API dell’editor permette di registrare fonti personalizzate definite sul server con valori di bootstrapping. In breve, è possibile registrare fonti esterne e renderle nell’interfaccia utente utilizzando le API del server.

Twenty Twenty-Five, il nuovo tema predefinito, fornisce un buon esempio di bootstrapping delle fonti con il pattern Copyright. Nel file functions.php del tema, troverete il seguente codice:

// Registers block binding sources.
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * Registers the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return void
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'              => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
				'get_value_callback' => 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;

// Registers block binding callback function for the copyright.
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * Callback function for the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return string Copyright text.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' )
		);

		return $copyright_text;
	}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

Questo codice rende © YEAR nell’interfaccia utente per impostazione predefinita, come mostrato nella seguente immagine.

Fonti personalizzate con valori di bootstrapping
Fonti personalizzate con valori di bootstrapping

Il paragrafo nel canvas del blocco non è dinamico e mostra solo l’etichetta della fonte.

Per controllare il markup di questo blocco, è necessario creare una copia del pattern Copyright di Twenty Twenty-Five e aprire la propria copia nell’editor di codice:

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

Ulteriori informazioni sulle nuove funzionalità dei block binding sono disponibili nella nota di sviluppo della versione 6.7.

Aggiunte a Data View

Data View è un’interfaccia migliorata per le raccolte di template, pattern, pagine e altro ancora. È anche un componente e un’API che permette di rendere i dataset nell’editor del sito utilizzando diversi tipi di layout, come tabelle, griglie, elenchi, ecc.

Elenco dei layout in WordPress 6.7
Elenco dei layout in WordPress 6.7

Data view è stata introdotta per la prima volta con WordPress 6.5 e migliorata con WordPress 6.6. Ora WordPress 6.7 aggiunge nuove feature e miglioramenti che la rendono più flessibile e funzionale.

A partire da WordPress 6.7, nell’angolo superiore destro della visualizzazione a griglia viene visualizzata un’icona a forma di ingranaggio. Facendo clic su questa icona, il pannello Aspetto mostra una serie di opzioni di visualizzazione. Qui è possibile ordinare gli elementi nella visualizzazione, regolare la densità della griglia, impostare il numero di elementi per pagina e selezionare le proprietà dell’elemento da visualizzare nell’anteprima.

Dimensione anteprima piccola
Dimensione anteprima piccola
Dimensione anteprima media
Dimensione Anteprima media

Una levetta di selezione permette agli utenti di mostrare/nascondere i filtri di visualizzazione, migliorando l’esperienza su schermi stretti.

Levetta per mostrare/nascondere i filtri in Data view
Levetta per mostrare/nascondere i filtri in Data view
Nascondere i filtri in Data view in WordPress 6.7
Nascondere i filtri in Data view in WordPress 6.7

Quando si impostano uno o più filtri, il pulsante di attivazione dei filtri mostra il numero di filtri attivi.

La levetta per visualizzare i filtri in WordPress 6.7
Pulsante per visualizzare i filtri in WordPress 6.7

Ulteriori modifiche a Data View includono un rapporto di aspetto configurabile, opzioni di visualizzazione dei dati fuori dal menu e molto altro ancora.

Blocco Query Loop migliorato

Il blocco Query Loop è uno dei blocchi più potenti e complessi. Deve offrire la massima funzionalità e possibilità di personalizzazione, pur rimanendo intuitivo e facile da usare. Con WordPress 6.7, il blocco Query Loop riceve diversi miglioramenti e aggiunte che lo rendono più versatile e facile da usare.

Il precedente controllo dell’impostazione Eredita query dal template è stato modificato e ora dovrebbe essere più intuitivo e diretto.

Quando si modifica un template, il pannello delle impostazioni del Query Loop visualizza il controllo Tipo di query. Le immagini seguenti mostrano le opzioni di impostazione per i due diversi tipi di query: Predefinito e Personalizzato.

Il controllo Query Type in WordPress 6.7
Il controllo Query Type in WordPress 6.7
Il controllo Query Type in WordPress 6.7
Il controllo Query Type in WordPress 6.7

Anche il rilevamento del contesto è stato migliorato. Il blocco Query ha un’impostazione inherit che per default è impostata su true. Su una singola pagina, questo non ha alcun effetto sui risultati delle query e il controllo corrispondente è stato rimosso con WordPress 6.7.

Impostazioni Query Loop per una singola pagina in WordPress 6.7
Impostazioni Query Loop per una singola pagina in WordPress 6.7

D’altra parte, in un template archivio o indice, il contenuto del blocco Query dipende dal tipo di richiesta. Ciò significa che la pagina dell’archivio per una specifica categoria mostra il contenuto assegnato a quella categoria per impostazione predefinita, indipendentemente da altre impostazioni impostate esplicitamente dall’utente, come ad esempio il numero di post.

Potete trovare un elenco completo dei problemi che riguardano il blocco Query Loop qui.

Aggiunte alla gestione dei media

Con WordPress 6.7, la gestione dei media diventa più funzionale ed efficiente. Dalle dimensioni automatiche per le immagini a caricamento lento al supporto diffuso per le immagini di sfondo, ecco alcuni dei miglioramenti apportati alla gestione dei media con la versione 6.7.

Dimensioni automatiche per le immagini caricate con lazy loading

L’impostazione di un valore predefinito per sizes consente al browser di identificare il file di immagine da utilizzare in base al valore dell’attributo srcset. In questo modo, il browser conosce in anticipo la larghezza dell’immagine prima che sia noto il layout della pagina.

Le specifiche HTML consentono alle immagini di omettere l’attributo sizes o di impostarlo esplicitamente su auto o su una stringa che inizia con auto:

la parola chiave auto è una larghezza che viene calcolata nel parse di un attributo sizes. Se presente, deve essere la prima voce e l’intero valore <source-size-list> deve essere la stringa auto (senza distinzione tra maiuscole e minuscole ASCII) o iniziare con la stringa auto, (senza distinzione tra maiuscole e minuscole ASCII).

Con WordPress 6.7, l’attributo auto viene aggiunto automaticamente all’inizio dell’attributo sizes per qualsiasi immagine caricata con lazy loading. Questo comporta un miglioramento delle prestazioni nel caricamento delle pagine.

Ridimensionamento automatico per un'immagine caricata con lazy loading in WordPress 6.7
Ridimensionamento automatico per un’immagine caricata con lazy loading in WordPress 6.7

Gli sviluppatori possono correggere il valore dell’attributo sizes utilizzando la nuova funzione wp_img_tag_add_auto_sizes().

Miglioramenti alla libreria dei font

WordPress 6.7 apporta anche alcuni utili miglioramenti alla libreria dei font. Innanzitutto, i font sono ora raggruppati per fonte (Tema e Personalizzato), rendendo più facile capire l’origine di ogni font a colpo d’occhio.

Font raggruppati per fonte in WordPress 6.7.
Font raggruppati per fonte in WordPress 6.7: Font del tema
Font raggruppati per fonte in WordPress 6.7: Custom fonts.
I font raggruppati per fonte in WordPress 6.7: Font personalizzati

Il nuovo pulsante Seleziona tutto permette di risparmiare qualche clic quando si cerca un font su Google Fonts.

Selezionare tutte le varianti di font in WordPress 6.7.
Selezionare tutte le varianti di font in WordPress 6.7

Ulteriori modifiche includono un nuovo messaggio Nessun font installato quando i font non sono disponibili e un miglioramento dello stato Nessun font installato quando i font sono installati ma non attivati.

Supporto del formato HEIC

Il formato HEIC (High Efficiency Image Container) è una variante aggiornata di HEIF (High Efficiency Image Format), utilizzato da Apple su tutti gli iPhone e iPad con iOS 11 o versioni successive. Questo formato permette agli utenti iOS di sfruttare al meglio le fotocamere 4k e di avere file di dimensioni ridotte.

In WordPress 6.7, le immagini HEIC caricate vengono automaticamente convertite in JPEG sul server, quando possibile. Questa aggiunta consente agli utenti di visualizzare le immagini HEIC nella Libreria multimediale e di utilizzarle nei post e nelle pagine anche se il loro browser non supporta HEIC.

Supporto del browser per il formato immagine HEIF/HEIC
Supporto del browser per il formato immagine HEIF/HEIC (Fonte Caniuse)

Strumenti di design nuovi e migliorati

Con WordPress 6.7, i designer hanno accesso a nuovi e potenti strumenti di design, tra cui il supporto esteso ai blocchi, le preimpostazioni delle dimensioni dei font e molto altro ancora.

Supporto dell’immagine di sfondo UI per i blocchi Verso, Citazione e Contenuto dell’articolo

WordPress 6.7 introduce nuovi controlli UI per la gestione delle immagini di sfondo per una serie di blocchi negli stili globali. Questi blocchi includono Verso, Citazione e Contenuto dell’articolo.

L'interfaccia utente per le immagini di sfondo in WordPress 6.7
L’interfaccia utente per le immagini di sfondo in WordPress 6.7

L’impostazione di un’immagine di sfondo negli stili globali si applica all’intero sito web. Una volta aggiunta un’immagine di sfondo per un blocco, basta solo personalizzare le impostazioni per le singole istanze dello stesso blocco per personalizzarne l’aspetto.

Personalizzazione dell'immagine di sfondo in WordPress 6.7
Personalizzazione dell’immagine di sfondo in WordPress 6.7

È possibile utilizzare questa funzione nel blocco Contenuto dell’articolo per avvolgere il contenuto di post e pagine nei template. La seguente schermata fornisce un esempio di come utilizzare l’immagine di sfondo.

Modifica dell'immagine di sfondo nel blocco Contenuto dell'articolo
Modifica dell’immagine di sfondo nel blocco Contenuto dell’articolo

Supporti aggiuntivi per i blocchi

Oltre al supporto dello sfondo per i blocchi Verso, Citazione e Contenuto dell’articolo, WordPress 6.7 presenta nuovi supporti per diversi blocchi che i designer e gli sviluppatori di temi apprezzeranno.

Il supporto dei bordi è stato esteso a molti blocchi, tra cui Pulsanti, Categorie, Galleria, Intestazione, Testo multimediale, Paragrafo, Titolo del post, Citazione e molti altri.

Controlli dei bordi per Media & Testo
Controlli dei bordi per Media e Testo

Questa versione aggiunge anche il supporto dei colori per i pulsanti, le voci elenco e gli ultimi commenti.

Controlli del colore per le voci elenco in WordPress 6.7
Controlli del colore per le voci elenco in WordPress 6.7

WordPress 6.7 porta anche un’aggiunta molto attesa dai designer e dagli sviluppatori di temi: il supporto delle ombreggiature per il blocco Gruppo.

Controlli dell'ombreggiatura per il blocco Gruppo.
Controlli dell’ombreggiatura per il blocco Gruppo

Preimpostazioni della dimensione dei font

WordPress 6.7 introduce una nuova interfaccia per controllare le dimensioni dei font nell’interfaccia Stili globali. Questo permette agli utenti di ignorare i valori predefiniti del tema e di creare, modificare, rimuovere e applicare i preset delle dimensioni dei font utilizzando l’editor.

Questo include anche la possibilità di attivare la tipografia fluida e di impostare valori fluidi personalizzati.

Per provarle, aprite l’interfaccia Stili e andate su Dimensioni carattere > Preimpostazioni dimensione carattere. Un nuovo pannello mostrerà l’elenco delle preimpostazioni delle dimensioni dei font disponibili. Cliccate sulla preimpostazione che preferite e apportate le vostre modifiche.

Modifica delle preimpostazioni delle dimensioni dei font in WordPress 6.7
Modifica delle preimpostazioni delle dimensioni dei font in WordPress 6.7

Tutte le modifiche saranno applicate all’intero sito web.

Miglioramenti dell’interfaccia utente e altre funzioni di modifica

WordPress 6.7 introduce altre modifiche all’interfaccia utente e funzioni che migliorano l’esperienza di editing. Esaminiamone alcune.

Il pulsante Pubblica ha cambiato posizione

I pulsanti Annulla e Pubblica nel pannello di controllo pre-pubblicazione hanno cambiato posizione, quindi ora si può pubblicare l’articolo senza spostare il cursore sulla pagina.

Il pulsante Pubblica è stato spostato a destra
Il pulsante Pubblica è stato spostato a destra

Nomi di blocco personalizzati nella gestione del blocco

In WordPress 6.7, quando si imposta un nome di blocco personalizzato, ora viene visualizzato anche nella gestione del blocco. In WordPress 6.6, la gestione del blocco mostrava il nome del blocco predefinito (ad esempio, Titolo).

I nomi dei blocchi personalizzati non venivano mostrati nella gestione del blocco in WordPress 6.6
I nomi dei blocchi personalizzati non venivano mostrati nella gestione del blocco in WordPress 6.6
Nomi di blocco personalizzati nella gestione del blocco in WordPress 6.7
Nomi di blocco personalizzati nella gestione del blocco in WordPress 6.7

Disattivare la finestra per scegliere un pattern

Ora si può disattivare la finestra di scelta dei pattern che appare quando si crea una nuova pagina. Per disattivare questa funzionalità, aprite le Preferenze dal menu Opzioni e disattivate l’opzione Mostra pattern di partenza.

Disattivare la finestra di scelta del pattern in WordPress 6.7
Disattivare la finestra di scelta del pattern in WordPress 6.7

Collegamento automatico al numero di telefono

Il campo link aggiunge automaticamente tel: quando si aggiunge un numero di telefono.

Un numero di telefono linkato in WordPress 6.7
Un numero di telefono linkato in WordPress 6.7

Possibilità di aggiungere più immagini al blocco immagine

Ora si possono inserire più immagini in un blocco Immagine e convertirlo in un blocco Galleria.

Trascinare più immagini su un blocco Immagine in WordPress 6.7
Trascinare più immagini su un blocco Immagine in WordPress 6.7
Un blocco Galleria generato trascinando più immagini su un blocco Immagine
Un blocco Galleria generato trascinando più immagini su un blocco Immagine

Nuove funzionalità e API per gli sviluppatori

WordPress 6.7 presenta diverse nuove API che consentono agli sviluppatori di aggiungere ulteriori funzionalità ai loro plugin. È stata aggiunta una nuova API per le opzioni di anteprima e altre API sono state ampliate con nuove funzionalità, come l’API HTML e l’Interactivity API. Vediamone alcune.

API per le opzioni di anteprima

Una nuova API per le opzioni di anteprima consente agli sviluppatori di plugin di estendere il menu a discesa dell’anteprima nell’editor di post/pagine. L’API introduce un nuovo componente PluginPreviewMenuItem che i plugin possono utilizzare per aggiungere voci di menu personalizzate con titoli e gestori di clic al menu a discesa dell’anteprima.

Gli sviluppatori di plugin possono aggiungere opzioni di anteprima personalizzate all’editor di WordPress per un gran numero di cose, come ad esempio:

  • Anteprime di formati personalizzati (si pensi ai post sui social media)
  • Anteprime di post o pagine con restrizioni per specifici ruoli utente
  • Modalità di anteprima aggiuntive, come la modalità notte, le e-mail, ecc.

A seconda dei prop forniti, si possono utilizzare le voci di menu dell’anteprima personalizzata come pulsanti o link.

Ecco un esempio tratto dalla nota di sviluppo su come utilizzare la nuova API:

import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { registerPlugin } from '@wordpress/plugins';

function onPreviewClick() {
	// Handle preview action
}

const CustomPreviewMenuItem = () => (
	<PluginPreviewMenuItem
		onClick={ onPreviewClick }
	>
		{ __( 'Your menu item label' ) }
	</PluginPreviewMenuItem>
);

registerPlugin( 'custom-preview-menu-item', {
	render: CustomPreviewMenuItem,
} );

Nuova API per la registrazione dei template dei plugin

Prima di WordPress 6.7, l’unica possibilità di aggiungere template di blocco personalizzati era attraverso un tema. Registrare un template di blocco utilizzando un plugin era impossibile, a meno che non si utilizzassero complicati workaround.

Grazie alla nuova Template Registration API, ora si possono registrare template di blocco personalizzati utilizzando un plugin. La nuova API fornisce due nuove funzioni per la registrazione e la cancellazione di un template: register_block_template() e unregister_block_template().

Il loro utilizzo è piuttosto semplice. Si devono solo passare alla funzione un paio di parametri:

$template_name: Il nome del template nella forma plugin_uri//template_name (da notare i doppi slash //)
$args: un array dei seguenti argomenti:

  • title
  • description
  • content
  • post_types

Per una panoramica più approfondita sulle nuove API e sugli esempi di utilizzo, consultate la nota di sviluppo e la richiesta di pull originale.

Nuove API per la registrazione dei tipi di blocco

Una nuova funzione di wp_register_block_metadata_collection() registra un tipo di blocco da un file manifest, se esiste, invece di leggere e analizzare direttamente il file block.json. Questo è particolarmente utile quando un plugin registra diversi tipi di blocco, in quanto evita di leggere e analizzare il file block.json per ogni tipo di blocco.

Si noti che questa nuova funzione non sostituisce le funzioni register_block_type() e register_block_type_from_metadata() esistenti. Il suo utilizzo è facoltativo ma consigliato per i plugin che registrano più blocchi per migliorare le prestazioni.

Per una panoramica completa della nuova API e per un esempio di utilizzo, consultate la nota di sviluppo.

Opzioni del livello di intestazione

Grazie al nuovo attributo levelOptions, gli sviluppatori possono specificare quali livelli di intestazione devono apparire nell’interfaccia a tendina per i blocchi Header, Titolo del sito, Tagline del sito, Titolo della query, Titolo del post e Titolo dei commenti.

Lo utilizzerete soprattutto nei template di blocco, nelle parti di template e nei pattern. Il seguente esempio di codice disabilita le intestazioni H1, H5 e H6 in un blocco Header:

<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><em>Schedule a Demo</em></h2>
<!-- /wp:heading -->

L’immagine sottostante mostra le opzioni disponibili nella barra degli strumenti del blocco:

Livelli di intestazione in WordPress 6.7
Livelli di intestazione in WordPress 6.7

Si può anche filtrare l’attributo levelOptions con un plugin o nel file delle funzioni del proprio tema utilizzando il filtro register_block_type_args. La nota di sviluppo fornisce il seguente esempio:

function example_modify_heading_levels_globally( $args, $block_type ) {
	 
	if ( 'core/heading' !== $block_type ) {
		return $args;
	}
 
	// Remove H1, H2, and H6.
	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
	 
	return $args;
}
add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );

Ulteriori modifiche per gli sviluppatori in WordPress 6.7

  • L’inserimento di un blocco con hook come primo o ultimo child di un blocco Parte di Template è ora possibile. (Consultare la nota di sviluppo)
  • I blocchi con hook ora rispettano la proprietà multiple block-supports. (Consultare la nota di sviluppo)
  • I componenti dell’interfaccia utente ricevono un numero considerevole di aggiornamenti. (Consultare la nota di sviluppo).
  • Le nuove funzioni getServerState() e getServerContext() forniscono un modo per sottoscrivere i cambiamenti di stato/contesto delle API di Interattività durante la navigazione sul lato client.
  • I moduli di script ricevono un paio di aggiornamenti con un nuovo modulo di script @wordpress/a11y e un nuovo filtro script_module_data_{$module_id}.
  • L’API HTML riceve diversi miglioramenti, tra cui il supporto per quasi tutti i tag HTML, un nuovo metodo set_modifiable_text() che permette di sostituire il contenuto testuale di elementi autocontenuti come script, style, o title, una modalità full-parser nel processore HTML e molto altro ancora.
  • Diversi miglioramenti relativi all’internazionalizzazione (i18n) sono stati inseriti nel core, tra cui una nuova funzione has_translation() per determinare se una traduzione esiste già senza caricare prima la traduzione, le email a admin_email vengono inviate nel locale dell’utente e un avviso per gli sviluppatori se caricano le traduzioni in un plugin o in un tema prima che sia noto l’utente corrente.

Riepilogo

In questo approfondimento su WordPress 6.7, abbiamo esplorato molte feature e miglioramenti straordinari in arrivo con questa versione, da un nuovo fantastico tema predefinito, alla modalità Zoom Out ai Meta box nell’editor dei post, all’aggiunta dell’API Block Bindings, ai miglioramenti nella gestione dei media, ai nuovi strumenti di progettazione e a molte nuove funzionalità per gli sviluppatori di plugin.

Ora tocca a voi. Avete già provato WordPress 6.7? Quali sono i cambiamenti o le vostre feature preferite in arrivo con la versione 6.7? Fatecelo sapere 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.