Il rilascio di WordPress 6.1 è previsto per il 1° novembre 2022 e sarà la terza major release dell’anno, dopo WordPress 6.0 Arturo, rilasciato il 24 maggio, e WordPress 5.9 Josephine, rilasciato il 25 gennaio.

Come sempre, le nuove versioni di WordPress importano nel core dalle ultime versioni del plugin Gutenberg nuove funzionalità, miglioramenti e correzioni di bug. E WordPress 6.1 non farà eccezione: 11 versioni del plugin Gutenberg saranno integrate nel core, dalla 13.1 alla 14.1.

Queste sono le date principali del programma di rilascio:

  • Beta 1 e blocco delle funzionalità: 21 settembre 2022 – Da questa data in poi, i core contributor si concentreranno sui test e sulla correzione dei bug
  • Release Candidate 1: 4 ottobre 2022 – Pubblicazione della Field Guide con le Note di sviluppo
  • Dry Run: 28 ottobre 2022
  • Rilascio generale di WordPress 6.1: 1 novembre 2022

In questo articolo diamo una sbirciatina dietro le quinte per cercare di capire cosa possiamo aspettarci dalla prossima major release di WordPress.

Matias Ventura ce ne offre un’anteprima nella Roadmap per la 6.1, dove afferma che l’obiettivo della 6.1 è quello di perfezionare le esperienze introdotte con la 5.9 e la 6.0 e di correggere alcune cose in vista della fase 3 della roadmap di Gutenberg.

Vuoi dare un'occhiata dietro le quinte alle novità in arrivo con WordPress 6.1? ✨ Continua a leggere... 👀 Clicca per twittare

1. Miglioramenti all’editor dei template: Una delle principali novità riguarda l’editor di template. WordPress 6.1 dovrebbe introdurre la possibilità di sfogliare, visualizzare e modificare la struttura del sito.

2. Template Pattern: L’obiettivo è quello di dare ai block pattern un ruolo centrale nella creazione di template e pagine, adattandoli ai tipi di post e ai tipi di blocco personalizzati, migliorando le funzionalità dei blocchi, la gestione dei pattern salvati, ecc.

3. Stili Globali e Strumenti di Blocchi e di Progettazione: WordPress 6.1 consentirà la gestione dei font web, implementerà la tipografia reattiva e amplierà il set di strumenti disponibili per i blocchi.

Detto questo, diamo un’occhiata più da vicino ad alcune delle funzioni più interessanti in arrivo con WordPress 6.1:


Tipografia e Spaziatura Fluide

WordPress 6.1 aggiunge il supporto per la Fluid Typography utilizzando le funzioni CSS calc e clamp.

L’espressione Fluid Typography descrive la capacità del testo di adattarsi alla larghezza del viewport, scalando in modo fluido da una larghezza minima a una massima.

Si tratta di una cosa diversa da ciò che si può ottenere con le media query, in quanto queste ultime permettono ai temi di ridimensionare il testo in base a specifiche dimensioni del viewport ma non fanno nulla tra valori diversi.

Alcuni temi supportano già la tipografia fluida. Twenty Twenty-Two, ad esempio, utilizza la funzione CSS clamp() per diverse dimensioni di carattere. Ad esempio:

"settings": {
	...
	"custom": {
		"spacing": {
			"small": "max(1.25rem, 5vw)",
			"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
			"large": "clamp(4rem, 10vw, 8rem)",
			"outer": "var(--wp--custom--spacing--small, 1.25rem)"
		},
		"typography": {
			"font-size": {
				"huge": "clamp(2.25rem, 4vw, 2.75rem)",
				"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
				"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
			}
		}
	}
}

Dal codice qui sopra, si vede che i valori delle dimensioni dei caratteri fluidi vengono utilizzati per ogni singola dimensione di carattere.

Ora, a partire da WordPress 6.1, i temi saranno in grado di generare automaticamente dimensioni di carattere fluide dichiarando la nuova proprietà typography.fluid come segue:

"settings": {
	....
	"typography": {
		"fluid": true,
		"fontSizes": [
			{
				"size": "2rem",
				"fluid": {
					"min": "2rem",
					"max": "2.5rem"
				},
				"slug": "medium",
				"name": "Medium"
			}
		]
}

Utilizzando typography.fluid e typography.fontSizes[].fluid, il valore di ogni dimensione del carattere viene calcolato automaticamente con la seguente formula:

--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});

Ad esempio:

--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});

Si noti che, al momento in cui scriviamo, la Tipografia fluida è una funzione sperimentale. Per i dettagli tecnici, si legga Block supports: add fluid typography.

Si veda anche How to add Fluid Typography to WordPress Block Themes di Rich Tabor e Fluid typography with Gutenberg di Carolina Nymark.

Analogamente alla Tipografia Fluida, WordPress 6.1 introduce anche il supporto per la Spaziatura Fluida.

Prima di WordPress 6.1, era possibile impostare valori di spaziatura personalizzati solo nell’editor e gli autori dei temi non potevano specificare valori fissi per padding, margin e gap. Non era quindi possibile trasferire le impostazioni di spaziatura da un tema all’altro o mantenere i valori di spaziatura quando si copiava e incollava il contenuto tra diversi siti web.

