Tuto Modern Fields Pro : tirer le meilleur parti des fonctionnalités premium

Modern Fields, c’est l’équivalent de ACF, mais beaucoup plus adapté pour le Full Site Editing.

La dernière fois, je vous ai présenté Modern Fields en version gratuite et son concept de champs personnalisés gérés depuis l’éditeur de blocs. Aujourd’hui, je souhaite vous présenter plus particulièrement les fonctionnalités premium et comment tirer parti des avantages qu’elles apportent.

D’ailleurs, pour le lancement, toutes les licences sont à -50%.

Découvrir Modern Fields

Dans cette version pro, j’ai voulu apporter le maximum de générosité. Il fallait bien sûr que j’ai au moins les mêmes fonctionnalités qu’ACF Pro, mais je voulais aller encore plus loin.

Et si vous avez la flemme de lire, voici l’équivalent Youtube :

#1 • Les pages d’options

Tout d’abord, les pages d’options, essentielles pour ajouter des informations globales disponibles sur tout le site.

Par défaut, les champs sont forcément attachés à une publication en particulier. Avec les pages d’options, on peut attacher des champs à une nouvelle page, que l’on vient placer où l’on veut dans le menu principal de l’interface d’administration de WordPress.

Pour cela, il faut d’abord créer un nouveau groupe de champs et ajouter quelques champs. Vous pouvez bien entendu organiser le tout grâce aux colonnes, rangées et grilles (puisqu’on est dans l’éditeur de blocs).

Ensuite, il suffit d’assigner le groupe de champs à une page d’options et choisir l’emplacement dans le menu. Il est également possible de placer la page en sous-menu des sections Réglages, Outils, Extensions, Thèmes…

Ensuite, les valeurs sont disponibles de partout sur le site, soit en PHP via la fonction get_field(), soit via le bloc d’affichage des valeurs du champ.

Et pour gagner du temps, je vous propose des compositions déjà toutes prêtes pour créer de belles pages d'options en quelques minutes.

#2 • Le champ répéteur

Le champ répéteur est un classique d'ACF, et beaucoup utilisé par les agences. Ce champ est très utile lorsqu'on a besoin de faire une liste d'éléments comme par exemple afficher les membres de l'équipe.

Dans WordPress, on pourrait utiliser le principe de Custom Post Types, mais cela implique que chaque membre ait sa propre page dédiée, ce qui est souvent overkill.

L'interface du répéteur vous permet d'ajouter, supprimer mais aussi réorganiser facilement les éléments de votre liste.

L'avantage par rapport à ACF, c'est que vous allez pouvoir personnaliser les éléments du répéteur. Que ce soit la couleur de fond, la bordure, mais également la disposition des champs à l'intérieur.

Là aussi, vous pouvez utiliser les colonnes, rangées et grilles pour mettre en forme vos champs afin de fournir une UI adaptée.

Pour afficher ces champs, vous pouvez créer un bloc sur mesure en PHP et récupérer les données pour ensuite les afficher.

Les données de Modern Fields sont automatiquement exposées à travers la variable $fields, et il suffit de boucler sur le champ répéteur avec un foreach. Simple, basique.

#3 • Le champ relationnel et sa boucle de requête

Le champ relationnel a toujours été l'un de mes champs préférés dans ACF. C'est pour cela que j'ai apporté un soin tout particulier à mon interprétation de ce champ dans Modern Fields.

Pour ceux qui ne le connaissent pas, ce champ vise à permettre à l'utiliser de sélectionner des publications à afficher.

Dans la boucle de requête native de WordPress, on peut uniquement choisir l'ordre d'affichage (du plus récent au plus ancien, par ordre alphabétique…). Mais bien souvent, nos clients ont besoin d'avoir le contrôle sur les éléments à afficher.

Comme c'est un champ qui peut vite prendre de la place, je l'ai fait en 2 parties : le champ affiche un aperçu de la sélection en cours, avec un bouton pour la modifier, et lorsqu'on clique, une modale s'ouvre avec les fameuses 2 colonnes :

