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.
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.
L’immagine seguente mette a confronto la pagina iniziale con una pagina di archivio.
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.
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"
}
]
},
}
}
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.
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.
]
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 sistema –
var(--wp--preset--font-family--system-font) - IBM Plex Mono –
var(--wp--preset--font-family--ibm-plex-mono) - Inter –
var(--wp--preset--font-family--inter) - Source Serif Pro –
var(--wp--preset--font-family--source-serif-pro) - DM Sans –
var(--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.
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.
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).
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.
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.
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.
I file HTML corrispondenti si trovano nelle cartelle templates e parts di Twenty Twenty-Three.
L’immagine sottostante mostra la parte del template Comments in modalità di modifica:
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:
{
"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.
È 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
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 versione scura dello stile predefinito che utilizza la famiglia di caratteri Inter di Rasmus Andersson.
- Canary utilizza un’unica dimensione di carattere e una larghezza di colonna ridotta. Utilizza inoltre un interessante effetto border-radius.
- 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
- Grapes è stato scelto per la sua gradevole combinazione di colori e carattere.
- Aubergine è un accattivante sfondo a due colori più scuro.
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.
Una volta che siete soddisfatti delle vostre modifiche, cercate la voce Create Block Theme sotto Aspetto nel menu di amministrazione di WordPress.
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.
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
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.
Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.
Lascia un commento