Create-block : une librairie pour démarrer rapidement ses projets Gutenberg

Aujourd’hui, pour faire du JavaScript moderne, on a besoin d’outils en tous genres pour vérifier et compiler le code afin de le rendre compatible avec tous les navigateurs.

Et tout cela nécessite généralement pas mal d’outils et beaucoup de configuration notamment via webpack, un outil qui permet d’orchestrer la compilation des différents fichiers en ressources statiques comprises par le navigateur.

On dit généralement que webpack est un module bundler pour JavaScript.

Create-block est un toolkit officiel créé par les contributeurs WordPress, basé sur Webpack, Node.js et NPM.

Il ne nécessite aucune configuration préalable et va mettre en place toute la structure nécessaire au développement de blocs Gutenberg avec React.

Il contient notamment plusieurs outils comme :

• webpack : qui va permettre de surveiller notre dossier et lancer les opérations nécessaires lors d’un changement de fichier ;
• Babel : qui compile le javascript moderne et en crée une version rétrocompatible ;
• React : la librairie JS de facebook utilisée par Gutenberg pour gérer l’éditeur visuel ;
• JSLint : qui permet de vérifier que notre code ne contient pas d’erreur ;
• Sass : le préprocesseur CSS qui compile nos syntaxes améliorées en CSS classique ;
• …

En d’autre termes, on installe le projet, on lance le compilateur, on commence à coder, et on oublie les soucis. Et ça, ça me plait !

Préparer un site local

Avant de vous lancer dans cette formation, je vous invite à installer un site local dédié à l’apprentissage des blocs.

Pour cela, je vous recommande l’excellent LocalWP de WP Engine qui est gratuit et qui contient tout le nécessaire pour faire tourner WordPress sur votre machine.

LocalWP est disponible sur Windows, Mac et Linux. Pour le télécharger, c’est par ici :

Télécharger gratuitement LocalWP

Si c’est votre premier site, je vous invite à consulter le cours sur l’installation d’un site local de la formation Full Site Editing.

Alternativement, vous pouvez également utiliser DevKinsta ou encore Mamp si vous préférez.

Installer create-block et générer l’extension

Pour déclarer nos blocs Gutenberg, on va devoir créer une extension.

C’est la bonne pratique officielle : c’est aux extensions de gérer les fonctionnalités supplémentaires de votre site, pas votre thème, car nos blocs sont considérés comme des fonctionnalités.

Mais pas d’inquiétude, puisque create-blocks va préparer la base de notre extension automatiquement ! C’est justement ce que l’on va voir tout de suite.

Rendez-vous dans le dossier /app/public/wp-content/plugins/ de votre site local grâce au bouton « Site Folder » de LocalWP.

De là, on va ouvrir notre Terminal afin de lancer la commande d’installation. Sur Mac OS, vous pouvez faire un clic droit sur le dossier « Plugins » et sélectionner « Nouveau terminal au dossier ».

Maintenant, on va saisir la commande suivante :

Vous pouvez bien entendu remplacer capitaine-blocks par le nom de dossier que vous souhaitez donner à votre extension.

Validez ensuite en appuyant sur « Entrée », validez en appuyant sur Y lorsque vous verrez « Ok to proceed ? » puis Entrée à nouveau et attendez quelques secondes.

Si tout s’est bien passé, vous devriez voir une ligne en vert commençant par « Done ».

Notez que le terminal vous explique qu’il existe plusieurs commandes rattachées au compilateur, comme :

• npm start : pour démarrer le compilateur et travailler sur vos blocs ;
• npm run build pour créer une version optimisée des scripts parée pour la production.

Maintenant, fermez votre terminal et ouvrez le dossier fraîchement créé dans votre éditeur de code favori : VS Code, Cursor, WebStorm…

Pour plus d’informations sur create-blocks, consultez la documentation, elle contient tous les détails sur ce package WordPress indispensable.

Activer votre extension

En parallèle, rendez-vous dans le menu « Extensions » de l’interface d’administration de WordPress et activez votre nouvelle extension.

Sinon, vous allez vous demander pourquoi vous ne voyez pas vos blocs dans l’éditeur ! Et franchement, ça m’est arrivé au moins mille fois.

Vérifier que le slug d’extension n’est pas déjà pris sur .org

Vous savez ce qu’il m’est arrivé un jour ? À peine mon extension installé, WordPress m’informe qu’il y a une mise à jour de disponible. Impossible ! Et pourtant…

La raison est toute simple : j’ai utilisé le même slug qu’une extension déjà présente sur le répertoire officiel des extensions sur wordpress.org.

Pour éviter que cela vous arrive, vérifiez d’abord que le nom de dossier ne corresponde pas à une extension du répertoire. Pour cela, faites simplement une recherche depuis le répertoire WordPress :

Si la recherche affiche aucun résultat, c’est qu’il n’y pas de conflit. On peut donc continuer !

Lancer le compilateur

Une fois votre éditeur de code ouvert, la première chose à faire sera d’ouvrir le terminal intégré via le menu Terminal > Nouveau Terminal.

Inscrivez ensuite à l’intérieur npm start et appuyez sur Entrée pour lancer le compilateur.

Si tout se passe bien, vous devriez voir apparaître plusieurs lignes en vert et orange.

Désormais tout sera fait automatiquement : le compilateur va convertir les fichiers React du dossier src en JS standard et les placera dans le dossier build à chaque fois qu’on fera une modification.

D’ailleurs, on ne touchera donc jamais aux fichiers du dossier build. On travaillera uniquement depuis le dossier src.

Si plus tard vous avez besoin de lancer une autre ligne de commande en parallèle du compilateur, vous pouvez diviser le terminal en deux :

Ce sera pratique pour installer une nouvelle dépendance à votre projet ou versionner votre code par exemple.

Tester le bloc

Pour terminer, on va vérifier que tout fonctionne bien, et pour cela on va insérer le bloc créé par défaut avec l’extension.

Dans WordPress, créez une page ou un article et insérez le bloc dans le contenu, vous devriez avoir quelque chose qui ressemble à ceci :

Notez qu’en front, la bordure rouge en pointillé n’apparaît pas : c’est normal car ce style est présent uniquement dans editor.scss.

Comme on l’a vu, pour l’instant ce bloc ne fait rien. Dans la suite de la formation, on va créer des blocs administrable pour les rendre plus intéressant !

Ce bloc était juste là pour nous donner un aperçu rapide des actions nécessaires pour déclarer un bloc, et servira de base pour la suite.

Télécharger les fichiers de la formation

Dans cette formation, je vais parcourir tous les concepts des blocs Gutenberg au travers d’une vingtaine d’exemples.

Dans la version premium de la formation, vous avez accès au code de mes projets afin d’éviter d’avoir à les réécrire vous-même.

---

N’hésitez pas à utiliser cet outil pour tous vos sites qui nécessiteront des blocs sur mesure !

Maintenant, avant de se lancer dans la création de notre premier bloc, on va faire un tour du propriétaire et analyser la structure de cette extension, afin de bien comprendre le rôle de chaque fichier.