Le novità di WordPress 6.6: override dei pattern, Block Bindings API, Data Views, nuovi strumenti di progettazione e molto altro!

WordPress 6.6 “Dorsey” è stato rilasciato. La nuova versione punta al perfezionamento e al miglioramento di alcune funzionalità introdotte nelle versioni precedenti. Tuttavia, molte novità spingono il core un passo avanti nel percorso della fase 3 dello sviluppo di WordPress.

Con WordPress 6.6 sono in arrivo un totale di 299 Core Track ticket, insieme a 392 miglioramenti, 462 correzioni di bug e 46 miglioramenti dell’accessibilità per l’editor di blocchi.

Tra le tante nuove funzionalità in arrivo con WordPress 6.6, la nostra preferita riguarda gli override dei pattern. Il rilascio era inizialmente previsto con WordPress 6.5, ma è stato posticipato alla versione 6.6. Con i pattern override siamo alla seconda implementazione della Block Bindings API e ora abbiamo un’idea più precisa di ciò che accadrà nelle prossime versioni di WordPress.

Tuttavia, i pattern override sono solo una delle tante novità in arrivo con la prossima versione di WordPress. Quindi iniziamo subito il nostro viaggio alla scoperta delle funzionalità e dei miglioramenti più interessanti in arrivo con WordPress 6.6.

Override dei pattern

La prima implementazione della Block Bindings API permetteva di collegare gli attributi dei blocchi e i custom field. Con WordPress 6.6, una seconda iterazione introduce un miglioramento dei pattern sincronizzati chiamato Synced Pattern Overrides.

Esistono due tipi di block pattern:

• Pattern sincronizzati
• Pattern standard (non sincronizzati)

La differenza tra i due tipi è che tutte le modifiche apportate a un pattern sincronizzato si applicano a tutte le occorrenze del pattern sull’intero sito web. Al contrario, le modifiche a un pattern standard riguardano solo un’istanza specifica del pattern.

Gli override dei pattern sincronizzati si trovano a metà strada tra questi due estremi. Grazie alla Block Bindings API, ora è possibile creare template di blocco che mantengono la stessa struttura in tutto il sito web e che cambiano in sincro con le modifiche apportate alla struttura e allo stile del pattern nell’editor del sito. Tuttavia, è possibile modificare il contenuto del pattern su una singola istanza senza influenzare le altre istanze dello stesso pattern presenti sul sito.

Scopriamo come funzionano gli override dei pattern.

Innanzitutto, avete bisogno di un pattern sincronizzato. Si può crearlo da zero nell’editor dei post o trovare i pattern sincronizzati esistenti nella sezione Pattern dell’editor del sito.

Passo 1: andate su Pattern e duplicate uno dei pattern esistenti, ad esempio il pattern Hero del tema predefinito Twenty Twenty-Four. Aggiungete un nome e impostate la copia come pattern sincronizzato.

Passo 2: andate alla sezione I miei pattern e individuate il nuovo pattern sincronizzato. Apritelo nell’editor del sito e selezionate singolarmente tutti i blocchi da sovrascrivere.

Andate alla barra laterale delle impostazioni dei blocchi e scorrete verso il basso fino alla sezione Avanzate. Qui troverete il pulsante Enable Overrides.

Facendo clic sul pulsante, verrà chiesto di aggiungere un nome e di impostare il tipo di pattern.

Passo 3: ripetete la stessa procedura per ogni blocco che volete sovrascrivere. Al termine, create un nuovo post o una nuova pagina e inserite il vostro pattern personalizzato.

Passo 4: modificate il contenuto dei blocchi sovrascrivibili e salvate il post. Infine, controllate il risultato sul front-end.

Fatto! È possibile aggiungere un numero qualsiasi di questi pattern in qualsiasi punto del sito: ogni nuova istanza mostra lo stesso contenuto originale ma è pronta per essere personalizzata.

Ora diamo un’occhiata al codice di questi pattern. Tornate alla sezione pattern dell’Editor del sito. Selezionate I miei pattern e aggiungete il vostro pattern. Quindi, aprite il menu Opzioni e selezionate Editor di codice per visualizzare il codice del pattern.

