ACF Blocks fournit un assortiment de blocs construits à partir de champs personnalisés avancés Pro

Publié: 2020-05-07

Au cours du week-end, Munir Kamal a publié la version 2.0 de son plugin ACF Blocks, un projet qui crée une suite de blocs pour l'éditeur. Le plugin propose 18 blocs personnalisés dans sa version gratuite et 15 autres dans la mise à niveau pro. Il est construit sur Advanced Custom Fields Pro (ACF Pro).

La dernière mise à jour du plugin a ajouté la prise en charge de la typographie, y compris des options pour utiliser diverses polices Google pour le texte en bloc. Kamal a également inclus des options de style de base pour les fonctionnalités de conception telles que la marge et le rembourrage pour chaque bloc du plugin.

Avec ACF Pro comme dépendance matérielle, cela limite l'audience des blocs ACF. En grande partie, ce plugin sera utile aux agences et aux indépendants qui ont besoin de créer rapidement des fonctionnalités pour les clients dans les limites de leur budget. À cette fin, le plugin fait un travail solide.

Le couplage étroit avec ACF Pro nuit à l'expérience utilisateur du plugin. Cependant, les idées derrière ACF Blocks et ses options personnalisées compensent les lacunes de s'appuyer sur son plugin parent dépendant. Le découplage des deux est peu probable, mais cela rendrait l'expérience plus fluide et ouvrirait le plugin à un public plus large.

Kamal s'est inspiré du plugin d'ACF et de sa version pro. Il a décrit le processus de création de blocs avec le framework "super facile", même pour un développeur de niveau intermédiaire. "Cela a été un framework WordPress tellement incroyable pendant des années pour créer des champs personnalisés", a-t-il déclaré. "Et quand [Elliot Condon] a annoncé la fonctionnalité de création de blocs dans ACF, cela m'a rapidement incité à créer cette collection de blocs ACF prêts à l'emploi."

La plus grande limitation technique est que Kamal ne peut pas construire de blocs imbriqués, ce qui est une limitation actuelle d'ACF. "J'en ai déjà discuté avec [Condon], et il travaille déjà à apporter cette fonctionnalité, espérons-le bientôt", a-t-il déclaré. "Une fois que cela arrivera à ACF, nous pourrons créer des blocs Gutenberg plus étonnants et plus puissants."

Regardez une courte présentation du fonctionnement du plugin :

Assortiment utile de blocs

En testant principalement la version gratuite d'ACF Blocks, j'ai découvert qu'elle comportait plusieurs blocs utiles qui pourraient répondre immédiatement aux besoins courants des utilisateurs finaux. Avec 18 blocs gratuits disponibles, les utilisateurs ont beaucoup à faire avant de décider s'ils souhaitent suivre le chemin de la mise à niveau vers la version pro.

L'un des meilleurs blocs de la collection est le bloc Photo Collage. C'est la réponse d'ACF Blocks au bloc de base de la galerie. Les options de grille pour ce bloc à elles seules font que ce plugin vaut la peine d'être vérifié. Le bloc propose entre 2 et 15 dispositions de grille, selon l'option de grille sélectionnée par l'utilisateur.

Capture d'écran du bloc Photo Collage du plugin ACF Blocks dans l'éditeur WordPress.
Réglage de la grille pour le bloc Photo Collage.

Mon deuxième favori de l'assortiment est le bloc Témoignage. Couplé aux options de typographie, disponibles pour tous les blocs, vous pouvez vous amuser à concevoir une section de témoignages.

Capture d'écran du bloc Témoignage du plugin ACF Blocks dans l'éditeur WordPress.
Bricoler avec Google Fonts dans le bloc Témoignage.

Ceci est un petit échantillon de ce que le plugin peut faire. Le bloc Liste de prix peut aider les sites de restaurants à configurer leur menu. Le bloc Pricing Box, en particulier lorsqu'il est imbriqué dans le bloc Core Columns, facilite la configuration d'une section de tarification avec plusieurs options de produits. De plus, le bloc Équipe simplifie la création de sections de profil sur la page d'équipe/à propos d'une entreprise.

Les blocs suivants sont disponibles dans la version gratuite (avec plusieurs autres dans la version pro) :

  1. Bloc d'image défilable
  2. Bloc d'onglets
  3. Basculer le blocage
  4. Bloc accordéon
  5. Bloc de curseur d'image
  6. Bloc de partage social
  7. Bloc de collage de photos
  8. Blocage des messages
  9. Bloc Témoignage
  10. Bloc d'équipe
  11. Bloc multi-boutons
  12. Bloc de boîte de prix
  13. Bloc liste de prix
  14. Commencer le bloc d'évaluation
  15. Bloc de barre de progression
  16. Bloc de numéro de compteur
  17. Cliquez pour tweeter Bloquer
  18. Bloc d'heures d'ouverture

