Creare Stile Personalizzato per Blocco Gutenberg

Gli stili personalizzato dei blocchi Gutenberg, rappresentano una funzionalità versatile e potente per la personalizzazione dei contenuti in WordPress. Questi stili permettono di applicare variazioni di design alternativi agli stili esistenti, operando attraverso l’aggiunta di una classe CSS al wrapper del blocco. Tale classe può essere utilizzata per offrire uno stile alternativo.

La differenza fondamentale tra aggiungere una classe css ad un blocco e l’aggiunta di uno stile personalizzato sta nel fatto che quest’ultimo è disponibile come opzione nell’interfaccia dell’editor. Questa funzionalità è stata introdotta in WordPress dalla versione 5.3.0 e non richiede l’installazione del plugin Gutenberg dato che questa funzione è stata inserita nel core.

Se pensi che la lo stile personalizzato sia troppo limitativo per sviluppare quello che hai pensato, prova a vedere se i i block variants sono più adatti. Nell’articolo Come creare una Variante di un Blocco Gutenberg che spiegato le loro potenzialità e come implementarli. Se nemmeno questa soluzione è adatta, probabilmente dovrai sviluppare un blocco custom.

Come creare lo stile personalizzato per Gutenberg

Nel corso di questo articolo andremo a creare un nuovo stile “Arcobaleno” per il blocco pulsante core/button. Gutenberg fornisce già due stili di default per i pulsanti, ma noi andremo a creare uno completamente nuovo. Questo non solo arricchirà il repertorio di stili disponibili ma fornirà anche una comprensione pratica di come gli stili possano essere sfruttati.

Tecnicamente, implementare un nuovo stile è un processo semplice e si compongono di due elementi principali:

1. alcune righe di PHP oppure JavaScript per dichiarare lo stile del blocco e assegnargli un nome di classe personalizzato
2. stili CSS per definire l’aspetto

Creare block style con php

Il codice qui sotto, va inserito nel file functions.php del tema oppure all’interno del plugin che state sviluppando.

function register_custom_block_styles() {
    register_block_style(
        'core/button', 
        array(
            'name'         => 'arcobaleno',
            'label'        => 'Arcobaleno',
            'inline_style' => '.wp-block-button.is-style-arcobaleno a:before{
				content: "";
				background: linear-gradient( 45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000 );
				position: absolute;
				top: -4px;
				left: -4px;
				z-index: -1;
				filter: blur(4px);
				width: calc(100% + 8px);
				height: calc(100% + 8px);
				border-radius: inherit;
			}
			.wp-block-button.is-style-arcobaleno a{ position:relative;}
			'
        )
    );
}
add_action('init', 'register_custom_block_styles');

Vediamo in dettaglio come funziona:

1. La funzione utilizza register_block_style consente di registrare nuovi stili per i blocchi esistenti. In questo caso, si sta registrando uno stile per il blocco ‘core/button’.
2. Il secondo parametro è un array associativo:

• 'name': Assegna il nome ‘arcobaleno’ a questo stile personalizzato, è come se fosse un slug. Questo nome verrà utilizzato come classe CSS per applicare lo stile. La convenzione utilizzata da WordPress per generare la classe è di prefissare il nome dello stile con:
  is-style-. Quindi, nel caso dello stile ‘arcobaleno’, la classe CSS generata sarà is-style-arcobaleno.
• 'label': Imposta ‘Arcobaleno’ come etichetta per lo stile nel pannello Gutenberg, rendendolo facilmente riconoscibile dall’utente.
• 'inline_style': Definisce gli stili CSS direttamente all’interno della funzione. Questi stili verranno applicati quando lo stile ‘arcobaleno’ viene selezionato per un blocco bottone.
• 'style_handle': definisce l’url del file css che contiene lo stile. Può essere utilizzato in sostituzione di 'inline_style'

Creare block style con JavaScript (vanilla)

Il codice JavaScript per registrare uno stile di blocco personalizzato in Gutenberg va inserito in un file JavaScript all’interno del tema o plugin di WordPress. Ecco i passaggi generali da seguire.

