La guida completa dei modelli a blocchi di Gutenberg (I)
Pubblicato: 2020-12-23La scorsa settimana Matt Mullenweg, come da tradizione ogni anno, ha tenuto la sua presentazione (in questo caso virtuale), State of The Word , in cui ha presentato un breve riassunto dello stato attuale e delle novità di WordPress.
Matt è più che mai concentrato sul farci innamorare dell'esperienza fornita dall'editor di blocchi di Gutenberg. Una delle nuove funzionalità che Matt ha evidenziato, fornita con la versione 5.5 di WordPress, sono i modelli di blocco . Ho pensato che sarebbe stato interessante fare questa guida completa su di loro.
La guida è divisa in tre post e analizzeremo i seguenti argomenti:
- Introduzione ai modelli a blocchi
- Inserisci un motivo su una pagina
- Modelli predefiniti e altri disponibili nelle directory
- Aggiungi modelli disponibili nelle directory del tuo sito
- Come creare un modello da zero
- Come creare un pattern se non sei uno sviluppatore
- Come convertire blocchi riutilizzabili in schemi di blocco
- Argomenti che utilizzano schemi a blocchi
- Documentazione ufficiale.
Quindi, senza ulteriori indugi, iniziamo!
1. Introduzione ai modelli di blocco
Quando è arrivato Gutenberg, il grande cambiamento rispetto al classico editor che avevamo in WordPress è stata l'introduzione del concetto di "blocco". Tutto doveva essere un blocco: il titolo del post, i suoi paragrafi, gli elenchi, le immagini... ognuno di essi era un blocco, con le proprie proprietà di personalizzazione per impostare la dimensione del carattere, il titolo, l'allineamento e così via.
I blocchi sono diventati rapidamente più sofisticati e ora abbiamo gallerie di immagini, blocchi multimediali/di testo o persino blocchi contenenti altri blocchi.
Allo stesso tempo, molti sviluppatori hanno anche fornito un ampio set di blocchi con funzionalità uniche in modo da poter migliorare il design delle tue pagine. Ad esempio, in Nelio abbiamo sviluppato Nelio Compare Images per confrontare due immagini con un semplice dispositivo di scorrimento:
Non solo c'è stata un'esplosione di blocchi che possono essere trovati nei plugin e nei temi, ma anche le loro capacità si sono evolute con le diverse versioni di WordPress. Pertanto, puoi attualmente creare blocchi riutilizzabili e, con essi, persino creare una pagina o un modello di post.
Continuando con l'idea di avere dei design predefiniti che possono essere riutilizzati velocemente e facilmente, con WordPress versione 5.5 sono arrivati i block patterns. L'idea di un pattern a blocchi è molto semplice: sono sezioni predefinite o frammenti formati da un gruppo di blocchi che puoi utilizzare nella creazione di pagine e post. Questi modelli possono essere qualcosa di semplice come una sezione che mostra due pulsanti o una sezione di prezzo con disegni accattivanti e complessi.
2. Inserisci un motivo su una pagina
Partiamo dalle basi, come si inserisce un nuovo pattern in una pagina? Molto facile! Come per i blocchi, per inserire un pattern devi solo cliccare il pulsante + in alto a sinistra del tuo editor e, invece di aggiungere un blocco, selezionare la scheda Patterns . Lì vedrai un piccolo menu a tendina con i tipi di pattern che puoi selezionare, quelli predefiniti di WordPress, quelli del tema che hai installato e qualsiasi altro che hai installato con un plugin.
Seleziona lo schema che ti piace di più e guarda come vengono inseriti nella tua pagina l'insieme di blocchi che lo compongono:
Dopo aver inserito il pattern, puoi modificare ciascuno dei blocchi come hai fatto finora. Inoltre se i blocchi di quel pattern sono raggruppati, puoi anche modificare le proprietà del gruppo nel suo insieme. Semplice, vero?
3. Pattern predefiniti e altri pattern da directory di terze parti
La versione WordPress 5.5 è dotata di una serie di schemi di blocco predefiniti che ora puoi utilizzare per creare le tue pagine. Devi solo fare clic sul pulsante + che ho menzionato sopra per vedere i modelli disponibili sul tuo sito.
Inoltre, il tuo tema attivo potrebbe anche definire i propri schemi di blocco. Ad esempio, il tema WordPress Twenty Seventeen o Twenty Twenty-One include alcuni modelli di blocchi, così come quelli di GoDaddy e Genesis Blocks, per citare un paio di esempi.
Dopo il rilascio di WordPress 5.0 abbiamo avuto un'esplosione di blocchi e ora stiamo vedendo lo stesso risultato se blocchi pattern: puoi scaricare e installare blocchi e pattern sul tuo sito web molto facilmente, come spiegherò più avanti. Qui hai due reti di blocchi e pattern a tua disposizione, anche se sono sicuro che presto ce ne saranno altre:
- Shareablock Patterns di Jeffrey Carandang – Un fantastico sito Web in cui puoi condividere e ottenere un sacco di blocchi, modelli e modelli da scaricare e installare sul tuo sito.
- Gutenberg Hub di Munir Kamal, dove troverai anche una serie di blocchi, modelli e schemi.
C'è anche il plug-in Redux Framework , che offre una libreria con oltre 1000 blocchi, modelli e modelli di terze parti (inclusi quelli disponibili nelle directory sopra) da inserire nelle tue pagine. Il plug-in ti consente di scaricare fino a 5 modelli gratuiti e quindi puoi eseguire l'aggiornamento alla versione a pagamento.
4. Aggiungi modelli disponibili nelle directory del tuo sito
Come ho già accennato, puoi utilizzare il plug-in Redux Framework per aggiungere facilmente pattern da Shareablock e GutenbergHub. Se sei un designer professionista di siti Web WordPress, sicuramente è una buona opzione trovare sempre tutti i modelli che desideri molto rapidamente. Ma puoi anche utilizzare nuovi modelli di blocco senza richiedere un plug-in premium. Vediamo come.
Aggiungi un modello Shareablock
Nel caso di Shareablock, per installare un pattern (e ovviamente un blocco o un template), devi solo selezionarlo dal web e cliccare sul pulsante Download Now .
La prima volta ti verrà chiesto un indirizzo email in modo da poter ottenere un nome utente e una password.
Nell'e-mail c'è un link per accedere al loro sito web; accedi e ora sarai in grado di scaricare il modello che ti interessa. Selezionalo e fai nuovamente clic su Scarica ora , in modo da ricevere il modello di blocco nella tua e-mail.
Dopo aver cliccato sul link fornito nell'email, puoi accedere al web per scaricare il file .json del pattern. Una volta scaricato, trascinalo nell'editor dei blocchi di WordPress e vedrai automaticamente tutti i blocchi che compongono il pattern.
È un processo ingombrante, ma porta a termine il lavoro. Sfortunatamente, noterai che il modello di blocco non viene visualizzato nella tua libreria...
Aggiungi un modello di hub Gutenberg
L'aggiunta di un pattern da Gutenberg Hub è più semplice. Come prima, seleziona prima il motivo che vuoi copiare.
A destra del modello, vedrai il pulsante Copia codice . Fai clic sul pulsante per copiarlo negli appunti, quindi incollalo nel tuo editor Gutenberg. Questo incollerà il blocco nel tuo editor, ma salterà la libreria.
Ma aspetta! Non così in fretta. Se desideri personalizzare completamente i blocchi risultanti, Munir Kamal consiglia di installare il loro plug-in gratuito, EditorPlus, che aggiunge nuovi blocchi all'editor ed estende Gutenberg con controlli di progettazione avanzati, caratteri, icone, divisori, animazioni e molti altri caratteristiche.
Se lo fai, vedrai nella barra laterale destra dell'editor che hai controlli avanzati per modificare il design del modello copiato.
Ora sai cosa sono i pattern a blocchi, dove trovarli e come inserirli nel tuo sito Web per creare fantastici design. Non perdere il prossimo post in cui imparerai come creare i tuoi modelli!
Immagine in primo piano di Raul Cacho Oses su Unsplash .