Stili personalizzati per i temi a blocchi di WordPress con i child theme

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.