Prima di tutto, bisogna creare un file JavaScript all’interno del tema o plugin. Ad esempio, chiamiamo il file custom-block-styles.js. In questo file, inserisci il codice per registrare lo stile del blocco:

wp.domReady(() => {
    wp.blocks.registerBlockStyle('core/button', {
        name: 'arcobaleno',
        label: 'Arcobaleno',
        isDefault: false,
    });
});

Dopo aver creato il file JavaScript, va caricato nel contesto dell’editor di Gutenberg. Questo si fa generalmente tramite il file functions.php del tema o plugin. Ecco un esempio:

function theme_enqueue_block_editor_assets() {
    wp_enqueue_script(
        'custom-block-styles',
        get_template_directory_uri() . '/custom-block-styles.js',
        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
    );
	
}
add_action( 'enqueue_block_editor_assets', 'theme_enqueue_block_editor_assets' );

Seguendo questi passi, si crea uno stile in JavaScript. Come per la versione php, l’elemento contenitore del blocco bottone, avrà una classe css dedicata is-style-arcobaleno.
A questo punto è sufficiente inserire il css all’interno del tema per avere l’effetto arcobaleno attorno il bottone.

 .wp-block-button.is-style-arcobaleno a:before{
				content: "";
				background: linear-gradient( 45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000 );
				position: absolute;
				top: -4px;
				left: -4px;
				z-index: -1;
				filter: blur(4px);
				width: calc(100% + 8px);
				height: calc(100% + 8px);
				border-radius: inherit;
}

.wp-block-button.is-style-arcobaleno a{ 
        position:relative;
}

Creare block style con JavaScript (JSX)

Se utilizzate @wordpress/scripts per sviluppare il vostro plugin, è meglio utilizzare questo procedimento piuttosto che quello descritto nel paragrafo precedente.

import { registerBlockStyle } from '@wordpress/blocks';

registerBlockStyle( 'core/button', {
    name: 'arcobaleno',
    label: 'Arcobaleno',
    isDefault: false,
} );

Pro e contro nell’utilizzo degli stili

L’uso degli stili nei blocchi di Gutenberg presenta sia vantaggi che svantaggi, che è importante considerare per ottimizzare l’esperienza di editing e il design del sito.

Pro degli Stili dei Blocchi

1. Facilità di Accesso e Visibilità: Gli stili sono facilmente accessibili nel pannello delle impostazioni dei blocchi, rendendo semplice per gli utenti trovare e applicare diverse opzioni di stile.
2. Miglioramento dell’Esperienza Utente: Per gli utenti meno esperti, gli stili predefiniti offrono un modo rapido e intuitivo per personalizzare l’aspetto dei blocchi senza richiedere competenze tecniche avanzate.
3. Coerenza del Design: Utilizzando stili predefiniti, si può garantire una certa uniformità visiva su tutto il sito, contribuendo a mantenere un’identità di marca coerente.

Contro degli Stili dei Blocchi

1. Limitazione nella Personalizzazione: Uno dei maggiori svantaggi è che solo uno stile può essere attivo alla volta. Questo limita la personalizzazione, poiché gli utenti potrebbero voler combinare aspetti di stili diversi.
2. Complessità con Molti Stili: Quando sono presenti più di quattro stili, il pannello può diventare sovraffollato e confuso, rendendo più difficile per gli utenti scegliere e applicare lo stile desiderato.
3. Conflitto tra Stile e Editor: Uno scenario che richiede attenzione è la potenziale sovrapposizione tra gli stili CSS definiti e le modifiche dirette effettuate dall’utente tramite l’editor. Questa interazione può portare a conflitti di stile e risultati inattesi. Gli stili definiti in CSS per un blocco possono entrare in conflitto con le modifiche apportate dall’utente attraverso l’editor, come colori, sfondi o bordi. Questo avviene perché le regole CSS specificate nello stile possono avere una priorità maggiore rispetto alle modifiche fatte tramite l’interfaccia dell’editor.

Risorse utili

Documentazione: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/

Video: 4:30