Formation « Créer des blocs avec Gutenberg »

Précharger un modèle de mise en page avec Gutenberg

Lecture : 4 minutes • 0

Pour simplifier la vie de vos utilisateurs, vous pouvez prédéfinir un modèle de mise en page de blocs disposés dans un certain ordre. Il est possible de prédéfinir ces templates Gutenberg pour les articles, pages ou encore n'importe quel Custom Post Type.

Dans un projet WordPress l’approche ACF est généralement très appréciée car le design et la mise en page sont prédéfinis à l’avance le développeur. Le rédacteur n’a alors plus qu’à remplir les « trous ».

À l’époque ou j’avais mon agence web, cette approche était idéale : on ne donnait pas trop de pouvoirs au client afin qu’il ne casse pas le design, ce qui représente pour lui un gain de temps puisque la mise en page étant déjà faite, il n’avait qu’à saisir son contenu.

Seul bémol : difficile de se projeter, puisque ACF ne propose que des champs classiques et on est loin du rendu réel final.

Avec Gutenberg il est désormais possible de prédéfinir des mises en page en indiquant quels blocs doivent être automatiquement créés et affichés, et dans quel ordre.

Du coup on retrouve les avantages de « verrouillage » que l’on avait avec ACF mais sans le problème de l’aperçu temps réel WYSIWYG.

Voici un exemple schématisé :

Exemple de template Gutenberg
Voici un exemple d’un modèle qui afficherait un texte, suivi d’une image et d’un bouton

Ce que l’on s’apprête à voir est également détaillé dans la documentation Gutenberg.

Définir le template dans votre Custom Post Type

Un nouveau paramètre template est apparu dans la définition des CPT (types de publication), dans lequel on va pouvoir définir une série de blocs avec un contenu de substition (placeholder) :

PHP
functions.php
<?php 

function myplugin_register_book_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Books',
        'show_in_rest' => true,
        'template' => array( // Définir un modèle
            array( 'core/paragraph', array(
                'placeholder' => 'Your content',
            ) ),
            array( 'core/image', array(
                'align' => 'center',
            ) ),
            array( 'core/button', array(
                'placeholder' => 'Click Me!',
            ) ),
        ),
      	'template_lock' => 'all', // Verrouiller le modèle pour empêcher les modifications
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

En premier paramètre on indique le nom du bloc, par exemple core/paragraph, puis on créé ensuite un sous-tableau dans lequel on va définir les valeurs des attributs par défaut.

Définir le template dans un post type déjà déclaré

Et qu’en est-il lorsque l’on veut créer une mise en page dans les pages, articles, ou tout autre post type créé par une autre extension ?

C’est aussi possible, pour cela on va utiliser ce code :

PHP
functions.php
<?php

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'; // Verrouiller la modification
}
add_action( 'init', 'my_add_template_to_posts' );

Dans cet exemple on récupère l’objet Post Type qui nous intéresse, ici les articles, et on injecte le paramètre template.

Verrouiller le modèle

Si vous ne voulez pas que votre utilisateur modifie le modèle que vous avez défini, ajoutez 'template_lock' dans vos paramètres.

Il y a deux valeurs valeurs possibles :

  • all bloque l’ajout de blocs et le déplacement de ceux existants
  • insert prévient de l’ajout de nouveaux blocs, mais l’utilisateur peut déplacer ceux présents
PHP
functions.php
<?php 

// Lors de la déclaration d'un CPT
function myplugin_register_book_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Books',
        'show_in_rest' => true,
        'template' => array( ... ),
      	'template_lock' => 'all' // ou insert
        ),
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );


// Dans un CPT déjà existant
function my_add_template_to_posts() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array( ... );
    $post_type_object->template_lock = 'all'; // ou insert
}
add_action( 'init', 'my_add_template_to_posts' );

Exemple d'utilisation

Imaginez que votre utilisateur écrit des recettes de cuisine, et qu’il dispose d’un bloc « ingrédients ». Vous allez pouvoir donc lui faciliter la tâche en ajoutant automatiquement le bloc en début d’article :

mise en page Gutenberg
Le bloc est déjà présent lorsque je cliquer sur ajouter une recette !

Et voici le code correspondant :

PHP
functions.php
<?php 

function myplugin_register_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Recettes',
        'show_in_rest' => true,
      	'menu_icon' => 'dashicons-carrot',
        'template' => array( // Définir un modèle
            array( 'capitainewp/ingredients', array(
          		'content' => 'Ecrivez votre recette ici',
          		'ingredients' => array('Lait', 'Oeufs', 'Farine'),
        	) ),
        ),
      	'template_lock' => 'all', // verrouiller le modèle pour empêcher les modifications
    );
    register_post_type( 'recipes', $args );
}
add_action( 'init', 'myplugin_register_post_type' );

On peut imaginer pleins d’utilisations très pratiques pour nous simplifier la vie ou celle des clients.

Imaginez maintenant un blog de jeux vidéo comme Gamekult. Chaque test est basé sur le même modèle : après le test vient un bloc avec la note globale, puis les + et les –.

Mise en page prédéfinie Gutenberg
Avec Gutenberg, c’est facile à refaire !

Avec Gutenberg c’est très facile à refaire ! Et avec la mise en page prédéfinie l’auteur n’a même pas besoin d’appeler ces blocs, car ils sont déjà présents à la création de l’article.


Bref avec Gutenberg vous pouvez faire des merveilles, et simplifier grandement la tâche de l’auteur. Comment on pouvait bien faire avant ça ?

0

Questions, réponses et commentaires

    Laisser un commentaire