Depuis l’arrivée de Gutenberg, il est devenu assez simple d’offrir aux utilisateurs une interface d’édition en back-end quasiment identique aux pages du site lui-même en front-end. Lorsqu’on réalise un thème, voici donc comment s’y prendre pour personnaliser les pages d’édition des types de contenus ou post type (articles, pages et types de contenu personnalisés) afin qu’elles soient visuellement le plus proche possible du rendu obtenu dans le site.
Commençons par créer une feuille de style spécifique aux pages d’édition des contenus. Elle contiendra en premier lieu des déclarations qui devront structurer Gutenberg lui même : largeur du conteneur principal et des blocs de contenus, mise en page du titre principal…
Dans un second temps, il faudra y faire figurer, presque à l’identique, les déclarations CSS de la feuille de style spécifique au thème. Et notamment celles ayant trait à la typographie, au rendu des liens, paragraphes, titres, boutons… Il est important de noter que la balise body sera automatiquement remplacée par la classe .editor-styles-wrapper qui est la classe racine à partir de laquelle tous les styles de cette feuille de style seront appliqués. De la même manière, toutes les déclarations (ou chaînes de sélecteurs) qui figureront dans cette feuille de style seront automatiquement préfixées avec cette classe.
Déposons ensuite cette feuille de style dans le dossier du thème enfant et déclarons dans le fichier functions.php du thème que nous souhaitons utiliser la fonctionnalité d’ajout de cette feuille de style personnalisée à l’éditeur Gutenberg de la façon suivante :
Dans cet exemple, la feuille de style est placée directement à la racine du thème, mais il est tout à fait possible la déposer dans un sous-dossier styles ou css par exemple. Dans ce cas, il faudra préfixer le nom du fichier, lors de l’appel à la fonction add_editor_style, par son chemin relatif au dossier du thème : style/editor-style.css ou css/editor-style.css par exemple.
Comme on peut le constater, le processus est plutôt simple et permet une meilleure expérience utilisateur puisque le rendu dans la page d’édition est quasiment identique au rendu sur le site. Il est à noter cependant que certaines mises en pages complexes seront difficiles, voir quasiment impossibles, à dupliquer dans l’outil d’administration.
Il est important d’avoir également à l’esprit que cette feuille de style est générique et qu’elle s’appliquera donc à toutes les publications pour tous les types de contenus. Nous verrons par la suite comment utiliser des feuilles de style plus spécifiques et notamment en fonction des types de contenus.
Cet article vous a plu ? Partagez vos remarques et vos astuces dans les commentaires !