Ora gli sviluppatori di temi possono dichiarare il supporto della spaziatura fluida usando le impostazioni spacing.spacingScale e spacing.spacingSizes[] (vedi anche Theme.json: Add spacing size presets e Extend theme.json to provide spacing size presets).

"settings": {
	"spacing": {
		"spacingScale": 
		{
			"steps": 0
		},
		"spacingSizes": [
			{
				"size": "clamp(1.5rem, 5vw, 2rem)",
				"slug": "30",
				"name": "1"
			},
			{
				"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
				"slug": "40",
				"name": "2"
			},
			{
				"size": "clamp(2.5rem, 8vw, 6.5rem)",
				"slug": "50",
				"name": "3"
			},
			{
				"size": "clamp(3.75rem, 10vw, 7rem)",
				"slug": "60",
				"name": "4"
			},
			{
				"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
				"slug": "70",
				"name": "5"
			},
			{
				"size": "clamp(7rem, 14vw, 11rem)",
				"slug": "80",
				"name": "6"
			}
		],
	...
	}
}

Le proprietà di tipografia e spaziatura fluide sono documentate in Global Settings & Styles Presets e nella living reference to theme.json API V2.

Miglioramenti ai Tipi di Blocco

Con le tante versioni di Gutenberg confluite nel core, WordPress 6.1 farà bella mostra di tantissime modifiche e miglioramenti ai tipi di blocco esistenti.

Supporto dei Bordi per il Blocco Colonne

Il blocco Colonne ora sfrutta il nuovo componente BorderBoxControl che consente agli utenti di WordPress di specificare bordi personalizzati per le colonne, impostando anche stili completamente diversi per ciascun bordo (vedi anche la pull request Column: Add border support to column blocks ).

Una schermata che mostra come personalizzare i bordi delle colonne in WordPress 6.1
Personalizzazione dei bordi delle colonne in WordPress 6.1

I singoli bordi possono essere impostati anche nel file theme.json come segue:

"core/column": {
	"border": {
		"top": {
			"color": "#CA2315",
			"style": "dashed",
			"width": "6px"
		},
		"right": {
			"color": "#FCB900",
			"style": "solid",
			"width": "6px"
		}
	}
}

Gli sviluppatori troveranno maggiori informazioni sul nuovo controllo nella Documentazione del componente BorderBoxControl.
A caldo... ecco tutto quello che puoi aspettarti di vedere in WordPress 6.1 (in arrivo a novembre 2022! 🗓), dai nuovi e migliorati tipi di blocco, alla tipografia fluida e molto altro! 🎉 Clicca per twittare

Controlli dei Bordi per i Blocchi Immagine

Gutenberg 13.8 ha introdotto il supporto per tutti i controlli dei bordo per il blocco Immagine. La modifica sarà aggiunta al core di WordPress 6.1, aprendo le porte a nuove e grandi opportunità per i creativi del web.

Controlli dei bordi delle immagini in WordPress 6.1
Controlli dei bordi delle immagini in WordPress 6.1

Miglioramenti al Blocco dei Commenti

WordPress 6.1 ha anche un blocco dei commenti migliorato. A partire dalla prossima versione di WordPress, infatti, gli utenti potranno utilizzare funzioni di modifica più avanzate nel blocco Commenti.

Nell’immagine qui sotto si può vedere la barra laterale delle impostazioni del blocco Commenti e le modifiche applicate al Titolo dei Commenti.

Il blocco Commenti migliorato in WordPress 6.1
WordPress 6.1 porta un blocco Commenti migliorato

Variazioni del Blocco Post Terms per i Termini delle Tassonomie Personalizzate

Il blocco Post Terms è stato migliorato con la nuova variante delle tassonomie personalizzate. Ora è possibile registrare una nuova tassonomia personalizzata, ad esempio il tipo di post “Attori in un Film”, e si potranno aggiungere un elenco di termini della tassonomia al post corrente o al tipo di post personalizzato.

Un'immagine che mostra i termini della tassonomia personalizzata di un blocco Termini del post
Termini della tassonomia personalizzata di un blocco Post Terms

L’immagine qui sotto mostra un elenco di attori in un post di tipo Movie.

Customizing the appearance of a Post Terms block with custom taxonomy terms
Personalizzazione dell’aspetto di un blocco Post Terms con termini di una tassonomia personalizzata

Un Nuovo Filtro Parents per il Blocco Query

È ora disponibile un nuovo filtro Parents per il blocco Query che consente di visualizzare i post e le pagine gerarchiche che hanno lo stesso genitore.

Displaying posts with the same parent in a Query Loop block
Un nuovo filtro Parents permette di visualizzare i post con lo stesso genitore in un blocco Query Loop

Controlli Font Family nel Blocco Intestazione

Il blocco Intestazione ora supporta i controlli della famiglia di caratteri.

An image showing how to set a custom font family in a Heading block in WordPress 6.1
Impostazione di una famiglia di caratteri personalizzata in un blocco Intestazione

