Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Creare varianti di stile per i blocchi di WordPress Gutenberg: parte 2

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Nel'articolo precedente abbiamo imparato tutto sulle variazioni di stile del blocco e come sono usati nell'editor nuovo di zecca di WordPress 5.0 per passare facilmente tra gli stili predefiniti.

Approfondiremo ulteriormente in questo articolo fornendo ulteriori esempi per darvi una solida base per l'implementazione delle variazioni di stile del blocco nei vostri progetti. In particolare, creeremo il nostro blocco da zero per illustrare come aggiungere molteplici variazioni di stile direttamente nella definizione del blocco stesso. Vi mostrerò anche come impostare quale stile del blocco viene utilizzato poiché vi rientra anche il valore predefinito.

Poi vedremo di estendere il nostro blocco aggiungendo ulteriori variazioni di stile del blocco (BSV in breve) tramite un plugin separato. In genere vorrete farlo se aveste bisogno di estendere gli stili del blocco ma non avete accesso al codice sorgente del blocco.

Lo stesso approccio verrà utilizzato di nuovo ma questa volta tramite un tema child. Potete voler fare questo per fornire delle variazioni di stile extra per i blocchi core per abbinare gli stili del vostro tema.

Altrettanto importante quanto la registrazione dei nuovi stili è anche come annullare la loro registrazione. E c'è una funzione dedicata che useremo per fare proprio questo.

Tutto il codice di questo tutorial è disponibile per il download sulla nostra repo GitHub sulla destra, quindi non dovete digitare il codice manualmente se volete solo seguire.

Registrare una BSV all'interno di un blocco

Se avete accesso al codice sorgente di un blocco, allora potete gestire le variazioni di stile del blocco direttamente all'interno di registerBlockType(). Diamo un'occhiata più da vicino.

In primo luogo, abbiamo bisogno di avviare un nuovo blocco. Non importa realmente cosa fa il blocco poiché abbiamo solo bisogno di qualcosa da aggiungere anche alle nostre variazioni di stile del blocco personalizzato. Probabilmente il modo più semplice per farlo è utilizzare l'utilità create-guten-block che crea un nuovo plugin e aggiunge un blocco campione pronto per la personalizzazione. E fa tutto questo con un singolo comando da terminale!

Se non avete utilizzato questa pratica utilità prima allora potete dare un'occhiata al repository del progetto per ulteriori informazioni. Inoltre, ecco un tutorial dedicato per tenervi aggiornati se necessario.

All'interno della cartella locale del vostro plugin WordPress aprite una finestra della riga di comando e digitate:

Ho usato bsv-plugin qui per il nome, ma potete utilizzare qualsiasi cosa vi piaccia. Dopo un paio di minuti quando l'installazione è completa, digitate:

Ora possiamo modificare il codice sorgente per il nostro blocco appena creato e create-guten-block compilerà automaticamente il codice sorgente per noi dopo ogni modifica. Ottimo.

Andate avanti e attivate il plugin all'interno dell'admin di WordPress e aggiungete un'istanza del blocco nuovo all'editor creando una nuova pagina o modificandone una esistente.

Block created with create-guten-block

Rimuovere gli stili solo dell'editor

Prima di andare avanti, però, abbiamo solo bisogno di modificare il modo in cui il CSS viene accodato per impostazione predefinita.

Il blocco personalizzato create-guten-block appena creato per noi include due fogli di stile. Uno viene accodato all'editor e l'altro viene accodato all'editor e al frontend. Non abbiamo bisogno degli stili solo per l'editor per questo tutorial quindi in .\bsv-plugin\src\init.php commentate o eliminate la chiamata da wp_enqueue_style() a bsv_plugin_cgb_editor_assets().

Restandosu init.php per un attimo abbiamo bisogno anche di decommentare il dependency array da wp_enqueue_style() in bsv_plugin_cgb_block_assets() poiché per qualche motivo questo attualmente impedisce che gli stili vengano accodati correttamente. Sto usando create-guten-block v1.11.0 in questo tutorial così potete o meno non avere lo stesso problema a seconda della versione che state utilizzando.

La funzione bsv_plugin_cgb_block_assets() ora dovrebbe assomigliare a questa:

Ora, quando caricate la pagina vedrete gli stili del blocco che sono applicati nell'editor e sul front-end che è ciò che vogliamo.

Block styles enqueued on frontend and backend

Registrare le variazioni di stile del blocco

Siamo pronti ora ad aggiungere nel nostro CSS personalizzato cosa che faremo a breve. Prima però dobbiamo registrare le nostre variazioni di stile del blocco.

Aprite .\bsv-plugin\src\block\block.js e aggiungete ciò che segue all'oggetto di configurazione delle funzioni registerBlockType (per es. direttamente sotto la proprietà keywords farà qui).

