Registra un modello di blocco nell’editor blocchi di WordPress (Gutenberg)

I modelli di blocco nell’editor di blocchi di WordPress (Gutenberg) sono una potente funzionalità che ti consente di creare layout vari con il minimo sforzo.

Usando register_block_patternte puoi creare molto rapidamente uno schema di blocco per te o per i tuoi clienti.

Prerequisiti

• Installazione WordPress
• Editor di codice

Crea il tuo modello di blocco

Costruisci modelli di blocchi dai blocchi che hai registrato sul tuo sito. Questi potrebbero essere blocchi principali o un numero qualsiasi di blocchi di terze parti o personalizzati.

Inizia utilizzando l’editor di WordPress per creare un layout a blocchi. Puoi utilizzare le impostazioni per renderlo complesso o semplice come preferisci.

In questo esempio lo terremo semplice e creeremo semplicemente uno schema a blocchi che è strutturato come segue:

• Blocco di gruppo
  • Intestazione
  • Paragrafo
  • Colonne
    • Colonna 1
      • Intestazione
      • Paragrafo
    • Colonna 2
      • Intestazione
      • Paragrafo

Una volta che hai creato il tuo schema di blocco, copia semplicemente il codice che è stato generato per te.

Copia il codice del modello di blocco

Per fare ciò, vai ai tre punti in alto a destra dell’editor (etichettato Opzioni) e seleziona "Editor di codice". Questo mostrerà l’HTML dietro il pattern di blocco che hai appena creato.

Copia questo codice negli appunti.

Registra il modello di blocco

Incolla questo codice dell’editor di blocchi nel tuo editor di codice. Se non sei sicuro di dove, puoi usare il functions.phpdel tuo tema.

Assicurati di passarlo in una variabile inserendo virgolette singole (') attorno al testo incollato, in questo modo:

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

Potrebbe essere necessario eseguire un po ‘di escape dei personaggi, a seconda della complessità del tuo schema di blocco.

Quindi dobbiamo passare questo nella register_block_patternfunzione:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Questo è tutto, il modello di blocco è registrato.

Abbattimentoregister_block_pattern

• Namespace — (wholesomecode/example-block-pattern) è lo spazio dei nomi del pattern di blocco. Assicurati che questo sia univoco per il tuo modello di blocco. Se dovessimo annullare la registrazione del pattern di blocco, questa è la stringa di cui avremo bisogno.
• Categorie — Questa è la categoria del modello di blocco in cui apparirà il modello di blocco, quando inseriamo il nostro modello di blocco. Possiamo anche aggiungere le nostre categorie.
• Contenuto — Questo è l’HTML che genera il pattern di blocco. Questo esempio usa la variabile che abbiamo creato dall’editor.
• Descrizione — Una descrizione del modello di blocco.
• Parole chiave: parole chiave che possono essere utilizzate per cercare il modello di blocco.
• Titolo — Il titolo del modello di blocco.
• Larghezza finestra — La finestra del modello di blocco, utilizzata per l’area di anteprima.

Inserisci il modello di blocco

Per inserire lo schema di blocco, usa semplicemente il segno più in alto a sinistra nell’editor e seleziona lo schema di blocco.

Seleziona la categoria in cui hai registrato il tuo modello e dovrebbe apparire.

Inserimento del motivo a blocchi

In alternativa puoi cercare per parole chiave che hai registrato.

Per registrare una categoria di blocco, basta usare la register_block_pattern_categoryfunzione.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

Quindi puoi utilizzare la categoria che hai appena registrato nel codice del modello di blocco, in questo modo:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Ora quando arrivi a trovare il tuo modello di blocco, si troverà nella tua categoria personalizzata:

Categoria modello blocco personalizzato

Ora puoi raggruppare tutti i modelli di blocco personalizzati che hai appena creato per il tuo cliente insieme in un unico posto.

• Hai bisogno di qualcosa di più statico? Prova invece a registrare un modello di blocco
• Hai bisogno di qualcosa che si applichi ai blocchi figlio? Prova a registrare un modello InnerBlocks