Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:

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

Ora è un momento emozionante per gli sviluppatori di WordPress con il rilascio ufficiale della versione 5.0 proprio dietro l'angolo. Questo segnerà il debutto del nuovo editor: nome in codice Gutenberg. Se avete a che fare con WordPress su base regolare, sia che siate uno sviluppatore o un utente, allora probabilmente capirete perché questo è una grande notizia.

Non tutti sono impazienti della nuova release però, poiché porta un'esperienza di editing molto diversa su WordPress. C'è un po' di incertezza su come questo influenzerà il più ampio ecosistema di WordPress. Tuttavia, il nuovo editor ha il potenziale per rivoluzionare come creare contenuti per i siti WordPress. E anche se può incontrare una resistenza iniziale quando tocca gli utenti in massa, penso che in ultima analisi, potrebbe dare una connessione molto più tangibile con i vostri contenuti in un modo che non è possibile con il classico editor TinyMCE.

Potete provare il nuovo editor prima del previsto rilascio di WordPress 5.0 installando il plugin di Gutenberg dal repository dei plugin di WordPress. Se non avete avuto ancora l'occasione di provarlo, allora vi raccomando vivamente di farlo, per avere un'anteprima della futura esperienza di editing in WordPress!

Creare contenuti nel nuovo editor è interamente basato sui blocchi. Ogni pezzo di contenuto che aggiungete all'editor è un blocco. Questo include tutti gli elementi preferiti come slider, paragrafi, pulsanti, elenchi, immagini, testimonianze e così via. Una volta aggiunto l'editor potete configurare le impostazioni che controllano l'aspetto e il comportamento del blocco. Questi possono essere modificati tramite il blocco stesso o il pannello di ispezione (che si trova a destra della schermata dell'editor). Le impostazioni del blocco a volte vengono duplicate in entrambe le posizioni, ma questo varia da blocco a blocco.

Quasi tutti i blocchi hanno però un'opzione nel pannello di ispezione per aggiungere manualmente uno o più nomi di classe CSS per consentire un'ulteriore personalizzazione del blocco. Questo può essere molto utile se desiderate bypassare gli stili di un blocco core o di un blocco di terze parti.

Additional CSS Class text field

Mentre questo funziona bene, sarebbe utile estendere questo comportamento e consentire l'aggiunta di opzioni di personalizzazione del blocco tramite una serie di scelte di stili predefiniti. Questo è esattamente ciò che le variazioni di stile del blocco ci danno, e ci focalizzeremo esclusivamente su di loro nel corso di questa esercitazione.

Prerequisiti

Daremo anche un'occhiata a come aggiungere variazioni di stile del blocco personalizzati ai vostri blocchi, nonché come estendere i blocchi esistenti, quindi per proseguire avrete bisogno idealmente di avere familiarità con le nozioni di base di sviluppo de plugin dii WordPress e come sono stati creati i blocchi.

Niente panico però, se avete bisogno di un corso intensivo allora date un'occhiata al mio tutorial in quattro parti sulla creazione dei blocchi personalizzati. Copre praticamente tutto quello che dovete sapere per questo tutorial — oltre alle variazioni di stile del blocco, il focus di questo particolare tutorial!

Inoltre, se volete proseguire con il codice e provare voi stessi, allora avrete bisogno un server di sviluppo locale per l'esecuzione di WordPress (es. WAMP, MAMP o simili) e un editor per il codice.

Contesto

L'API di variazioni di stile del blocco è stato introdotto al progetto Gutenberg nella v3.2 del plugin e vi consente di applicare stili alternativi del blocco direttamente tramite l'interfaccia dell'editor.

Per ottenere lo stesso risultato prima delle variazioni di stile dei blocchi, è stato necessario eseguire manualmente le classi CSS personalizzate nel campo di testo di Classe CSS aggiuntiva nel pannello di ispezione del blocco, reperibile nella sezione Avanzata.

Se siete interessati alla proposta originale delle variazioni di stile del blocco allora potete leggere tutti i dettagli nella pull request nel repository ufficiale di Gutenberg.

Eventuali variazioni di stile definiti per un blocco sono accessibili direttamente nella barra degli strumenti del blocco. Selezionate il blocco, quindi fare clic sull'icona in alto a sinistra della barra degli strumenti per visualizzare il riquadro Stili del blocco.

Block Styles pane

Ricordate in precedenza quando ho detto che alcune impostazioni dei blocchi sono accessibili direttamente sul blocco e nel pannello di ispezione? Beh questo è esattamente il caso delle variazioni di stile del blocco! Assicuratevi che il blocco sia selezionato e date un'occhiata al pannello di ispezione.

Block style variations in the block inspector

Questo è per convenienza e potete scegliere le variazioni di stile dalla posizione che si adatta meglio. Per esempio sugli schermi più grandi potete optare per modificare gli stili del blocco tramite il pannello di ispezione poiché vi permette di scambiare gli stili tramite un clic del mouse. Ma quando siete sui dispositivi di piccole dimensioni potreste voler nascondere il pannello di ispezione e cambiare gli stili solo tramite la barra degli strumenti blocco.