Nel nostro esempio, il codice dovrebbe essere simile al seguente:

<div class="wp-block-group">
	<!-- wp:heading {
		"textAlign":"center",
		"level":1,
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
				}
			},
		"name":"Hero title"
	},"fontSize":"x-large"} -->
		<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
	<!-- /wp:heading -->
	...
</div>

Nel delimitatore di blocco, noterete la proprietà metadata.bindings. Questa proprietà rende il blocco Heading modificabile. Il vincolo __default indica a WordPress di collegare tutti gli attributi supportati a una fonte specifica, che è "core/pattern-overrides".

La stessa proprietà si applica a tutti i blocchi che devono essere resi modificabili. Vediamo, ad esempio, il blocco Pulsante:

<div class="wp-block-buttons">
	<!-- wp:button {
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
					}
				},
			"name":"Hero button"
			}
		} -->
	<!-- /wp:button -->
	<div class="wp-block-button">
		<a class="wp-block-button__link wp-element-button">About us</a>
	</div>
	...
</div>

Ora torniamo all’editor del post e passiamo all’editor del codice. Il codice dovrebbe essere simile al seguente:

<!-- wp:block {
	"ref":261,
	"content":{
		"Hero title":{
			"content":"Managed WordPress Hosting"
		},
		"Hero body":{
			"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
		},
		"Hero button":{
			"text":"Learn more",
			"url":"https://kinsta.com/wordpress-hosting/",
			"linkTarget":"",
			"rel":""
		},
		"Second button":{
			"text":"View pricing",
			"url":"https://kinsta.com/pricing/",
			"linkTarget":"_blank",
			"rel":"noreferrer noopener"
		},
		"Hero image":{
			"id":268,
			"alt":"",
			"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
		}
	}
} /-->

Qui non vedrete alcun blocco, ma solo un riferimento al pattern e una serie di proprietà per ogni blocco impostato come modificabile.

Anche in questo caso, è possibile aggiungere un numero qualsiasi di pattern in qualsiasi punto del sito e questi pattern corrisponderanno alla stessa struttura e allo stesso design progettato nell’Editor del sito.

In seguito, sarà possibile cambiare il contenuto dei blocchi modificabili singolarmente, mantenendo la stessa struttura.

Dato che gli override dei pattern sono un’implementazione della Block Bindings API, possiamo sovrascrivere solo i blocchi supportati: Titolo, Paragrafo, Immagine e Pulsante.

Per saperne di più sugli override, suggeriamo questo video di WordPress TV e questo articolo del blog di Nick Diego.

In futuro, gli override dei pattern saranno soggetti a miglioramenti e aggiunte. La discussione continua su GitHub qui e qui.

Modifica dei valori dei custom field dai blocchi collegati

WordPress 6.5 ha introdotto i custom field come fonte di dati (core/post-meta) per gli attributi dei blocchi, consentendo agli utenti di collegare i valori dei meta dati ai blocchi. WordPress 6.6 porta dei miglioramenti a questa funzione, come la possibilità di modificare i valori dei custom field direttamente dal blocco collegato.

È possibile provare registrando un nuovo set di custom field da un plugin o dal file functions del tema, assicurandosi di impostare show_in_rest su true quando si registra il campo meta del post. Ecco un esempio:

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

Una volta fatto, create un nuovo post o una nuova pagina e aggiungete un nuovo custom field con lo stesso nome. Aggiungete uno dei blocchi supportati (ad esempio un blocco Intestazione) al canvas, passate all’editor del codice e modificate il blocco come mostrato di seguito:

<!-- wp:heading 
{
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"book_title"
				}
			}
		}
	}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

Salvate il post/pagina e controllate il risultato. Ora è possibile modificare il contenuto dell’header direttamente dal blocco. Il valore del custom field dovrebbe riflettere le modifiche.

Inoltre, un nuovo pannello fornisce informazioni sugli attributi del blocco collegati ai custom field.

Ci sono anche alcune funzionalità correlate:

