Come aggiungere uno stile CSS utilizzabile nei blocchi di Gutenberg

Condividi se ti piace!

La flessibilità dei blocchi di Gutenberg è riscontrabile anche nella facilità con cui possiamo applicare degli stili CSS personalizzati in modo mirato, creando le relative classi nella sezione Personalizza di WordPress e poi inserendole nell’opzione Avanzate del blocco che vogliamo influenzare.

Anche se la giustificazione del testo viene spesso sconsigliata sul Web, ed è stata infatti disabilitata anche nell’editor classico di WordPress già dalla versione 4.7 del CMS, mi servirò proprio di uno stile CSS per introdurre questo stile in modo che si possa applicare a un blocco di testo. Ecco di seguito le immagini con istruzioni in didascalia dei tre passaggi da compiere per ottenere questo risultato (o qualsiasi altro legato all’uso di classi CSS personalizzate) nei blocchi di Gutenberg.

Step 1: Accedete alla sezione Personalizza di WordPress e cliccate sull’ultima voce in basso bella barra, denominata CSS aggiuntivo.

Il codice che utilizzeremo come esempio nel prossimo step è il seguente:

/* --- Stile per testo giustificato in Gutenberg --- */
.testo-giustificato {
text-align: justify;
}
Step 2: digitiamo nel campo del CSS aggiuntivo il codice CSS necessario per creare la nuova classe, e confermiamolo cliccando sul pulsante Pubblica.
Per applicare la nuova casse, che abbiamo chiamato testo-giustificato, selezioniamo il blocco da personalizzare e inseriamola nel campo dell’ultima sezione in basso nella barra di opzioni, denominata Avanzate, sotto la voce Classe CSS aggiuntiva.

Se il risultato non dovesse essere visibile in tempo reale, ci basterà aggiornare e visualizzare il contenuto nel frontend, oppure con l’Anteprima.

Lo stesso procedimento può essere utilizzato, naturalmente, per qualsiasi altro stile vogliate, variando semplicemente il codice.

Ti potrebbe anche interessare:

Condividi se ti piace!

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.