Spaziatura Orizzontale e Verticale nel Blocco Galleria

A partire da WordPress 6.1, un nuovo controllo della spaziatura assiale permette di impostare valori diversi per spaziatura orizzontale e verticale per le immagini inserite nel blocco Galleria.

Questa modifica si traduce in una maggiore flessibilità nella creazione del layout delle gallerie di immagini.

New layout image galleries in WordPress 6.1
Personalizzazione della spaziatura orizzontale e verticale in un blocco Galleria

Immagini in Primo Piano nel Blocco Copertina

Le immagini in primo piano sono ancora oggetto di grande attenzione e in WordPress 6.1 il loro utilizzo è stato ulteriormente ampliato. A partire dalla versione 6.1, l’immagine in primo piano può essere selezionata direttamente dal segnaposto del blocco Copertina, come mostrato nelle immagini che seguono.

An image showing the ability to use a Featured Image in the Cover block placeholder
Utilizzare un’immagine in primo piano nel segnaposto del blocco Cover

Questa modifica dovrebbe contribuire a creare un’esperienza utente più coerente, rendendo più chiaro all’utente cosa sta personalizzando.

Inoltre, è stato aggiunto un interruttore per l’immagine in primo piano al flusso di sostituzione dei media.

Use Featured Images in media replace flow in WordPress 6.1
Le immagini in primo piano nel flusso di sostituzione dei media

Strumenti per l’Aspetto dei Link di Navigazione dei Post

La proprietà appearanceTools permette di accedere a diverse impostazioni che sono disattivate di default.

A partire da WordPress 6.1, per i temi che supportano la proprietà appearanceTools, è possibile personalizzare il colore e la famiglia di caratteri dei link nei link di navigazione dei post.

Customizing link color in Post Navigation Links
Personalizzazione del colore dei link nei Post Navigation Link

Maggiori informazioni sulla proprietà appearanceTools si trovano nella nostra introduzione al tema Twenty Twenty-Two.

Blocco delle Modifiche all’Interno di un Blocco Container con un Clic

Un nuovo interruttore permette agli utenti di bloccare i blocchi all’interno di un contenitore di blocchi con un solo clic. Questo vale per i blocchi Gruppo, Copertina e Colonna.

Lock a group inside a column
Blocco all’interno del blocco gruppo

Miglioramenti al Blocco Elenco

Il blocco Elenco è stato migliorato e ora sfrutta i blocchi interni.

Questa modifica semplifica l’ordinamento e l’indentazione degli elementi degli elenchi e migliora decisamente l’esperienza dell’utente.

Ordinamento degli elementi dell’elenco
Indentazione e sfasatura degli elementi dell’elenco

Supporto degli Pseudo-elementi per i Pulsanti

Ora i temi a blocchi possono personalizzare l’aspetto dei pulsanti in base al loro stato (hover/active/focus). Si veda ad esempio il theme.json di Twenty Twenty-Three:

"styles": {
	...
	"elements": {
		"link": {
			"color": {
				"text": "var(--wp--preset--color--contrast)"
			},
			":hover": {
				"typography": {
					"textDecoration": "none"
				}
			},
			":focus": {
				"typography": {
					"textDecoration": "underline dashed"
				}
			},
			":active": {
				"color": {
					"text": "var(--wp--preset--color--secondary)"
				},
				"typography": {
					"textDecoration": "none"
				}
			},
			"typography": {
				"textDecoration": "underline"
			}
		}
	}
}

Il codice che segue aggiunge gli stili ai pulsanti:

"styles": {
	...
	"elements": {
		"button": {
			"border": {
				"radius": "0"
			},
			"color": {
				"background": "var(--wp--preset--color--primary)",
				"text": "var(--wp--preset--color--contrast)"
			},
			":hover": {
				"color": {
					"background": "var(--wp--preset--color--contrast)",
					"text": "var(--wp--preset--color--base)"
				}
			},
			":focus": {
				"color": {
					"background": "var(--wp--preset--color--contrast)",
					"text": "var(--wp--preset--color--base)"
				}
			},
			":active": {
				"color": {
					"background": "var(--wp--preset--color--secondary)",
					"text": "var(--wp--preset--color--base)"
				}
			}
		}
	}
}

E il risultato è visibili nelle immagini che seguono:

Added:

Lo stato hover di un pulsante in WordPress 6.1 con il tema Twenty Twenty-Three

Lo stato active di un pulsante in WordPress 6.1 con il tema Twenty Twenty-Three

Funzionalità e Miglioramenti Aggiuntivi all’Editor dei Blocchi

Sebbene si tratti di una versione di consolidamento, WordPress 6.1 porterà tanti cambiamenti e miglioramenti e sarebbe impossibile elencarli tutti in un solo articolo (ma consultate questo articolo di Anne McCarty per un elenco completo di strumenti di progettazione per blocco).

Oltre alle modifiche elencate sopra, vedremo:

Varianti di Template Part nel Block Inserter

Le varianti dei template sono ora disponibili nel block inserter, rendendo più semplice aggiungere template al sito.

