La guida completa dei modelli a blocchi di Gutenberg (III)

Questa è la terza e ultima parte della guida completa sui modelli di blocco che include i seguenti argomenti:

1. Introduzione ai modelli a blocchi
2. Inserisci un motivo su una pagina
3. Modelli predefiniti e altri disponibili nelle directory
4. Aggiungi modelli disponibili nelle directory del tuo sito
5. Come creare un modello da zero
6. Come creare un pattern se non sei uno sviluppatore
7. Come trasformare i blocchi riutilizzabili in schemi di blocchi
8. Temi che utilizzano schemi a blocchi
9. Documentazione ufficiale.

Nella prima parte abbiamo visto i primi 4 punti di tutti gli argomenti trattati nella guida: cos'è un pattern a blocchi, come inserire pattern predefiniti nelle tue pagine e dove trovarlo e come copiare pattern che sono disponibili in alcune directory . Nella seconda parte abbiamo visto in dettaglio il punto 5: come possiamo creare un pattern da zero usando il codice. E in quest'ultimo post, esamineremo gli ultimi 4 punti: come possiamo creare un pattern senza essere uno sviluppatore, come possiamo convertire blocchi riutilizzabili in pattern di blocco, quali temi usano pattern di blocco e, infine, dove puoi trovare documentazione ufficiale sui modelli.

6. Come creare un modello se non sei uno sviluppatore

Nonostante abbiamo già visto nel post precedente i passaggi che dovevi seguire per creare un pattern con codice, a questo punto vedremo che puoi creare pattern senza essere uno sviluppatore. E sì, lo faremo con un plugin. In effetti, esiste più di un plug-in per la creazione di pattern:

• Block Patter Builder di Justin Tadlock,
• BlockMeister – Block Patter Builder di BlockMeister,
• Blocchi Gutenberg del generatore di pagine – CoBlocks di GoDaddy

Tutti e tre funzionano in modo simile, con alcune piccole differenze. Dopo aver installato uno di essi, nel menu di amministrazione di WordPress vengono visualizzate nuove opzioni in modo da poter creare un nuovo pattern e gestire l'elenco dei pattern creati.