• È possibile aggiornare i valori dei custom field da un query loop.
• Se più blocchi sono collegati allo stesso custom field, essi condividono lo stesso valore del custom field e cambiano in sincro.
• Gli utenti possono modificare i custom field solo nei post a cui sono autorizzati.

Nota finale: come già detto, i blocchi che supportano la Block Bindings API sono ancora limitati ai seguenti:

Blocco	Attributi
Immagine	url, alt, title
Header	content
Paragrafo	content
Pulsante	url,text, linkTarget, rel

Miglioramenti alle Data Views

Introdotta con WordPress 6.5, le Data Views sono un’interfaccia per raccolte di template, pattern, post, media e altro. La nuova interfaccia svolge un ruolo fondamentale nella fase 3 della roadmap di sviluppo (Collaborazione) e per questo motivo possiamo aspettarci ulteriori miglioramenti con le prossime versioni di WordPress, “tra cui miglioramenti del flusso di lavoro per assegnare alle persone la revisione dei post o creare visualizzazioni personalizzate per snellire i processi”. Con WordPress 6.6, la nuova interfaccia è presente solo nell’editor del sito, ma con le prossime versioni dovrebbe essere estesa ad altre sezioni della bacheca.

WordPress 6.6 introduce nuovi layout per le pagine di gestione. La gestione dei template è stata rimossa e integrata nella sezione pattern, mentre il menu dei pattern dell’editor del sito è stato riorganizzato in due sezioni, con i template in alto e i pattern in basso.

Per le pagine, un nuovo pannello fornisce un elenco di pagine e permette di visualizzare l’anteprima di qualsiasi pagina con un solo clic.

Ci saranno anche nuove opzioni di layout disponibili nel menu Opzioni di visualizzazione (l’icona in alto a destra).

Oltre a queste modifiche più generali, le Data Views sono interessate da altre modifiche minori che ne migliorano l’interfaccia e la rendono più funzionale e informativa, come ad esempio una nuova funzione di modifica in blocco e un badge per la pagina principale o nella pagina dei post.

WordPress 6.6 fa un ulteriore passo avanti con le Data Views, ma siamo ancora in una fase iniziale. In futuro vedremo l’introduzione di un’API di estensibilità che consentirà agli sviluppatori di agire direttamente sulle visualizzazioni. Per un’analisi più approfondita sul futuro delle Data Views, si legga Data Views Update – June 2024 di Anne McCarthy.

Altri miglioramenti all’editor dei blocchi

WordPress 6.6 porta 8 versioni di Gutenberg nel core – dalla 17.8 alla 18.5 – con molti miglioramenti all’interfaccia, alla libreria React, alla Block API e altro ancora. Eccone alcuni:

Un nuovo flusso di pubblicazione

Con la versione 6.6, la barra laterale delle impostazioni dei post/pagine è stata ripulita e resa più leggera e coerente. Con questa iterazione, il processo di unificazione tra l’editor del post e quello del sito fa un passo avanti: entrambi gli editor hanno ora lo stesso flusso di pubblicazione.

L’esperienza di pubblicazione è stata standardizzata e il nuovo pannello Stato e visibilità permette di impostare lo stato del post/pagina da una posizione più comoda.

Altre modifiche riguardano i controlli dell’immagine in primo piano e del riassunto, che sono stati spostati nella parte superiore della barra laterale, e il menu Azioni nell’angolo in alto a destra, che è stato migliorato.

Visualizzare tutti i blocchi

Nelle versioni precedenti di WordPress, quando si selezionava un blocco, il pannello di inserimento dei blocchi mostrava solo i blocchi che si potevano aggiungere al blocco selezionato. Ad esempio, selezionando una colonna, nel block inserter si poteva vedere solo il blocco Colonna perché si poteva aggiungere solo una colonna.

A partire da WordPress 6.6, il pannello di inserimento dei blocchi mostra due gruppi di blocchi: i blocchi che è possibile aggiungere al blocco selezionato e i blocchi che è possibile aggiungere al di sotto del blocco selezionato.

Una scorciatoia da tastiera per raggruppare i blocchi

Ora è possibile raggruppare una selezione di blocchi con ⌘ + G su MacOS o Ctrl + G su Windows.