Supporto del blocco core

Pochi blocchi core attualmente supportano le variazioni dello stile del blocco inclusi:

  • Pulsante
  • Citazione scritta con caratteri grandi
  • Citazione
  • Separatore
  • Tabella

Sono sicuro che il supporto verrà aggiunto per altri blocchi core in futuro non appena questa caratteristica sarà adottata più ampiamente. È così flessibile, che sono sicuro che un sacco di utenti si aspetteranno una selezione di opzioni di stile predefinite per la maggior parte dei blocchi. Una volta che avete usato le variazioni di stile del blocco è facile capire perché questo potrebbe essere il caso.

Potete aggiungere varianti di stile del blocco anche ai blocchi personalizzati naturalmente. Esploreremo i dettagli di implementazione specifica in seguito.

Implementare le variazioni di stile del blocco

Esistono due metodi per l'implementazione delle variazioni di stile del blocco personalizzato. Se avete accesso alla definizione del blocco, allora potete specificare le varianti di stile del blocco direttamente all'interno della funzione di registerBlockType() tramite la proprietà style.

Per esempio, ecco com'è la definizione di proprietà degli stili del blocco del pulsante core.

Qui, le tre nuove varianti di stile del blocco sono registrate. Notate che stile Rounded è anche impostato come predefinito.

Tuttavia, se non avete accesso al codice sorgente del blocco allora c'è un altro approccio che potete seguire. In Gutenberg 3.4 sono state aggiunte due nuove funzioni per registrare e annullare la registrazione delle variazioni di stile del blocco all'esterno della definizione del blocco.

Per registrare una variazione di stile del blocco personalizzato utilizzate la funzione registerBlockStyle() come segue:

Questa aggiunge una nuova variante di stile del blocco denominata custom-button-style per il blocco del pulsante core. Ora quando viene inserito un pulsante di blocco nell'editor vedrete la nuova variante di stile del blocco disponibile.

Custom block style variation available

Non appena è selezionata la variazione di stile blocco aggiunge una classe CSS is-style-custom-button-style al campo di testo di Classe CSS aggiuntiva nel pannello di ispezione del blocco.

CSS class added to Additional CSS Class text field

Questo innesca un aggiornamento dell'output del blocco e la classe viene aggiunta al markup HTML.

Block markup showing the style variation class added

Potreste chiedere dove aggiungete la funzione  registerBlockStyle() nel vostro codice. Non vi preoccupate ne daremo un esempio completo nel prossimo post e sarete in grado di scaricare il codice del plugin finale così potete provarlo voi stessi.

Un piccolo gotcha!

Quando inserite prima un blocco che supporta varianti di stile del blocco è interessante notare che nessuna classe CSS è effettivamente aggiunta al markup del blocco finché non cliccate in modo specifico su una variazione di stile del blocco, anche se uno è indicato come selezionato per impostazione predefinita.

Provatelo.

Inserite un nuovo blocco pulsante nell'editor e aprite le opzioni di variazione di stile del blocco. Dovreste vedere l'opzione Rounded selezionata per impostazione predefinita. Se aprite la sezione Avanzate nella finestra di ispezione del blocco nessuna classe CSS non è stato ancora aggiunta al campo di testo. E così nessuna classe CSS verrà inserita nel markup dei blocchi. Date un'occhiata al codice HTML di output del blocco del pulsante nell'editor come conferma.

Ora tornate alle impostazioni della variazione dello stile del blocco del vostro blocco pulsante e scegliete l'opzione predefinita (quella selezionata) o una qualsiasi delle altre opzioni di stile del blocco. Vedrete immediatamente che la classe CSS viene aggiunta al campo di testo e al markup del contenitore dei blocchi della Classe CSS aggiuntiva. Anche le regole CSS personalizzate che sono state definite per la classe personalizzata si applicheranno, non appena la variazione di stile del blocco viene selezionata.

Questo comportamento è un po' confusionario a una prima esposizione poiché intuitivamente vi aspettereste che la classe CSS sia aggiunta automaticamente alla variazione di stile del blocco che è selezionata come predefinita.

Conclusione

Abbiamo imparato cosa sono le variazioni di stile del blocco e perché sono un'utile aggiunta all'esperienza di editing del blocco. È stata dimostrata un'implementazione di base di una variazione di stile del blocco.

Nel prossimo articolo esploreremo esempi completamente funzionanti di come registrare i propri stili del blocco e come collegare il CSS attraverso un plugin e anche attraverso un tema child.

Daremo anche un'occhiata a come annullare la registrazione degli stili del blocco e come impostare quale variante di stile è selezionata per impostazione predefinita, quando un blocco viene prima inserito nell'editor.

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.