Anche se un po’ in ritardo rispetto al previsto, sta per arrivare un nuovo tema predefinito di WordPress. Il nome è Twenty Twenty-Two!
Il nuovo tema predefinito di WordPress viene distribuito con la prossima versione di WordPress 5.9. Eravamo curiosi di saperne di più sul nuovo tema, così abbiamo installato e testato Twenty Twenty-Two su un ambiente di sviluppo locale con WordPress 5.9.
In questo articolo vi parliamo di quello che abbiamo trovato nel nuovo tema, con una panoramica approfondita delle caratteristiche principali del nuovo tema WordPress.
Twenty Twenty-Two è stato progettato per essere il tema predefinito più flessibile, leggero e personalizzabile di sempre. Offre un ottimo terreno di gioco per testare blocchi, pattern e template.
Essendo un tema a blocchi, ci permetterà di esplorare meglio il Full SIte Editing, gli stili globali, i blocchi di navigazione e le nuove gallerie di immagini, che sono le novità più attese in arrivo con WordPress 5.9.
Diciamo subito che che Twenty Twenty-Two è il primo tema a blocchi predefinito!
Uno degli obiettivi più ambiziosi del nuovo tema è quello di dare autonomia agli utenti. Con tanti pattern e template disponibili nativamente, gli utenti possono costruire layout complessi con pochi clic. Il resto è solo personalizzazione dello stile.
Da un punto di vista tecnico, scrivere di Twenty Twenty-Two non è molto diverso dallo scrivere delle ultime e più potenti funzionalità in arrivo con WordPress 5.9. Ma Twenty Twenty-Two ci fornisce un’ottima lente d’ingrandimento per apprezzare meglio le nuove funzionalità di modifica del sito e ci dà un’idea migliore del futuro della piattaforma.
Quindi eccoci qui per presentarvi il nuovo tema.
Per prima cosa, scopriremo il nuovo flusso di editing dei siti che gli utenti sperimenteranno con WordPress 5.9 e Twenty Twenty-Two.
Dopo di che, ci immergeremo nelle principali caratteristiche dei temi a blocchi implementate in Twenty Twenty-Two. Scoprirete gli stili globali, i block pattern, i template e i template part.
Ma c’è molto altro da dire su Twenty Twenty-Two e sui temi a blocchi di WordPress. Quindi, come capitolo bonus, offriremo una breve panoramica dei child theme dei temi a blocchi, mostrando come estendere le funzionalità di Twenty Twenty-Two grazie al file theme.json.
Here’s a first look at the next WordPress default theme! I’m excited to be co-leading it alongside @jffng, and we both hope you'll contribute to it and/or just enjoy using it! 🐦🦆🐤🦉https://t.co/covjrpgFIO
— kjellr (@kjellr) October 6, 2021
Mettiamoci subito al lavoro e scopriamo il nuovissimo tema predefinito di WordPress, Twenty Twenty-Two.
Twenty Twenty-Two Porta un Nuovo Flusso di Modifica del Sito
Diverse funzioni di Full Site Editing entrano a far parte del core di WordPress 5.9. I proprietari di siti che utilizzano l’ultima versione di WordPress con un tema a blocchi come Twenty Twenty-Two saranno presto in grado di:
- Creare e modificare post e pagine usando più blocchi e pattern
- Personalizzare le impostazioni e gli stili definiti nel file theme.json attraverso l’interfaccia degli Stili Globali
- Creare e modificare i template per post e pagine
- Creare e modificare parti di template per l’intestazione, il footer e altre template area
Con tutte queste caratteristiche unite al core, i contributor al core di WordPress hanno discusso dell’evoluzione dell’architettura dell’informazione e hanno ridisegnato l’intero Site Editing Flow.
La prima cosa che potreste notare una volta attivato Twenty Twenty-Two è che il punto di ingresso all’editor del sito non si trova più nel menu principale della bacheca di WordPress, ma è stato spostato sotto il menu Aspetto.
Portare le funzioni di modifica dei template e degli stili sotto lo stesso menu Aspetto dovrebbe semplificare l’esperienza di editing in quanto dovrebbe rendere più facile capire che le funzioni a cui si accede si riferiscono alla presentazione delle pagine.
La voce di menu Editor apre il template della homepage del sito. A seconda delle impostazioni di lettura, questa può essere la pagina degli ultimi post o una pagina statica.
Ora, facendo clic sull’icona di WordPress nell’angolo in alto a sinistra, viene visualizzato un nuovo menu di navigazione dell’editor del sito, che include tre voci di menu: Sito, Templates e Template parts.
Diamo un’occhiata più da vicino.
L’opzione Sito apre il template della homepage (ultimi articoli del blog o home page statica).
Dalla voce di menu Templates si accede ad un elenco dei template disponibili. Potete cliccare su qualsiasi template dell’elenco per lanciarlo nell’editor.
Al momento in cui scriviamo, Twenty Twenty-Two fornisce 11 template.
Cliccando sull’icona ellipsis (︙) sulla destra, potrete cancellare le vostre personalizzazioni.
A differenza dei template del tema, i template personalizzati possono essere solo rinominati o rimossi (ma potete modificare i template personalizzati nell’editor dei post).
La voce di menu Template parts mostra un elenco delle parti di template disponibili che è possibile aprire nell’editor per le personalizzazioni desiderate.
Troverete quattro parti di template aggiunte a Twenty Twenty-Two di default. Passando il cursore su un template già modificato, viene visualizzato un tooltip che fa sapere che il template è già stato personalizzato.
È possibile cancellare queste personalizzazioni cliccando sull’icona ellipsis (︙) sulla destra.
Modificare Template e Parti di Template
L’Editor fornisce l’interfaccia per personalizzare la struttura dei template e delle parti di template.
Qui è possibile aggiungere o modificare facilmente blocchi e template, e le modifiche saranno automaticamente applicate ad ogni pagina che utilizza quel template.
L’immagine qui sotto mostra il template della pagina 404 nell’editor. È un template piuttosto semplice, che include solo un’intestazione, un paragrafo e una casella di ricerca. Tuttavia, ci permette di capire come funziona la UI.
Qui è possibile fare delle modifiche e personalizzare i template per adattarli al meglio alle proprie esigenze. Ad esempio, si potrebbe voler aggiungere un pattern Grid of image posts per aumentare il coinvolgimento dei visitatori e invitarli a sfogliare il contenuto del sito.
Il menu a tendina dell’intestazione nella parte superiore dell’editor dei template mostra un elenco delle Aree di Template disponibili. Lo stesso elenco appare nella scheda Template nella barra laterale delle impostazioni.
Cliccando su qualsiasi area di template (ad esempio Header), sarete portati direttamente alla parte del template che volete modificare.
Facendo clic sull’icona a forma di ellisse sulla destra, si accederà all’editor di parti di template isolate.
L’editor delle parti di template fornisce anche una coppia di maniglie trascinabili che permettono di controllare il comportamento del template a diverse risoluzioni dello schermo.
Una volta che siete soddisfatti delle vostre modifiche, salvate il lavoro e tornate all’editor principale dei template per controllare il risultato finale.
Se volete approfondire la nuova architettura delle informazioni, potreste dare un’occhiata ai seguenti articoli:
Al Core di Twenty Twenty-Two: Una Rapida Panoramica del theme.json
Per capire bene come funzionano Twenty Twenty-Two e i temi a blocchi (come Bricksy), diamo un’occhiata alla nuova configurazione del tema e al meccanismo degli stili basato sul file theme.json.
Introdotto con WordPress 5.8, questo nuovo meccanismo permette agli sviluppatori di temi di configurare l’editor e aggiungere il supporto di funzioni specifiche da un punto di configurazione centrale.
In Twenty Twenty-Two, il file theme.json ha la seguente struttura:
{
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}Diamo una rapida occhiata ad ogni sezione.
Versione
Il campo version descrive la versione del tema, che attualmente è 2.
Impostazioni
La sezione settings definisce le impostazioni a livello globale o di blocco. Le impostazioni definite a livello superiore influenzano tutti i blocchi, ma i blocchi possono sovrascrivere individualmente le impostazioni globali. In Twenty Twenty-Two troverete le seguenti impostazioni:
{
"settings": {
"appearanceTools": true,
"color": {
"duotone": [...],
"gradients": [...],
"palette": [...]
},
"custom": {...},
"spacing": {...},
"typography": {
"dropCap": false,
"fontFamilies": [...],
"fontSizes": [...]
},
"layout": {...}
}
}Le impostazioni predefinite sono chiamate preset e sono utilizzate per generare proprietà CSS personalizzate e nomi di classi basati su una specifica convenzione di denominazione:
- Proprietà CSS personalizzata
--wp--preset--{preset-category}--{preset-slug} - Nome della classe CSS
.has-{preset-slug}-{preset-category}
Una volta che un tema ha definito i suoi preset, le corrispondenti proprietà CSS personalizzate possono essere utilizzate per dare stile a blocchi ed elementi nella sezione styles.
Stili
La sezione styles è la sezione in cui i temi definiscono gli stili predefiniti dei blocchi e degli elementi. Vedi, ad esempio, i seguenti stili di Twenty Twenty-Two per il blocco core Button:
{
"version": 2,
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--typography--font-size--normal)"
}
}
}
}
}Noterete le proprietà CSS personalizzate utilizzate nelle dichiarazioni delle proprietà.
Template Personalizzati
La sezione customTemplates è il posto dove un tema dichiara i suoi template personalizzati. I campi name e title sono obbligatori. I temi possono anche dichiarare quale tipo di post può utilizzare il template dichiarando la proprietà postTypes.
Twenty Twenty-Two fornisce quattro template personalizzati:
{
"version": 2,
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "page-large-header",
"title": "Page (Large Header)",
"postTypes": [
"page"
]
},
{
"name": "single-no-separators",
"title": "Single Post (No Separators)",
"postTypes": [
"post"
]
},
{
"name": "page-no-separators",
"title": "Page (No Separators)",
"postTypes": [
"page"
]
}
]
}Troverete i file .html corrispondenti nella cartella block-templates.
Parti di Template
La sezione templateParts contiene le definizioni delle parti di template:
{
"version": 2,
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "header-large-dark",
"title": "Header (Dark, large)",
"area": "header"
},
{
"name": "header-small-dark",
"title": "Header (Dark, small)",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}I campi name e title sono obbligatori. I temi possono anche dichiarare un termine area, in cui la parte di template sarà resa nell’editor.
I file .html delle parti di template si trovano nella cartella template-parts.
Ora che sappiamo di più sul theme.json di Twenty Twenty-Two, possiamo esplorare più a fondo le caratteristiche del tema e la nuova interfaccia di editing.
Immergiamoci nei Global Styles di Twenty Twenty-Two.
Stili Globali in Twenty Twenty-Two
Se guardate lo style.css di Twenty Twenty-Two, potreste rimanere sorpresi nel notare che contiene un numero minimo di dichiarazioni CSS. La ragione è che nei temi a blocchi gli stili sono dichiarati nel file theme.json.
WordPress 5.9 porterà le cose un passo avanti, introducendo una nuova funzionalità che permette agli utenti dei temi a blocchi di personalizzare l’aspetto degli elementi del sito da un’interfaccia utente chiamata Global Styles.
L’interfaccia degli Stili Globali è accessibile tramite la nuova icona Stili posta nell’angolo in alto a destra dell’editor (vedi anche The Global Styles Interface).
Cliccando su quell’icona viene visualizzata una nuova barra laterale Styles che contiene tre pannelli separati:
- Un pannello Anteprima, che mostra un’anteprima delle personalizzazioni
- Un pannello Stili Globali, che fornisce l’accesso a gruppi specifici di controlli per Tipografia, Colori e Layout
- Una voce Blocchi, che fornisce l’accesso alle impostazioni di stile a livello di blocco
La Palette dei Colori di Twenty Twenty-Two
Dal pannello Colors è possibile modificare le palette disponibili e assegnare o cambiare i colori dello sfondo, del testo o dei link.
Nel pannello Palette, potete personalizzare la palette del tema o la palette predefinita, e anche creare una vostra palette personalizzata.
Avete già trovato il codice che genera i controlli del colore?
Se non l’avete ancora fatto, aprite il theme.json di Twenty Twenty-Two nel vostro editor di codice preferito. Troverete le seguenti dichiarazioni della palette dei colori:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}
]
}
}
}L’immagine qui sotto mostra come il codice qui sopra corrisponda alla palette dei colori di Twenty Twenty-Two.
Ora supponiamo che vogliate cambiare il colore di sfondo predefinito di un particolare blocco. Scegliendo un colore diverso per lo sfondo del blocco assegnerete semplicemente una variabile CSS diversa alla proprietà background-color dell’elemento. L’immagine qui sotto ne fornisce un esempio:
E questo è tutto! Per far questo, non avrete bisogno di aggiungere una sola riga di codice CSS personalizzato nel Customizer o di creare un child theme.
Ma continuiamo ad esplorare gli stili globali di Twenty Twenty-Two con qualche altro esempio.
Impostazioni Tipografia
Nel pannello Tipography è possibile personalizzare gli stili della tipografia degli elementi Testo e Link di un sito web a livello globale.
Ogni elemento fornisce accesso ad un gruppo di controlli per personalizzare la famiglia di caratteri, la dimensione e l’altezza delle linee.
Vi state chiedendo quale sia il codice che genera questi controlli?
Aprite il theme.json di Twenty Twenty-Two e individuate la sezione typography. Vedrete le seguenti impostazioni:
{
"version": 1,
"settings": {
"appearanceTools": true,
"typography": {
"dropCap": false,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": ""Source Serif Pro", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Normal",
"size": "1.125rem",
"slug": "normal"
},
{
"name": "Medium",
"size": "1.75rem",
"slug": "medium"
},
{
"name": "Large",
"size": "clamp(1.75rem, 3vw, 2.25rem)",
"slug": "large"
},
{
"name": "Huge",
"size": "clamp(2.5rem, 4vw, 3rem)",
"slug": "huge"
}
]
},
}Dal codice qui sopra, potreste aspettarvi di vedere due famiglie di caratteri e cinque dimensioni di carattere. Avete indovinato.
Ecco come il codice di cui sopra si traduce nelle impostazioni tipography degli stili globali:
Se vi state chiedendo quale impostazione generi il controllo dell’altezza della linea, in Twenty Twenty-Two non troverete un’impostazione specifica, perché questa è abilitata dalla proprietà appearanceTools, che è una scorciatoia per diverse dichiarazioni (vedi sezione successiva).
Strumenti per il Layout e per l’Aspetto
L’ultimo elemento nella barra laterale degli stili globali è il Layout. Al momento in cui scriviamo, questa contiene il solo controllo del padding.
In Twenty Twenty-Two, il pannello Layout è abilitato dalla proprietà delle impostazioni appearanceTools, un booleano che può essere utilizzato per abilitare diverse impostazioni contemporaneamente:
{
"settings": {
"appearanceTools": true
}
}"appearanceTools": true sostituisce semplicemente il seguente blocco di dichiarazioni:
{
'settings': {
'border': {
'color': true,
'radius': true,
'style': true,
'width': true
},
'color': {
'link': true
},
'spacing': {
'blockGap': true,
'margin': true,
'padding': true
},
'typography': {
'lineHeight': true
}
}
}OK. Ci auguriamo che ora sia più chiaro come le impostazioni dichiarate nel file theme.json corrispondano ai rispettivi controlli degli Stili Globali.
Manca ancora un pezzo del nostro puzzle per avere il quadro completo del nuovo tema predefinito di WordPress: i block pattern.
I Block Pattern di Twenty Twenty-Two
Si potrebbe dire che Twenty Twenty-Two è principalmente una collezione di pattern – e in effetti è quasi così. In Twenty Twenty-Two, troverete un sacco di block pattern pronti all’uso che potete selezionare per costruire strutture sorprendenti e imprevedibili di blocchi annidati per le vostre pagine web.
Il termine chiave qui è potenziamento dell’utente. E questo calza a pennello perché, con i clock pattern, potete costruire di tutto, da un accattivante portfolio a un sito promozionale a pagina singola, anche se non avete alcuna conoscenza di HTML o CSS!
E WordPress 5.9 apporta miglioramenti significativi al sistema dei pattern, grazie al nuovo Pattern Explorer, uno strumento che permette di sfogliare i pattern in un modale a tutto schermo.
Il nuovo strumento permette anche di importare rapidamente e facilmente i block pattern direttamente dalla Pattern Directory. Questo apre nuove possibilità sia per gli utenti che per gli sviluppatori di WordPress, quindi è probabile che il suo impiego aumenti notevolmente in futuro.
Twenty Twenty-Two offre molti pattern (oltre 65), organizzati in cinque categorie.
Questo solido set di pattern si combina perfettamente ai template e alle parti di template del nuovo tema predefinito, rendendo l’esperienza di editing davvero sorprendente.
Se non avete ancora avuto la possibilità di sperimentare i block pattern, con un semplice esempio vi mostreremo perché sono considerati strumenti così potenti.
Supponiamo che vogliate rimuovere il footer predefinito dai template Index e Single Post e sostituirlo con un diverso block pattern di Twenty Twenty-Two.
Avviate l’Editor del sito dal menu Aspetto o dal pulsante della barra degli strumenti del frontend di WordPress per personalizzare il template Index.
Fate clic sul pulsante Index per visualizzare il menu a tendina dell’intestazione che mostra l’elenco delle aree di template disponibili nella pagina. Cliccate sul pulsante a forma di ellisse accanto a Footer e poi su Edit Footer.
Come detto sopra, questo aprirà l’editor delle parti di template isolate.
Ora aprite il block inserter e cliccate su Patterns.
Aprite il nuovo strumento Pattern Explorer, selezionate la categoria Twenty Twenty-Two Footers e scegliete il vostro footer.
Ora aggiungete e modificate i blocchi secondo le vostre esigenze.
Salvate l’intestazione e ricontrollate il sito quando siete soddisfatti delle modifiche.
L’immagine qui sotto mette a confronto tre template (Index, Single Post, e Single Post with no separators) con diverse personalizzazioni dell’intestazione e del footer:
Come Estendere Twenty Twenty-Two con un Child Theme
Creare un child theme per un tema a blocchi è un po’ diverso dal creare un child theme per un tema classico.
Ma una volta che avete una buona conoscenza della struttura di un tema a blocchi, non vi sarà difficile creare un child theme per Twenty Twenty-Two o qualsiasi altro tema a blocchi.
Quindi cerchiamo di capire come personalizzare l’aspetto di un sito web basato su Twenty Twenty-Two.
1. Impostare un Child Theme per Twenty Twenty-Two
Nella vostra directory /wp-content/themes, create una nuova cartella e nominatela come volete (ma secondo gli standard di sviluppo dei temi). In questo esempio, abbiamo chiamato la cartella del child theme twentytwentytwo-child.
Ora avete bisogno di un file style.css.. Aprite il vostro editor di codice preferito e create il seguente foglio di stile:
/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments
Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/Come sempre, potrete modificare i campi secondo le vostre esigenze.
Il child theme è ora disponibile per l’anteprima. Potete attivarlo nella schermata di amministrazione Aspetto > Temi.
2. Personalizzare le Impostazioni Globali
A partire da WordPress 5.9, i child theme con un file theme.json ereditano le impostazioni del tema genitore. Se il theme.json del child definisce un insieme di stili, allora quegli stili si applicano al di sopra degli stili del genitore.
Quindi possiamo creare un file theme.json che include solo un piccolo blocco personalizzato di definizioni di impostazioni e stili, piuttosto che ridefinire tutte le nostre scelte originali.
Come Dichiarare una Palette di Colori Personalizzata
Quando si costruisce un child theme per Twenty Twenty-Two, il compito più semplice è sostituire la palette dei colori. Tutto quello che dovete fare è definire una nuova palette di colori nel theme.json del vostro child come mostrato di seguito:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#FFFFFF",
"name": "Foreground"
},
{
"slug": "background",
"color": "#001F29",
"name": "Background"
},
{
"slug": "primary",
"color": "#D6FDFF",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FDFCDC",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#FED9B7",
"name": "Tertiary"
},
{
"slug": "accent",
"color": "#E94435",
"name": "Accent"
}
]
}
}
}Salvate il vostro file e tornate all’editor del sito. La palette dei colori definita sopra dovrebbe aver sostituito la palette dei colori predefinita di Twenty Twenty-Two.
I colori saranno mostrati in ordine sulla tavolozza stessa, e i loro nomi dovrebbero seguire le best practice e le convenzioni di denominazione discusse su Github.
Potete leggere molto di più sulle opzioni di colore del theme.json in questa panoramica approfondita di Carolina Nymark.
Come Dichiarare Filtri Duotone Personalizzati
Potete anche sostituire i colori duotone predefiniti con un vostro set personalizzato di filtri.
Per farlo, basta aggiungere il seguente codice alle impostazioni del theme.json del vostro child theme allo stesso livello della proprietà palette:
{
"version": 2,
"settings": {
"color": {
"palette": [...],
"duotone": [
{
"colors": [
"#001F29",
"#FFFFFF"
],
"slug": "default-filter",
"name": "Default filter"
}
]
}
}
}Salvate il file e controllate il risultato nell’editor dei blocchi. Dovreste vedere un solo filtro duotone.
3. Personalizzare gli Stili di Blocco
Come abbiamo detto prima, a partire da WordPress 5.9 è possibile personalizzare le impostazioni e gli stili del theme.json dall’interfaccia degli Stili globali.
Gli stili dei blocchi possono essere personalizzati dall’interfaccia Global Styles solo se il blocco dichiara il supporto per una specifica funzionalità nel file block.json corrispondente. Ma potete sovrascrivere le impostazioni predefinite del blocco nel theme.json del vostro child theme.
Ora supponiamo che vogliate sovrascrivere gli stili dei blocchi Post Title e Group. Tutto quello che dovete fare è definire gli stili che volete aggiungere o sovrascrivere, come mostrato di seguito:
{
"version": 2,
"settings": {...},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif"
},
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"spacing": {
"padding": "var(--wp--custom--spacing--small)"
}
},
"core/group": {
"spacing": {
"margin": {
"top": "0",
"bottom": "0"
}
}
}
}
}
}Nell’esempio qui sopra, abbiamo cambiato la famiglia del font, il colore di sfondo e i valori di padding per core/post-title, così come i margini superiore e inferiore per core/group.
L’immagine qui sotto mostra il risultato come apparirebbe sul sito pubblico:
E questo è tutto per noi!
Non ci addentreremo più a fondo nei child theme per ora perché andrebbe oltre lo scopo di questo articolo. Nel frattempo, troverete altri esempi di child theme di Twenty Twenty-Two su Github.
Riepilogo
Dando uno sguardo più da vicino al nuovo tema predefinito di WordPress Twenty Twenty-Two e alle sue caratteristiche (che lo rendono il tema predefinito più flessibile mai rilasciato), abbiamo svelato la nuova architettura delle informazioni introdotta con WordPress 5.9. Abbiamo anche dato un’occhiata alla nuova interfaccia dei Global Styles.
Ci sono molte nuove fantastiche funzionalità in arrivo e sembra chiaro che il nuovo ambiente di editing sta diventando nel tempo più solido, affidabile e funzionale.
Mentre sono in arrivo molte nuove funzionalità di WordPress, altre stanno scomparendo o diminuendo di importanza. Molti utenti si chiedono cosa succederà al Customizer e come mantenere al meglio la retrocompatibilità con i temi esistenti.
Ma non dovete aspettarvi di passare dai temi tradizionali ai temi a blocchi così all’improvviso. Al momento abbiamo infatti ben quattro diversi tipi di temi tra cui scegliere:
- Temi a blocchi: Temi progettati per il FSE
- Temi universali: Temi che funzionano sia con il Customizer che con l’Editor del sito
- Temi ibridi: Temi classici che supportano le funzionalità di FSE come theme.json
- Temi classici: Temi con template PHP, functions.php, ecc.
Quindi, per ora non c’è da temere: ci sono ancora molte soluzioni tra cui scegliere se non vi sentite ancora pronti a passare ai temi a blocchi.
E ora tocca a voi! Siete già pronti a fare il grande salto e iniziare ad usare i temi a blocchi? Condividete i vostri pensieri con noi 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