Nel caso del plug-in Block Patterns Builder (cioè l'immagine a sinistra), il menu Block Patterns ha due opzioni: una per creare un nuovo pattern e un'altra per elencare e modificare pattern esistenti. Nel caso del plugin BlockMeister (raffigurato nell'immagine centrale), aggiunge anche una terza opzione per gestire le categorie dei pattern. E nel caso di CoBlock (mostrato nell'ultima immagine), il suo menu appare sotto Aspetto .

In tutti e tre i plugin, la creazione di un nuovo pattern apre lo stesso editor che usi per modificare qualsiasi pagina o post. Basta dare un nome al modello e definire i blocchi che vuoi che abbia. Quando il tuo modello è pronto, salvalo.

La schermata precedente mostra l'editor del modello di blocco fornito dal plug-in BlockMeister. Come puoi vedere, offre un sacco di proprietà aggiuntive nella barra laterale destra: nome, slug, descrizione, larghezza del pattern e categorie. Il plugin Justin Tadlock, invece, non permette di aggiungere la categoria. E CoBlocks ti consente anche di aggiungere le proprietà aggiuntive dei modelli.

Con uno qualsiasi dei tre plugin, dopo aver salvato il tuo pattern, diventerà disponibile facendo clic sul pulsante + nell'editor di post e pagine in modo da poterlo inserire quando ne hai bisogno.

Come puoi vedere, è molto facile creare i modelli che desideri avere a disposizione nei design delle tue pagine, a condizione che tu stia utilizzando il plug-in giusto per questo.

7. Come trasformare i blocchi riutilizzabili in schemi di blocchi

Se usi Gutenberg da un po' di tempo e ci stai progettando pagine, scommetto che hai anche creato dei blocchi riutilizzabili per replicare un certo design su più pagine. Almeno l'ho fatto! Ricordo che la prima volta che ho sentito parlare di pattern, ho pensato che fossero più o meno gli stessi dei blocchi riutilizzabili... ma non lo sono: ci sono alcune differenze rilevanti tra i due concetti.

Un blocco riutilizzabile è un blocco (o gruppo di blocchi) che può essere inserito su pagine diverse, il cui contenuto è lo stesso su tutte. Cioè, se lo modifichi in un secondo momento, tutte le sue istanze dovrebbero essere aggiornate. Pertanto, se vuoi che un blocco riutilizzabile sia diverso dal resto, devi prima convertirlo in un blocco normale.

Un motivo a blocchi, d'altra parte, è progettato per essere personalizzato: funge da design di base che dovresti modificare dopo averlo inserito. Le opzioni sono illimitate, ovviamente. L'idea del modello è di fornire un punto di partenza su come combinare i blocchi per renderli attraenti.

Se hai creato blocchi riutilizzabili con l'idea di convertirli in blocchi normali e poi personalizzarli convenientemente, ha più senso convertire questi blocchi in schemi di blocchi. Come possiamo farlo?

Il plug-in Reusable Block Extended di JB Audras ci fornisce questa funzionalità. Vediamo come lo facciamo.

Dopo aver installato il plugin, apparirà un'opzione di menu per gestire i blocchi riutilizzabili. Se fai clic su Tutti i blocchi riutilizzabili vedrai l'elenco dei blocchi che hai definito.

Come puoi vedere nell'immagine sopra, l'elenco dei blocchi riutilizzabili mostra due blocchi e, per ognuno di essi, ti dice dove vengono utilizzati, lo shortcode e la funzione PHP in modo da poterli utilizzare, e un pulsante per puoi convertirlo in un pattern a blocchi.

Dopo aver fatto clic sul pulsante Converti in modello di blocco , il modello sarà stato creato per te e sarà disponibile nel tuo editor nella categoria Convertito da blocchi riutilizzabili .

8. Temi che utilizzano schemi a blocchi

Al momento in cui scrivo, ci sono già 14 temi con schemi di blocco personalizzati nella directory dei temi di WordPress.org e l'elenco sta crescendo rapidamente.

• Twenty Twenty-One versione 1.0 di WordPress.org
• C9 Starter versione 2.4.4 di covertnine
• C9 Work versione 2.3.1 di covertnine
• Seedlet versione 1.1.2 di Automattic
• ExS versione 0.9.0 di exstheme
• Cordero Versione 1.2.2 di uxl
• Bigwigs versione 0.7.1 di Dinev Dmitry
• emulsione Versione 1.6.9 di nobita
• Twenty Twenty versione 1.6 di WordPress.org
• VW Health Coaching Versione 0.6.5 di VW THEMES
• Twenty Nineteen versione 4.9.6 di WordPress.org
• Scritti Versione 1.3.0 di Dinev Dmitry
• Twenty Seventeen versione 2.5 di WordPress.org
• Twenty Sixteen versione 2.3 di WordPress.org

Colgo l'occasione per menzionare che se sei uno sviluppatore di temi e vuoi eliminare i blocchi predefiniti (modelli di blocchi core) che sono presenti in WordPress 5.5, puoi farlo con il seguente codice:

 remove_theme_support( 'core-block-patterns' );

9. Documentazione ufficiale

Infine, ecco alcuni link utili sui modelli di blocco:

• Per l'utente finale – Video introduttivo per bloccare i pattern per capire cosa sono i pattern, come accedervi, come aggiungerli nei post e nelle pagine e capire come personalizzarli per i tuoi contenuti. Questo video è un workshop pubblicato dal WordPress Training Team.
• Per l'utente finale: documentazione sui modelli a blocchi creata dal team di documentazione.
• For Developers – Pagina Block Patterns nella documentazione per Block API, pubblicata dal Gutenberg Team e che vi ho già raccontato nel post precedente.

E questo è tutto! Spero che questa guida ti sia stata utile. Se pensi che manchino delle informazioni, sentiti libero di dirmelo nella sezione commenti qui sotto.

Immagine in primo piano di Patrick Hendry su Unsplash .