Formation « Créer des blocs avec Gutenberg »

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

Lecture : 3 minutes • 12

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 par 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

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

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

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

Exemples 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

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 ?

12

Questions, réponses et commentaires

  1. MarionL

    Le 11 décembre 2018

    Salut et merci pour ces cours, articles très intéressants sur Gutenberg ! Ça donne vraiment un très bon point de départ !

    Est ce qu’un système similaire est prévu / dispo sur les templates de page ?

    Bonne journée !

    1. Maxime BJ

      Le 12 décembre 2018

      Merci !
      Je pense que c’est en projet, j’ai lu un truc à ce sujet sur le handbook (la documentation officielle Gutenberg) mais je n’en sais pas plus pour le moment !

  2. SYL832

    Le 29 janvier 2019

    Merci pour l’article cela m’a bien aidé pour créer un type de post + content prédéfini
    Un GRAND MERCI 🙂

  3. Adeline

    Le 21 avril 2020

    Merci pour l’article ! Est-ce qu’il existe un moyen d’associer un ID ou un titre à un core ?
    J’aimerai faire des paragraphes avec des titres qui ne seraient pas en placeholder.

    Merci !

    1. Maxime BJ

      Le 21 avril 2020

      Est-ce que tu peux me donner des précisions car je ne suis pas sûr d’avoir bien compris

      1. Adeline Diniel

        Le 22 avril 2020

        Par exemple avoir un template Gutenberg :
        Bloc 1
        Bloc 2

        Et associer un ID à chaque bloc.
        Créer un single.php pour ce type de post avec :
        Titre 1
        Afficher Texte bloc 1
        Titre 2
        Afficher Texte bloc 2

        1. Maxime BJ

          Le 22 avril 2020

          Ces deux éléments ne sont pas du tout relier. Les templates de blocs permettent simplement de définir une structure par défaut dans un Custom Post Type. Ca n’intéragit pas avec le template hierarchy et les modèmes de pages .php du coup. Je pense qu’il faudrait plutôt tester le type de page et l’identifiant lors de la déclaration du CPT et définir $template en fonction plutôt, mais pas entièrement ceertain non plus.

          1. Adeline Diniel

            Le 22 avril 2020

            Merci pour votre réponse.

            Est-ce que vous savez si dans ces, il est possible de mettre à la place du “placeholder” un contenu fixe ?

  4. Adeline

    Le 2 mai 2020

    Bonjour !
    Est-ce possible de combiner Polylang ?
    J’aimerai que le ‘content’ => ‘Titre’ soit différent d’une langue à l’autre.

    Merci !

    1. Maxime BJ

      Le 23 mars 2021

      Bonne question ! Il faudrait demander à leur support directement car je n’ai pas la réponse hélas.

  5. Johanna Cas

    Le 8 décembre 2020

    Bonjour 🙂
    Ravie de cette formation Gutenberg, c’est vraiment top. Mais j’ai une question concernant les block-pattern (compositions) as-tu un tuto à me conseiller ?
    Prévois-tu quelque chose pour ça ?

    Merci Capitaine Wp 😉

    1. Maxime BJ

      Le 8 décembre 2020

      Non je n’ai pas traité ce cas dans la formation pour le moment. Tu pourras trouver un tuto bien fait en anglais ici par contre : https://speckyboy.com/create-simple-gutenberg-block-pattern-wordpress/

Laisser un commentaire