Vous souhaitez 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.

WordPress est livré avec plusieurs blocs utiles que vous pouvez utiliser lors de la rédaction de contenu. De nombreux plugins WordPress sont également livrés 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 cherchez une solution simple pour créer des blocs Gutenberg personnalisés pour votre site WordPress, alors vous êtes au bon endroit.

Dans ce didacticiel étape par étape, nous vous montrerons comment créer facilement un bloc WordPress personnalisé pour Gutenberg.

Créer un bloc WordPress personnalisé pour Gutenberg

Noter: Cet article est destiné aux utilisateurs intermédiaires. Vous devrez être familiarisé avec HTML et CSS pour créer des blocs Gutenberg personnalisés.

Étape 1 : Commencez

La première chose à faire est d'installer et d'activer le Laboratoire de blocs brancher.

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

Plugin WordPress BlockLab

Pour installer le plugin, vous pouvez suivre notre guide du débutant sur la façon d'installer un plugin WordPress.

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 créer un bloc “témoignages”.

D'abord, dirigez-vous vers Bloc Lab » Ajouter un nouveau dans 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 “Entrez le nom du bloc ici”.

Entrez le nom du bloc personnalisé

Nous nommerons notre bloc personnalisé : Témoignages.

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

Le slug sera rempli automatiquement en fonction du nom de votre bloc, vous n'avez donc pas à le modifier. 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 de bloc personnalisées

Ajoutons maintenant quelques champs à notre bloc. Vous pouvez ajouter différents types de champs tels que 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 de témoignage personnalisé : un champ d'image pour l'image de l'évaluateur, une zone de texte pour le nom de l'évaluateur et un champ de zone de texte pour le texte du témoignage.

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

Options de champ d'image

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

  • Étiquette de champ: Vous pouvez utiliser n'importe quel nom de votre choix pour l'étiquette de champ. Nommons notre premier champ Reviewer Image.
  • Nom de domaine: 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.
  • Type de champ: Ici, vous pouvez sélectionner 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 décider si vous souhaitez ajouter le champ à l'éditeur ou à l'inspecteur.
  • Texte d'aide: Vous pouvez ajouter du texte pour décrire le champ. Ce n'est pas obligatoire 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 d'espace réservé et la limite de caractères.

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

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

Champs de bloc personnalisés finaux

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'étiquette du champ pour obtenir les options de modification et de suppression.

Une fois que vous avez terminé, cliquez sur le Publier bouton, 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, cela ne fonctionnera pas tant que vous n'aurez pas créé un modèle de bloc nommé block-testimonials.php et que vous ne l'aurez pas téléchargé dans votre dossier de thème actuel.

Créer un modèle de bloc

Le fichier de modèle de bloc indiquera au plugin comment afficher vos champs de bloc dans l'éditeur. Le plugin recherchera le fichier de modèle, puis l'utilisera pour afficher le contenu du bloc.

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

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

Tout d'abord, allez-y et créez un dossier sur votre bureau et nommez-le blocs. 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ème WordPress actuel.

Pour créer le fichier de modèle, vous pouvez utiliser un éditeur de texte brut comme 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 :

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

N'oubliez pas de remplacer ajoutez-votre-nom-de-champ-ici avec 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 pour le reste de nos champs :

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

Ensuite, nous ajouterons quelques balises HTML au code ci-dessus à des fins de style.

Par exemple, vous pouvez envelopper l'image du réviseur 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 également ajouter des noms de classe à vos balises HTML et envelopper votre code dans un conteneur div pour styliser le contenu de votre bloc (ce que nous ferons 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 ="<?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 blocs dossier.

Étape 4 : stylisez votre bloc personnalisé

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

Ouvrez un éditeur de texte brut comme le Bloc-notes 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 cela fait, nommez le fichier block-testimonials.css et enregistrez-le dans le blocs dossier.

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

Maintenant téléchargeons le blocs dossier contenant notre fichier de modèle de bloc personnalisé dans notre dossier de thème 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 façon de télécharger des fichiers sur votre site WordPress en utilisant FTP.

Une fois connecté, allez dans le dossier /wp-content/themes/. De là, vous devez ouvrir votre dossier de thème actuel.

Entrez dans le dossier de thème en utilisant FTP

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

Une fois cela fait, vous pouvez passer à l'étape finale pour tester votre bloc personnalisé.

Noter: 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 vous rendant sur pages » Ajouter nouveau pour créer une nouvelle page.

Ensuite, cliquez sur le 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 un bloc personnalisé à l'éditeur de page

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émoignages.

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.

Saviez-vous que vous pouvez gagner du temps avec des blocs réutilisables dans votre éditeur ? Consultez notre guide sur la façon de créer facilement des blocs réutilisables dans l'éditeur de blocs WordPress et de les utiliser sur d'autres sites Web.

Vous pouvez également consulter notre guide sur la façon de créer un thème WordPress personnalisé sans écrire de code.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.