Les blocs préférés de Kamal dans la suite globale sont Image Hotspot, qui permet aux utilisateurs de définir un arrière-plan d'image avec des « pointeurs » pour faire apparaître le contenu ; Before After Image, qui permet aux utilisateurs de comparer deux images à l'aide d'une barre coulissante ; et Photo Collage, le bloc de galerie basé sur la grille du plugin. Les deux premiers ne sont disponibles que dans la version pro du plugin. Le créateur du plugin a déclaré qu'il pensait que tous les blocs étaient utiles, mais que ceux-ci étaient les plus amusants à construire.

Marge d'amélioration

ACF Blocks est un concept sympa. Il obtient beaucoup de choses. Cependant, il existe des problèmes mineurs qui nuisent à l'expérience de travail avec ses blocs. Ces problèmes ne sont pas insurmontables, et je m'attends à ce que Kamal les résolve dans les prochaines versions en se basant sur sa connaissance de son travail passé et sa volonté de créer d'excellents produits pour les utilisateurs.

Le problème le plus immédiat et probablement le plus simple à résoudre concerne les styles du plugin pour les marges gauche et droite sur chaque bloc. Le plugin remet ces marges à 0 par défaut. Selon le thème actif sur un site, cela pourrait déplacer les blocs vers le bord de l'écran au lieu de la zone de contenu sur le front-end. Certains thèmes utilisent des marges gauche/droite pour aligner le contenu. Ce n'est pas un problème uniquement avec les blocs ACF. Il est répandu parmi les plugins avec une sortie frontale.

Une solution rapide au problème de marge consiste à encapsuler l'un des blocs du plug-in dans le bloc principal du groupe. Cela remettra les marges sous le contrôle du thème.

La modification du contenu du bloc s'effectue dans le panneau d'options du bloc plutôt que directement dans le bloc. Je ne sais pas s'il s'agit d'une limitation de l'utilisation du framework ACF Pro ou d'une décision de conception de la part de Kamal. Il est étrange de passer de l'édition de contenu dans la zone de contenu à l'édition de contenu dans la barre latérale.

Un exemple de ma confusion avec le contenu du bloc était avec le bloc Photo Collage. J'ai cliqué sur le bloc, espérant faire apparaître la médiathèque pour le téléchargement. Rien ne s'est passé. J'ai cliqué à nouveau parce que, eh bien, je n'ai peut-être pas obtenu un bon clic la première fois. Rien ne s'est passé. J'ai finalement trouvé le bouton de téléchargement d'image sous le panneau d'options du bloc à droite.

La définition des options de bloc peut parfois sembler un peu lente, la sortie du bloc dans l'éditeur ne reflétant pas immédiatement les modifications. Cela est principalement dû au fait qu'ACF Blocks s'appuie sur les capacités de rendu côté serveur d'ACF Pro. Il est peu probable que cela puisse être résolu dans le plugin blocks. Certains utilisateurs peuvent trouver le rendu différé fastidieux lors de la modification de plusieurs options.

Dernières pensées

Kamal a rassemblé un ensemble utile de blocs qui aideront de nombreux utilisateurs finaux à créer des sections de contenu qu'ils ne peuvent pas créer immédiatement. Entre les versions gratuite et pro, il y a un total de 33 blocs. Le créateur s'engage à ajouter plus de blocs au fil du temps en fonction des commentaires des utilisateurs. Dans l'immédiat, il prévoit de continuer à pirater les corrections de bogues et à améliorer le code.

J'ai toujours l'impression que le fonctionnement d'ACF Pro est un obstacle à la qualité de ce plugin s'il était construit à partir de zéro. Cela dit, le framework a contribué à faire du plugin de Kamal une réalité. ACF Blocks est une vitrine de ce qui est possible via ACF Pro, qui devrait inspirer d'autres développeurs qui recherchent des solutions construites sur l'un des frameworks les plus largement utilisés dans l'écosystème WordPress.

Kamal comprend que certains utilisateurs d'ACF Pro peuvent s'essayer à créer des blocs similaires, mais il a le sentiment que les connaissances et le dévouement de son équipe à offrir une assistance sont les éléments les plus importants de l'équation. "ACF Blocks permet d'économiser du temps et des efforts pour créer vous-même des blocs pour les éléments de conception Web les plus courants", a-t-il déclaré.

Remarque : cet examen du plugin et ces commentaires ont été demandés par l'auteur du plugin. Lisez notre article sur les commentaires honnêtes basés sur des expériences authentiques pour plus d'informations sur la façon dont les avis sont traités.