Block pattern nei temi classici

A partire da WordPress 6.6, i temi classici supportano la stessa interfaccia dei temi a blocchi. Quindi, se sul proprio sito WordPress si utilizzano un tema classico, ora si avrà la stessa ricca esperienza di gestione dei pattern dei temi a blocchi.

Le immagini che seguono mettono a confronto la schermata dei pattern in WordPress 6.5 e la sezione di amministrazione dei pattern in WordPress 6.6.

Ora è possibile modificare, duplicare, rinominare, esportare come JSON e cancellare i pattern allo styesso modo in cui si fa con i temi a blocchi.

È possibile eseguire azioni in blocco selezionando i pattern singolarmente o cliccando sul pulsante Modifica in blocco. Sono disponibili anche funzioni di ordinamento e filtro.

È possibile anche creare dei pattern come nei temi a blocchi. Basta fare clic sul pulsante Aggiungi un nuovo pattern nell’angolo in alto a destra e verrà chiesto di compilare il modulo con i dettagli del pattern.

A questo punto, è possibile creare o modificare il pattern nell’editor del sito come di consueto.

Questo aggiornamento dà agli utenti dei temi classici maggiori capacità di gestione, offre nuove funzionalità e rende l’esperienza di editing più coerente tra i temi classici e quelli a blocchi.

Nuovi strumenti e funzionalità per designer e sviluppatori di temi

WordPress 6.6 offre tantissime funzionalità e miglioramenti per designer e sviluppatori di temi e qui vogliamo condividere quelle che ci sono piaciute di più. I designer hanno un maggior controllo sullo stile delle pagine, grazie agli stili di sezione, alle immagini di sfondo per tutto il sito, a un nuovissimo editor di ombre e a una variante del layout a griglia. E altri strumenti offrono una maggiore flessibilità per gli autori di temi. Cominciamo.

Theme.json v.3

WordPress 6.6 porta anche una nuova versione del theme.json, che ora è alla versione 3. La nuova versione cambia il modo di sovrascrivere le proprietà predefinite. Ora, per modificare i valori predefiniti di fontSizes o spacingSizes, è necessario impostare defaultFontSizes o defaultSpacingSizes su false sotto settings.typography o settings.spacing.

Riassumendo:

• Con defaultFontSizes o defaultSpacingSizes impostati su true, le dimensioni predefinite dei caratteri e della spaziatura vengono mostrate nell’editor e i temi non possono creare preset utilizzando gli slug predefiniti. defaultFontSizes è impostato su true di default.
• Con defaultFontSizes o defaultSpacingSizes impostati su false, le dimensioni predefinite dei caratteri e della spaziatura non sono visibili nell’editor e i temi possono utilizzare gli slug predefiniti.

Per una panoramica più approfondita del theme.json versione 3, si legga la nota di sviluppo.

Specificità dei CSS in WordPress 6.6

Con WordPress 6.6, la specificità dei CSS è cambiata e ora è più facile sovrascrivere gli stili principali mantenendo il supporto degli stili globali.

Fino alla versione 6.6, era spesso difficile sovrascrivere gli stili del core e gli sviluppatori di temi dovevano elaborare regole CSS complesse per ottenere i risultati desiderati. Con la versione 6.6, i Core Block Styles e i Global Styles (theme.json) sono stati modificati e il selettore esistente viene racchiuso all’interno di :root :where(...). Questo riduce la specificità degli stili core a 0-1-0 e permette di supportare anche i nuovi stili di sezione.

Ad esempio, .wp-block-image.is-style-rounded img è stato modificato in :root :where(.wp-block-image.is-style-rounded img).

Gli sviluppatori di blocchi che optano per gli stili globali sono incoraggiati ad apportare le stesse modifiche ai loro stili per renderli personalizzabili attraverso l’interfaccia degli Stili in modo prevedibile. Quindi, se avete un blocco personalizzato con il seguente stile:

.wp-block-custom-block {
	padding: 0;
}

Dovreste racchiuderlo in :root :where():

:root :where(.wp-block-custom-block) {
	padding: 0;
}

