Une fois qu’on a atteint les limites du FSE, il nous reste une dernière carte à jouer : on va pouvoir écrire un peu de code sur-mesure afin de pousser la personnalisation de notre site à son paroxysme. Dans ce cours, on va voir 4 solutions : le Block Bindings, les hooks de blocs, la création de blocs avec ACF en PHP, ou nativement avec React.
Sommaire du cours
À ce niveau de la formation, on a utilisé tous les outils à notre disposition pour créer notre site sans code (ou presque !). Dans le cadre du FSE, on parle de low-code plutôt que de no-code.
On a tout d’abord interprété le design system via le theme.json, on a ensuite créé des variations des styles de blocs, puis des compositions de blocs réutilisables, et enfin réalisé les modèles de pages.
Maintenant que se passe-t-il si ça ne suffit pas ? Si on a des besoins spécifiques auxquels les techniques abordées dans cette formation ne peuvent pas répondre ?
C’est à ce niveau qu’on va enfin devoir mettre les mains dans le code. Ouf, pas besoin de licencier les développeurs de l’équipe finalement !
En réalité, avec quelques compétences en développement web, on est encore loin d’avoir utilisé toutes nos cartes. Il existe 4 manières principales de répondre à des besoins spécifiques avec WordPress grâce au code, classées de la technique la plus simple à la plus complexe.
On peut donc :
- Insérer des données dynamiques via le Block Bindings ;
- Hooker les blocs natifs pour ajouter des réglages supplémentaires ;
- Créer des blocs sur-mesure en PHP avec l’extension ACF Pro ;
- Créer des blocs sur-mesure Gutenberg avec React (méthode officielle).
Je vais vous présenter ces 4 méthodes dans la suite de ce cours, et on ira plus en profondeur dans la suite de ce chapitre, où chaque cours abordera l’un de ces concepts.
Vous allez donc créer un bloc pour répondre à une fonctionnalité spécifique.
1 bloc = 1 fonctionnalité du site !
Insérer des données dynamiques via la binding API
Le block binding a été introduit avec WordPress 6.5 et permet d’insérer automatiquement des données dynamiques dans les contenus de vos pages.
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
C’est donc la fonctionnalité idéale pour insérer des données en provenance de vos champs ACF directement dans vos blocs.
Le principe est simple : il suffit de lier l’attribut d’un bloc à une source de données, comme une métadonnée, et le tout sans coder !
Prenons un exemple tout simple : imaginez que vous réalisez un site de jeux vidéo comme IGN, et vous souhaitez mettre une note à chaque jeu, comme sur la capture ci-dessous :
Si vous indiquez la note directement dans le contenu, on ne pourra pas s’en servir pour faire des requêtes liées à celle-ci ailleurs sur le site.
Par exemple, votre client pourrait vous demander d’afficher sur la page d’accueil la liste des 5 jeux les mieux notés.
Le problème, c’est que cette note est juste un texte parmi d’autres perdu dans le contenu de la page.
Par contre, en enregistrant la note dans une métadonnée, via un custom field de WordPress, ou mieux encore, via un groupe de champs ACF, cette note sera alors enregistrée indépendamment du contenu en base de données.
On pourra alors créer une requête visant cette donnée avec la WP Query de WordPress.
Et c’est là qu’intervient le block binding ! Pour l’instant, il n’y a pas encore d’interface dans WordPress pour le gérer visuellement, il va donc falloir ajouter quelques lignes de code nous-même.
Pour vous donner une idée du fonctionnement, il faut déclarer la donnée directement dans les commentaires HTML du bloc concerné :
En termes simples, j’indique à Gutenberg que le contenu du paragraphe devra être rempli avec la valeur de la meta videogame_note.
On verra dans le prochain cours comment mettre en place le block binding avec WordPress, mais également avec ACF.
Prérequis techniques
Cette méthode est la plus simple à mettre en place, car on aura uniquement besoin d’ajouter quelques petites lignes de PHP et des commentaires dans le HTML du bloc concerné.
Il est bien de connaître le fonctionnement d’ACF si vous comptez utiliser les données en provenance de ses groupes de champs.
En savoir plus sur le block binding
Cette méthode vous intéresse ? Consultez le cours dédié à ce sujet. C’est justement le prochain cours de cette formation.
Hooker les blocs natifs pour ajouter des réglages
Une autre approche serait d’ajouter des réglages aux blocs natifs de WordPress. Ainsi, on n’a pas besoin de créer forcément de nouveaux blocs pour répondre à des besoins spécifiques.
Par exemple, vous pourriez vouloir ajouter une icône personnalisable à vos boutons (un peu comme les miens).
Et pour cela, il existe des hooks dédiés en JavaScript. Il faudra d’ailleurs en manipuler plusieurs pour : déclarer un nouvel attribut, ajouter un champ dans l’inspecteur du bloc, enregistrer sa valeur avec le bloc et enfin modifier le HTML généré.
Bref, pas si simple en fait ! Voici un court exemple pour vous donner une idée :
Toutefois, cela peut s’avérer parfois compliqué, et la création d’un bloc sur-mesure pourra s’avérer au final bien plus simple.
Prérequis techniques
Pour appliquer cette technique, vous devez impérativement être à l’aise avec JavaScript mais également React. Vous devez aussi savoir comment créer des blocs Gutenberg sur-mesure, sinon ça risque d’être compliqué.
Heureusement, j’ai une formation dédiée à ce sujet !
En savoir plus sur les hooks de blocs
Si cette approche vous intéresse, je vous invite à consulter ce coursde la formation développer des blocs Gutenberg :
Développer ses propres blocs sur-mesure avec ACF
Si les solutions précédentes ne suffisent pas, on va pouvoir carrément développer nos blocs sur-mesure. Ainsi, vous pourrez répondre à absolument tous les besoins possibles !
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
Et pour cela on peut soit créer des blocs sur-mesure avec WordPress (j’en reparle juste après), soit si vous voulez gagner du temps, vous pouvez les créer via Advanced Custom Fields à condition d’avoir une licence Pro.
L’avantage, c’est que c’est beaucoup plus facile de faire des blocs ACF car vous allez les coder en PHP uniquement, et vos données dynamiques seront simplement des groupes de champs.
J’estime qu’avec ACF, vous créez des blocs sur-mesure 3 à 5 fois plus rapidement qu’avec JavaScript et React.
Il y a un tout petit désavantage par contre : vous ne modifiez pas vos blocs en temps réel directement en cliquant sur les contenus. À la place, lorsque vous sélectionnez un bloc ACF, un groupe de champs apparaît dans l’inspecteur à droite :
Lorsque vous faites des modifications de valeurs, le contenu du bloc est mis à jour toutes les secondes environ.
Parfois, l’interface d’ACF est un peu serrée, notamment lorsqu’on utilise le champ répéteur et le champ flexible. Heureusement, il existe un autre mode où le groupe de champs s’affiche à la place du bloc. Le bloc réapparaît une fois que vous quittez le groupe de champs ACF.
Il y a donc des chances que vos clients n’y voient que du feu par rapport à l’ergonomie native de Gutenberg ! C’est donc une méthode très viable pour créer vos fonctionnalités sur-mesure au travers des blocs.
Prérequis techniques
Cette approche est très simple si vous connaissez les bases de la création de thèmes classiques et si vous maîtrisez la création de groupes de champs avec ACF.
Il vous faudra simplement quelques bases en HTML/CSS et PHP et c’est tout !
En savoir plus sur les blocs ACF
Si cette approche vous intéresse, j’en parle également dans ce chapitre, mais si vous êtes impatient d’en savoir plus, voici l’accès direct au cours :
Développer des blocs sur-mesure en JS et React
Et enfin, si vous voulez débloquer toutes les limites, vous pouvez passer au développement de blocs Gutenberg sur-mesure. C’est la méthode officielle et native fournie par WordPress.
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
J’ai écrit une formation complète à ce sujet en 2019, que j’ai récemment mise à jour !
Avec cette solution, vous pouvez réaliser n’importe quel type de blocs tout en respectant l’UX de Gutenberg. C’est donc un niveau au dessus des blocs ACF.
De plus, vous pouvez faire plus de choses. C’est comme ça que j’ai fait mon bloc sommaire que vous pouvez observer au début de chaque cours : ce bloc se génère en temps réel lorsque je rédige, en analysant le contenu de mon éditeur.
Mais c’est un cas de figure très rare, vous pourrez réaliser 99% des besoins avec des blocs ACF.
La question à vous poser est de savoir si vous voulez une UX parfaite ou si vous préférez gagner du temps.
Prérequis techniques
Le choix de la technique va également se porter sur la maîtrise des technologies. Pour créer des blocs avec Gutenberg, il est nécessaire d’être bien à l’aise avec JavaScript et React. C’est impératif pour s’en sortir.
En savoir plus sur les blocs React
Si la création de blocs sur-mesure avec React vous intéresse, je vous invite à consulter ma formation dédiée à ce sujet :
On a maintenant une feuille de route pour faire du sur-mesure avec WordPress. Ces différentes techniques plus ou moins complexes vont nous permettre de dépasser les limites de l’éditeur et répondre à absolument tous les besoins spécifiques de nos clients.
Dans les prochains cours, on va justement aborder chacune des techniques et on va commencer par le Block Bindings.
0
Questions, réponses et commentaires