Comment créer un bloc WordPress personnalisé pour Gutenberg

Comment créer un bloc WordPress personnalisé pour Gutenberg

Voulez-vous 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 de WordPress.

WordPress est livré avec plusieurs blocs utiles que vous pouvez utiliser pour écrire du contenu. De nombreux plugins WordPress viennent également avec leurs propres blocs que vous pouvez utiliser.

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

Si vous recherchez une solution simple pour créer des blocs Gutenberg personnalisés pour votre site WordPress, vous êtes au bon endroit.

Dans ce didacticiel pas à pas, nous allons vous montrer comment créer facilement un bloc WordPress personnalisé pour Gutenberg.

Comment créer un bloc WordPress personnalisé pour Gutenberg

Étape 1 : Commencez

La première chose à faire est d’installer et d’activer le 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 soucis.

Plugin Block Lab

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

 

Étape 2 : Créer un nouveau bloc

Dans l’intérêt de ce tutoriel, nous allons construire un bloc de « témoignages ».

Tout d’abord, allez dans Block Lab » Ajouter nouveau depuis la barre latérale gauche de votre panneau d’administration.

Sur cette page, vous devez donner un nom à votre bloc. Vous pouvez écrire n’importe quel nom de votre choix dans la zone de texte « Entrez le nom du bloc ici ».

Bloc personnalisé

Nous nommerons notre bloc personnalisé : Témoignages.

Sur la droite 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 la liste déroulante Catégorie.

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

Propriétés bloc personnalisé WordPress

Ajoutons maintenant quelques champs à notre bloc. Vous pouvez ajouter différents types de champs tels que texte, chiffres, email, URL, couleur, image, case à cocher, boutons radio, etc.

Nous ajouterons 3 champs à notre bloc de témoignages personnalisé : un champ d’image pour l’image du relecteur, un champ de saisie pour le nom du relecteur et un champ textarea pour le texte du témoignage.

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

Champ d'options

Cela ouvrira quelques options pour le champ. Jetons un coup d’œil à chacun d’eux.

Etiquette de champ : Vous pouvez utiliser n’importe quel nom de votre choix pour l’étiquette de champ. Appelons notre premier champ Image de réviseur.

Nom du champ : 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. Assurez-vous donc qu’il est unique pour chaque champ.

Type de champ : Vous pouvez sélectionner ici le type de champ. Nous voulons que notre premier champ soit une image, nous allons donc sélectionner Image dans le menu déroulant.

Emplacement du champ : Vous pouvez choisir d’ajouter le champ à l’éditeur ou à l’inspecteur.

Texte d’aide : Vous pouvez ajouter du texte pour décrire le champ. Cela 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 de texte, vous obtiendrez des options supplémentaires telles que le texte de substitution et la limite de caractères.

Vous pouvez cliquer sur le bouton Fermer le champ une fois que vous avez terminé avec le champ image.

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

Témoignages du bloc personnalisé WordPress

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

Pour modifier ou supprimer un champ particulier, vous devez placer la souris sur l’étiquette du champ afin d’obtenir les options de modification et de suppression.

Une fois que vous avez terminé, cliquez sur le bouton Publier, 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é lors de la dernière étape, il ne fonctionnera que si vous créez un modèle de bloc nommé block-testimonials.php et que vous le téléchargez dans votre dossier de thèmes actuel.

Création d'un template

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

Si vous ne possédez pas ce fichier, une erreur s’affiche : «Le fichier modèle contient / block-testimonials.php not found».

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

Commencez par créer un dossier sur votre bureau et nommez-le en bloc. Vous allez créer votre fichier de modèle de bloc dans ce dossier, puis le télécharger dans votre répertoire de thèmes WordPress actuel.

Pour créer le fichier de modèle, vous pouvez utiliser un éditeur de texte brut tel que le Bloc-notes.

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

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

Simple, n’est-ce pas? Faisons de même pour le reste de nos champs :

1
2
3
<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>
Ensuite, nous ajouterons des balises HTML au code ci-dessus à des fins de style.Simple, n’est-ce pas? Faisons de même pour le reste de nos champs :

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

Vous pouvez également ajouter des noms de classe à vos balises HTML et insérer votre code dans un conteneur div afin de styler le contenu de votre bloc (ce que nous ferons à la prochaine étape).

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

1
2
3
4
5
6
7
8
9
<div class="testimonial-block clearfix">
    <div class="testimonial-image">
        <img src ="<?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 des blocs.

 

Étape 4: Donnez du style à votre bloc personnalisé

Vous voulez styliser votre bloc personnalisé ? Vous pouvez le faire avec l’aide de CSS.

Ouvrez un éditeur de texte brut tel que Bloc-notes et ajoutez le code suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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 des blocs.

 

Étape 5 : Téléchargez le fichier de modèle de bloc dans le dossier du thème

Importons maintenant le dossier des blocs contenant notre fichier de modèle de bloc personnalisé dans notre dossier de thèmes WordPress.

Pour ce faire, vous devez vous connecter à votre site WordPress à l’aide d’un client FTP. Pour obtenir de l’aide, vous pouvez consulter notre guide sur la manière de télécharger des fichiers sur votre site WordPress via FTP.

Une fois connecté, accédez au dossier / wp-content / themes /. À partir de là, vous devez ouvrir votre dossier de thèmes actuel.

Dossier du thème

Téléchargez maintenant le dossier des blocs, contenant le fichier de modèle de bloc et le fichier CSS, dans votre répertoire de thèmes.

Une fois cela fait, vous pouvez passer à la dernière étape pour tester votre bloc personnalisé.

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

 

É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 Pages » Ajouter nouveau pour créer une nouvelle page.

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

Ajouter bloc personnalisé WordPress

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

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

C’est tout ! Vous avez créé avec succès votre premier bloc WordPress personnalisé pour votre site.

PARTAGER :

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur google
Vincent Audeval

Vincent Audeval

Fondateur de l'agence WUDDUP

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *