Twenty Twenty-Three è il nuovo tema predefinito di WordPress che verrà rilasciato con WordPress 6.1.

È un tema minimalista, privo di immagini e di funzionalità aggiuntive. Dà il meglio di sé come tema starter per creare template e variazioni di stile e per testare tutte le funzionalità introdotte con le ultime versioni di WordPress. Il tema può essere visto come un vero e proprio ambiente di sviluppo e di test, anche se lo stile minimalista, la reattività e la leggerezza lo rendono un’ottima opzione per creare blog e siti web adatti a un’ampia varietà di scopi.

Nella sua introduzione al tema Twenty Twenty-Two, Kjell Reigstad ha scritto del futuro dei temi predefiniti:

Innovazioni come theme.json, block template e block pattern stanno rendendo lo sviluppo dei temi molto più semplice e stanno fornendo agli utenti nuovi modi per personalizzare i loro siti. C’è motivo di credere che la comunità possa sfruttare tutto questo per creare soluzioni di personalizzazione e temi più frequenti e diversificati per i nostri utenti nei prossimi anni.

Channing Ritter ha avanzato la seguente proposta:

E se invece di enfatizzare il tema in sé, mettessimo in risalto una serie di variazioni di stile progettate dai membri della comunità? Potremmo usare Twenty Twenty-Two come base per un nuovo tema, ridotto e minimale, una tela bianca che permetta a una vasta gamma di variazioni di stile di brillare.

Ed è quello che sta accadendo con il nuovo tema predefinito di Twenty Twenty-Three. La comunità è stata chiamata a partecipare attivamente alla progettazione del tema predefinito di WordPress e questo ci piace perché rende il nuovo tema il risultato di un lavoro realmente partecipativo.

Anteprima di Twenty Twenty-Three
Anteprima di Twenty Twenty-Three
Leggero, flessibile e con una serie di straordinarie variazioni di stile da parte della community 👩‍🎨 Ecco a voi Twenty Twenty-Three, il nuovo tema predefinito di WordPress che sbarca con WordPress 6.1 🛬 Clicca per twittare

Ma prima di scoprire le variazioni di stile del nuovo tema predefinito di WordPress, vediamo quali sono le caratteristiche di base di Twenty Twenty-Three e a cosa può servire.

Layout e Stili di Pagina

Come già detto, Twenty Twenty-Three è una versione ridotta di Twenty Twenty-Two. Ciò che colpisce del nuovo tema predefinito sono la sua semplicità e leggerezza. Twenty Twenty-Three è flessibile e perfettamente adatto alle più recenti funzioni di modifica del sito offerte da Gutenberg, come la modifica dei template, le variazioni degli Stili Globali, la Tipografia Fluida e i block pattern.

Quindi, non sorprenderà che negli screenshot mostrati in questo articolo si vedranno delle pagine minimali, prive di qualsiasi orpello grafico, ma perfettamente adatte alla personalizzazione e ai test.

Per dare un esempio, l’immagine qui sotto mostra le pagine dei post singoli con e senza immagini in evidenza.

Anteprima del post singolo con e senza immagine in evidenza in Twenty Twenty-Three
Anteprima del post singolo con e senza immagine in evidenza in Twenty Twenty-Three

L’immagine seguente mette a confronto la pagina iniziale con una pagina di archivio.

Pagina iniziale confrontata con una pagina di archivio in Twenty Twenty-Three
Pagina iniziale confrontata con una pagina di archivio in Twenty Twenty-Three

Anche se il nuovo tema è una versione semplificata di Twenty Twenty-Two, rispetto al precedente tema predefinito, Twenty Twenty-Three presenta alcune differenze fondamentali.

Innanzitutto, le dimensioni delle intestazioni sono state ridotte e il font serif predefinito è stato sostituito da un font sans serif di sistema.

Dimensioni delle intestazioni in Twenty Twenty-Three
Dimensioni delle intestazioni in Twenty Twenty-Three

Inoltre, è stata applicata una diversa palette di colori. Ecco la nuova definizione della palette di Twenty Twenty-Three nel seguente codice tratto dal theme.json:

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#9DFF20",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#345C00",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#F6F6F6",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		},
	}
}
Colori predefiniti di Twenty Twenty-Three
Colori predefiniti di Twenty Twenty-Three

Ma la caratteristica principale del nuovo tema predefinito è la sua serie di variazioni di stile. Twenty Twenty-Three è dotato di dieci variazioni di stile globali, ognuna delle quali presenta una diversa combinazione di colori, famiglia e dimensioni dei caratteri.

