Comment créer un bloc Gutenberg personnalisé dans WordPress 2019

Vous Voulez créer un bloc Gutenberg personnalisé pour votre site WordPress ? Après la mise à jour de WordPress 5.0, vous devez utiliser des blocs pour créer du contenu dans le nouvel éditeur de blocs WordPress.

Gutenberg est livré avec plusieurs blocs utiles que vous pouvez utiliser pour écrire du contenu. De nombreux plugins WordPress sont également livrés avec leurs propres blocs que vous pouvez utiliser. Vous pouvez consulter mon article sur comment utiliser Gutenberg dans WordPress si vous ne le maitrisez pas encore.

Cependant, vous pouvez parfois vouloir créer votre propre bloc Gutenberg personnalisé pour faire quelque chose de spécifique.

Une des choses les plus excitantes à propos de WordPress est qu’il est tellement personnalisable. À peu près tout ce qui concerne la plate-forme est adaptable à vos besoins.

Par exemple, l’éditeur classique est entièrement personnalisable. Alors, pourquoi ne pas faire de même avec son nouvel homologue ?

Surtout s’il y a des blocs de contenu dont vous avez besoin fréquemment mais que l’éditeur, les plugins ou les thèmes n’offrent pas (encore), la création de votre propre bloc a du sens. Au lieu de mettre du code personnalisé à chaque fois, il est plus pratique de pouvoir le choisir dans le menu intégré. Vous n’êtes pas d’accord ?

Après tout, votre site web est censé s’adapter à vos besoins afin de vous faciliter au maximum la tâche. De plus, savoir comment créer son propre bloc Gutenberg devient rapidement une compétence utile.

Dans cet article je vais vous montrer 2 façons différentes de créer un bloc personnalisé dans Gutenberg :

Création d’un bloc WordPress personnalisé Gutenberg en mode simple

Note : Cette méthode est destinée aux utilisateurs débutants qui ont quand même certaines connaissances basique en HTML et CSS pour créer des blocs Gutenberg personnalisés.

Étape 1 : Démarrer

La première chose à faire est d’installer et d’activer le plugin Block Lab.

Plugin Block lab

C’est un plugin WordPress qui vous permet de créer des blocs personnalisés à partir de votre panneau d’administration sans trop de problèmes.

Une fois le plugin activé, vous pouvez passer à l’étape suivante de création de votre premier bloc personnalisé.

Étape 2 : Créer un nouveau bloc

Pour les besoins de ce tutoriel, nous allons construire un bloc ‘témoignages’.

Tout d’abord, dirigez-vous vers Block Lab ” Ajouter nouveau ” à partir de la barre latérale gauche de votre panneau d’administration.

Sur cette page, vous devez donner un nom à votre bloc. Vous pouvez écrire le nom de votre choix dans la zone de texte “Entrer le nom du bloc ici”.

Nous nommerons notre bloc personnalisé : Testimonials.

Sur le côté droit de la page, vous trouverez les propriétés du bloc. Ici, vous pouvez choisir une icône pour votre bloc et sélectionner une catégorie de bloc dans le menu déroulant Catégorie.

Le slug sera automatiquement rempli en fonction du nom de votre bloc, vous n’avez donc pas besoin de le changer. Cependant, vous pouvez écrire jusqu’à 3 mots-clés dans le champ de texte Mots-clés, de sorte que votre bloc puisse être facilement trouvé.

Ajoutons maintenant quelques champs à notre bloc. Vous pouvez ajouter différents types de champs comme du texte, des chiffres, des e-mails, des URL, des couleurs, des images, des cases à cocher, des boutons radio, et bien plus encore.

Nous ajouterons 3 champs à notre bloc témoignage personnalisé : un champ image pour l’image, une zone de texte, et un champ zone de texte pour le texte du témoignage.

Cliquez sur le bouton + Ajouter un champ pour insérer le premier champ.

Comment créer un bloc Gutenberg personnalisé dans WordPress

