Nous allons créer un bloc Gutenberg pour WordPress permettant de saisir du code formaté avec le style spécifique au langage de développement choisi.
Nous avons déjà rédigé un article présentant un bloc CodeMirror avec le langage java, mais tous les langages ne sont malheureusement pas disponibles dans le bloc utilisé.
Pour ce faire, nous allons travailler sur la base du composant PrettyCode proposé par Maxime de CapitainWP, qui a bien voulu nous aider à apporter les modifications souhaitées.
Dans cette suite d’article nous allons passer en revue pas à pas toutes les étapes pour ce travail collaboratif afin de parvenir à un composant conforme à nos besoins.
Qu’attendons nous d’un bloc Gutenberg WordPress pour l’écriture de code ?
Définissons notre besoin pour un code générique d’écriture de code dans WordPress. Nous souhaitons créer un nouveau bloc Gutenberg pour WordPress qui puisse nous permettre de choisir le langage du code à écrire et d’avoir la possiblité de choisir à chaque bloc d’article le langage parmi toute la diversité des langages disponibles dans CodeMirror.
Choisir les langages du code à visualiser dans notre bloc Gutenberg pour WordPress
CodeMirror propose une centaine de langage, et nous souhaitons pouvoir avoir accès à toute la puissance de CodeMirror. Toutefois, nous avons bien conscience que seule une partie de cette liste sera utilisée par chacun des sites WordPress utilisant notre bloc. Pour ne pas alourdir les pages, il est souhaitable qu’à l’initialisation de notre composant, nous puissions identifier la liste des langages qui seront utiles. Cela suppose de permettre à l’administrateur du site qui utilisera notre composant de choisir dans la partie « Réglage » ou « Setting » les langues qui lui sont utiles.
Les rédacteurs auront la possibilité lors de la rédaction de leurs articles de choisir pour chaque bloc de leur article le langage utilisé parmi la liste des langages autorisés par l’administrateur.
Choisir les thèmes à utiliser pour visualiser le code
Usuellement le thème est défini pour l’intégralité du site, et nous devrions avoir un choix du theme du site par l’administrateur. CodeMirror propose une quantité impressionnante de thème.
Normalement nous ne nous attendons pas à ce que chaque rédacteur choisisse son thème. Néanmoins nous pouvons considérer laisser aux rédacteurs le choix entre 3 à 4 thèmes. Cela suppose donc comme pour le langage de laisser à l’administrateur le soin de préselectioner les thèmes correspondant à la charte graphique du site. Cela se fera dans la partie « Réglage » ou « Setting » du site.
Pouvoir copier-coder le code dans le clipboard
Une fonctionalité interessante et de permettre aux lecteur des articles de pouvoir copier dans le clipboard le code à partir d’un bouton généralement situé en haut à droite du bloc et intitulé « copy code ». Cela peut être une option pour le site, option laissée à l’appréciation de l’administrateur.
Ajouter des numéros de lignes
Un article a pour intérêt de commenter le code et nous devons pouvoir identifier les lignes commentées. Plusieurs options sont souvent rencontrées. l’une d’elle consiste à proposer une couleur de fond pour les lignes selectionnées. L’autre consiste à indiquer dans le corps de l’article les numéros de lignes du code concernées. Nous allons proposer dans notre version de PrettyCode d’ajouter la numérotation des lignes sous la forme d’une option configurable par l’administrateur.
En résumé, nous avons défini nos options de réglages dans le panneaux d’administration « Setting » :
- pré-sélection des langages proposés
- identification du langage par défaut
- pré-selction des thèmes proposés
- identification du thème par défaut
- option pour l’ajout d’un bouton « copy code » [oui/non]
- option pour l’ajout des numéro de lignes [oui/non].
Le rédacteur aura la possibilité de choisir dans le panneau d’inspection :
- le choix du langage
- le choix du thème
Pour simplifier l’administrateur indiquera un thème par défault et le rédacteur pourra changer de thème. De même nous mettrons un langage par défaut, et le rédacteur choisira le langage utilisé pour son bloc.
Plan de travail pour la réalisation d’un bloc Gutenberg avec CodeMirror
Nous allons partir du bloc PrettyCode proposé par Maxime de CapitaineWP. Nous proposons de présenter l’avancé de notre travail dans ue succession d’articles.
- Comment installer un environnement de développement pour la création de composant Gutenberg pour WordPress
- Comment travailler avec GitHub de façon collaborative et sécurisée à partir de VsCode
- Comment tester le code initial du bloc Gutenberg PrettyCode dans l’environnement Local WordPress
- Comment configurer l’environnement de debug dans WordPress
- Comment mettre à jour la version de CodeMirror dans PrettyCode et comment passer en version PrettyCodeV2
- Comment mettre en place une page de « setting » pour notre bloc Gutenberg PrettyCodeV2
- Comment mettre en place « l’inspecteur » pour notre bloc Gutenberg PrettyCodeV2
- Comment tester le nouveau bloc Gutenberg PrettyCodeV2 dans Local WordPress
- Comment mettre à disposition notre code PrettyCodeV2 dans GitHub
- Comment diffuser notre bloc Gutenberg PrettyCodeV2 sur la plateforme WordPress
- Notre retour d’expérience sur ce projet d’évolution du bloc Gutenberg PrettyCode
Ces articles doivent être compris comme des exercices pratiques faisant suite au parcours de formation proposé par CapitainWP :
Créer un thème WordPress avec CapitainWP
Créer un bloc Gutemberg avec CapitainWP
Notre objectif est de créer un bloc Gutenberg pour WordPress qui puisse servir à tous. Si ce bloc Gutenberg vous convient ou si vous souhaitez y voir apporter des adaptations, n’hésitez pas à nous laisser un commentaire. En attendant merci de nous suivre tout au long de la réalisation de ce projet.