Questo permetterebbe agli utenti di sovrascrivere il padding dei blocchi attraverso l’interfaccia degli Stili Globali.

Gli sviluppatori di temi sono incoraggiati a fare lo stesso in modo che gli stili dei blocchi possano essere configurati attraverso l’interfaccia Global Styles.

Per una panoramica più approfondita sulla specificità dei CSS in WordPress 6.6, si legga anche la nota di sviluppo.

Stili di sezione

WordPress 6.6 permette di creare lo stile di singole sezioni di un post/pagina senza dover riapplicare gli stessi stili a diversi blocchi uno per uno. Ciò significa che è possibile selezionare più blocchi e child block e assegnare una variante di stile all’intera selezione.

Questo è possibile grazie all’estensione delle varianti di stile dei blocchi, che ora supportano lo stile dei blocchi e degli elementi interni e sfruttano la ridotta specificità degli stili globali.

Le varianti di stile dei blocchi possono essere definite e manipolate attraverso i Global Styles solo se sono state registrate secondo uno dei seguenti metodi:

• Utilizzando i partial del theme.json all’interno della cartella /styles del tema
• Utilizzando la funzione register_block_style
• Definendo le varianti di stile dei blocchi sotto styles.blocks.variations nel theme.json

Ma vediamo più nel dettaglio.

Definire le varianti di stile dei blocchi utilizzando i partial del theme.json

Come le varianti di stile dei temi, anche le varianti di stile dei blocchi possono avere un proprio partial del theme.json nella cartella /styles del tema.

La differenza tra i due tipi di varianti è che le varianti di stile dei blocchi hanno una nuova proprietà di primo livello blockTypes, che è un array non vuoto di tipi di blocco che supportano la variante di stile dei blocchi. Inoltre, è stata aggiunta una nuova proprietà slug “per garantire coerenza tra le diverse fonti che possono definire le varianti di stile dei blocchi e per disabbinare lo slug dalla proprietà traducibile title “.

La nota di sviluppo fornisce il seguente esempio di theme.json parziale:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

Definizione programmatica delle varianti dello stile del blocco tramite register_block_style

Un altro modo per registrare le varianti di stile dei blocchi è offerto dalla funzione register_block_style. Possiamo utilizzarla nel functions.php del tema in questo modo:

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'			=> 'light',
		'label'			=> __( 'Light' ),
		'style_data'	=> array(
			'color'		=> array(
				'background'	=> '#973C20',
				'text'			=> '#d2e3c8',
			),
			'blocks'   => array(
				'core/group'	=> array(
					'color'		=> array(
						'background'	=> '#739072',
						'text'			=> '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

Quando si seleziona un blocco Gruppo o Colonne, il pannello degli Stili della barra laterale dei blocchi mostra un pulsante per lo stile di sezione registrato.

Per approfondimenti e altri esempi di varianti degli stili di sezione, si legga Styling sections, nested elements, and more with Block Style Variations in WordPress 6.6 di Justin Tadlock, la nota di Aaron Robertshaw e Block Styles: Extend block style variations.

Definire le varianti di stile dei blocchi utilizzando le varianti di stile dei temi

Anche se al momento è possibile utilizzare la proprietà styles.variations del theme.json, questo metodo è disponibile solo temporaneamente e dovrebbe essere presto deprecato. Per una descrizione più approfondita, si legga questa sezione della nota di sviluppo.

Preset di colori e tipografia

Ora è possibile modificare la palette dei colori e le famiglie di caratteri del tema dall’interfaccia degli Stili Globali selezionando uno dei preset disponibili.

Se il tema attivo supporta i preset di colore e tipografia, questi appaiono nelle impostazioni Colori e Tipografia degli stili globali.

Le immagini che seguono mostrano due palette di colori del tema Twenty Twenty-Four.

Per aggiungere questa funzionalità ai temi, bisognerà creare delle varianti di stile che includano solo i colori e la tipografia. Gli stili così definiti verranno estratti e utilizzati per generare i preset.

Per questa funzione, si dia anche un’occhiata agli articoli Core Editor Improvement: Upgrade your designs e Create individual typography and color variations to level up design options.

Immagini di sfondo per tutto il sito

A partire da WordPress 6.6, è possibile definire le immagini di sfondo dell’intero sito nel file theme.json e nell’Editor del sito.

L’immagine a livello di sito è data dal valore della proprietà background-image impostata sull’elemento body e appare su tutte le pagine del sito.

Per definire un’immagine di sfondo a livello di sito nel theme.json, è possibile utilizzare la proprietà backgroundImage.url sotto styles.background:

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "https://example.com/bg.png"
			}
		}
	}
}