Cela ouvrira des options pour le nouveau champ. Jetons un coup d’oeil à chacun d’eux.

  • Field Label : Vous pouvez utiliser n’importe quel nom de votre choix pour l’étiquette de zone. Nommons notre premier champ en tant que Reviewer Image.
  • Field Name : Le nom du champ sera généré automatiquement en fonction de l’étiquette du champ. Nous utiliserons ce nom de champ à l’étape suivante, alors assurez-vous qu’il est unique pour chaque champ.
  • Field Type : Vous pouvez sélectionner ici le type de champ. Nous voulons que notre premier champ soit une image, donc nous allons sélectionner Image dans le menu déroulant.
  • Field Location : Vous pouvez décider si vous voulez ajouter la zone à l’éditeur ou à l’inspecteur.
  • Help Text : Vous pouvez ajouter du texte pour décrire le champ. Ceci n’est pas nécessaire si vous créez ce bloc pour votre usage personnel.

Vous pouvez également obtenir des options supplémentaires en fonction du type de champ que vous choisissez. Par exemple, si vous sélectionnez un champ texte, vous obtiendrez des options supplémentaires telles que le texte du caractère de remplacement et la limite de caractères.

Vous pouvez cliquer sur le bouton Close field une fois que vous avez terminé le champ de l’image.

Suite au processus ci-dessus, ajoutons 2 autres champs pour notre bloc témoignages en cliquant sur le bouton + Add Field.

Comment créer un bloc Gutenberg personnalisé dans WordPress

Si vous souhaitez réorganiser les champs, vous pouvez le faire en les faisant glisser à l’aide de l’icône hamburger sur le côté gauche de chaque étiquette de champ.

Pour modifier ou supprimer un champ particulier, vous devez passer votre souris sur l’intitulé du champ pour obtenir les options de modification et de suppression.

Une fois que vous avez terminé, cliquez sur le bouton Publish, présent sur le côté droit de la page, pour enregistrer votre bloc Gutenberg personnalisé.

Étape 3 : Créer un modèle de bloc

Bien que vous ayez créé le bloc WordPress personnalisé à la dernière étape, il ne fonctionnera pas tant que vous n’aurez pas créé un template de bloc nommé block-testimonials.php et ne l’aurez pas téléchargé dans votre dossier thème actuel.

Le fichier template de bloc indiquera au plugin comment afficher vos champs de bloc dans l’éditeur. Le plugin recherchera le fichier modèle et l’utilisera ensuite pour afficher le contenu du bloc.

Si vous n’avez pas ce fichier, il affichera une erreur “Template file blocks/block-testimonials.php not found”.

Créons donc le fichier modèle de notre bloc.

Tout d’abord, créez un dossier sur votre bureau et nommez-le bloc. Vous créerez votre fichier modèle de bloc à l’intérieur de ce dossier et le téléchargerez ensuite dans votre répertoire de thème WordPress actuel.

Pour créer le fichier modèle, vous pouvez utiliser un éditeur de texte simple comme Notepad.

Chaque fois que vous ajoutez un nouveau champ à votre bloc personnalisé, vous devez ajouter le code PHP suivant à votre fichier modèle de bloc :

<?php block_field( 'add-your-field-name-here' ); ?>

N’oubliez pas de remplacer add-your-field-name-here par le nom du champ.

Par exemple, le nom de notre premier champ est “reviewer-image”, nous allons donc ajouter la ligne suivante au fichier modèle :

<?php block_field( 'reviewer-image' ); ?>

Simple n’est ce pas ? Faisons de même avec les autres champs :

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Ensuite, nous allons ajouter quelques balises HTML au code ci-dessus pour des raisons de style.

Par exemple, vous pouvez envelopper l’image de l’examinateur dans une balise img pour afficher l’image. Sinon, WordPress affichera l’URL de l’image qui n’est pas ce que vous voulez, n’est-ce pas ?