Dans la colonne de gauche, on retrouve la liste des publications disponibles, avec un moteur de recherche ainsi que des filtres par type de publication et taxonomies.

Dans les réglages du champ, on peut bien sûr limiter les post types et taxonomies à afficher.

On peut ensuite organiser les éléments sélectionnés via un glisser-déposer pour définir l'ordre d'affichage des éléments. On peut le faire dans la modale, mais également dans l'aperçu une fois celle-ci fermée.

La boucle relationnelle : le bloc pour afficher sa sélection

C'est là que ça devient vraiment intéressant. Dans ACF, on est obligé d'écrire du code pour consommer notre sélection.

Dans Modern Fields, j'ai créé une variante du bloc « Boucle de requête », qui permet de sélectionner le champ relationnel et récupérer sa sélection.

Résultat : vos articles s'affichent directement sous forme d'une boucle de requête standard, et vous allez donc pouvoir personnaliser l'affichage en insérant tous les blocs que vous voulez : titre de publication, image mise en avant, extrait, et même le bloc d'affichage des valeurs de champs.

De cette manière, on reste au plus proche de l'approche native de WordPress, sans réinventer la roue. La boucle relationnelle est simplement une boucle de requête dans laquelle j'injecte la sélection.

#4 • La logique conditionnelle

Une autre fonctionnalité très demandée : la logique conditionnelle. Parfois nos clients nous demandent des champs, beaucoup de champs. Et on a tôt fait d'avoir des interfaces lourdes.

La logique conditionnelle permet d'afficher certains champs uniquement lorsque certaines conditions sont atteintes (une case à cocher active par exemple).

Sur ACF, il faut définir la logique conditionnelle sur chacun des champs, ce qui est laborieux (à part si on fait un groupe ou clone). Avec Modern Fields, la logique conditionnelle est rattachée à un bloc conteneur dans lequel on va pouvoir glisser ses champs.

De cette manière, on n'a besoin de définir qu'une seule fois les règles d'affichage. Les conditions disponibles dépendent des champs du groupe.

Par exemple, si vous avez mis un interrupteur (toggle), alors vous pourrez ajouter la condition « si actif » ou « si inactif ». Si vous avez un champ de type numérique comme le range, vous pourrez tester si la valeur est supérieure, inférieure ou égale.

Une fois la logique conditionnelle en place, elle sera appliquée automatiquement dans le groupe de champs. Dans l'exemple ci-dessous, on peut voir que les champs apparaissent seulement lorsque le pourcentage dépasse 40.

#5 • Afficher les champs dans l'éditeur

Pour afficher les champs dans vos templates avec ACF, il faut utiliser la fonction get_field(). À l'ère de l'éditeur, cela implique de créer un bloc custom pour chaque valeur que l'on souhaite afficher.

Dans Modern Fields, je fournis un bloc capable d'afficher la plupart des valeurs meta sans aucune ligne de code.

Pour cela je mets à disposition le bloc « Field value block ». Celui-ci est capable de récupérer toutes les metas de la publication en cours, mais également celles des pages d'options ou encore celles de l'auteur de la publication.

Pour cela, il suffit d'ajouter le bloc et sélectionner la meta à afficher. Dès que possible, le bloc utilisera le block bindings natif de WordPress, comme ça, pas de surcouche.

Il est d'ailleurs possible d'éditer la meta directement depuis l'éditeur, et elle sera mise à jour dans la metabox en temps réel.

Bref, c'est ma petite fierté, et ce bloc permet vraiment d'aller jusqu'au bout, là où ACF s'arrête à la saisie des metas.

#6 • Filtrer les résultats dans la boucle de requête

Ça, c'est une de mes fonctionnalités préférées et qui n'est pas disponible dans ACF ! Puisqu'on a plein de champ à disposition, autant les utiliser pour filtrer les résultats d'une boucle de requête.

Alors oui, on pourrait le faire en PHP. Mais en fait, pourquoi s'embêter si on peut le faire visuellement ?

Du coup, j'ai ajouté des réglages dans le bloc « Boucle de requête » pour filtrer les résultats.

