Formation « Créer des blocs avec Gutenberg »

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

Lecture : 3 minutes • 3

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.

La formation en vidéo

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

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

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 ?

3

Questions, réponses et commentaires

  1. 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 🙂

  2. 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 !

Laisser un commentaire