Easily add template parts to your website
Variazioni delle parti del template Header in WordPress 6.1

Questa modifica rende la modifica più semplice e diretta, consentendo agli utenti di visualizzare rapidamente le varianti delle parti dei template con pochi clic.

Visualizzazione del Margine e del Padding

Un piccolo ma utile miglioramento è l’evidenziazione dei margini e del padding durante la configurazione. In questo modo sarà molto più chiaro quanto spazio viene aggiunto all’interno o all’esterno degli elementi.

Margin and padding highlight inside the new WordPress 6.1 release
Evidenziazione di margini e padding

Miglioramenti alla Barra Laterale delle Impostazioni

WordPress 6.1 introdurrà anche diversi miglioramenti all’interfaccia della barra laterale delle impostazioni.

La sidebar delle impostazioni dei post è stata leggermente ridisegnata. Ora i campi per il formato del post, lo slug, il template e gli autori sono allineati e hanno la stessa larghezza. Inoltre, il pannello di pianificazione dei post è stato semplificato per rendere l’esperienza più comprensibile. Anche la sezione dei template è stata spostata in un popover per risparmiare spazio e ripulire l’interfaccia.

A simplified settings sidebar that is easier to manage
WordPress 6.1 presenterà una barra laterale delle impostazioni semplificata

Inoltre, il pannello dei template è stato sostituito da un link ai template. Se cliccato, il link al template visualizza il template predefinito in un popover.

An image showing the Default template popover
Il popover dei Template in WordPress 6.1
Tipografia fluida, tipi di blocco migliorati, controlli di Site Health... WordPress 6.1 ha in serbo molti aggiornamenti interessanti! 🎉 Scopri di più in questa guida 🚀 Clicca per twittare

Aggiornamenti al Design del Popover di Pubblicazione

Il selettore di date nel popover di pubblicazione è stato ridisegnato e ora utilizza “componenti WordPress esistenti e lo stile Emotion”.

The revamped datetime picker with additional styling options
WordPress 6.1 mostra un datetime picker rinnovato

Ulteriori approfondimenti tecnici sono disponibili negli Design updates to the Publish popover (DateTimePicker).

Tempo di Lettura nel Pannello delle Informazioni

Il pannello delle Informazioni disponibile nella barra degli strumenti superiore è stato migliorato e ora mostra il Tempo di lettura oltre a Parole, Caratteri, Titoli, Paragrafi e Blocchi.

In QWordPress 6.1, the The Info panel now displays Time to read
Il pannello Informazioni ora mostra il Tempo di lettura

Il tempo di lettura stimato è calcolato su una media di 189 parole al minuto. Per approfondire, @wordpress/editor: Add estimated time to read to table of contents in editor.

Controllo della Spaziatura dei Blocchi nell’Interfaccia degli Stili

Ora gli utenti possono regolare la spaziatura verticale e orizzontale dall’interfaccia degli Stili per i blocchi che supportano questa funzione.

Controlli della spaziatura dei blocchi per il blocco Icone sociali

Nuovi e Migliorati Strumenti di Costruzione

WordPress 6.1 amplierà anche le funzionalità del Site Builder. I modelli di blocco saranno disponibili in più punti e una scelta più ampia di template migliorerà l’esperienza di editing nell’editor dei template.

Pattern di Creazione per i Tipi di Post

WordPress 6.0 ha introdotto i pattern di creazione delle pagine, uno strumento per fornire una selezione di pattern ogni volta che un utente crea una nuova pagina. Grazie ai pattern di creazione, non è necessario creare la pagina da zero, ma si può scegliere un modello da una modale, inserire il contenuto e il gioco è fatto.

Per abilitare questa funzione, almeno un block pattern deve dichiarare il supporto per i tipi di blocco core/post-content.

A partire da WordPress 6.1, questa funzione si estende a tutti i tipi di post. Tutto ciò che bisogna fare è includere core/post-content nel campo blockTypes del pattern e impostare il relativo postTypes.

Scopriamo ora come sfruttare questa nuova funzionalità con un esempio pratico. Supponiamo di avere un tipo di post “Movie”.

Per prima cosa, bisogna registrare un block pattern come descritto qui.

Oppure si può scegliere la strada più semplice e utilizzare la registrazione implicita del pattern (per semplicità, in questo esempio utilizzeremo la registrazione implicita dei pattern).

Create un file PHP per il vostro block pattern nella cartella /patterns del vostro tema (per questo esempio abbiamo utilizzato Twenty Twenty-Two). Quindi aggiungete la seguente intestazione:

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Post Types: movie
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- wp:heading -->/code>

E questo è tutto. Ora, ogni volta che si crea un nuovo tipo di post Movie, sullo schermo appare la finestra di scelta del pattern.

A modal displays on the screen when the user creates a new post type
Sullo schermo viene visualizzato un modale quando l’utente crea un nuovo tipo di post

Se si vuole visualizzare il modale su più tipi di post, basta aggiungere gli slug corrispondenti separati da virgole:

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Post Types: movie, book
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- wp:heading -->