Questo registra tre nuove variazioni di stile per il nostro blocco personalizzato. Notate come la variazione di stile del blocco chiamata style1 ha la proprietà isDefault impostata su true. Ciò seleziona semplicemente Style1 della variazione di stile stile del blocco quando aprite le opzioni del blocco nell'editor. In realtà non imposta eventuali classi CSS per il blocco come potreste pensare.

Questo è stato un po' un punto critico per me quando ho iniziato a lavorare con le variazioni di stile del blocco e fu fonte di molta confusione. Speriamo che in futuro la proprietà isDefault attiverà anche la classe CSS da aggiungere al contenitore del blocco che credo sia più intuitivo.

Aggiornate la pagina dell'editor e aprite le opzioni della variazione di stile facendo clic sull'icona nella parte superiore sinistra del blocco per vedere le tre variazioni di stile del blocco che abbiamo appena definito.

Our three new block style variations

Notate come la variazione di stile del blocco Style1 è selezionata per impostazione predefinita che è quello che abbiamo specificato nella proprietà styles sopra. Selezionando uno dei tre risultati delle variazioni di stile del blocco in diverse classi CSS da aggiungere al contenitore del blocco. Per esempio selezionando Style2 aggiunge la classe is-style-style2.

Block style variation CSS class added to markup

Attualmente non accade nulla quando ogni variazione di stile del blocco è selezionata quindi cerchiamo di aggiungere alcuni stili di base per risolvere il problema. In .\bsv-plugin\src\block\style.scss aggiungete il seguente dopo gli stili esistenti:

Solo gli stili personalizzati per le variazioni di stile del blocco Style2 e Style3 vengono aggiunti qui affinché gli stili di blocco predefiniti soiano ancora applicati anche quando nessuna variazione di stile del blocco è cliccata specificamente.

Our block styles added

Come potete vedere le nostre variazioni di stile del blocco sono ora disponibili con gli stili applicati. Mi piace molto il modo in cui potete vedere un'anteprima di ogni variazione di stile, come posizionate il mouse e anche senza doverlo selezionare prima!

Registrare una BSV tramite un plugin

Se volete aggiungere una variazione di stile a un blocco al quale non avete accesso al codice sorgente, allora potete utilizzare registerBlockStyle(). Questa funzione vi consente di definire le variazioni di stile aggiuntive per i blocchi core e i blocchi di terze parti, al di fuori di registerBlockType().

Porviamo questo aggiungendo un paio di nostre variazioni di stile per il blocco del pulsante principale. Questo blocco viene fornito con tre varianti di stile già definite: Arrotondato, Bordo in evidenza e Squadrato.

Default block style variations for the button block

Noi aggiungeremo due nostre ulteriori variazioni di stile: A forma di pillola e Maiuscolo.

Prima di farlo però abbiamo bisogno di un plugin in cui memorizzare il nostro codice personalizzato. Non me ne occuperò in profondità poiché l'obiettivo di questo tutorial sono le variazioni di stile del blocco piuttosto che lo sviluppo di plugin. Se avete qualche problema a seguire, allora potete semplicemente scaricare il plugin finito tramite il link di GitHub a destra.

Create una nuova cartella bsv all'interno della cartella locale di WordPress .\wp-content\plugins e aggiungete tre file:

  • bsv.php
  • bsv.js
  • bsv.css

In bsv.php aggiungete il codice che segue:

In bsv.js aggiungete il codice per il front-end:

E in bsv.css aggiungete gli stili stessi:

Attivate il plugin e inserite una nuova istanza del blocco del pulsante nell'editor. Ora dovreste vedere le due nuove variazioni di stile del blocco disponibili!

Two new block style variations added

Capire il codice del plugin BSV

Esaminiamo ciò che abbiamo appena fatto. In bsv.php il file JavaScript era accodato tramite l'hook enqueue_block_editor_assets così si carica solo sull'editor di admin. Tuttavia, vogliamo che il CSS si carichi sull'editor e sul front-end, quindi usiamo per questo l'hook enqueue_block_assets.

Gli stili sono piuttosto auto esplicativo ma notate come abbiamo puntato le istanze del blocco con classi specifiche di variazione di stile del blocco. Questo ci dà un modo pulito per separare il nostro CSS da variazioni di stile del blocco diverse.

La cosa importante da notare sono le due chiamate a registerBlockStyle(). Questa funzione vive nell'oggetto globale wp.blocks quindi abbiamo bisogno di includere in modo esplicito il prefisso ovunque tale funzione venga utilizzata.

