Formation « Créer des blocs avec Gutenberg »

Chargement des scripts et styles nécessaires à Gutenberg en PHP

Lecture : 3 minutes • 0

Gutenberg introduit de nouveaux Hooks, dont deux qui vont permettre de charger les styles et les scripts nécessaires au bon fonctionnement de nos blocs, que ce soit en front ou en back.

La formation en vidéo

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

Lorsque l’on créé nos blocs, il sont compilés dans un fichier Javascript que l’on va devoir appeler dans l’interface d’administration lors de l’édition d’une publication avec Gutenberg.

En plus de ce script, on va devoir appeler la feuille de style qui donne à nos blocs leur apparence.

Et on va aussi faire appel à un autre fichier CSS mais seulement dans l’interface d’administration : il nous servira à styliser nos options de blocs, et faire quelques ajustements, notamment lorsque l’on utilise des champs administrables, qui viennent parfois bouger la taille de nos éléments.

Appeler les scripts et styles

Afin d’appeler les scripts et styles nécessaires au bon fonctionnement de nos blocs, on va utiliser les fonctions classiques de WordPress, à savoir wp_register_style et wp_register_script que l’on va placer dans un hook à l’initialisation de WordPress.

C’est exactement ce que l’on fait dans nos thèmes pour charger les styles et scripts de notre thème ou nos extensions.

En utilisant create-guten-blocks, les 3 fichiers dont on va avoir besoin sont compilés par Webpack dans le dossier /dist/ :

  • blocks.build.js : le JS contenant nos blocs, à charger en back
  • blocks.style.build.css : le CSS général de nos blocs, à charger en front et en back
  • blocks.editor.build.css : le CSS spécifique pour faire des ajustements en back

C’est ensuite via la fonction register_block_type que l’on va indiquer nos styles et scripts, et Gutenberg se chargera de les appeler au bon endroit, au bon moment.

Advice

En utilisant create-guten-block, tout le câblage est déjà fait. Il n’y a donc pas besoin de faire quoi que ce soit pour que ça fonctionne.

Le code suivant pourrait être placé n’importe où dans le PHP du plugin, create-guten-block a choisi de le placer dans src/init.php.

PHP
src/init.php

Importance des dépendances

Il ne faut pas oublier de lister les dépendances pour chaque fichier, afin qu’il vienne se charger dans le bon ordre.

C’est important pour le JS car si par exemple il se charge avant wp-editor, on aurait une erreur d’exécution car on essaierait d’appeler une librairie qui n’a pas encore été déclarée.

C’est également important de charger notre CSS après celui de Gutenberg, afin de pouvoir facilement surcharger les styles, c’est pour ça que dans l’admin, il dépend de wp-editor, mais n’a pas de dépendances en front.

Un script pour le front ?

Il est tout à fait possible de charger un script également pour le front. Mais gardez-bien en tête que Gutenberg n’est pas chargé sur votre site, il n’y a donc pas l’accès au code des blocs et de React par défaut.

En général, vos besoins en scripts en front pourraient très bien être gérés avec votre script.js de base qui dépend de jQuery.

On verra plus tard que certains blocs auront besoin d’être rendus dynamiquement (par exemple le bloc produit WooCommerce qui ne stocke que l’ID produit).

En fait c’est en PHP que l’on fera le rendu de bloc à partir de l’ID. Donc les besoins d’avoir du JS en front ne seront pas aussi fréquents que ce que l’on peut penser.


Voilà, tout ce qu’il faut retenir ici c’est que si vous utilisez comme moi create-guten-blocks, vous n’avez besoin de rien faire.

Retenez simplement que les styles et scripts nécessaires au bon fonctionnement de vos blocks sont chargés par 2 nouveaux hooks spécifiques à Gutenberg.

Vous savez tout ce qu’il y a à savoir sur Gutenberg, du coup dans le prochain cours on va enfin créer notre premier bloc !

0

Questions, réponses et commentaires

    Laisser un commentaire