I temi a blocchi e il theme.json sono strumenti estremamente flessibili, il che potrebbe far pensare che i child theme siano obsoleti. Ma in molti casi sono ancora importanti.
Un child theme è ancora la soluzione giusta se si vuole avere un controllo reale sul design del sito senza toccare i file principali del tema parent.
In questo articolo utilizziamo il tema Twenty Twenty-Five come base per la creazione di un child theme a blocchi con i propri style.css e functions.php. Vedremo come sovrascrivere gli stili in modo sicuro, definire stili di blocco personalizzati e persino impostare varianti di stile. Non si tratta solo di un trucco di stile, ma di un solido passo avanti verso la creazione di un block theme completo.
Anche se questo esercizio può sembrare semplice, analizzeremo alcune particolarità che possono mettere in difficoltà. Iniziamo creando un child theme personalizzato e poi implementando una style variation personalizzata.
Registrazione di un child theme a blocchi
Registrare un child theme a blocchi è molto più semplice che registrarne uno classico.
Tecnicamente, non è necessario registrarlo. La registrazione avviene automaticamente quando la cartella di un child theme correttamente nominato contiene sia un file theme.json che un file style.css.
Allora perché il file style.css è ancora necessario?
Come in precedenza, questo file contiene un’intestazione obbligatoria (mostrata qui sotto) con i metadati utilizzati da WordPress per identificare il tema, con il nome e il tema parent di cui è estensione. Sebbene gli stili e le impostazioni siano ora gestiti nel theme.json, il file style.css svolge ancora un ruolo fondamentale per consentire a WordPress di riconoscere il tema, anche se non contiene CSS vero e proprio.
/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/Un file functions.php non è necessario a meno che non si voglia inserire degli script o aggiungere delle funzionalità PHP. Lo faremo più avanti.
Se non si ha familiarità con il theme.json o se è necessario un rapido ripasso, abbiamo una guida su Come lavorare con le proprietà e le coppie chiave-valore nel file theme.json.
Modifiche di base al child theme
Cominciamo con l’aggiornamento dei colori globali dello sfondo e del testo e con lo styling del blocco Button.
Nel file theme.json del child theme (che serve come stile predefinito), definiamo quanto segue:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}Mentre i colori dello sfondo e del testo si applicano a tutte le varianti di stile, lo stile del blocco Button si applica solo alla variante predefinita.
Sovrascrivere le varianti di stile
Per applicare lo stesso stile ai pulsanti in diverse varianti, è meglio creare un file .json che corrisponda alla convenzione di denominazione delle varianti del tema principale.
Ad esempio, per sovrascrivere il bordo del pulsante nella variante di stile Sera, possiamo creare un file chiamato 01-evening.json nella cartella principale del child theme (o all’interno di una sottocartella /styles):
{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}In questo caso, abbiamo utilizzato un bordo più ampio e tratteggiato per far risaltare il pulsante. Poiché si tratta di stili più specifici, questi sovrascrivono quelli generali del theme.json.
Creare una variante di stile personalizzata
Facciamo un ulteriore passo avanti creando una variante di stile completamente nuova chiamata Kinsta. Questa variante eredita le impostazioni globali dal file theme.json del child theme e applica la propria palette di colori e lo stile dei pulsanti:
Salviamo il seguente file come /styles/kinsta.json:
{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}Questa variante “Kinsta” ci offre un aspetto distinto, creato interamente all’interno della struttura del child theme.
Come e perché accodare il file style.css
In un vero tema a blocchi come Twenty Twenty-Five, non c’è bisogno di inserire manualmente i fogli di stile tramite PHP né per il tema principale né per il child theme. Il core di WordPress genera dinamicamente i CSS in base al file theme.json.
Tuttavia, se si vogliono scrivere stili personalizzati in un file style.css, bisogna inserirli manualmente.
// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});Questo codice assicura che i file style.css del tema principale e del child theme siano caricati nel frontend.
Per verificare che gli stili vengano inseriti correttamente, proviamo ad aggiungere il seguente CSS al file style.css del child theme:
body {
color: #ffff00;
background: #0000ff;
}In questo modo tutte le varianti di stile avranno uno sfondo blu e un colore del testo giallo, solo nel frontend.
Un semplice caso d’uso di styles.css
Ci si potrebbe chiedere: Perché usare i CSS? Non dovrebbe gestire tutto il theme.json?
Non proprio.
Ad esempio, il theme.json non supporta le pseudo-classi come :hover. Per creare un effetto hover su tutti i pulsanti, useremo questo CSS:
.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}Questo si applica a tutti i blocchi di pulsanti in tutte le varianti del frontend.
Supponiamo di voler limitare l’effetto hover a una specifica variante o blocco. In questo caso, dovremo utilizzare metodi più avanzati, come le classi condizionali del body, i filtri di blocco o un CSS specifico per il blocco.
Aggiungere una variante di stile del blocco
Vediamo ora come aggiungere una nuova variante di stile al blocco Button utilizzando PHP e CSS.
Se pensiamo di aggiungere un array variations al theme.json, questo non funziona per questo caso d’uso. Mentre il theme.json gestisce lo stile globale e a livello di blocco, le varianti di stile del blocco, come gli stili alternativi dei pulsanti, devono essere registrate in modo diverso.
Creiamo una nuova variante di stile chiamata Alternative Outline, che appare insieme agli stili predefiniti Fill e Outline nell’interfaccia utente dell’editor e viene visualizzata correttamente nel frontend.
Registrazione dello stile in PHP
Aggiungiamo il seguente codice al file functions.php del child theme. Questo codice registra lo stile dopo il caricamento del core ma prima del rendering di qualsiasi pagina:
// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name' => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});Aggiunta degli stili personalizzati al file style.css
Ora definiamo gli stili per questa variante, compreso lo stato :hover, nel file style.css del child theme:
.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}Le variabili color utilizzate in questo caso sono definite nella palette del theme.json per garantire la coerenza del sito.
Creare varianti di stile di blocco con JSON
A partire da WordPress 6.6, possiamo registrare le varianti di stile del blocco principale utilizzando interamente JSON, senza bisogno di PHP.
Ecco un esempio che aggiunge una nuova variante chiamata Purple Background al blocco Gruppo. Appare nella barra laterale dell’editor con un’anteprima in stile:
Creiamo un file chiamato block.json nella cartella /styles/purple-background/ del nostro tema:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}La variante Purple Background appare nella barra laterale dell’editor come mostrato nell’immagine qui sotto:
Se lavoriamo con più varianti di stile, è buona norma inserirle in una sottocartella /styles. In questo caso, il percorso del file è: /styles/purple-background/block.json.
Ecco alcune note finali sul metodo JSON:
- Questo approccio non richiede l’uso di PHP e può ridurre il peso della pagina perché WordPress carica il CSS solo quando necessario.
- Dato che stiamo lavorando con un child theme di Twenty Twenty-Five – che utilizza già il
theme.jsone lo stile dinamico – non c’è bisogno di inserire manualmente gli stili. - Alcuni blocchi potrebbero non supportare ancora tutte le opzioni di stile tramite JSON. Se la retrocompatibilità è un problema, possiamo aggiungere un fallback PHP utilizzando
register_block_style().
Riepilogo
La flessibilità dei temi a blocchi apre le porte a innumerevoli possibilità di sviluppo. L’obiettivo di questo articolo era quello di introdurre i nostri lettori al mondo dei temi a blocchi e, auspicabilmente, dar loro l’ispirazione necessaria per dare vita alle loro idee.
Abbiamo anche analizzato due approcci diversi per aggiungere varianti di stile personalizzate ai blocchi core: uno utilizza PHP e CSS, l’altro utilizza solo JSON.
Come si può immaginare, ogni esempio può portare a una strada diversa. WordPress è ricco di opzioni e spesso offre diverse opzioni per risolvere lo stesso problema.
Ad esempio, potremmo creare un tema a blocchi che utilizzi il theme.json per le impostazioni ma che si affidi interamente allo style.css per lo stile, sfruttando le più estese capacità dei CSS. Oppure potremmo accodare gli stili in modo condizionato, in modo che vengano caricati solo quando viene utilizzata una specifica variante.
Le possibilità sono infinite!
Kinsta offre una suite completa di strumenti di sviluppo, sia di base che avanzati, per snellire, ripulire e migliorare il flusso di lavoro di WordPress. Prova Kinsta gratis per 30 giorni.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