In questo esempio, abbiamo impostato un percorso assoluto per l’immagine, ma è possibile anche definire le immagini di sfondo utilizzando percorsi relativi alla root del tema in questo modo.

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./assets/bg.png"
			}
		}
	}
}

Quindi, è possibile utilizzare le seguenti proprietà delle immagini:

• backgroundPosition
• backgroundSize
• backgroundRepeat

I non sviluppatori di temi possono utilizzare immagini di sfondo per tutto il sito attraverso il pannello degli Stili dell’editor del sito. In WordPress 6.6, i controlli sono in Stili > Layout.

Questa è la prima iterazione delle immagini di sfondo. Per un’analisi più approfondita, delle limitazioni e delle novità, si legga la nota di sviluppo Site-wide background images in WordPress 6.6.

Variazione del layout della griglia

Una nuova variante di layout del blocco Gruppo permette di visualizzare gli elementi di un gruppo come griglia.

È possibile provarla aggiungendo un blocco Gruppo all’area di lavoro dell’editor e scegliendo il layout Griglia nel pannello delle impostazioni del blocco.

Il layout a griglia può essere di due tipi:

• Auto: genera automaticamente le righe e le colonne della griglia.
• Manuale: permette di impostare il numero di colonne che si desidera aggiungere alla griglia.

Si aggiungono contenuti agli elementi della griglia e si ridimensionano utilizzando le maniglie. È possibile anche regolare la larghezza minima delle colonne o il numero di colonne a seconda del tipo di griglia selezionato.

Margini negativi

Ora è possibile impostare margini negativi per tutti i blocchi che supportano i controlli dei margini. Prima di WordPress 6.6, questa funzione era disponibile solo nel file theme.json. Ora è più facile applicare margini negativi agli elementi per creare effetti di sovrapposizione.

A partire da WordPress 6.6, basterà aggiungere manualmente il valore negativo, come mostrato nella seguente immagine.

Ombreggiature personalizzate

Con WordPress 6.6, è possibile creare e modificare ombreggiature personalizzate all’interno dell’interfaccia degli stili globali. Per creare le ombreggiature personalizzate, basta andare nell’Editor del sito e selezionare Ombre dal menu degli Stili globali. Qui si troverà il pannello Personalizza. Facendo clic sul pulsante +, un nuovo elemento dà accesso a una serie di controlli per personalizzare l’ombreggiatura o rinominarla/eliminarla.

Preimpostazioni personalizzate delle proporzioni

Ora gli sviluppatori di temi possono definire preset di rapporto d’aspetto personalizzati impostando l’opzione settings.dimensions.aspectRatios nel file theme.json.

Altre modifiche per sviluppatori

Le modifiche per gli sviluppatori non si limitano ai temi. Altre aggiunte e miglioramenti riguardano la libreria React e diverse API.

Options API: Disabilitazione dell’autoload per le opzioni di grandi dimensioni

Prima di WordPress 6.6, un gran numero di opzioni veniva caricato automaticamente a ogni caricamento di pagina. Per evitare il comportamento predefinito, gli sviluppatori dovevano passare "yes"/true o "no"/false al terzo parametro delle funzioni add_option() o update_option(). Tuttavia, dato che questo parametro era facoltativo, con un valore predefinito di "yes", venivano caricate grandi quantità di dati non necessari per ogni pagina, con un impatto negativo sulle prestazioni del sito.

Per evitare questo comportamento, WordPress 6.6 introduce alcune modifiche alla Options API:

Per consentire a WordPress di stabilire se un’opzione deve essere caricata nella pagina corrente, il valore predefinito del parametro $autoload di add_option() e update_option() è stato modificato da "yes" a null. Il parametro ora accetta uno dei seguenti valori:

