Le Novità di WordPress 6.1: Conversione da JPEG a WebP, Tipografia Fluida, Sistema di Template Migliorato e Molto Altro!

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.

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.

Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi

— Brian Gardner (@bgardner) August 8, 2022

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 ).

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.

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.

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.

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.

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

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.

Controlli Font Family nel Blocco Intestazione

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

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.

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.

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.

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.

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.

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.

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:

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.

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.

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.

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.

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”.

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.

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.

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.

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:

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.

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.

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

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.

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.

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.

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.

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.

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.

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:

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.

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:

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:

• Proposal: Persistent Object Cache and Full Page Cache Site Health Checks
• New cache Site Health checks in WordPress 6.1
• Port Audit Full Page Cache from performance plugin to core
• class-wp-site-health.php

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.

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:

• Improved PHP performance for core blocks registration
• Navigation Block Fallback Behavior in WP 6.1
• Spacing Size Presets in theme.json
• Escaping Table and Field names with wpdb::prepare() in WordPress 6.1
• WP_List_Table::get_views_links() in WordPress 6.1
• Functions and hooks for required fields in WordPress 6.1
• Moving the send_headers action to later in the load
• Performance improvements to the REST API
• Editor Components updates in WordPress 6.1
• Multisite improvements in WordPress 6.1
• Miscellaneous Core changes for WordPress 6.1
• Performance Field Guide for WordPress 6.1
• Miscellaneous REST API improvements in WordPress 6.1

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.