Vous pouvez aussi ajouter des noms de classes à vos balises HTML et envelopper votre code dans un conteneur div pour styliser le contenu de votre bloc (ce que nous allons faire dans cette prochaine étape).

Voici donc notre code final pour notre modèle de bloc :

<div class="testimonial-block clearfix">
    <div class="testimonial-image">
        <img src ="http://www.zendevs.xyz/<?php block_field("reviewer-image' ); ?>">
    </div>
    <div class="testimonial-box">
        <h4><?php block_field( 'reviewer-name' ); ?></h4>
        <p><?php block_field( 'testimonial-text' ); ?></p>
    </div>
</div>

Enfin, nommez le fichier block-testimonials.php et enregistrez-le dans le dossier blocks.

Étape 4 : Créez votre bloc personnalisé

Vous voulez donner un style à votre bloc personnalisé ? Vous pouvez le faire avec l’aide de CSS.

Ouvrez un éditeur de texte brut comme Notepad et ajoutez le code suivant :

.testimonial-block {
    width: 100%;
    margin-bottom: 25px;
}
 
.testimonial-image {
    float: left;
    width: 25%;
    padding-right: 15px;
}
 
.testimonial-box {
    float: left;
    width: 75%;
}
 
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Une fois terminé, nommez le fichier block-testimonials.css et enregistrez-le dans le dossier blocks.

Étape 5 : Télécharger le fichier modèle de bloc dans le dossier thématique

Téléchargeons maintenant le dossier des blocs contenant notre fichier de modèle de bloc personnalisé dans notre dossier de thème WordPressWordPress, Joomla, Drupal : quel CMS open source choisir ? 2019 actuellement actif.

Une fois terminé, vous pouvez passer à l’étape finale pour tester votre bloc personnalisé.

Note : Le plugin Block Lab vous permet de créer des blocs spécifiques à un thème. Si vous changez votre thème WordPress, alors vous devez copier le dossier des blocs dans votre nouveau répertoire de thème.

Étape 6 : Testez votre nouveau bloc

Il est temps de tester notre bloc de témoignages personnalisés. Vous pouvez le faire en allant dans la rubrique Pages ” Ajouter nouveau pour créer une nouvelle page.

Ensuite, cliquez sur l’icône Ajouter un bloc (+) et recherchez le bloc Testimonials. Une fois que vous l’avez trouvé, cliquez dessus pour ajouter le bloc personnalisé à votre éditeur de page.

Vous pouvez maintenant ajouter un témoignage à cette page en utilisant votre bloc personnalisé. Pour ajouter d’autres témoignages, vous pouvez toujours insérer de nouveaux blocs de témoignages.

Une fois que vous avez terminé, vous pouvez prévisualiser ou publier la page pour vérifier si elle fonctionne correctement ou non.

Et c’est tout ! Vous avez créé avec succès votre premier bloc WordPress personnalisé pour votre site en vous servant du plugin Block Lab.

Pour les plus expérimentés d’entre vous, voyons maintenant la méthode avancée

Développement d’un bloc WordPress personnalisé Gutenberg en mode avancé

D’un point de vue technique, il est important de noter que la plupart des composants des blocs Gutenberg sont écrits en JavaScript. Cela va de pair avec les conseils de Matt Mullenweg pour apprendre le langage de programmation en profondeur (si vous voulez le faire, consultez ces ressources utiles).

Le passage à JavaScript a été évident ces dernières années. Le langage de programmation est livré avec une tonne d’avantages et les applications Web basées sur JavaScript et construites sur des API (comme Gutenberg l’est) sont l’avenir du Web.

Cependant, cela signifie aussi que, malheureusement, la création de blocs de Gutenberg n’est pas très conviviale pour les débutants. Il faudra donc un peu d’effort aux développeurs débutant pour aller au bout de cette création de bloc personnalisé Gutenberg en mode avancé.

Mais ne vous laissez pas abattre ! Je vais essayer d’y aller pas à pas ?

