Le Block Variations in Gutenberg permette di creare versioni personalizzate di blocchi esistenti, mantenendo la struttura e la funzionalità di base del blocco originale, ma con attributi e impostazioni predefinite differenti.
Una Variante di Blocco non è una semplice personalizzazione del blocco, ma piuttosto una vera e propria variazione dello stesso. Mentre un blocco standard in Gutenberg può essere personalizzato dall’utente in molti modi (ad esempio, cambiando il colore di sfondo o il tipo di carattere), una Block Variation ha degli attributi preimpostati che definiscono il suo aspetto e comportamento.
Variante di Blocco vs Stile del blocco
Molto spesso si fa confusione tra Block Variation e Block Style. Nella guida Creare Stile Personalizzato per Blocco Gutenberg ho analizzato come creare un Block Style.
In generale se le modifiche desiderate possono essere realizzate attraverso gli stili definiti nel file theme.json o tramite CSS, la scelta più adeguata è quasi sempre quella di creare uno Block Style personalizzato. Questi stili permettono di applicare una classe css al blocco ma purtroppo le personalizzazione che l’utente effettua tramite l’editor potrebbero andare in conflitto con lo stile definito nel css.
Se invece si ha la necessità di avere un blocco già preimpostato con sfondo, bordi, colori ecc allora una Block Variation è probabilmente la scelta migliore. Il grande vantaggio rispetto ad uno stile personalizzato è quello di permettere all’utente di modificare il blocco direttamente dall’editor.
Esempio di Block Variations
Un esempio di Block Variation può essere trovato nel blocco “Gruppo”. Un “Gruppo” standard può essere trasformato in una variazione come “Riga” o “Colonna”, ognuno dei quali con configurazioni di layout specifiche.
Esaminando il codice generato dai blocchi “Gruppo”, “Riga” e “Colonna” in Gutenberg, emerge un dettaglio: le differenze tra questi blocchi sono principalmente una questione di attributi. Nonostante appaiano come blocchi distinti nell’interfaccia utente, a livello di codice, si tratta di variazioni del blocco Group.
Blocco Gruppo
In termini di codice, si tratta di un contenitore generico senza attributi specifici che influenzano il suo layout o comportamento.
<!-- wp:group -->
<div class="wp-block-group">
<!-- Contenuto del gruppo -->
</div>
<!-- /wp:group -->Blocco Riga
Se passiamo al blocco “Riga”, che è una variazione del Group, vediamo che gli attributi cambiano. Questi attributi aggiuntivi influenzando il suo layout.
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
<!-- Contenuto della riga -->
</div>
<!-- /wp:group -->In questo caso, gli attributi layout con type impostato su “flex” e flexWrap su “nowrap” trasformano il blocco in una riga orizzontale.
Blocco Colonna
Infine, esaminiamo il blocco “Colonna”. Anche in questo caso, gli attributi distintivi si riflettono nel codice, differenziandolo dal blocco Group standard.
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group">
<!-- Contenuto dello stack -->
</div>
<!-- /wp:group -->Qui, gli attributi layout con type su “flex” e orientation su “vertical” creano uno stack verticale di elementi.
Attraverso questi esempi, si può comprendere come, nonostante la diversità visiva e funzionale nell’editor, la differenza fondamentale tra questi blocchi risieda negli attributi specifici definiti nel codice.
Come creare una Block Variation
La creazione di una Block Variation richiede la scrittura di codice JavaScript e non è possibile utilizzare PHP. Questo codice deve essere inserito in un file JS nel tuo tema o in un plugin di dedicato.
In questo esempio andremo ad inserire il codice nel file functions.php del tema per andare a creare una variazione del blocco “Gruppo” che chiamiamo “CTA”. Già dal nome si può capire che l’intento è quello di creare una variante che consenta all’utente di inserire una call to action in modo rapido e con uno stile impostato da noi ed con al suo interno: titolo, paragrafo e bottone.
Con l’hook enqueue_block_editor_assets carichiamo un file cta-variation.js nell’editor tramite la funzione
function cta_block_variation() {
wp_enqueue_script(
'cta-block-variation',
get_template_directory_uri() . '/cta-variation.js',
array( 'wp-blocks', 'wp-dom-ready', 'wp-element' ),
wp_get_theme()->get( 'Version' ),
false
);
}
add_action( 'enqueue_block_editor_assets', 'cta_block_variation' );All’interno del file cta-variation.js utilizzando la funzione registerBlockVariation è possibile definire la nuova variante.
wp.blocks.registerBlockVariation(
'core/group', {
name: 'cta-group',
title: 'Cta',
isDefault: false,
icon: 'buddicons-pm',
attributes: {
style: {
color: {
background: "#E1E1E1"
}
},
className: "cta-predefinita"
},
innerBlocks: [
[
'core/heading',
{
level: 2,
placeholder: 'Inserire il titolo qui',
textAlign: "center"
}
],
[
'core/paragraph',
{
placeholder: 'Inserire una descrizione qui error sit voluptatem accusantium doloremque laudantium',
align: "center"
}
],
[
'core/buttons',
{
"layout": {
type: "flex",
justifyContent: "center"
}
},
[
[
'core/button',
{
text: 'Clicca Qui'
}
]
]
]
]
}
);Analizzando il dettaglio il codice sopra, possiamo riassumere in:
- Registrazione della Block Variation:
wp.blocks.registerBlockVariation: Questa funzione è utilizzata per registrare una nuova variazione di blocco. In questo caso, si sta creando una variazione del blocco “Group”.'core/group': Indica che la variazione è basata sul blocco “Group”.name: 'cta-group': Un identificativo unico per la variazione.title: 'Cta': Il titolo della variazione, che appare nell’editor di blocchi.isDefault: false: Indica che questa variazione non sostituisce il comportamento predefinito del blocco “Group”.icon: 'buddicons-pm': Specifica un’icona da visualizzare per la variazione nell’editor di blocchi. L’elenco completo delle icone è disponibile qui. È possibile anche specificare un’icona svg custom
- Attributi della Variazione:
attributes: Definisce gli attributi che saranno applicati al blocco “Group” quando si utilizza questa variazione.style: Imposta lo stile del blocco, in questo caso definendo un colore di sfondo (background)#E1E1E1.className: "cta-predefinita": Assegna una classe CSS personalizzata al blocco.
- Blocchi Interni:
innerBlocks: Definisce un array di blocchi che saranno automaticamente inseriti all’interno del blocco “Group” quando si utilizza questa variazione.- Blocco “Heading”: Un titolo di h2, centrato, con un placeholder per il testo.
- Blocco “Paragraph”: Un paragrafo con testo centrato e un placeholder per il testo.
- Blocco “Buttons”: Un contenitore per i bottoni con layout flex centrato.
- Blocco “Button” Interno: Un bottone con il testo “Clicca Qui”.
Il risultato finale è quello di trovare nell’editor la variate “Cta” appena creata:
Cliccando sopra al componente, verrà inserito il blocco come è stato preimpostato nel file JavaScript. Inoltre l’utente avrà la possibilità di personalizzare i color, margini, padding ecc tramite l’editor.
Le Block Variations rappresentano quindi uno strumento incredibilmente potente per personalizzare l’esperienza di editing in WordPress. Offre agli sviluppatori di creare dei blocchi predefiniti, senza dover creare blocchi completamente nuovi da zero.
Lascia un commento