Comment créer son propre Guide de bienvenue Gutenberg • Capitaine WP

« Tutoriels WordPress »

Comment créer son propre Guide de bienvenue Gutenberg

Le6 avril 2020 •2 minutes •0

Vous l’avez peut-être déjà vu depuis quelques mois (décembre 2019) si vous utilisez l’extension Gutenberg (disponible depuis la 7.1), ou depuis quelques jours si vous avez mis à jour votre site vers WordPress 5.4.

Et oui, je parle bien du tout nouveau guide de bienvenue, initiation nécessaire pour ceux qui rencontreraient l’éditeur de blocs pour la première fois.

Capture d'écran du nouveau guide

On apprend donc les basiques de l’éditeur, qu’est-ce qu’un bloc, quelle est son utilité, quels types de bloc sont disponible, etc.

Ce composant a tout de suite attiré ma curiosité, et je me suis demandé si il était possible de le modifier ou de créer son propre guide de bienvenue.

Après plusieurs jours de recherche et de tests, je me suis rendu compte que son édition n’était pas possible, j’ai donc continué à creuser le sujet, et j’ai compris comment créer son propre guide.

Tout d’abord, vous devez chargez vos fichiers JS et CSS avec le bon hook.

PHP
functions.php

Ensuite, place au plugin JS qui se chargera uniquement en présence de l’éditeur de bloc.

Ce plugin ajoute le composant PluginMoreMenuItem qui créer un nouvel élément au sein du menu (situé tout en haut à droite de l’éditeur).

On créer un nouveau flag customWelcomeGuide qu’on peut utiliser grâce à la fonction isFeatureActive et ainsi on affiche le composant CustomWelcomeGuide (code plus bad) uniquement si ce flag est actif.

Référez-vous à la formation Gutenberg pour savoir comment compiler le code JSX.

JSX

Puis dernière étape, on créer notre guide de bienvenue à proprement parler à l’aide des différents components disponibles. On peut bien sûr s’inspirer en grande partie du WelcomeGuide de base.

JSX

Chaque GuidePage représente une page du guide, donc vous pouvez en ajouter autant que vous voulez.


Cet article met en lumière le fait qu’avec React, on est capable de facilement réutiliser un composant dans notre projet, et éviter de réinventer à chaque fois la roue.

En espérant que vous puissiez créer de superbes guide de bienvenue !

L'auteur : Florian TIAR

https://wpstrategie.fr/@

Développeur WordPress, j'ai écrit plusieurs articles autour du CMS. J'ai notamment contribué au coeur sur plusieurs versions majeures et publié quelques extensions sur le dépôt officiel.

0

Commentaires

Laisser un commentaire