Formation « Créer des blocs avec Gutenberg »

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

Lecture : 3 minutes • 0

Bonne nouvelle : lorsqu’on utilise create-block, les scripts et styles sont automatiquement chargés. Il n’y a donc rien à faire puisqu’un fichier PHP est généré automatiquement. On va quand même prendre le temps de regarder à quoi il ressemble.

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-blocks, les 3 fichiers dont on va avoir besoin sont compilés par Webpack dans le dossier /build/ :

  • index.js : le JS contenant nos blocs, à charger en back ;
  • index.css : le CSS spécifique pour faire des ajustements en back ;
  • style-index.css : le CSS général de nos blocs, à charger en front et 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.

Conseil

En utilisant create-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-block a choisi de le placer à la racine : <nom-projet>.php.

PHP
src/init.php

Importance des dépendances

L’ordre de chargement des fichiers, surtout les scripts, est important. Il ne faut donc pas oublier de lister les dépendances pour chaque fichier, afin qu’il vienne se charger au bon moment dans l’éditeur.

Et les dépendances, il y en a plusieurs. De plus, elles ont souvent évolué, changé au fur et à mesure du développement de Gutenberg.

Les dépendances sont générées automatiquement par create-block, et stockées dans build/index.asset.php. Si un jour vous mettez à jour la librairie via npm update, il se pourrait que ces dépendances soient mises à jour automatiquement.

Lorsqu’on appelle le script de nos blocs (ligne 15), vous remarquez que les dépendances sont passées en paramètre (Ligne 18).

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-blocks, pas besoin de faire quoi que ce soit.

Retenez simplement que les styles et scripts nécessaires au bon fonctionnement de vos blocs sont chargés automatiquement.

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