Formation « Créer des blocs avec Gutenberg »

Créer ses blocs : dans un thème ou une extension ?

Lecture : 4 minutes • 0

La question de savoir où coder une fonctionnalité entre le thème et l’extension est un sujet récurrent. Nous allons voir quelle est la meilleure approche afin de continuer sereinement.

Le débat thèmes VS extensions

Il y a quelques temps ce débat faisait rage pour les fonctionnalités d’un site : faut-il les mettre dans une extension à part ou les laisser sur le thème ?

Beaucoup prenaient parti de l’extension. Mais en réalité selon moi cela dépend :

  • Si la fonctionnalité est vraiment très spécifique au site en question, autant mettre la fonction directement dans le thème.
  • Si la fonctionnalité peut-être à terme réutilisée dans d’autres projets, autant en faire une extension.

Après cela dépend grandement de ce que l’on cherche à faire. Quand j’étais en agence et que je réalisais des sites sur-mesure à mes clients, je laissais tout dans le thème. Car en général la fonctionnalité était bien ancrée dans le design de celui-ci et était difficilement détachable sans devoir recréer des feuilles de styles ou de scripts supplémentaires.

Il y a aussi la question du budget et du temps alloué au projet à prendre en compte.

Dans le cas de WPChef, mon site de formation pour les débutants, j’ai codé un système de gestion des cours et des stagiaires (avec suivi de progression, diffusion des chapitres semaines par semaines …). Cette brique a été réalisée sous forme d’extension.

Pour Capitaine WP cependant mon LMS (Learning Management System) a été simplifié et intégré directement dans le thème car j’utilise Timber qui me permet d’avoir une approche du code très applicative.

En fait je remarque que même si ma base LMS pour WPChef et Capitaine a ses similitudes, en réalité les deux fonctionnent de manière complètement différente.

Bref il n’y a pas de solution miracle.

Et concernant les blocs Gutenberg ?

Là aussi on a les deux choix : mettre nos blocs dans un thème ou dans une extension. Les deux sont tout à fait possibles.

Pour Gutenberg l’approche conseillée est de mettre vos blocs dans une extension.

Partez du principe que les blocs comme Gutenberg sont écrits en React et que React a une approche en composants qui sont faciles à brancher et à réutiliser.

Il devient alors logique d’appliquer cette philosophie et mettre vos blocs dans une extension afin de pouvoir les réutiliser ailleurs, dans un futur projet.

Alors oui, ça va créer une nouvelle feuille de style CSS et un nouveau fichier JS, soit 2 requêtes HTTP supplémentaires en front. Mais ces fichiers seront compilés et compressés, donc légers. Puis on reste encore loin des 50 fichiers chargés lorsque l’on utilise des thèmes premium. Et au pire, vous pouvez toujours demander à WP Rocket de concatener vos fichiers statiques.

Une extension pour plusieurs blocs ?

Par contre on ne va pas faire une extension par bloc, sinon ça va saturer la liste des plugins dans l’admin, mais surtout chaque bloc aura ses propres fichiers JS et CSS à charger à chaque fois. On augmente donc le nombre de requêtes HTTP au chargement de la page.

Conseil

Le mieux est de placer tous vos blocs dans une seule et même extension.

Dans un futur projet vous reprendrez simplement la base de votre extension et vous sélectionnerez simplement les blocs désirés.

Et à propos du versionnement ?

Si vous utilisez Git la question de comment versionner tout cela peut se poser. Pour ma part je versionnerais mon plugin au complet avec toutes mes déclinaisons de blocs et pour chaque projet, un fork avec les blocs sélectionnés seulement.

Pourquoi ne pas mettre les blocs dans le thème ?

Après tout pourquoi pas, puisque l’on peut facilement ajouter un bloc en collant son dossier et en ajoutant un import, on pourrait très bien mettre le tout dans un thème, de cette manière on pourrait bénéficier de la feuille de style du thème afin d’économiser une requête HTTP.

Mais en fait je vous déconseille cette approche car cela va à l’encontre de l’approche composant de React : le composant doit embarquer sa logique ainsi que ses propres styles.

Mais bon, si vous n’avez qu’un seul bloc à créer pour ce projet, alors autant ne pas sortir l’artillerie lourde et rester dans le thème.

La meilleure approche : la répartition des styles

En fait je vais même aller plus loin concernant le CSS : d’après la documentation les blocs Gutenberg devraient être non-optiniated, c’est-à-dire qu’ils doivent seulement fournir un style basique pour la mise en forme principale. Et c’est la feuille de style du thème qui va compléter avec les couleurs de la charte. Je résume :

  • La feuille de style de l’extension apporte les styles principaux du bloc (disposition, espaces…)
  • La feuille de style du thème apporte en complément les styles de la charte (couleurs, polices…)

C’est de cette manière que vous pourrez facilement réutiliser vos blocs sur un prochain projet sans avoir à modifier le code de l’extension.

Voici un exemple avec un bloc produit WooCommerce. Dans tous les cas le bloc affiche la photo du produit à gauche et le contenu à droite, avec le prix et le bouton d’achat. C’est le style de base qui ne changera pas d’un projet à l’autre.

Dans le projet 1, la couleur de la charte est le bleu, donc la feuille de style va indiquer que le prix et le bouton de cette fiche produit sont bleus :

Dans un second projet, la charte cette fois est rose. La feuille de style et le code du bloc ne changent pas, mais la feuille CSS du projet va appliquer le rose :

Travailler de cette manière vous permettra une plus grande flexibilité avec vos blocs !


A vous de choisir l’approche qui vous plait le mieux en fonction de vos besoins spécifiques ! La police de WordPress (si si ça existe) ne viendra pas vous chercher au pied du lit si jamais vous choisissez finalement de passer directement par le thème.

L’essentiel est de pouvoir se sentir au mieux dans son propre environnement de développement !

Dans le prochain cours on va télécharger les fichiers d’exemples qui vont nous servir de guide pour le développement de nos blocs.

0

Questions, réponses et commentaires

Laisser un commentaire