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

Sommaire du cours

  1. Qu’est-ce que create-block ?
  2. Prérequis
  3. Mise en place de create-block
    1. 1. Installer create-block
    2. 2. Lancer Webpack
    3. 3. Pour plus tard : mise en production
  4. Analyse de l’arborescence de notre extension
    1. Build : les fichiers de production
    2. Nodes modules : les dépendances du projet
    3. Src : le dossier de travail
    4. Le fichier capitainewp-gut-bases.php
    5. Vous ĂȘtes prĂȘt Ă  crĂ©er votre premier bloc

Qu’est-ce que create-block ?

Aujourd’hui, pour faire du javascript moderne, on a besoin d’outils en tous genres pour vĂ©rifier et compiler le code, le rendre compatible avec les navigateurs


Et tout cela nĂ©cessite gĂ©nĂ©ralement pas mal d’outils et beaucoup de configuration via Webpack et NPM.

On utilise notamment :

  • 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’erreurs
  • 


MĂȘme les habituĂ©s de Webpack et du dĂ©veloppement en JS passent du temps pour faire de telles configurations.

Create-block est un set d’outils (un toolkit en anglais) qui ne nĂ©cessite aucune configuration prĂ©alable et qui va mettre en place toute la structure nĂ©cessaire au dĂ©veloppement de blocs Gutenberg avec React.

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

Je dois avouer que j’ai Ă©tĂ© conquis par ce projet. Comme je le dis tout le temps je ne suis pas un grand fan de la ligne de commande. Mais pour le coup je dois avouer que tout fonctionne Ă  merveille du premier coup !

Allez maintenant si vous le voulez bien, lançons-nous dans l’installation de create-block :

Prérequis

Comme on l’a vu dans les cours prĂ©cĂ©dents, nous allons avoir prĂ©alablement besoin d’installer NodeJS, (version 8 au minimum), le serveur Javascript qui nous permettra de lancer des commandes NPM.

Il nous faut aussi un outil de ligne de commande comme Powershell sur Windows et le terminal sur Mac. Les deux sont dĂ©jĂ  installĂ©s avec le systĂšme.

Une fo