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

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é :

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) :

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 :

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

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 :

Et voici le code correspondant :

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 –.

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 ?