Création de blocs sans JavaScript : tester ACF, Block Lab et Lazy Blocks

Publié: 2019-05-17

Tout le monde n'est pas encore capable ou désireux de créer des blocs en JavaScript, et parfois vous devez installer trois ou quatre collections de blocs jusqu'à ce que vous trouviez les blocs que vous souhaitez.

Il existe une troisième voie : des plugins qui créent les blocs pour vous à partir d'un ensemble de champs personnalisés spécifiques, avec un modèle pour contrôler l'affichage frontal des blocs. Les trois options les plus populaires pour ce faire incluent : Block Lab, ACF (Advanced Custom Fields) et Lazy Blocks.

Mon cas d'utilisation pour ce test est une petite tâche que j'ai entrepris d'accomplir avec chacun des plugins - pour créer un bloc pour les membres de l'équipe d'une entreprise qui comprend les champs suivants : prénom, nom, photo, bio, numéro de téléphone, et adresse e-mail et utilisez le bloc sur une page dans un affichage à deux colonnes avec deux membres de l'équipe.

Pour chaque plugin, je vais démontrer

  • comment créer le Fieldgroup,
  • comment créer le modèle pour le frontend et
  • comment utiliser les blocs pour créer une page d'équipe.

J'ai utilisé Local by Flywheel comme outil de développement local. Le site de test fonctionnait sur WordPress 5.1.1, Gutenberg 5.4 et le thème Business de WordPress.com

Après avoir lu cet article, vous pourrez sélectionner le plugin qui correspond à vos besoins.

Créer un bloc d'équipe avec Block Lab

Les membres de l'équipe XWP ont construit Block Lab et il est disponible en tant que plugin gratuit avec une version commerciale. J'ai d'abord utilisé Block Lab, installé le plugin, puis démarré un nouveau bloc.

Voici la vidéo sur la façon de configurer les champs.

L'étape suivante consiste à configurer le modèle de bloc

Lorsque j'ai regardé l'emplacement attendu, le modèle sera intégré au répertoire du thème dans un sous-dossier appelé /blocks/ C'est quelque chose dont un développeur doit se souvenir, car il y a un verrouillage du contenu lors du changement de thème.

Pour créer le modèle, j'ai ouvert mon éditeur de code, créé le fichier block-team-member.php, et ajouté le HTML + et le PHP minimal pour référencer les champs.

 <h2>
<?php block_field( 'first-name' );?> 
<?php block_field( 'last-name' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'image' ); ?>"
 alt="<?php block_field( 'prénom' );?> 
<?php block_field( 'last-name' );?> " width="150"/>
<?php block_field( 'short-bio' ); ?></p>

<p><em>Vous pouvez joindre <?php block_field( 'first-name' );?></em> 
<br/>par e-mail <span><a href="mailto :<?php block_field( 'email-address' ); ?>">
<?php block_field( 'email-address' ); ?></a></span>
 ou <br/>
par téléphone : <span><?php block_field( 'extension' ); ?></span></p>

Dans la dernière étape, j'ai terminé la configuration de ce bloc avec les propriétés du bloc

  • J'ai mis l'icône sur une personne,
  • sélectionné les "éléments de mise en page" comme catégorie et
  • ajouté "membre de l'équipe, équipe" comme mots-clés

Tout cela est nécessaire pour l'insertion de blocs dans l'éditeur.

Voyons voir comment ça fonctionne.

J'ai ajouté une nouvelle page intitulée Meet our Block Lab Team et ajouté les membres de l'équipe, en utilisant le bloc "Team Member".

Pour l'instant, j'ai décidé de remplir toutes les informations dans les limites de l'éditeur de blocs. Lors de la configuration du groupe de champs, j'ai également eu le choix d'afficher les contrôles de formulaire dans l'onglet Options de bloc de la barre latérale. Pour le moment, j'ai déterminé que c'est juste une préférence personnelle. Une fois que vous avez cliqué en dehors du bloc, le formulaire disparaît et le bloc est rendu similaire à sa représentation frontale.