Pour ce tutoriel, nous utiliserons le thème Twenty Nineteen, le premier thème qui a été spécialement conçu pour le nouvel éditeur Gutenberg. Prêt à l’emploi, il offre plusieurs blocs personnalisés, parmi lesquels des images de couvertures, une galerie photo, des widgets, des citations et plus encore. A cela nous ajouterons un simple bouton d’action avec un contenu personnalisable et un style personnalisé.

Afin de ne pas repartir de zéro, nous utiliserons l‘outil de création de block Gutenberg d’Ahmad Awais. Tout ce que vous êtes sur le point de lire est basé dessus. De plus, j’ajouterai un lien vers la documentation officielle de Gutenberg lorsque je trouverai ça judicieux ou nécessaire.

Etape 1 : Préparation de l’environnement

L’un des premiers défis à relever pour créer un bloc de Gutenberg est de configurer l’environnement de développement. Bien qu’il soit facile de configurer une installation WordPress locale, pour bricoler avec le nouvel éditeur, vous avez besoin de choses comme webpack, React, ESLint, Babel, et plus.

Si vous ne savez pas ce que la moitié de ces choses signifie, ne vous en faite pas ce n’est pas grave (mais vous pouvez vous renseigner ça ne fait jamais de mal ? ). Ce qui est important, c’est qu’elles soient toutes incluses et correctement configurées dans le kit de création de bloc Gutenberg mentionné ci-dessus.

Pourtant, pour l’utiliser, vous devez d’abord installer node.js et npm. Pour cela, allez sur le site officiel de node.js et téléchargez le fichier d’installation correct pour votre système.

Une fois l’installation terminée, exécutez et exécutez l’installation. Prêt ? Super, vous venez de terminer la première étape.

Etape 2 : Configurez vos fichiers de plugin

Après cela, il est temps de créer votre premier bloc. Vous pouvez le faire assez facilement via la console. Si vous n’avez jamais travaillé avec elle auparavant, ne vous inquiétez pas, ce n’est pas compliqué

La première chose à faire est d’ouvrir la console. Sous Windows, cliquez sur le bouton Windows, recherchez l’invite de commande et ouvrez-la. Si vous êtes sur un Mac, utilisez Cmd+F, puis recherchez la console. Sous linux un Ctrl+Alt+T suffit. Tous devraient ouvrir quelque chose comme ça :

Comment créer un bloc Gutenberg personnalisé dans WordPress

Ici, la première chose que vous voulez faire est de naviguer dans le répertoire des plugins de votre site local. Vous pouvez le faire avec la commande cd. En tapant cd(nom du répertoire), vous ouvrez un répertoire, cd… revient à un répertoire.

Vous pouvez également copier le chemin vers le répertoire du plugin depuis le haut de sa fenêtre et le coller après la commande cd pour y aller directement.

Une fois que vous y êtes il suffit de copier/coller la commande ci-dessous :

npx create-guten-block my-block

Assurez-vous de remplacer my-block par le nom du bloc que vous voulez créer. Par exemple, dans mon cas, j’ai opté pour le cta-bloc.

La machine créera alors un répertoire du même nom, téléchargera toutes les informations nécessaires et configurera les fichiers plugins dont vous avez besoin pour votre bloc Gutenberg.

Ça prendra un peu de temps, mais quand ce sera fini, vous vous retrouverez avec tous les dossiers et fichiers de base à l’intérieur de votre dossier de plugin (ici cta-block)

Une fois cela fait, suivez les conseils de l’outil et entrez dans votre dossier plugin (rappelez-vous, cd(nom du répertoire)) et tapez npm start.

Ce dernier exécutera le bloc en mode développement, surveillera les changements et rapportera les erreurs dans votre code.

Etape 3 : Activez le plugin et testez-le

