Enregistrer un modèle de bloc pour l’éditeur de blocs WordPress (Gutenberg)
Dans mon guide précédent, j’ai exploré la puissance des modèles de blocs. Les modèles de blocs sont similaires, mais au lieu de compter sur votre client pour insérer des modèles de blocs dans l’éditeur, cela leur donne une mise en page complète dès qu’ils insèrent un nouveau message.
Conditions préalables
- Installer WordPress
- Éditeur de codes
Créez votre modèle de bloc
Dans cet exemple, je vais insérer le même motif de bloc que j’ai créé dans mon guide précédent, mais en tant que modèle de bloc.
Dans ce guide, nous avons copié le code HTML de la sortie de l’éditeur. Dans ce guide, nous allons faire quelque chose de légèrement différent et créer un tableau d’espaces de noms de blocs, de propriétés et de contenu.
Dans sa forme la plus simple, un modèle de bloc ressemble un peu à ceci :
$block_template = [
[ 'core/heading', [ 'level' => 2, 'content' => 'Example Block Template' ] ],
[ 'core/paragraph', [ 'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],
];
Comme vous pouvez le voir, il s’agit d’un tableau contenant des blocs dans le modèle suivant :
- Espace de noms de bloc
- Attributs de bloc
Cependant, nous voulons utiliser des blocs imbriqués, nous allons donc passer un troisième paramètre à ce tableau de blocs, qui est les innerBlocks.
Vous voulez juste le placement du bloc ?
Notez que vous pouvez laisser les attributs vides, pour simplement fournir les blocs sans contenu défini.
Le tableau pour créer le même bloc que nous avons créé dans le guide des modèles de blocs, nous avons besoin d’un tableau plus complexe, comme ceci :
$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.',
]
],
]
],
],
],
]
]
];
Enregistrez le modèle de bloc
Enregistrement d’un modèle de bloc pour un type de publication existant
Pour enregistrer un modèle de bloc pour un type de publication existant (tel que le posttype de publication), vous pouvez utiliser le code ci-dessous pour remplacer l’objet de type de publication.
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' );
Ce code définit simplement le modèle et (éventuellement) le [template_lock](https://wholesomecode.ltd/#template-lock)type.
Le code complet ressemblerait à ceci :
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' );
Enregistrement d’un modèle de bloc pour un nouveau type de publication
Si vous enregistrez un type de publication, vous pouvez passer le modèle dans l’ templateargument de register_post_type.
Vous pouvez également passer l’ [template_lock](https://wholesomecode.ltd/#template-lock)argument dans register_post_type.
Verrouillage du modèle
L’ template_lockargument peut faire plusieurs choses selon l’argument qui lui est passé. Ceux-ci sont répertoriés dans le guide de développement Gutenberg comme suit :
all— empêche toutes les opérations. Il n’est pas possible d’insérer de nouveaux blocs, de déplacer des blocs existants ou de supprimer des blocs.insert— empêche l’insertion ou la suppression de blocs, mais permet de déplacer des blocs existants.
Le verrouillage du modèle ne fonctionne pas sur les blocs imbriqués
Le verrouillage du modèle ne fonctionne que sur les blocs de niveau supérieur. Utilisez ceci à votre avantage en créant une mise en page avec des en-têtes fixes, des images, des paragraphes et une zone de groupe pour que votre client puisse insérer le contenu de son choix.
Vous pouvez également créer un modèle de bloc imbriqué personnalisé avec InnerBlocks.
Vous pouvez également limiter les blocs que vous êtes autorisé à insérer dans certains types de publication.
Utiliser le modèle de bloc
Pour utiliser le modèle de bloc, créez simplement un nouveau message (ou un type de message personnalisé selon la façon dont vous avez configuré les choses). Le modèle sera inséré et vous aurez maintenant des zones de contenu fixes sur votre page.
L’insertion d’un message affiche le modèle de bloc
Vous pouvez limiter les blocs disponibles pour différents types de publications à l’aide du code suivant.
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 );
Le code ci-dessus limite les blocs autorisés dans le posttype de publication à ce qui suit :
-
Colonne (
core/column) -
Colonnes (
core/columns) -
Groupe (
core/group) -
Titre (
core/heading) -
Paragraphe (
core/paragraph) -
Besoin de quelque chose de plus flexible? Essayez d’enregistrer un modèle de bloc à la place
-
Besoin de quelque chose qui s’applique aux blocs enfants ? Essayez d’enregistrer un modèle InnerBlocks