Per un’analisi più approfondita dei pattern di creazione, si legga Ability to use creation patterns for other post types besides page.

Nuovi Tipi di Template nell’Editor del Sito

Con WordPress 6.0, è possibile creare solo un numero limitato di template nell’Editor del sito:

Aggiungere un nuovo template in WordPress 6.0
Aggiungere un nuovo template in WordPress 6.0

A partire da WordPress 6.1, sarà possibile creare un template diverso per ogni singolo tipo di post.

Inoltre, sarà possibile aggiungere e modificare template per le tassonomie core e personalizzate, anche per singole categorie o tag.

Se si registrano tipi di post o tassonomie personalizzate, questi saranno automaticamente elencati nella casella di selezione dei template dell’Editor del sito.

An image showing a list of templates types available in WordPress 6.1
Un elenco dei tipi di template disponibili in WordPress 6.1

Ma non solo. Una volta selezionato il tipo di template del post, un modale chiede all’utente se creare un template per tutti i post di quel tipo o se creare un nuovo template per un post specifico del tipo di post selezionato.

Aggiungere un template per un tipo di post personalizzato in WordPress 6.1
Aggiungere un template per un tipo di post personalizzato in WordPress 6.1

Una nuova finestra di dialogo fornisce un elenco dei post disponibili per quel tipo di post.

Aggiungere un nuovo template in WordPress 6.1
Aggiungere un nuovo template in WordPress 6.1

Twenty Twenty-Three e Altre Novità per i Temi

WordPress 6.1 offre anche un nuovissimo tema predefinito: Twenty Twenty-Three. È un tema minimalista, privo di immagini e di funzionalità aggiuntive.

La struttura dei file di Twenty Twenty-Three

Il nuovo tema predefinito raccoglie tutte le più recenti funzionalità di modifica del sito in un unico luogo ed è una sandbox perfetta per testare template e parti di template, variazioni di stile, tipografia e spaziatura flessibili e tutte le funzionalità introdotte con le ultime versioni di WordPress.

Per questo motivo, è anche un ottimo strumento per imparare a sviluppare temi, template e block pattern con esempi funzionanti.

Potete conoscere più da vicino il nuovo tema predefinito di WordPress nella nostra analisi approfondita.

Variazioni di Stile in Twenty Twenty-Three
Variazioni di Stile in Twenty Twenty-Three

Oltre al nuovo tema predefinito, WordPress 6.1 introduce anche diversi miglioramenti legati ai temi.

Update URI Header nei Temi

Prima di WordPress 6.1, se un tema aveva lo stesso nome di un tema disponibile nella directory dei temi di WordPress, all’utente veniva mostrato un messaggio di aggiornamento disponibile.

A partire da WordPress 6.1, un nuovo header Update URI impedisce di sovrascrivere accidentalmente i file dei temi di terze parti. Questa funzionalità è utile soprattutto se avete un tema sviluppato internamente con lo stesso nome di un tema presente nella WordPress Theme Directory, ma non volete condividerlo con la comunità.

Ora, se il valore del campo header Update URI del tema non corrisponde a https://wordpress.org/themes/{$slug}/ o w.org/theme/{$slug}, WordPress non cercherà di aggiornarlo.

Se impostato, Update URI deve essere un URI con hostname univoco, come https://wordpress.org/themes/my-theme/ o https://example.com/my-theme/.

Gli sviluppatori di temi troveranno una panoramica più approfondita del nuovo header dei temi Update URI nella dev note ufficiale.

Block Themes Filter Under “Add Themes” Screen

Una nuova scorciatoia permette ora di filtrare i temi a blocchi quando si aggiunge un nuovo tema all’installazione di WordPress.

Inoltre, un nuovo tab di aiuto Temi a Blocchi è stato aggiunto alla stessa schermata.

Temi a Blocchi e scheda Aiuto nella schermata di installazione dei temi

Novità per gli Sviluppatori

WordPress 6.1 aggiunge anche una nuova API e apporta diversi miglioramenti per gli sviluppatori.

Nuova Preferences Persistence API

WordPress 6.1 introduce una nuovissima Preferences Persistence API che salva le preferenze dell’editor nel database di WordPress invece che nel local storage.

In questo modo, le preferenze degli utenti possono essere memorizzate su tutti i browser e dispositivi.

