Registra un modello di blocco per l’editor di blocchi di WordPress (Gutenberg)
Nella mia guida precedente ho esplorato il potere dei modelli a blocchi. I modelli di blocco sono simili, ma invece di affidarsi al tuo cliente per inserire i modelli di blocco nell’editor, fornisce loro un layout completo non appena inseriscono un nuovo post.
Prerequisiti
- Installazione WordPress
- Editor di codice
Crea il tuo modello di blocco
In questo esempio inserirò lo stesso schema di blocco che ho creato nella mia guida precedente, ma come modello di blocco.
In quella guida abbiamo copiato l’HTML dell’output dell’editor. In questa guida, faremo qualcosa di leggermente diverso e costruiremo una serie di spazi dei nomi, proprietà e contenuto dei blocchi.
Nella sua forma più semplice un modello di blocco assomiglia un po’ a questo:
$block_template = [
[ 'core/heading', [ 'level' => 2, 'content' => 'Example Block Template' ] ],
[ 'core/paragraph', [ 'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],
];
Come puoi vedere, è un array, che contiene blocchi nel seguente schema:
- Blocca spazio dei nomi
- Attributi di blocco
Tuttavia, vogliamo utilizzare i blocchi nidificati, quindi passeremo un terzo parametro a questo array di blocchi, che è innerBlocks.
Vuoi solo il posizionamento del blocco?
Nota che puoi lasciare gli attributi vuoti, per fornire semplicemente i blocchi senza contenuto impostato.
L’array per creare lo stesso blocco che abbiamo creato nella guida del modello di blocco, abbiamo bisogno di un array più complesso, in questo modo:
$block_template = [
[
'core/group',
[],
[
[
'core/heading',
[
'level' => 2,
'content' => 'Example Block Template',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
]
],
[
'core/columns',
[],
[
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 1',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
]
],
]
],
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 2',
]
],
[
'core/paragraph',
[
'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
]
],
]
],
],
],
]
]
];
Registra il modello di blocco
Registrazione di un modello di blocco per un tipo di post esistente
Per registrare un modello di blocco per un tipo di post esistente (come il posttipo di post) puoi utilizzare il codice seguente per sovrascrivere l’oggetto tipo di post.
function register_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );
Questo codice imposta semplicemente il modello e (facoltativamente) il [template_lock](https://wholesomecode.ltd/#template-lock)tipo.
Il codice completo sarebbe simile a questo:
function register_block_template() {
$block_template = [
[
'core/group',
[],
[
[
'core/heading',
[
'level' => 2,
'content' => 'Example Block Template',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
]
],
[
'core/columns',
[],
[
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 1',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
]
],
]
],
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 2',
]
],
[
'core/paragraph',
[
'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
]
],
]
],
],
],
]
]
];
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );
Registrazione di un modello di blocco per un nuovo tipo di post
Se stai registrando un tipo di post, puoi passare il modello templatenell’argomento di register_post_type.
Puoi anche passare l’ [template_lock](https://wholesomecode.ltd/#template-lock)argomento in register_post_type.
Blocco modello
L’ template_lockargomento può fare diverse cose a seconda dell’argomento che gli viene passato. Questi sono elencati nella guida allo sviluppo di Gutenberg come:
all— impedisce tutte le operazioni. Non è possibile inserire nuovi blocchi, spostare blocchi esistenti o eliminare blocchi.insert— impedisce l’inserimento o la rimozione di blocchi, ma consente di spostare i blocchi esistenti.
Il blocco del modello non funziona sui blocchi nidificati
Il blocco del modello funziona solo sui blocchi di livello superiore. Usa questo a tuo vantaggio creando un layout con intestazioni fisse, immagini e paragrafi e un’area di gruppo in cui il tuo cliente può inserire qualsiasi contenuto gli piace.
Puoi anche creare un modello di blocco nidificato personalizzato con InnerBlocks.
Puoi anche limitare i blocchi che puoi inserire in determinati tipi di post.
Usa il modello di blocco
Per utilizzare il modello di blocco basta creare un nuovo post (o un tipo di post personalizzato a seconda di come hai configurato le cose). Il modello verrà inserito e ora avrai aree di contenuto fisse sulla tua pagina.
L’inserimento di un post mostra il modello di blocco
Puoi limitare i blocchi disponibili per vari tipi di post utilizzando il codice seguente.
function filter_allowed_block_types( $allowed_block_types, $post) {
if ($post->post_type !== 'post') {
return $allowed_block_types;
}
$allowed_block_types = [
'core/column',
'core/columns',
'core/group',
'core/heading',
'core/paragraph',
];
return $allowed_block_types;
}
add_filter( 'allowed_block_types', 'filter_allowed_block_types', 10, 2 );
Il codice sopra limita i blocchi consentiti nel posttipo di post a quanto segue:
-
Colonna (
core/column) -
Colonne (
core/columns) -
Gruppo (
core/group) -
Intestazione (
core/heading) -
Paragrafo (
core/paragraph) -
Hai bisogno di qualcosa di più flessibile? Prova invece a registrare un pattern di blocco
-
Hai bisogno di qualcosa che si applichi ai blocchi figlio? Prova a registrare un modello InnerBlocks