Come creare modelli Gutenberg

Uno dei vantaggi della creazione di pagine e post con Gutenberg Blocks è la possibilità di salvarli come modelli. La creazione di modelli per Gutenberg è un ottimo modo per accelerare il processo di pubblicazione. Ci sono diversi modi per crearli. In questo articolo vedremo come creare modelli Gutenberg.

Tratteremo tre metodi per crearli:

1. Creazione di un layout da aggiungere alla tua libreria Gutenberg per esportare o clonare.
2. Creazione di un layout da copiare e incollare quando si desidera utilizzarlo.
3. Creazione di un layout da aggiungere come layout predefinito per pagine, post o tipi di post personalizzati.

Questi metodi ci consentono di riutilizzare solo i blocchi. Non verranno incluse altre impostazioni.

Perché creare modelli Gutenberg?

Dopo aver progettato il layout della pagina o del post, puoi salvare l'elenco dei blocchi con i relativi attributi da riutilizzare. Questo ti dà un vantaggio nella creazione dei tuoi contenuti perché non devi concentrarti sul layout. I modelli di blocco ti consentono di avere un design coerente.

Il modello di blocco può avere contenuto segnaposto. Possono essere statici o dinamici. È possibile definire lo stato predefinito di una sessione dell'editor. Puoi anche importare o esportare i tuoi modelli come file JSON, in modo da poter riutilizzare i tuoi progetti su più siti Web o condividerli con altri. Puoi bloccarli in modo che gli utenti possano aggiungere contenuti ma non modificare i blocchi.

Metodo 1: creare un modello di layout

I modelli di layout ti consentono di utilizzare la funzione di selezione multipla originariamente aggiunta per consentirci di spostare o eliminare più blocchi contemporaneamente.

Possiamo selezionare e aggiungere un blocco alla volta o più blocchi alla volta alla nostra libreria di blocchi riutilizzabili globali. Ciò semplifica l'esportazione come file JSON.

Esempio di modello di layout

Ho creato un layout semplice che posso utilizzare come post sul blog, recensione del prodotto, ecc. È facile salvarlo nella libreria per riutilizzarlo.

Posiziona il cursore sul primo blocco che desideri includere e trascina il mouse sull'ultimo blocco per evidenziarli.

Sopra il primo blocco, vedrai tre punti a sinistra. Fare clic sui puntini e selezionare Aggiungi a blocchi riutilizzabili .

La barra dei messaggi verde in alto mostrerà che il blocco è stato creato. Assegna al layout un nome che abbia senso per te e seleziona Salva .

Il messaggio nella barra verde mostrerà che il blocco è stato aggiornato. Hai creato il layout!

Per usarlo, crea una nuova pagina o un post e apri le opzioni (tre punti). In Strumenti , seleziona Gestisci tutti i blocchi riutilizzabili .

Questo mostra un elenco di tutti i tuoi blocchi. Qui puoi esportare e importare i tuoi blocchi come file JSON. I blocchi riutilizzabili sono globali. Se modifichi, modificherai l'originale. Per mantenere l'originale e creare un nuovo post utilizzando il layout, dovrai esportarlo, rinominarlo e importare il layout.

Post duplicati

Fortunatamente, abbiamo un'altra opzione. Un plugin chiamato Duplicate Post aggiunge una funzione di clonazione per i blocchi Gutenberg.

Nelle impostazioni Duplica post , abilita Blocchi .

Ora ho un'opzione di clonazione nella libreria Blocchi. Clonare il layout desiderato e quindi modificarlo. Ogni layout è globale, quindi dovrai clonare e modificare ogni volta che desideri utilizzare il layout.

Metodo 2: un modo alternativo semplice per creare un modello Gutenberg

Questo metodo è solo un semplice trucco, ma funziona. Innanzitutto, crea un layout che desideri riutilizzare completo di qualsiasi contenuto segnaposto.

Quindi, passa all'editor di codice. Per fare ciò, seleziona i tre punti nell'angolo in alto a destra. In Editor , seleziona Editor di codice .

Evidenzia e copia il codice.

Incolla il codice in un editor di testo e salvalo per il riutilizzo.

Quando sei pronto per utilizzare il modello, crea semplicemente un nuovo post, passa all'editor di codice e incolla il codice.

Ora ho un nuovo post a cui posso iniziare ad aggiungere contenuti.

Metodo 3: crea un tipo di post personalizzato

Un modello di blocco è un argomento. Puoi aggiungere l'argomento a pagine e post, oppure puoi creare un nuovo tipo di post. Il layout sarà legato a quel tipo di post, quindi quando crei quel tipo di post il layout viene visualizzato per impostazione predefinita.