A tal fine, il precedente sistema di persistenza del pacchetto @wordpress/data è stato deprecato ed è stato introdotto un nuovo pacchetto preferences-persistence. Il nuovo pacchetto salva i dati nei meta dell’utente tramite la Rest API. I dati saranno salvati anche nel local storage come fallback nel caso in cui l’utente vada offline o una richiesta venga interrotta (vedi anche il pull #39795).

Supporto degli Stili dei Pulsanti nel File theme.json

Con WordPress 6.1, è possibile aggiungere gli stili dei pulsanti ai temi utilizzando il theme.json. Questo permette agli sviluppatori di temi di dare coerenza ai pulsanti nei vari blocchi. Un esempio è il blocco di ricerca, ma anche i blocchi di terze parti potranno beneficiare di questa modifica.

Per renderlo possibile, verrà aggiunta una nuova classe wp-element-button agli elementi dei pulsanti in modo che possano condividere lo stesso stile.

È possibile testare questa modifica aggiungendo il seguente codice al theme.json in un ambiente di sviluppo:

{
	"styles": {
		"elements": {
			"button": {
				"color": {
					"background": "blue"
				}
			}
		}
	}
}

Le Varianti del Blocco Ricerca ora Supportano le Query Var

WordPress 6.1 supporterà variazioni del blocco Ricerca basate sulle query vars. Questo significa che sarà possibile offrire agli utenti delle caselle di ricerca da utilizzare per cercare in modo granulare qualsiasi tipo di contenuto.

Alle prese con i tempi di inattività e problemi di WordPress? Kinsta è la soluzione di hosting progettata per farvi risparmiare tempo! Scopri i nostri servizi

Nell’esempio che segue, registriamo una variante di blocco per un tipo di post movies. L’esempio si basa sul tutorial di Carolina Nymar sulle variazioni di blocco.

Nel file functions del vostro tema (child theme), aggiungete il seguente codice:

function movies_editor_assets() {
	wp_enqueue_script(
		'movies-block-variations',
		get_template_directory_uri() . '/assets/block-variations.js',
		array( 'wp-blocks' )
	);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );

Ora, create il seguente file block-variations.js nella cartella assets del vostro tema (o child theme):

wp.blocks.registerBlockVariation( 
	'core/search', 
	{
		name: 'movie-search',
		title: 'Movie Search Block',
		attributes: {
			query: {
				post_type: 'movies'
			}
		}
	} 
);

Ora ricaricate la bacheca di WordPress e cercate una variante del blocco Ricerca Movie nel block inserter.

WordPress 6.1 now has a custom Search block variation in the block inserter
Una variante personalizzata del blocco Ricerca nel block inserter

Per maggiori informazioni sulle variazioni di blocco, si legga la documentazione ufficiale.

Un Nuovo Elemento Pulsanti negli Stili Globali

WordPress 5.9 ha introdotto l’interfaccia degli Stili Globali per consentire agli utenti di personalizzare i preset di stile dei propri siti web, sia a livello globale che a livello di blocco.

Con la prima implementazione, era possibile personalizzare i colori di Sfondo, Testo e Link. Ora, a partire da WordPress 6.1, un nuovo elemento Buttons è stato aggiunto al pannello Colors per consentire agli utenti di controllare l’aspetto dei pulsanti in tutto il sito web.

Customizing buttons in Global Styles settings
Personalizzazione dei pulsanti nelle impostazioni degli Stili globali

Questo influisce sullo stile dei pulsanti in tutto il sito, dal blocco Pulsanti al blocco Ricerca e ai blocchi di terze parti che utilizzano i pulsanti.

Appearance Tools Disponibili per Qualsiasi Tema

Prima di WordPress 6.1, gli Appearance Tools erano disponibili solo nei temi a blocchi. Con la 6.1 qualsiasi tema può includere questa funzione semplicemente aggiungendo il supporto nel proprio file functions:

add_theme_support( 'appearance-tools' );

Questo codice abilita tutte le seguenti impostazioni in una sola volta:

  • border: color, radius, style, width
  • color: link
  • spacing: blockGap, margin, padding
  • typography: lineHeight

Nuova Funzione is_login_screen()

Una nuova funzione is_login_screen() consente ora di stabilire se la pagina corrente è la schermata di accesso. Sono supportate anche le posizioni di login personalizzate.

È possibile utilizzare il nuovo tag condizionale come segue:

function add_text_to_login() {
	if ( is_login_screen() ) {
		echo( "<h1>Welcome to Kinsta!</h1>" );
	}
}

add_action( 'init', 'add_text_to_login' );

Il risultato sullo schermo sarà il seguente:

is_login_screen() controlla se la pagina corrente è la schermata di login

Nuovi Controlli sulla Salute del Sito per la Persistent Object Cache e la Full Page Cache

WordPress 6.1 introduce due nuovi controlli di Site Health per Persistent Object Cache e Page Cache. Entrambi i controlli vengono eseguiti solo negli ambienti di produzione.

I risultati di questi nuovi test possono essere visualizzati nella scheda Stato della schermata Salute del Sito.

Il test della Persistent Object Cache stabilisce se il sito utilizza una cache persistente degli oggetti e, in caso contrario, ne consiglia l’uso se utile per il sito.

I risultati del test di Persistent Object Cache in Salute del Sito

Oltre al nuovo test, WordPress 6.1 introduce diversi nuovi filtri che i provider di hosting possono utilizzare nei loro rispettivi ambienti.

Con site_status_persistent_object_cache_url possono sostituire il link predefinito Learn more per la cache persistente degli oggetti con un link personalizzato. Ad esempio:

add_filter( 'site_status_persistent_object_cache_url', function() {
	return 'https://example.com/persistent-object-cache';
} );

Con site_status_persistent_object_cache_notes gli host possono sostituire le note predefinite per raccomandare la soluzione di caching degli oggetti che preferiscono. Ecco un esempio:

add_filter( 'site_status_persistent_object_cache_notes', function( $notes ) {
	$notes = __( 'Custom notes.', 'text-domain' );
	return $notes;
} );

site_status_persistent_object_cache_thresholds filtra le soglie utilizzate per stabilire se suggerire l’uso di una cache di oggetti persistenti. I valori predefiniti sono i seguenti:

$thresholds = apply_filters(
	'site_status_persistent_object_cache_thresholds',
	array(
		'alloptions_count' => 500,
		'alloptions_bytes' => 100000,
		'comments_count' => 1000,
		'options_count' => 1000,
		'posts_count' => 1000,
		'terms_count' => 1000,
		'users_count' => 1000,
	)
);

Il filtro può essere utilizzato come segue:

add_filter( 'site_status_persistent_object_cache_thresholds', function( $thresholds ) {
	$thresholds = array(
		'alloptions_count' => 700,
		'alloptions_bytes' => 150000,
		'comments_count' => 1500,
		'options_count' => 1500,
		'posts_count' => 2000,
		'terms_count' => 1000,
		'users_count' => 2000,
	);
	return $thresholds;
} );

site_status_should_suggest_persistent_object_cache è un filtro di cortocircuito che filtra se suggerire l’uso di una cache di oggetti persistenti e aggirare i controlli soglia predefiniti. Si può usare come segue:

add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_true' );

Il test Full Page Cache controlla se il sito utilizza la cache a pagina intera e se il tempo di risposta è OK:

Il risultati del test Full Page Cache in Salute del Sito

Due nuovi filtri consentono inoltre agli host di personalizzare la soglia di risposta e di aggiungere intestazioni della cache personalizzate.

site_status_good_response_time_threshold filtra la soglia al di sotto della quale il tempo di risposta è considerato buono. Il valore predefinito è 600 ms (si legga anche Slow server response times affect performance).

site_status_page_cache_supported_cache_headers consente ai provider di hosting di aggiungere intestazioni di cache personalizzate e le corrispondenti callback di verifica. La dev note fornisce il seguente esempio:

add_filter( 'site_status_page_cache_supported_cache_headers', function( $cache_headers ) {

	// Add new header to the existing list.
	$cache_headers['cf-cache-status'] = static function ( $header_value ) {
		return false !== strpos( strtolower( $header_value ), 'hit' );
	};

	return $cache_headers;

});

Gli sviluppatori possono approfondire i nuovi controlli di Salute del Sito in:

Aggiornamenti allo Strumento Create-block

WordPress 6.1 introduce anche nuove funzionalità e aggiornamenti al pacchetto @wordpress/create-block, disponibile per gli sviluppatori per creare nuovi blocchi.

Quello che viene definito block scaffolding è la struttura delle directory di supporto che consente a WordPress di riconoscere un blocco.

Con WordPress 6.1 sono state introdotte un paio di nuove funzionalità e diversi miglioramenti.

Un nuovo flag –variant consente agli sviluppatori di blocchi di scegliere una variante di blocco da installare. I modelli interni forniti dallo strumento create-block supportano le varianti dynamic e static, significa che si può installare un blocco dinamico o statico. Il valore predefinito è static.

Il nuovo flag può essere utilizzato come segue:

npx @wordpress/create-block my-first-block -variant=dynamic

Gli sviluppatori possono definire varianti personalizzate aggiungendo un oggetto variants nella template definition.

Un’ulteriore funzionalità consente agli sviluppatori di blocchi di aggiungere nuovi blocchi a un plugin esistente, grazie al flag --no-plugin.

npx @wordpress/create-block custom-block --no-plugin

L’esecuzione del comando precedente crea una nuova serie di file di blocco in una sottodirectory della directory corrente.

Si noti che lo script non è consapevole della sua posizione:

Eseguendo npx @wordpress/create-block block-name --no-plugin si creerà un nuovo blocco all’interno della folderNamedirectory dove è invocato

Per approfondire, si legga create-block scaffolding tool updates.

Memorizzazione nella Cache dei Risultati delle Query in WP_Query

WordPress 6.1 cambia il modo in cui vengono eseguite le query del database nella classe WP_Query. Le query ora vengono memorizzate nella cache con il risultato che, se una query viene eseguita più di una volta, i risultati saranno caricati dalla cache.

Beneficeranno di questa modifica sia i siti che utilizzano la cache persistente degli oggetti che quelli che utilizzano la cache in-memory, anche se i vantaggi per questi ultimi saranno minori.

Di default, tutte le chiamate a WP_Query saranno memorizzate nella, ma gli sviluppatori possono escludere la memorizzazione nella cache delle query usando il parametro cache_results:

$args = array(
	'posts_per_page' => 20,
	'cache_results' => false
);
$query = new WP_Query( $args );

Si può anche disabilitare la cache delle query a livello globale, usando l’hook disable_caching, anche se non è raccomandato.

È bene notare che alcuni parametri della query non sono considerati ai fini della memorizzazione nella cache. Il parametro più comunemente utilizzato tra questi è il parametro fields. La ragione è che se si tenesse conto di fields potrebbero essere create cache multiple per diversi sottoinsiemi degli stessi dati, con conseguente degrado delle prestazioni.

Per un’analisi più approfondita della memorizzazione nella cache di WP_Query, si veda la dev note Improvements to WP_Query performance in 6.1.

Parti di Template nei Temi Classici

A partire da WordPress 6.1, i temi classici supportano le parti di template basate su blocchi. Per aggiungere questa funzionalità, i temi devono aggiungere il supporto per block-template-parts come mostrato di seguito:

function add_block_template_part_support() {
	add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'add_block_template_part_support' );

I temi classici possono includere parti di template nei template PHP utilizzando la funzione block_template_part. Per maggiori informazioni su questa funzione, si legga la nota di sviluppo Block-based “template parts” in traditional themes.

Scopri le novità di WordPress 6.1 in questa guida e preparati a novità come tipografia fluida, miglioramenti ai blocchi e altro ancora! 🚀 Clicca per twittare

Una Nota sulla Conversione delle Immagini da JPEG a WebP

Inizialmente sembrava che WordPress 6.1 avrebbe introdotto anche il supporto per la conversione automatica delle immagini da JPEG a WebP.

Tuttavia, molti contributor hanno degnalato dei problemi. In particolare, è stato notato che:

Le risorse per la generazione di immagini quando si carica un’immagine aumenteranno drasticamente, ma le risorse per servire un’immagine diminuiranno. Dato che il caricamento di immagini è molto raro rispetto al servizio delle immagini, dovrebbe valere la pena sostenere lo sforzo extra per comprimere e archiviare le immagini.

E poi:

In realtà l’aumento drastico dell’utilizzo delle risorse quando si carica un’immagine è un effetto collaterale molto negativo. Significa che molti caricamenti non andranno a buon fine e lasceranno gli utenti a piedi. Inoltre, aumenterà drasticamente le richieste di assistenza sia per WordPress che per le aziende di hosting. Non pensate che questo sia accettabile. Per questo motivo, anche se il supporto multi-mime per le immagini è necessario in WordPress, l’approccio attuale non sembra una buona soluzione.

Infine, a seguito di un post di Matt Mullenweg su WordPress.org, la conversione automatica da JPEG a WEBP è stata eliminata da WordPress 6.1.

Sono interessato al supporto di nuovi formati e a migliorare le prestazioni, ma ritengo che questa modifica, che viene imposta di default agli utenti quando aggiornano alla versione 6.1, sia eccessiva per il momento, anche in considerazione di alcune interazioni complicate che i sistemi operativi hanno ancora con i file webp (e HEIC!).

Sono felice che il supporto dei file webp e HEIC rimanga nel core, perché dovremmo essere liberali nell’accettare e lavorare con i file, ma non con la conversione di tutto in webp quando vengono caricati i JPEG.

Questo è un territorio eccellente per un plugin canonico, un concetto che penso che ogni team di Make dovrebbe esplorare molto di più come luogo per sperimentare e spingere le funzionalità…

In ogni caso, gli utenti e gli sviluppatori di WordPress possono testare la conversione automatica delle immagini da JPEG a WebP installando il plugin Performance Lab del WordPress Performance Group.

Altre Novità per gli Sviluppatori

Oltre alle caratteristiche e ai miglioramenti di cui abbiamo parlato sopra, WordPress 6.1 introduce diversi altre novità per gli sviluppatori. Per conoscerle tutte, date un’occhiata alle note di sviluppo:

Riepilogo

Sono davvero molte le novità in arrivo con WordPress 6.1.

Con WordPress 6.1 assistiamo al consolidamento delle funzionalità di modifica dei siti WordPress. Siamo ancora nella fase due della roadmap di lungo termine di Gutenberg, ma nel tempo gli strumenti e le funzionalità a nostra disposizione diventano sempre più affidabili e robusti. WordPress 6.1 ci porta la Tipigrafia e la Spaziatura fluide, nuovi strumenti per la costruzione di siti e tantissimi miglioramenti ai blocchi esistenti.

Ma non c’è solo questo. WordPress 6.1 apporta anche miglioramenti significativi alle prestazioni del CMS. Due nuovi controlli di Salute del Sito rilevano l’uso di Full Page Cache e Persistent Object Cache, la memorizzazione nella cache delle query migliora le prestazioni di WP_Query e ci sono anche miglioramenti alle prestazioni di PHP per la registrazione dei blocchi core.

In breve, la 6.1 è una versione che sarà molto apprezzata sia dagli utenti e che da designer e sviluppatori di WordPress.

Ora tocca a voi. Cosa vi aspettate dalla prossima versione di WordPress? Avete già testato la Nightly Build nel vostro ambiente di sviluppo? Condividete le vostre considerazioni su WordPress 6.1 nella sezione dei commenti qui sotto.


Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

  • Easy setup and management in the MyKinsta dashboard
  • Supporto esperto 24/7
  • The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
  • An enterprise-level Cloudflare integration for speed and security
  • Global audience reach with up to 35 data centers and 275+ PoPs worldwide

Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our piani or contattaci to find your best fit.