Un guide des blocs Gutenberg personnalisés
Publié: 2022-11-08Au cas où vous seriez en retard à la soirée WordPress, les blocs sont en .
WordPress continue d'évoluer et d'améliorer l'expérience Gutenberg, ce qui amène de nombreux développeurs à se demander s'ils doivent créer des blocs Gutenberg personnalisés.
Dans cet article, nous examinons le fonctionnement des blocs personnalisés, quand les utiliser, les options alternatives pour créer votre site Web et comment créer des blocs Gutenberg.
Que sont les blocs Gutenberg personnalisés ?
Les blocs sont l'unité de base pour créer des pages et des articles dans WordPress. WordPress a introduit des blocs avec l'expérience d'édition de Gutenberg en 2018. WordPress inclut de nombreux blocs de type de contenu par défaut, notamment des titres de publication, des images et des galeries. De plus, les plugins ajoutent également leurs propres blocs à votre expérience d'édition. Par exemple, certaines des versions les plus récentes de WooCommerce ont introduit de nouveaux blocs pour faciliter l'ajout de produits et de fonctionnalités de commerce électronique à n'importe quelle page ou publication dans WordPress.
La création d'un bloc Gutenberg personnalisé vous permet d'utiliser ce bloc sur n'importe quelle page ou publication sur votre site. Par exemple, vous pouvez créer un bloc qui extrait et affiche des témoignages de clients.
Si vous avez hésité à embrasser pleinement les blocs, vous manquez quelque chose. Toutes les dernières fonctionnalités de WordPress se concentrent sur l'amélioration de l'expérience de l'éditeur de blocs. Vous devrez utiliser des blocs pour tirer parti de nombreuses fonctionnalités WordPress récentes et à venir .
Téléchargez notre livre électronique sur la mise en route de l'édition complète de site pour en savoir plus sur la façon dont vous pouvez utiliser des blocs pour créer et éditer l'intégralité de votre site.
Quand utiliser des blocs Gutenberg personnalisés
Vous pouvez créer un bloc Gutenberg personnalisé lorsque les options de bloc existantes ne correspondent pas à vos besoins et que vous ne trouvez pas d'alternative viable avec vos plugins ou thèmes.
La création d'un bloc Gutenberg personnalisé n'est généralement pas un projet adapté aux débutants. Les deux raisons les plus courantes pour coder vos propres blocs Gutenberg personnalisés sont lorsque vous développez un plugin ou créez votre propre thème.
La construction d'un bloc n'est pas un projet que la plupart des gens entreprennent pour un seul site Web, à moins qu'il ne s'agisse d'un projet au niveau de l'entreprise avec un développeur ou une équipe de développement dédiés. Nous partageons quelques méthodes alternatives qui peuvent mieux fonctionner si vous avez besoin d'un bloc personnalisé pour un seul site.
Alternatives à l'utilisation de blocs Gutenberg personnalisés
Avant de passer par tout le travail de détermination des blocs personnalisés, demandez-vous si l'une de ces alternatives pourrait fonctionner pour vous.
Motifs de blocs ou blocs réutilisables
Si vous n'avez pas besoin d'extraire du contenu dynamique et que vous souhaitez simplement qu'un bloc reproduise une mise en page, utilisez plutôt la nouvelle fonctionnalité de modèles de blocs ou les blocs réutilisables. Cette option est adaptée aux débutants et peut être réalisée avec peu ou pas d'écriture de code.
Les modèles sont comme un mini-modèle que vous pouvez utiliser n'importe où sur votre site. Vous pouvez l'insérer sur une page, puis l'éditer. Les blocs réutilisables fonctionnent de la même manière. La grande différence réside dans la façon dont ils sont traités après leur utilisation sur une page ou une publication.
Un modèle est un point de départ. Une fois sur une page, toutes les modifications que vous apportez sont uniques à cette page. Si vous modifiez le modèle plus tard, il ne changera pas là où il était déjà utilisé.
Les blocs réutilisables restent liés les uns aux autres. Si vous mettez à jour le bloc, les modifications s'appliqueront à tous les endroits où vous avez utilisé ce bloc.
Bloc de codes
Utilisez le bloc de code pour insérer un code personnalisé sur la page. Les développeurs de thèmes et de plugins créent des blocs personnalisés à utiliser sur plusieurs sites. Si vous travaillez sur un seul site, vous pouvez probablement atteindre le même objectif en moins de temps en ajoutant un extrait de code personnalisé. Les deux options nécessitent le même niveau d'expertise technique.
Le seul cas où il peut être intéressant d'envisager de créer votre propre bloc personnalisé est si vous êtes un développeur qui souhaite confier le site à un client. Le client pourrait être en mesure de travailler avec votre bloc personnalisé en utilisant l'éditeur Gutenberg, mais serait totalement perdu en essayant de modifier votre code.
Comment créer un bloc Gutenberg personnalisé
Vous avez deux options pour créer un bloc Gutenberg personnalisé. Vous pouvez le coder vous-même ou utiliser un plugin de création de blocs. Les deux options nécessitent un certain codage. Vous voudrez rafraîchir les bases du développement Web avant de l'essayer.
Le coder soi-même
La construction de blocs personnalisés nécessite une expérience de développement. Si vous aimez vous en tenir aux éditeurs WYSIWIG et que votre cœur s'emballe chaque fois que vous cliquez accidentellement sur l'option Afficher le code, ce n'est pas pour vous.
La création de blocs personnalisés nécessite une connaissance intermédiaire de HTML, CSS, JavaScript et React.
Commencez par configurer votre environnement et vos outils de développement. Vous aurez besoin d'un environnement WordPress, de Node, de NPM et d'un éditeur de code. Après cela, suivez ce tutoriel sur la création de votre premier bloc à partir du manuel officiel de l'éditeur de blocs WordPress.
Utiliser un plug-in
Si vous êtes à l'aise avec HTML, CSS et JavaScript mais que vous n'êtes pas prêt à tout coder à partir de zéro, envisagez l'approche du plugin. L'utilisation d'un plugin pour créer des blocs personnalisés est une excellente option lorsque vous avez besoin d'un bloc personnalisé à utiliser sur un seul site Web.
Le plugin Genesis Custom Blocks est le plugin le plus populaire pour créer des blocs personnalisés. Vous allez créer les champs de bloc à l'aide de l'interface familière de WordPress. Après avoir configuré les champs, vous devrez fournir le modèle HTML, CSS, JavaScript et PHP pour que le bloc fonctionne.
Même si c'est plus facile, cela nécessite encore un peu de codage. La différence est que vous pouvez tout faire depuis votre administrateur WordPress sans configurer d'environnement de développement local. Le plugin facilite également le test et la prévisualisation du bloc pour s'assurer qu'il fonctionne correctement.
Quoi que vous construisiez, nous pouvons vous aider
Quelle que soit la manière dont vous construisez votre site, avec des blocs personnalisés, ou si vous utilisez encore l'éditeur classique, vous avez besoin d'un hébergeur fiable. Pressable est fier d'être l'endroit où WordPress fonctionne le mieux pour tout le monde, du solopreneur à l'équipe de développeurs avancés.
Pressable offre une interface facile à utiliser, une sécurité haut de gamme et des vitesses ultra-rapides. Avec l'hébergement de Pressable, votre site sera facile à mettre à jour et simple à trouver et à utiliser pour vos clients.
Inscrivez-vous aujourd'hui et commencez à créer votre site ou apprenez-en plus sur le transfert d'un site existant. Nous sommes heureux de vous aider à migrer vos sites !