Gli Stili Globali di Twenty Twenty-Three
Gli Stili Globali di Twenty Twenty-Three

I file JSON corrispondenti si trovano nella cartella styles di Twenty Twenty-Three.

Le anteprime complete dei template di pagina, degli stili e delle variazioni di stile di Twenty Twenty-Three sono disponibili su Figma.

Anteprima delle Variazioni di Stile di Twenty Twenty-Three su Figma
Anteprima delle Variazioni di Stile di Twenty Twenty-Three su Figma

Tipografia di Twenty Twenty-Three

In un tema minimale come Twenty-Three, la tipografia gioca un ruolo fondamentale nel rendere il testo leggibile, il sito accattivante e, in definitiva, nel fornire ai visitatori un’esperienza di navigazione gratificante, indipendentemente dal dispositivo e dalle dimensioni dello schermo.

A questo scopo, Twenty Twenty-Three è dotato di una nuova serie di famiglie di caratteri e utilizza la Fluid Typography introdotta da WordPress 6.1.

Caratteri Tipografici

Twenty Twenty-Three presenta una nuova serie di caratteri tipografici utilizzati nelle variazioni di stile e caratterizzati da semplicità e varietà:

  • Font di sistemavar(--wp--preset--font-family--system-font)
  • IBM Plex Monovar(--wp--preset--font-family--ibm-plex-mono)
  • Intervar(--wp--preset--font-family--inter)
  • Source Serif Provar(--wp--preset--font-family--source-serif-pro)
  • DM Sansvar(--wp--preset--font-family--dm-sans)

IBM Plex Mono fa parte del set di font IBM Plex, il nuovo carattere IBM aziendale rilasciato sotto SIL Open Font License (OFL). È possibile vederne un’anteprima sui siti web di Adobe Fonts e IBM.

IBM Plex Mono gallery
IBM Plex Mono Gallery su ibm.com

Inter è una famiglia di font gratuita e open source creata e progettata per gli schermi dei computer da Rasmus Andersson. Se ne può vedere l’anteprima e scaricare la famiglia di font sul sito web di Rasmus Andersson o su Google Fonts.

Anteprima del carattere Inter sul
Anteprima del carattere Inter sul sito web di Rasmus Andersson

Source Serif Pro è un carattere tipografico di Adobe Originals che si può utilizzare gratuitamente con un account Adobe Fonts (per saperne di più sulle licenze dei font Adobe).

Anteprima di Source Serif Pro
Anteprima di Source Serif Pro su fonts.adobe.com

DM Sans è un altro carattere con licenza SIL Open Font License (OFL), commissionato da Google a Colophon Foundry e progettato da Colophon Foundry, Jonny Pinhorn e Indian Type Foundry.

DM Sans in anteprima
DM Sans in anteprima su Google Fonts

Tipografia e Spaziatura Fluide

Twenty Twenty-Three utilizza i preset di Tipografia Fluida e Spaziatura introdotti con WordPress 6.1.

Il nuovo tema predefinito di WordPress offre un ottimo esempio di implementazione della tipografia fluida all’interno dei temi WordPress ed è possibile utilizzarlo come modello per aggiungere il supporto a questa funzione nei propri temi.

Il codice seguente mostra le definizioni delle proprietà settings.typography.fluid e settings.typography.fontSizes[] nel theme.json:

"settings": {
	...
	"typography": {
		"fluid": true,
		"fontSizes": [
			{
				"fluid": {
					"min": "0.875rem",
					"max": "1rem"
				},
				"size": "1rem",
				"slug": "small"
			},
			{
				"fluid": {
					"min": "1rem",
					"max": "1.125rem"
				},
				"size": "1.125rem",
				"slug": "medium"
			},
			{
				"size": "1.75rem",
				"slug": "large",
				"fluid": false
			},
			{
				"size": "2.25rem",
				"slug": "x-large",
				"fluid": false
			},
			{
				"size": "10rem",
				"slug": "xx-large",
				"fluid": {
					"min": "4rem",
					"max": "20rem"
				}
			}
		]
	}
}

L’impostazione typography.fluid aggiunge il supporto della tipografia fluida, mentre typography.fontSizes[].fluid imposta il valore minimo e massimo della dimensione dei caratteri.

Oltre alla tipografia fluida, Twenty-Three supporta anche la spaziatura fluida.