• true: carica l’opzione in ogni pagina per evitare un’ulteriore interrogazione del DB.
• false: non carica mai l’opzione per evitare di caricare i dati su ogni pagina.
• null: forse autoload, cioè il valore di autoload deve essere determinato dinamicamente. Di default, le opzioni si caricano automaticamente a meno che non contengano valori elevati.

I valori del database sono stati modificati di conseguenza e ora il valore di caricamento automatico per ogni opzione sarà uno dei seguenti:

• on: deve essere caricato automaticamente in ogni pagina. Viene aggiunto con un valore esplicito true.
• off: non deve essere caricato automaticamente e deve essere utilizzato solo in una singola pagina di amministrazione. Viene aggiunto con un valore esplicito false.
• auto: si affida al comportamento di autoloading predefinito di WP. In WP 6.6, dovrebbe essere caricato automaticamente, ma il comportamento potrebbe cambiare in futuro.
• auto-on: dovrebbe essere caricato automaticamente. È impostato dinamicamente su true.
• auto-off: non dovrebbe essere caricato automaticamente. È impostato dinamicamente su false.

Oltre a queste novità, WordPress 6.6 introduce diverse funzioni e nuovi filtri:

• La funzione wp_autoload_values_to_autoload() restituisce tutti i valori del database che dovrebbero essere caricati automaticamente.
• Il filtro wp_autoload_values_to_autoload permette di modificare l’elenco delle opzioni che devono essere caricate automaticamente.
• Il filtro wp_default_autoload_value imposta il valore di un’opzione che non è stata impostata esplicitamente.
• Il filtro wp_max_autoloaded_option_size modifica la soglia predefinita oltre la quale le opzioni non vengono caricate automaticamente. Il valore predefinito è 150000. (150kb)

Questa modifica è particolarmente utile per siti web complessi con molti plugin e merita attenzione da parte degli sviluppatori di plugin. Per una panoramica più approfondita, consigliamo di controllare le preimpostazioni delle proporzioni personalizzate.

Miglioramenti alla libreria React

Due importanti novità riguardano la libreria React. In primo luogo, WordPress 6.6 include React 18.3, che aggiunge avvisi per le deprecazioni e altre modifiche per aiutare gli sviluppatori a prepararsi per React 19 quando sarà stabile.

In secondo luogo, gli sviluppatori possono utilizzare la nuova trasformazione React JSX, introdotta per la prima volta con React 17.

Per approfondimenti su queste novità, si legga l’articolo Preparazione all’aggiornamento di React 19 e la nota di sviluppo JSX in WordPress 6.6.

Miglioramenti alla Block API

WordPress 6.6 apporta anche diverse modifiche tecniche alla Block API, tra cui:

• API di estensibilità unificate
• Miglioramenti al rilevamento delle varianti dei blocchi attivi
• Modifiche al blocco Social Links in WordPress 6.6

Riepilogo

In questo lungo articolo abbiamo esplorato molte novità in arrivo con WordPress 6.6, dagli override dei pattern ai miglioramenti alle Data Views, dalle nuove funzioni per sviluppatori di temi all’unificazione delle esperienze di editing negli editor del sito e dei post. Ma c’è molto altro che non abbiamo trattato in questo articolo, come ad esempio i rollback per gli aggiornamenti automatici.

Chi desidera approfondire, non può perdere la serie di eccellenti risorse dei contributor del core di WordPress a cui abbiamo fatto riferimento durante le nostre prove di WordPress 6.6. Tra le tante risorse, segnaliamo WordPress 6.6 Source of Truth di Anne McCarthy, i seminari Learn WordPress Online su Meetup, il blog degli sviluppatori di WordPress, le note di sviluppo pubblicate sul blog Make WordPress Core e gli aggiornamenti regolari di Birgit Pauli-Haack su Gutenberg Times, solo per citarne alcuni.

Ora tocca a voi. Avete già provato le funzionalità di WordPress 6.6? Quale novità vi è piaciuta di più? Lasciate un commento qui sotto per unirvi alla conversazione.