Questo è ottimo per creare layout per diversi tipi di articoli. Ad esempio, potresti avere un tipo di post di recensione del prodotto, un tipo di post di riepilogo delle vacanze, un tipo di post di ricetta, ecc. e quando carichi il tipo di post ti fornisce automaticamente il layout ad esso associato.

La creazione del modello include:

• Impostazione dinamica dello stato predefinito.
• Registrandolo come layout predefinito per un tipo di post specifico.

Dichiarare il modello

Il modello stesso verrà dichiarato come un array di blockType. Questo viene fatto in JavaScript o in PHP. Come mostra il manuale dello sviluppatore Gutenberg, sarebbe simile a questo:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

O questo:

'template' => array(

array( 'block/name' ),

),

Registrazione del modello nei tipi di post personalizzati

Il tipo di post personalizzato può anche registrare il modello. Potrebbe assomigliare a questo:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

L'array identifica la provenienza del blocco e il nome del blocco. In questo esempio, l'array usa 'core/paragraph'. Ciò significa che il blocco proviene dal core di WordPress (al contrario di un plug-in) e il suo nome è paragrafo (che identifica quale blocco utilizzare).

Registrazione del modello in pagine e post

Se aggiungi il modello a pagine o post, verrà caricato automaticamente ogni volta che crei una pagina o un post. Preferisco aggiungerli a specifici tipi di post personalizzati perché hai più libertà creativa e semplifica il processo di creazione dei contenuti rendendo i modelli più facili da trovare.

Se decidi di aggiungerli a pagine o post, puoi utilizzare questo codice:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

Modelli di nidificazione

Puoi anche nidificare i modelli all'interno di blocchi Contenitore (ad esempio, blocchi di colonne). Questo viene fatto assegnando un modello nidificato al blocco stesso. Per esempio:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

Blocco del modello

Puoi bloccare il modello usando questo codice:

'template_lock' => 'all', // or 'insert' to allow moving

Modello di esempio con un tipo di post personalizzato

Voglio creare il tipo di post personalizzato chiamato Books che abbiamo visto sopra. Verrà visualizzato il modello di layout e includerà un'immagine, un'intestazione e un paragrafo.

Il codice verrà incollato nel file functions.php. Usa sempre un tema figlio quando aggiungi codice ai file PHP. In caso contrario, il codice verrà sovrascritto quando aggiornerai il tema.

Dovrai scrivere il codice a mano (ti consiglio di usare gli esempi di codice che ho mostrato). Un'opzione è creare il layout desiderato e quindi visualizzare il codice (fare clic sui tre punti nell'angolo in alto a destra e selezionare Editor del codice nella sezione Editor ). Questo mostrerà i blocchi con i loro attributi dal layout che hai già creato in modo che tu possa sapere in anticipo come disporre i blocchi nel tuo codice.

Vai in Funzioni del tema (functions.php) e incolla il codice. Ho incollato il codice in fondo. Questo è un sito di prova e non ho intenzione di mantenere il codice, quindi non ho usato un tema figlio.

Un nuovo tipo di post viene aggiunto al menu della dashboard chiamato Libri. Include un elenco e un collegamento Aggiungi nuovo . Ho fatto clic su Aggiungi nuovo e il mio nuovo modello viene aggiunto all'editor dove posso semplicemente iniziare ad aggiungere contenuto.

I blocchi vengono posizionati nell'ordine in cui appaiono nel codice e includono gli attributi a cui sono stati assegnati. Puoi inserire tutti i blocchi nel codice che desideri e assegnare loro gli attributi che desideri. Puoi creare tutti i tipi di post personalizzati che desideri e ognuno può avere un layout predefinito unico. Questo esempio include il testo segnaposto.

Pensieri finali

Questo è il nostro sguardo su come creare modelli Gutenberg. Tutti e tre i metodi funzionano alla grande. I modelli riutilizzabili o uno dei metodi di duplicazione potrebbero essere una scelta migliore se non desideri creare nuovi tipi di post personalizzati. Mi piacciono i tipi di post personalizzati perché semplifica la scelta del tipo di contenuto che desideri creare e i modelli sono preordinati per te.

I tipi di post personalizzati sono facili da realizzare se hai dimestichezza con il codice e sono i più convenienti da usare all'interno di WordPress. Il principale svantaggio nella creazione di modelli da aggiungere al tuo functions.php è che stai creando il layout nel codice anziché nell'editor Gutenberg, quindi non è visivo.

Mi piace che tu possa aggiungere contenuti prefabbricati ai tuoi modelli. Questo è ottimo per il testo segnaposto per mostrare ai contributori quali informazioni vanno dove. I modelli riutilizzabili sono un ottimo modo per velocizzare e semplificare il processo del flusso di lavoro e sono un ottimo modo per creare layout di pagine e post da condividere.

Vogliamo sentire da voi. Hai creato modelli Gutenberg? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in primo piano tramite Nadia Snopek / shutterstock.com