Prima di WordPress 6.1, era possibile impostare valori di spaziatura personalizzati solo nell’editor. Ciò significa che prima di WordPress 6.1 gli autori di temi non potevano specificare valori fissi per padding, margin e gap. Questo comportava diverse limitazioni. Ad esempio, non era possibile trasferire facilmente le impostazioni di spaziatura tra diversi temi o mantenere i valori di spaziatura quando si copiavano e incollavano contenuti e modelli di blocco tra diversi siti.

I temi possono dichiarare il supporto della spaziatura fluida utilizzando le nuove impostazioni di spacing.spacingScale e spacing.spacingSizes (per saperne di più, si legga Theme.json: Add spacing size presets). In Twenty Twenty-Three questo avviene con le seguenti impostazioni:

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

Il video qui sotto mostra la Fluid Typography in azione in Twenty Twenty-Three.

I preset di tipografia e spaziatura sono dettagliati in Specifiche di progettazione.

Template e Template Part

Con Twenty Twenty-Three si vedranno in azione tutte le funzionalità e i miglioramenti per l’editing del sito che verranno introdotti con WordPress 6.1.

Questo vale in particolare per i template e le parti di template.

I template di Twenty Twenty-Three
I template di Twenty Twenty-Three

Avviando l’Editor del sito con Twenty Twenty-Three in funzione, si vedrà un elenco di undici template e quattro parti di template.

L’immagine seguente mostra il template 404 nell’editor del sito.

Template di pagina 404 di Twenty Twenty-Three
Template di pagina 404 di Twenty Twenty-Three

I file HTML corrispondenti si trovano nelle cartelle templates e parts di Twenty Twenty-Three.

Parti di Template di Twenty Twenty-Three
Parti di Template di Twenty Twenty-Three

L’immagine sottostante mostra la parte del template Comments in modalità di modifica:

Modifica del template dei Commenti
Modifica del template dei Commenti

I template personalizzati e le parti di template sono definiti nel file theme.json.

Template Personalizzati

Oltre ai template predefiniti, Twenty Twenty-Three offre i seguenti template personalizzati:

  • Blank
  • Blog (Alternative)
  • 404
  • With Featured Image
  • With Cover Block

Questi template sono definiti nel theme.json come segue:

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
{
	"customTemplates": [
		{
			"name": "blank",
			"postTypes": [
				"page",
				"post"
			],
			"title": "Blank"
		},
		{
			"name": "blog-alternative",
			"postTypes": [
				"page"
			],
			"title": "Blog (Alternative)"
		},
		{
			"name": "404",
			"postTypes": [
				"page"
			],
			"title": "404"
		},
		{
			"name": "with-featured-image",
			"postTypes": [
				"page",
				"post"
			],
			"title": "With Featured Image"
		},
		{
			"name": "with-cover-block",
			"postTypes": [
				"page",
				"post"
			],
			"title": "With Cover Block"
		}
	],
}

Parti di Template

Le parti di template sono definite come segue.

{
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "uncategorized",
			"name": "comments",
			"title": "Comments"
		},
		{
			"area": "uncategorized",
			"name": "post-meta",
			"title": "Post Meta"
		}
	]
}

Stili Globali e Variazioni di Stile

Come già accennato, a partire da WordPress 6.0, gli autori di temi possono allegare ai propri temi più set di stili, consentendo agli utenti di passare da una variante all’altra senza dover modificare il tema.

Questa fantastica funzione di WordPress è la caratteristica principale del nuovo tema predefinito: Twenty Twenty-Three offre dieci combinazioni di stili predefinite tra cui scegliere.

Gli Stili Globali di Twenty Twenty-Three
Gli Stili Globali di Twenty Twenty-Three

È possibile sfogliare questi stili nell’interfaccia degli Stili Globali dell’Editor del sito. Qui è possibile

  • Cambiare stile globale dal pannello Sfoglia stili.
  • Personalizzare le impostazioni tipografiche di testi, link, intestazioni e pulsanti
  • Modificare i colori predefiniti o cambia il colore di elementi specifici
  • Personalizzare il layout dell’area del contenuto principale
  • Personalizzare l’aspetto di elementi specifici
Personalizzare testo, colori e layout in Twenty Twenty-Three
Personalizzare testo, colori e layout in Twenty Twenty-Three

Vale la pena sottolineare ancora una volta che nella creazione di così tante variazioni di stile, il coinvolgimento della comunità è stato fondamentale. Dopo l’avvio del progetto Twenty Twenty-Three, sono pervenuti 38 contributi da 19 collaboratori di 8 paesi diversi (è possibile esplorare tutti i progetti su GitHub).

