Formation « Créer des blocs avec Gutenberg »

Dans quels cas Gutenberg peut remplacer ACF ?

Lecture : 3 minutes • 6

Est-ce que les metabox et les champs ACF gardent leur utilité maintenant qu’il y a Gutenberg ? Est-ce que l’on peut se passer totalement d’ACF ou est-ce que les deux peuvent vivre conjointement dans un projet ? C’est ce que l’on va voir dans ce cours.

Si vous me connaissez bien, vous savez que je suis un grand fan d’ACF. Depuis que je l’ai découvert en 2011 je n’ai pas fait un seul projet sans l’utiliser.

Mais que se passe-t’il maintenant que Gutenberg est là ? En a-t’on encore besoin ?

Eh bien oui ! On va voir un cas de figure très simple : ce site.

De ACF à Gutenberg

J’ai remplacé toute la partie ACF + Champ flexible qui me permettait d’appeler des groupes de champ à volonté pour écrire un simple texte, faire un bloc attention, charger une définition ou une interview …

Tout ceci était assez pratique avec ACF, mais pas très visuel, et lors des modifications de cours c’est toujours un peu galère d’avoir plusieurs éditeurs Tiny MCE et plusieurs barres de scroll.

Gutenberg apporte un vent de fraicheur et d’ergonomie dans tout cela. Voici la comparaison avant / après :

ACF Flexible comparé à Gutenberg
C’est beaucoup plus clair côté Gutenberg !

On voit bien sur cette image comparative que l’interface ACF + Flexible est plutôt lourde, de plus je n’ai pas d’aperçu de ce dont à quoi peut ressembler mon bloc information. Alors qu’avec Gutenberg, j’ai l’aperçu temps réel et une interface épurée.

Conseil

La combinaison ACF + champ flexible est une technique qui a été très utilisée par les freelances et agences afin d’apporter de la flexibilité à leurs clients, sans leur donner pour autant trop de pouvoir.

Même si la solution était « pratique », on était quand même loin d’un éditeur WYSIWYG. L’arrivée de Gutenberg m’a permis de m’affranchir de cette technique.

Il n’y a donc plus de raison aujourd’hui pour continuer d’utiliser le champ flexible d’ACF dans ce cas précis.

Alors on se passe totalement d’ACF ?

Mais je n’ai pas supprimé ACF pour autant, car j’ai besoin de pas mal d’informations pour mes cours qui ne sont pas directement rattachés au contenu.

Gutenberg conserve les zones de metabox qui existaient auparavant et on peut donc toujours s’en servir, de la même manière qu’avant, pour ajouter des champs ACF, ou autres. On a toujours accès à la barre latérale pour y mettre des metas :

ACF et Gutenberg cohabitent dans l'interface d'administration
ACF et Gutenberg cohabitent dans l’interface d’administration

J’ai placé sous Gutenberg, dans la zone metabox normale, quelques champs ACF : un post-it pour y écrire toutes les choses dont je dois penser à parler dans ce cours, en vrac (et qui ne sera pas affiché en front), ainsi que la gestion du quiz.

D’ailleurs j’aurais pu faire un bloc quiz avec Gutenberg, mais au final pour ce bloc en particulier, je trouve que l’interface d’ACF est suffisante. Est-ce que je me trouve des excuses car j’ai eu la flemme de le faire ? Tout à fait.

De plus j’ai créé un autre groupe de champs ACF que j’ai placé en side, et il vient apparaitre dans l’inspecteur de Gutenberg, sous l’onglet « avancé » (caché par défaut).

Ici j’ai plusieurs informations utiles sur le cours : est-ce qu’il est disponible aux élèves, est-ce que c’est un cours premium, est-ce que je dois indiquer qu’il y a un exercice ou un devoir dedans. Il y a également le temps de lecture, calculé automatiquement lors du hook save_post. et le temps de pratique que je peux remplir manuellement.

ACF garde donc toute sa place pour ce genre d’informations. J’ai simplement supprimé le champ l’ancien champ flexible au profit de Gutenberg.

Donc pour résumer, j’utilise :

  • Gutenberg pour tout ce qui concerne le contenu principal de l’article (ou du cours)
  • ACF pour toutes les informations complémentaires comme le temps de lecture, si le cours dispose d’un exercice, le pense-bête ou encore le quiz

Le mix des deux est donc un cocktail gagnant qui vous permettra de faire absolument tout ce que vous voulez !


Dans les prochains cours on va étudier plus en détails certains blocs de ma création, et voir comment j’ai résolu certaines problématiques.

6

Questions, réponses et commentaires

  1. sebastien.chandonay

    Le 11 décembre 2018

    Bonjour et merci pour ton travail !
    La raison qui m’a poussé à suivre cette formation est que j’ai passé 1 journée à essayer de créer (sur un projet tout neuf qui sera Gutenberg friendly) une metabox en sidebar avec cette nouvelle architecture que propose WP 5.0. Donc ajouter un “panel” sur la sidebar de droite dans l’onglet “document”, l’équivalent d’une classique metabox ‘side’ mais avec React. Je ne trouve pas de doc.. et en fouillant sur le git de gutenberg, et bien je ne comprends pas comment je peux faire cela.
    Merci de ton intérêt.
    Sébastien Chandonay

    1. Maxime BJ

      Le 12 décembre 2018

      La doc a pas mal bougé de place en effet ! Et les Metabox ont subit pas mal de changement. Il y a cette page sur la nouvelle documentation qui devrait t’aider en attendant que je fasse un tuto à ce sujet : https://wordpress.org/gutenberg/handbook/designers-developers/developers/backward-compatibility/meta-box/

  2. xavier

    Le 16 janvier 2019

    Bonjour et merci pour la qualité des vidéos et contenus de la formation.

    Petite question, je me lance dans la formation mais je dois commencer un projet rapidement.

    Je me demande comment tu as créé ta page d’accueil, as-tu utilisé des block gutenberg ou es-tu passé par acf pour manager le contenu ?

    1. Maxime BJ

      Le 16 janvier 2019

      J’ai gardé Gutenberg pour les cours et le futur blog seulement (en gros : pour les CPT) mais pour les pages, ce sont des groupes de champs ACF en effet ! C’est beaucoup plus simple pour ces cas là (il y a aussi quelques WP Query pour aller chercher les tarifs, la liste des formations…)

      1. xavier

        Le 16 janvier 2019

        Ok merci pour cette réponse ultra rapide et rassurante, je manquais de courage de faire un template de page compliqué avec Gutenberg qui n’est peut être pas encore prêt pour ça.

        Bonne journée

  3. Fred - FLQ

    Le 12 mars 2024

    Le lien sur les metabox mentionné dans les commentaires ci-dessus n’est plus valable. Voici le nouveau lien avec pas mal de nouvelles infos sur les différentes approches possibles : https://developer.wordpress.org/block-editor/how-to-guides/metabox/

Laisser un commentaire