Maintenant que le bloc est finalisé, je peux ajouter d'autres membres de l'équipe à la page. J'ai décidé, je les voudrais dans un bloc de colonnes avec deux colonnes.

Jusqu'ici tout va bien. Je n'étais pas ravi que l'emplacement du modèle pointe vers le dossier du thème.

Lorsque je souhaite changer de thème, je souhaite toujours conserver le bloc et la mise en page du bloc avec mon site. Je dois donc m'assurer de copier le dossier des blocs dans le répertoire du nouveau thème. Une autre méthode est décrite dans la documentation de Blocklab sur Github. Il propose deux filtres pour modifier l'emplacement par défaut du modèle :

« Pour utiliser un modèle différent dans votre thème, utilisez le filtre block_lab_override_theme_template( $theme_template ). Pour utiliser un modèle différent en dehors de votre thème (par exemple, dans un plugin), utilisez le filtre block_lab_template_path( $template_path ).”

C'était assez facile à configurer, même si vous n'êtes pas un développeur PHP, vous pouvez probablement utiliser la seule fonction PHP block-field() et vous assurer de référencer les bons noms de champs.

Block Lab, en substance, vous fournit une méthode pour créer les champs et configurer les propriétés du bloc sur un seul écran, puis vous devez ajouter le modèle de bloc correspondant à un dossier /blocks/ dans le répertoire de votre thème. C'est assez simple.

Création d'un bloc d'équipe avec ACF 5.8

ACF (Advanced Custom Fields) version 5.8 est sorti avec un constructeur de blocs (uniquement disponible dans la version Pro). Pour mon test, j'ai utilisé ACF 5.8 RC 1. La version finale est maintenant disponible. Elliot Condon est l'auteur du plugin et la première version a été publiée en 2011. Le plugin est devenu un outil de développement extrêmement populaire pour les indépendants et les agences et compte plus d'un million d'installations.

Son succès et sa polyvalence font de la création du groupe de champs un processus plus complexe par rapport aux deux autres plugins. La version Pro 5.8 contient la première version de son outil de création de blocs.

Il s'agit de la vue d'administration du groupe de terrain "Membre de l'équipe".

Maintenant, comment puis-je en faire un bloc ? La documentation est suffisamment complète. Remarque : Dans ce test, je suis allé dans un ordre légèrement différent…

J'ai commencé avec le groupe de terrain et j'avais besoin de revenir à cet écran d'administration après avoir enregistré le bloc (voir ci-dessous).

J'ai utilisé deux fichiers. Tout d'abord, j'avais besoin d'enregistrer le bloc dans le functions.php de mon thème. Pour le code de rendu du modèle/bloc, j'ai également utilisé content-block-team-member.php à stocker dans le dossier du thème actif.

Vous verrez comment ces deux s'emboîtent en une seconde. Le reste du travail est effectué par le plugin dans le back-end.

Alors écrivons le Block Code en PHP