Par exemple, si vous avez un champ « Score » de type numérique, vous allez pouvoir afficher uniquement les publications dont le score est supérieur, égal ou inférieur à une certaine valeur.

Parce que finalement, les champs ne sont pas tous destinés à être affichés.

#7 • Ajouter des champs aux blocs existants

Autre fonctionnalité qui n'est aujourd'hui pas disponible dans ACF, c'est la possibilité d'ajouter des réglages aux blocs natifs de l'éditeur.

Avec Modern Fields Pro, vous pouvez déclarer un groupe de champ, et l'assigner à un bloc existant. Par exemple, ajouter un champ Copyright au bloc « Image ».

D'ailleurs, vous pouvez même choisir dans quel onglet iront les champs : Contenu, Réglages ou encore Styles.

Une fois assigné à un bloc existant, vous verrez les champs apparaître dans le bloc lorsque vous l'utiliserez depuis l'éditeur.

Ensuite, il suffira d'appliquer un peu de PHP grâce au hook render_block() pour afficher les champs :

Les valeurs des champs sont ensuite disponibles dans $blocks[attrs]['modernFields'].

De là, vous allez pouvoir afficher des données, faire des tests, et modifier l'affichage HTML prévu initialement par le bloc

#8 • Créer des blocs custom en PHP

Avec Capitaine WP, je vous apprends à développer vos blocs sur mesure en JS avec React, en respectant les bonnes pratiques de WordPress.

Mais dans la réalité du quotidien des agences, tout le monde ne maîtrise pas React, ou n'a le temps d'apprendre un nouveau langage.

Alors du coup, il reste possible de déclarer des blocs, et d'y assigner des champs. Et pour cela, Modern Fields vous propose une interface visuelle pour aller plus vite.

Une fois que c'est fait, il faudra aller créer un groupe de champs et l'assigner au bloc précédemment créé.

Et enfin, créez un fichier PHP dans votre thème, dans le dossier /mf-blocks/, afin d'écrire le template de votre bloc.

Les valeurs de vos champs sont disponibles via la variable $fields. De là, vous pouvez créer tout type de blocs.

#9 • Emplacements de champs avancés

Dans la version gratuite, vous pouvez positionner les champs dans une metabox, en bas de l'écran, ou dans l'inspecteur à droite.

Dans la version pro, je propose 3 emplacements supplémentaires afin d'optimiser au mieux votre interface de l'éditeur en fonction de l'importance de vos champs.

Dans un panneau séparé

L'inspecteur, c'est bien mais c'est déjà bourré d'informations, comme les informations de publication de l'article, ses catégories et étiquettes…

Du coup, je propose comme emplacement un panneau séparé dédié aux champs, et accessible depuis un petit bouton en haut à droite de l'éditeur :

Dans un panneau large déroulant

Sinon, sur le même principe, j'ai mis en place un panneau déroulant plus large qui s'avère pratique lorsque vous manipulez des champs qui ont besoin de la place, comme l'éditeur de texte, le champ répéteur ou encore le champ relationnel.

Vous avez même la place pour mettre plusieurs champs côte à côte grâce aux colonnes ou aux rangées.

Dans une fenêtre modale

Et sinon, vous pourriez envisager la fenêtre modale, qui est large elle aussi et affichée au centre de l'écran.

À vous de choisir !

#10 • Compositions prêtes à l'emploi

Et enfin, j'ai ajouté quelques compositions prêtes à l'emploi à utiliser dans vos groupes de champs et pages d'options.

On sait très bien que votre designer n'aura pas le temps de vous concevoir une belle page d'options, et vous non plus. Alors je vous propose une dizaine de compositions à importer d'un clic, afin que vous n'ayez plus qu'à définir vos champs.

---

Et voilà, vous savez maintenant comment utiliser les fonctionnalités premium de Modern Fields.

Vous voyez une fonctionnalité manquante ? N'hésitez pas à me contacter pour me donner vos suggestions.

Et si vous souhaitez une démo, vous pouvez essayer Modern Fields sans installation depuis le site, et je vous propose également une visio pour vous montrer les fonctionnalités qui vous intéressent le plus en détail.