Blocs Gutenberg personnalisés faciles à l'aide de Blockstudio et ACF

Dans cet article rapide, je souhaite expliquer comment créer un bloc Gutenberg personnalisé à l'aide de Blockstudio. Blockstudio est un framework de blocs moderne et flexible pour WordPress. Avec l'adoption de Gutenberg, la possibilité de créer rapidement des blocs personnalisés devient de plus en plus importante. C'est une méthode incroyablement simple pour les créer - et bien que vous ayez besoin d'écrire du code pour le faire, c'est beaucoup plus simple et efficace avec BS (par rapport à d'autres méthodes).

Cet outil permet non seulement d'ajouter le bloc, mais aussi de générer des champs personnalisés (vous avez le choix entre les blocs ACF Pro ou Metabox), d'enregistrer des informations dans la base de données et d'appliquer facilement des styles et des scripts en ligne.

Jetons un coup d'œil à la façon dont nous pouvons créer un bloc Gutenberg personnalisé en utilisant ce framework en moins de 5 minutes (PS - je n'ai jamais créé de bloc personnalisé auparavant).

Le processus de fabrication d'un bloc

Pour ce site Web, j'ai besoin d'un moyen simple d'ajouter du code personnalisé qui s'afficherait sur le frontend dans une interface facile à comprendre.

Depuis quelques mois, j'utilise l'élément HTML du bloc de code SPX (c'est ce qui est utilisé ci-dessus). C'est une implémentation très simple, et quelque chose qui est déjà installé sur ce site car j'utilise SPX pour certains effets avec Oxygen. Cependant, SPX ne contient pas d'éléments Gutenberg. Comme il s'agit d'un élément HTML, j'insérerais une boîte HTML dans Gutenberg, puis j'implémenterais l'affichage du code comme suit :

Cela a fonctionné, mais je voulais un bloc de code dédié pour Gutenberg. J'ai donc utilisé Blockstudio + ACF pour faire ceci :

(c'est le bloc que j'utilise dans Gutenberg pour insérer les blocs de code dans ce post)

Mon nouveau bloc fournit essentiellement une interface graphique visuelle pour insérer le code comme je le faisais avec HTML. Mais, ce bloc facilite la gestion et offre également un champ d'éditeur de code sympa directement dans Gutenberg.

Voici comment cela a été fait :

Tout d'abord, j'ai installé Blockstudio (plugin) sur l'Isotropic. En règle générale, il recherchera un dossier dans votre thème pour charger vos fichiers de blocs personnalisés. Cependant, Oxygen Builder, sur lequel ce site Web est construit, désactive complètement le thème, j'ai donc dû créer un plugin personnalisé à partir de ce passe-partout officiel pour qu'il fonctionne sur ce site Web.

Si vous l'installez à partir de cette source, tout ce que vous avez à faire est de commencer à ajouter des blocs au dossier "Blocs" - et il y a déjà un bloc de démonstration que vous pouvez essayer.

Le processus de création d'un bloc à l'aide de ce framework comporte 3 étapes : configurez-le, ajoutez les champs, puis ajoutez le balisage.

Pour ma part, j'ai créé un fichier appelé iso-custom-code.php dans le dossier Blocks, et inséré le code suivant (assez simple !) :

Le morceau de code initial donne à Gutenberg toutes les informations dont il a besoin pour enregistrer le bloc dans l'éditeur. Par exemple, vous pouvez lui donner un titre et une icône. À partir de là, j'ai ajouté deux champs personnalisés. Le premier est un champ radio que vous pouvez utiliser pour sélectionner le type de code. Le deuxième champ est un champ de l'éditeur de code.

Il ne s'agit pas d'un champ ACF standard, mais d'un module complémentaire tiers qui utilise la méthode ACF générale pour ajouter un type de champ personnalisé. Ce qui est vraiment cool avec Blockstudio, c'est que ce champ personnalisé est prêt à l'emploi et s'affiche directement dans l'éditeur Gutenberg.

Il convient de noter que vous enregistrez en fait les champs personnalisés directement dans ce bloc. Vous pouvez choisir d'appliquer un groupe de champs à un type de publication, mais il n'est pas nécessaire d'aller dans l'interface utilisateur ACF et d'y créer des champs, comme cela est fait dans le deuxième morceau de ce code.

Les champs sont ajoutés de la même manière que vous le feriez avec PHP normal, et la documentation est relativement facile à comprendre. Vous n'avez probablement même pas besoin de connaître ce langage de programmation pour pouvoir le comprendre - https://www.advancedcustomfields.com/resources/register-fields-via-php/

Le balisage réel est juste une insertion HTML et PHP standard d'un champ ACF personnalisé. Et une fois enregistré, le bloc Gutenberg personnalisé s'affichera dans l'éditeur et s'affichera sur le front-end. Il n'y a absolument aucun ballonnement ici, et le balisage défini dans le fichier de bloc personnalisé est le balisage qui s'affichera sur le front-end du site Web.

Le dernier avantage est que vous pouvez utiliser les fonctionnalités natives de Gutenberg car les blocs que vous créez sont de vrais blocs Gutenberg. Vous pouvez copier et coller, rendre réutilisable, et plus encore. Raisonnablement, vous pourriez créer un site Web entier en utilisant cet outil uniquement dans Gutenberg. Il n'y a pas non plus de verrouillage du fournisseur.

Réflexions sur BlockStudio

Personnellement, j'utilise Gutenberg pour gérer, structurer et créer tous les articles de blog sur ce site Web. Cependant, pour la conception globale du site et les modèles, Oxygen Builder est utilisé.

Blockstudio est livré avec une bibliothèque de quelques blocs bien construits que vous pouvez utiliser comme points de départ pour vos propres créations. C'est vraiment cool car cela vous donne une tonne d'exemples de code que vous pouvez ensuite utiliser pour modifier ce que vous cherchez à construire. Bien sûr, c'est un framework et comprendre le PHP sous-jacent et son fonctionnement vous facilitera grandement la vie, mais à mon avis, vous n'avez pas besoin de le connaître pour pouvoir construire des blocs avec cet outil. Tout ce que vous devez savoir, c'est comment copier et coller à partir de diverses documentations, exemples et sources.

La documentation ACF et Blockstudio est incroyablement bien écrite et facile à suivre. Et si vous êtes plus familier avec le plugin de champ personnalisé MetaBox, celui-ci fonctionnera tout aussi bien.

Je pense que le prix est justifié pour la souplesse et la puissance de cet outil. Je viens de commencer à l'utiliser et je suis ravi d'essayer les fonctionnalités avancées telles que Twind et Alpine.