Une fois que vous êtes arrivé jusqu’ici, vous pouvez déjà utiliser le plugin que vous venez de créer. Pour cela, connectez-vous à votre site WordPress, allez dans le menu Plugins et activez-le.

Comment créer un bloc Gutenberg personnalisé dans WordPress

Lorsque vous accédez à l’éditeur, cliquez sur le symbole plus et recherchez le nom du bloc, vous le trouverez également inclus au même titre que les autres blocs.

Comment créer un bloc Gutenberg personnalisé dans WordPress

Vous pouvez même entrer dans la page pour voir le résultat du bloc à l’affichage :

Comment créer un bloc Gutenberg personnalisé dans WordPress

Pas mal n’est ce pas ?

Etape 4 : Editer le fichier plugin.php

La raison pour laquelle vous voyez ça en frontend est que le bloc contient actuellement un contenu fictif. Il est temps de changer ça.

Les fichiers importants pour tout changement sont plugin.php dans le répertoire plugin ainsi que les trois fichiers dans src/block appelés blocks.js, editor.scss et style.scss.

Avec eux, vous contrôlez tout ce qui concerne la fonctionnalité et le design de votre bloc Gutenberg fait maison.

Le plus facile à changer est plugin.php. Ici, vous trouverez l’en-tête du plugin qui contient toutes les informations vues dans le menu du plugin dans le back-end.

/**
 * Plugin Name: cta-block — CGB Gutenberg Block Plugin
 * Plugin URI: https://github.com/ahmadawais/create-guten-block/
 * Description: cta-block — is a Gutenberg plugin created via create-guten-block.
 * Author: mrahmadawais, maedahbatool
 * Author URI: https://AhmadAwais.com/
 * Version: 1.0.0
 * License: GPL2+
 * License URI: https://www.gnu.org/licenses/gpl-2.0.txt
 *
 * @package CGB
 */

Dans un premier temps, modifiez tout cela pour qu’il reflète le bon nom, l’auteur et les autres informations du plugin. C’est assez explicite, mais si vous rencontrez des problèmes, lisez ce billet.

Une fois fait et sauvegardé, vous pouvez directement aller voir les changements dans la liste des plugins de votre administration WordPress.

Etape 5 : Enregistrer votre bloc Gutenberg

Ensuite, vous devez faire de même pour l’affichage de votre bloc dans l’éditeur Gutenberg. Pour cela, tournez-vous vers block.js. Il contient tout le code pour enregistrer le bloc sur un site WordPress et pour ce qu’il fait en front-end et en back-end.

Le fichier par défaut est très bien annoté. Il vous indique quelle partie est responsable de quoi afin que vous puissiez faire vos propres modifications. registerBlockType est ce qui enregistre le bloc. Les fonctions suivantes edit: et save: décrivent le contenu et le comportement du bloc dans Gutenberg et sur la page respectivement. Plus d’informations ici et ici.

Dans mon cas, je supprime simplement tout ce qui commence par registerBlockType et je le remplace par l’exemple de la documentation Gutenberg (ci dessous). Cela crée un champ éditeur de texte riche simple avec un minimum d’options de formatage, y compris les gras, les italiques, les hyperliens, etc.

Toutefois, pour qu’il puisse fonctionner avec ce que nous avons créé jusqu’à présent, nous devons modifier cette partie :

blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
        title: 'Example: Editable',
        icon: 'universal-access-alt',
        category: 'layout',

En particulier, ce que vous devez changer est :

  • Registration path – Il s’agit du chemin qui apparaît après blocks.registerBlockType. Il doit s’adapter à votre environnement actuel.
  • title: – Le nom du bloc tel qu’il apparaîtra à Gutenberg.
  • icon: – L’icône associée au bloc dans l’éditeur. Vous pouvez utiliser les dashicons. Assurez-vous d’insérer le nom sans le préfixe dashicons-. Vous pouvez également utiliser votre propre fichier SVG.
  • category: – Dans quelle catégorie votre bloc apparaîtra. Certaines des catégories standard sont : common, formatting, layout, widgets and embed.