registerBlockStyle() accetta due argomenti. Il primo è il nome del blocco che volete aggiungere alla variazione di stile, e il secondo è un oggetto di configurazione. Questo è esattamente lo stesso oggetto che abbiamo incontrato in precedenza quando abbiamo aggiunto le variazioni di stile del blocco direttamente a una definizione di blocco tramite la proprietà styles.

Una cosa da notare qui è però che se aggiungete isDefault: true a una variazione di stile del blocco tramite registerBlockStyle() verrà ignorato se è già stata impostata una variazione di stile predefinito. Solo una cosa a cui fare attenzione se (come me) vi aspettavate di sovrascrivere la variazione di stile predefinita.

In base alla documentazione potete annullare la registrazione di una variazione di stile del blocco con unregisterBlockStyle(). L'utilizzo è molto simile a registerBlockStyle() ma è solo necessario specificare il nome del blocco e il nome della variazione di stile.

Così, per esempio, per annullare la registrazione della variazione di stile Bordo in evidenza dal blocco pulsante potete utilizzare:

Tuttavia, sembrano esserci un po' di problema in questo momento. Funziona se immettete la riga di codice precedente nella finestra della console, ma non sempre sembra funzionare quando viene utilizzato da un plugin. Speriamo che questi problemi verranno risolti presto.

Registrare un BSV tramite un tema

Per il nostro esempio finale aggiungiamo un'altra variazione di stile per il blocco del pulsante principale per aggiungere un'opzione per eseguire il rendering dei pulsanti con un colore di sfondo sfumato piuttosto che con solo un colore piatto.

Implementeremo questa nuova variante di stile tramite un tema child questa volta poiché credo che sarà un caso d'uso comune per fornire stili alternativi per i blocchi che corrispondono con il proprio tema. (Il tema è anche incluso nel file scaricabile di questo tutorial se non volete crearlo manualmente).

Sto usando Twenty Nineteen come tema genitore poiché è incluso con WordPress 5.0, ma potete basarvi su qualsiasi tema di genitore vogliate.

Create una nuova cartella di twentynineteen-child all'interno della cartella locale di WordPress .\wp-content\themes e aggiungete quattro file:

  • style.css
  • functions.php
  • tnc_bsv.js
  • tnc_bsv.css

Non aggiungeremo stili specifici del tema child a style.css, ma abbiamo bisogno di includerlo poiché il tema è riconosciuto da WordPress.

In style.css aggiungete:

I file JavaScript e CSS vengono accodati tramite functions.php quindi aggiungete il codice seguente al file:

In tnc_bsv.js aggiungete il codice per registrare la nostra variazione di stile del blocco:

Infine il CSS per nostra variazione di stile del blocco viene aggiunto a tnc_bsv.css:

Il codice è praticamente lo stesso come il plugin che abbiamo creato nell'ultimo esempio per aggiungere due nuove varianti di stile del blocco. Tutto ciò che stiamo facendo qui è aggiungerne un altro, ma tramite un tema child questa volta.

Attivate il tema e quindi aggiungete un blocco pulsante nell'editor per vedere la nostra nuova creazione.

New block style variation added via a child theme

Avrete notato che ho ho avvolto il codice JavaScript all'interno di un'istruzione jQuery:

Questo non è in realtà strettamente necessario. Durante il test il codice sembrava funzionare bene senza il wrapper jQuery. Tuttavia, non ci sono ancora linee guida ufficiali su come aggiungere codice JavaScript che interagisca con il nuovo API dell'editor. Nel frattempo potrebbe essere consigliabile continuare a usare il metodo del wrapper jQuery sopra ma la scelta sta a voi.

Scaricare il codice

Come già accennato, il codice è disponibile per il download tramite GitHub dal link a destra della pagina.

Questo repo contiene il tema e due plugin che abbiamo sviluppato in questo tutorial. Quando avrete scaricato il contenuto, vedrete tre cartelle. Aggiungete la cartella di twentynineteen-child alla cartella del tema di .\wp-content\themes e le altre due cartelle plugin alla cartella dei plugin .\wp-content\plugins.

Attivate entrambi i plugin e il tema per rendere le variazioni di stile del blocco disponibili nel nuovo editor di WordPress.

Conclusione

Grazie per esservi uniti a me in questo tutorial! Spero che ora abbiate più di un'idea di cosa sono le variazioni di stile. Fatemi sapere nei commenti quali idee potreste avere per il loro utilizzo nei vostri progetti.

Sono sicuro che questa sta per essere una caratteristica ampiamente utilizzata del nuovo editor dai sviluppatori di plugin e anche dai sviluppatori di temi. In particolare, per gli sviluppatori di temi dà un sacco di possibilità per personalizzare gli stili del blocco per abbinare gli stili del tema.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.