Su 38, sono state selezionate 10 variazioni di stile:

Pitch è una variante scura di Twenty Twenty-Three
Pitch è una variante scura di Twenty Twenty-Three
  • Canary utilizza un’unica dimensione di carattere e una larghezza di colonna ridotta. Utilizza inoltre un interessante effetto border-radius.
Canary utilizza un'unica dimensione di carattere e una larghezza di colonna ridotta
Canary utilizza un’unica dimensione di carattere e una larghezza di colonna ridotta
  • Electric utilizza un colore in grassetto per tutta la tipografia del sito.
  • Pilgrimage è una versione colorata e scura del tema base.
  • Marigold è una variante morbida e piacevole dello stile di base.
  • Block-Out presenta un effetto bicolore sulle immagini.
  • Whisper mette in mostra alcuni elementi personalizzati, come il bordo intorno alla pagina, gli stili dei pulsanti e le sottolineature uniche dei link.
  • Sherbet ha un look unico, luminoso e colorato
Sherbet ha un look colorato unico
Sherbet ha un look colorato unico
  • Grapes è stato scelto per la sua gradevole combinazione di colori e carattere.

La cosa più bella delle variazioni di stile è che non si deve necessariamente essere uno sviluppatore front-end per creare gli stili.

Se ci si sente a proprio agio con il codice, si può scegliere uno dei file .json presenti nella cartella styles di Twenty Twenty-Three e usarlo come modello per creare la propria variazione di stile.

Ma se la codifica non è il nostro forte, possiamo utilizzare il plugin ufficiale Create Block Theme, scaricabile gratuitamente dalla directory dei plugin di WordPress.org.

Per prima cosa, installate e attivate il plugin, quindi accedete all’editor degli stili. Una volta qui, personalizzate i colori, la tipografia e il layout in base alle vostre preferenze e salvate le modifiche.

Personalizzazione degli stili nell'interfaccia degli Stili Globali
Personalizzazione degli stili nell’interfaccia degli Stili Globali

Una volta che siete soddisfatti delle vostre modifiche, cercate la voce Create Block Theme sotto Aspetto nel menu di amministrazione di WordPress.

La voce di menu Create Block Theme
La voce di menu Create Block Theme

Spuntate l’ultima voce dell’elenco: Create a style variation. Vi verrà chiesto di assegnare un nome alla variazione di stile. Inserite il nome e fate clic su Create Theme. Verrà creato un nuovo file .json nella cartella styles del tema.

Crea una variazione di stile
Crea una variazione di stile

Ora potete personalizzare ulteriormente il vostro stile e persino esportarlo in altre installazioni di WordPress.

Il plugin Create Block Theme è uno strumento prezioso per sfruttare appieno le funzioni di creazione di temi e template disponibili nelle ultime versioni di WordPress. Già che ci siete, potreste dare un’occhiata a tutte le altre opzioni:

  • Export Twenty Twenty-Three
  • Create child of Twenty Twenty-Three
  • Clone Twenty Twenty-Three
  • Overwrite Twenty Twenty-Three
  • Create blank theme
  • Create a style variation
Una variante di stile personalizzata nel browser degli stili
Una variante di stile personalizzata nel browser degli stili

Riepilogo

Se a prima vista il nuovo tema predefinito di WordPress può sembrare una sorta di scatola vuota priva di funzioni, a un’analisi più attenta è molto più di questo, perché permette di sfruttare al meglio le più recenti funzioni di modifica del sito di WordPress.

In Twenty Twenty-Three troverete molti template e parti di template da personalizzare, una serie di 10 variazioni di stile da utilizzare come base per creare siti web unici e il supporto di tutte le nuove funzionalità disponibili in WordPress 6.1, a partire dalla Tipografia Fluida e dal sistema di template migliorato.

Con Twenty Twenty-Three, la sensazione è che la differenza tra l’aspetto del sito e la sua funzionalità sia ormai netta. L’unica funzione del tema è quella di regolare l’aspetto del sito, lasciando l’aggiunta di funzionalità ai plugin. E da questo punto di vista, Twenty Twenty-Three fa un ottimo lavoro, offrendo agli utenti di WordPress tutte le più recenti funzioni di modifica del sito di Gutenberg. Personalizzare l’aspetto di un sito web non è mai stato così semplice.

Ora tocca a voi. Avete già utilizzato il nuovo tema in un ambiente di prova? Avete provato a creare variazioni di stile personalizzate? Condividete con noi le vostre considerazioni nei commenti qui sotto.


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 35 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.