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.

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’un article avec Gutenberg.

On va devoir appeler ce script. mais également la feuille de style qui donne à nos blocs leur apparence.

Et on va aussi faire appel à un autre fichier CSS 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.

Pour cela nous avons accès à deux nouveaux hooks introduits par Gutenberg, ce sont enqueue_block_assets et enqueue_block_editor_assets.

Ils fonctionnent exactement comme enqueue_scripts que l’on utilise habituellement pour charger les styles et scripts de notre thème ou nos extensions : on va utiliser les fonctions wp_enqueue_script() et wp_enqueue_style() à l’intérieur.

En utilisant create-guten-blocks, les 3 fichiers nécessaires 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

Le premier hook, enqueue_block_assets, est chargé autant en front qu’en back, il est donc très pratique pour charger notre feuille de style principale.

Le second hook, enqueue_block_editor_assets, ne se lance que lorsque Gutenberg est appelé en back. On l’utilise donc pour appeler notre script compilé contenant nos blocs et le CSS d’ajustement back.

Conseil

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
plugin.php
<?php 

// Chargement des ressources en front + back
function capitainewp_block_assets() {

	// CSS des blocs
	wp_enqueue_style(
		'capitainewp-blocks',
		plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ),
		array( 'wp-editor' )  // Dépendances 
	);

	// Possibilité de charger un JS supplémentaire pour le front si besoin
}
add_action( 'enqueue_block_assets', 'capitainewp_block_assets' );


// Chargement des ressources destinées au back
function capitainewp_editor_assets() {

	// Script contenant le JS des blocs
	wp_enqueue_script(
		'capitainewp-blocks',
		plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), 
		array( 'wp-editor', 'wp-blocks', 'wp-i18n', 'wp-element' ) // Dépendances 		
	);

	// Style contenant les styles spéciaux des blocs dans l'éditeur
	wp_enqueue_style(
		'capitainewp-blocks-editor', 
		plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ),
		array( 'wp-edit-blocks' )  // Dépendances 
	);
}
add_action( 'enqueue_block_editor_assets', 'capitainewp_editor_assets' );

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-blocks, 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.

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