Dans mon cas j’ai simplement mis ceci :

blocks.registerBlockType( 'cgb/block-cta-block', {
        title: 'CTA Block',
        icon: 'testimonial',
        category: 'common',

Et j’ai laissé le reste du code tel que je l’ai trouvé.

Après avoir sauvegardé votre travail vous pouvez aller voir les changements en front et en back-end.

Etape 6 : Ajuster le style du bloc

Ensuite, il est temps d’ajuster l’affichage de votre nouveau bloc. Cela se passe dans editor.scss et style.scss.

Comme le suggèrent les noms de fichiers, le premier contrôle à quoi ressemble votre bloc à l’intérieur de l’éditeur Gutenberg, le second contrôle la sortie sur le front end.

Dans les styles par défaut, vous pouvez voir que la sortie est verte dans l’éditeur mais rouge sur la page. C’est la conséquence de l’utilisation de deux ensembles différents de balises.

Dans la plupart des cas, il est probablement logique de conserver le même style pour les 2 côtés. Après tout, l’un des principaux arguments de vente de Gutenberg est que l’expérience de montage et le produit final sont plus étroitement liés qu’auparavant.

Dans mon cas, j’ajoute ce qui suit aux deux fichiers :

.wp-block-cgb-block-cta-block {
    background: #d6f279;
    border: 0.2rem dotted #292929;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}

Ce qui a pour conséquence de donner un rendu identique au bloc autant en back-end qu’en front-end. D’ailleurs, Gutenberg attribue automatiquement des classes CSS aux blocs en fonction de leur nom et vous pouvez savoir ce qu’ils sont avec les outils de votre navigateur. Cependant, les feuilles de style de create guten block contiendront déjà les bons noms de classes. En outre, vous pouvez définir les vôtres.

Etape 7 : terminer le travail

D’accord, une fois que vous êtes satisfait de votre bloc, il y a quelques étapes supplémentaires. La première chose que vous voulez faire est de retourner à la console et appuyez sur Ctrl/Cmd+C pour demander à npm d’arrêter de surveiller vos fichiers.

Ensuite, exécutez la commande suivante :

npm run build

Cela compilera les fichiers nécessaires au code de production (ne vous inquiétez pas, cela n’empêchera pas votre bloc de fonctionner).

Si vous pensez que vous ne voulez plus jamais utiliser ce bloc dans create guten block, vous pouvez aussi taper npm run eject. Toutefois, cela signifie qu’à partir de maintenant, vous devrez gérer le projet vous-même.

Conclusion : Êtes-vous prêt à créer un bloc Gutenberg ?

Les blocs Gutenberg sont appelés à devenir le nouvel élément par défaut de WordPress. Ils permettent de créer des articles, des pages, des mises en page et des designs de manière modulaire et offrent beaucoup de contrôle. (Si vous voulez en savoir plus j’ai fait un article de questions/réponses sur Gutenberg)

Apprendre à configurer des blocs Gutenberg personnalisés vous aide à rester au courant du développement actuel et vous donne les outils pour personnaliser votre site avec les nouvelles technologies.

Ci-dessus, vous avez appris deux manières (simple et avancée) de créer un bloc pour l’éditeur Gutenberg. La 2nd méthode est plus compliquée que d’apporter juste des modifications aux modèles PHP et pour certaines modifications importantes, vous ne pourrez probablement pas couper à apprendre au moins quelques petits morceaux de JavaScript.

Cependant, en sachant comment cela fonctionne en principe, vous pouvez commencer petit et grandir à partir de là.

La première méthode reste accessible à un plus grand nombre mais elle reste néanmoins beaucoup moins libre et surtout beaucoups moins fun vous ne pensez pas ?

Sur ce je vous dis à très vite et n’oubliez pas de me dire ce que vous pensez de tout ça via les commentaires ?

Auteur de l’article : james

Laisser un commentaire