Le premier extrait est l'enregistrement de bloc. Je lui ai donné un nom, un titre, une description, pointé sur le modèle de rendu, lui ai donné une catégorie, une icône et quelques mots-clés, sous lesquels le producteur de contenu peut trouver le bloc dans le Block Inserter. J'ai fait défiler jusqu'à la fin du fichier functions.php de mon thème et j'ai ajouté cet extrait :

 fonction register_acf_blocks() {
   // enregistre un bloc de membre d'équipe.
   acf_register_block(tableau(
       'name' => 'acf-team-member',
       'title' => __('Membre de l'équipe ACF'),
       'description' => __('Un bloc de membres d'équipe personnalisé créé via ACF 5.8'),
       'render_template' => 'content-block-team-member.php',
       'category' => 'formatage',
       'icon' => 'admin-commentaires',
       'keywords' => array( 'membre de l'équipe', 'équipe' ),
   ));
}
// Vérifiez si la fonction existe et connectez-vous à la configuration.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Ce code est directement issu de la documentation et j'ai juste changé quelques valeurs.

Dans la section suivante, j'ai créé le modèle de rendu de bloc. Le nom du fichier doit correspondre à l'attribut "render_template" dans le texte ci-dessus, qui est " content-block-team-member.php ".

J'ai également suivi la documentation d'ACF et n'ai changé que quelques valeurs et mis à jour le code d'affichage.

 <?php
// crée un attribut id pour un style spécifique
$id = 'membre de l'équipe' . $bloc['id'] ;

// crée une classe d'alignement ("alignwide") à partir du paramètre de bloc ("wide")
$align_class = $block['align'] ? 'aligner'. $block['aligner'] : '';

// Charger les valeurs et attribuer les valeurs par défaut pour les champs de bloc.
$short_bio = get_field('short_bio') ?: 'la courte bio va ici... ';
$first_name = get_field('first_name') ?: 'First Name';
$last_name = get_field('last_name') ?: 'Last Name';
$image = get_field('image');
$adresse_email = get_field('adresse_email');
$extension = get_field('extension');
?>


" class="membre-de-l'équipe">
       

   

   " alt="" alt=" " largeur="150"/>

Comme j'ai commencé avec le Fieldgroup, j'avais besoin de revenir en arrière et de m'assurer que le groupe est associé au bloc que je viens d'enregistrer. Sous l'écran Fieldgroup, j'ai créé une règle pour l'emplacement : elle doit lire : "Afficher ce groupe de champs si le bloc est égal à membre de l'équipe ACF.

Voyons maintenant comment cela fonctionne dans l'éditeur de blocs lorsque j'ajoute deux membres.

C'était une expérience intéressante. Vous pouvez utiliser le formulaire dans la section de l'éditeur pour saisir les données. Une autre option consiste à saisir les données dans les champs de formulaire disponibles dans la barre latérale et vous voyez la mise à jour du bloc en temps réel. Vous pouvez basculer entre les deux méthodes mais en cliquant sur le bouton "Passer à l'édition" ou "Passer à l'aperçu" selon la méthode que vous utilisez actuellement.

L'interface utilisateur de l'éditeur de blocs fonctionne bien. Cela vaut la peine de passer par la configuration et le code plus élaborés nécessaires.

Création d'un bloc d'équipe avec des blocs paresseux

Le troisième plugin de ce test s'appelle "Lazy Blocks" par Nikita de nkdev.info, la même équipe qui a également publié la collection de blocs GhostKit.

Cela me permet non seulement de stocker des informations dans post_content, mais j'ai également le choix de les stocker dans la table post_meta.

Voici une vidéo d'utilisation de l'interface pour créer les champs.

Comme cet écran d'administration se concentre sur l'obtention de toutes les informations pour créer les blocs, à gauche j'ai créé mes champs et dans la barre latérale. J'ai rempli les informations nécessaires pour enregistrer un bloc auprès de l'éditeur.

En dessous, j'ai pu ajouter le HTML pour le frontend et le backend. La syntaxe est encore plus facile que Block Lab, et bien sûr beaucoup plus facile que la modélisation d'ACF.

Je n'ai pas eu besoin d'ajouter de code au functions.php de mon thème ni de créer des fichiers supplémentaires avec mon code de modèle.

Vous pouvez tout ajouter ici, à l'aide de la coloration syntaxique et des balises de fusion plutôt que des appels de fonction. La documentation montre plusieurs façons d'écrire votre code de modèle. Je suis définitivement un fan de Handlebars (modèles sémantiques) car il est dans ce contexte beaucoup plus proche des balises de fusion d'autres systèmes.

J'ai copié/collé le même code dans l'onglet "Editeur HTML", afin que je puisse voir l'affichage frontal sous les champs du formulaire.

Utilisons-le.

Cela semble fonctionner. C'était un peu gênant que le formulaire ne disparaisse pas lorsque je désélectionne le bloc. Cela prend beaucoup de place dans l'éditeur. Bien que je voulais avoir les membres de l'équipe dans un bloc à deux colonnes, je n'ai pas réussi à faire glisser et déposer les deux blocs dans un bloc à colonnes. Je l'ai mentionné dans mon sujet d'assistance et nK a répondu : "… masquer les contrôles lorsque le bloc n'est pas sélectionné est une bonne fonctionnalité, qui a déjà été ajoutée dans les blocs ACF et sera bientôt ajoutée dans les blocs paresseux." Ici, vous l'avez - le tout en temps voulu.

Conclusion : Complexe, Évolué ou Facile.

ACF 5.8 possède une fonction de création de blocs très robuste, et tous ceux qui ont utilisé le plugin pour créer des sites seront très heureux de pouvoir créer des blocs dynamiques pour leurs clients. C'est bien pensé, et les développeurs de tous les ensembles de compétences seront rapidement opérationnels.

Quelqu'un qui ne connaît pas bien PHP aura sa juste part d'essais et d'erreurs pour tout faire fonctionner. Cela deviendra encore plus compliqué lorsque les exigences pour les blocs seront plus impliquées et au-delà du cas d'utilisation de ce test. Ce n'est pas un outil pour les débutants WordPress ou les implémenteurs de sites de bricolage qui n'écrivent pas beaucoup de code eux-mêmes.

Pour l'instant, seule la version ACF 5.8 Pro est livrée avec la fonction de création de blocs. Condon envisage d'en faire un plugin autonome. (Voyez ce que les Twitteratti pensent de l'idée… )

Block Lab en est à ses premiers stades de développement. Il réussit à résumer la majeure partie de l'architecture des blocs et réduit la quantité de code à écrire. La documentation est très utile. Le modèle est stocké dans un fichier séparé et doit être conservé avec le reste des fichiers de thème. Si, dans mon entreprise, nous l'utilisions pour l'un de nos projets, nous stockerions le fichier de modèle avec l'un de nos plugins d'assistance, afin que nos clients puissent changer de thème sans perdre le contenu et l'affichage des blocs construits avec Block Lab.

La version Pro propose des fonctionnalités supplémentaires, telles que des champs de répétition, l'importation/exportation de blocs, des champs d'objet utilisateur, un champ de carte et bien d'autres fonctionnalités de bloc.

XWP est une agence travaillant avec des entreprises clientes sur l'hébergement VIP de WordPress.com et d'autres sociétés. Les membres de leur équipe contribuent à d'autres grandes idées dans l'espace WordPress, notamment le Customizer, AMP et Tide. Je m'attends à ce que le plugin reste et se développe avec Gutenberg Phase 2 en un système robuste pour les implémenteurs de sites, les agences et les développeurs de thèmes.

Lazy Blocks est un délice à mettre en place et comme mentionné, je suis un fan de la syntaxe de template Handelbars. Il est facile à apprendre même pour les débutants, et avec un peu de pratique, un propriétaire de site pourrait créer des blocs Gutenberg spécifiques pour son site. La gestion des blocs dans l'éditeur, bien que fonctionnant, est un peu maladroite, car l'affichage ne bascule pas entre l'état de sélection de bloc et l'état de désélection pour le moment.

S'il est nécessaire d'avoir des champs supplémentaires pour une page ou une section d'un article, Lazy Blocks est un excellent outil pour prototyper et passer rapidement de l'idée à la preuve de concept.

La seule mise en garde : je n'ai pas pu découvrir qui sont les personnes derrière nkdev.info et le nom Nikita. Le site Web révèle seulement qu'il s'agit d'une jeune entreprise, mais rien de plus. Si vous utilisez le plugin, assurez-vous que le plan B est en place au cas où les développeurs abandonneraient le plugin avant qu'il ne décolle.

ACF 5.8 est assez complexe ; Block Lab est un semi-complexe très flexible et unique; et Lazy Blocks est bien nommé et le plus facile à utiliser. Aucun d'entre eux ne vous permet de vous en sortir sans écrire de code, car chaque bloc nécessite une sortie d'affichage en HTML.

Faites-moi savoir ce que vous pensez de ces trois plugins générateurs de blocs. De plus, si vous avez trouvé un autre plugin qui vous permet de construire des blocs sans entrer dans Javascript, je veux le savoir ! N'hésitez pas à partager vos réflexions et découvertes dans les commentaires !