{"id":234226,"date":"2023-02-16T14:22:00","date_gmt":"2023-02-16T11:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234226"},"modified":"2022-11-12T01:06:45","modified_gmt":"2022-11-11T22:06:45","slug":"creer-un-bloc-gutenberg-personnalise-partie-1-configuration-de-lenvironnement-de-developpement","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-un-bloc-gutenberg-personnalise-partie-1-configuration-de-lenvironnement-de-developpement\/","title":{"rendered":"Cr\u00e9er un bloc Gutenberg personnalis\u00e9 – Partie 1\u00a0: Configuration de l’environnement de d\u00e9veloppement"},"content":{"rendered":"\n

Dans la premi\u00e8re partie de cette s\u00e9rie de tutoriels sur la cr\u00e9ation de blocs Gutenberg personnalis\u00e9s, nous devons configurer notre environnement de d\u00e9veloppement. Nous avons besoin d’un endroit o\u00f9 nous pouvons \u00e9crire notre code dans les syntaxes ES6\/ESNext et le compiler \u00e0 la vol\u00e9e. Il est possible d’\u00e9crire des blocs Gutenberg personnalis\u00e9s en utilisant la syntaxe ES5 sans configurer Webpack et Babel. Mais le code sera vraiment lourd \u00e0 lire et \u00e0 \u00e9crire. Si vous ne savez pas pourquoi nous devons faire tout cela, ou quelle est la diff\u00e9rence, lisez mon article expliquant cela<\/a>. Je peux vous garantir que lorsque vous reviendrez, vous serez convaincu de franchir cette \u00e9tape suppl\u00e9mentaire afin d’\u00e9crire un meilleur code.<\/p>\n

Je suppose que vous avez d\u00e9j\u00e0 un WordPress local fonctionnant sur une pile LAMP ou similaire. Et que vous \u00e9crivez soit un th\u00e8me, soit un plugin. Quant \u00e0 moi, je mets mon code dans un th\u00e8me que j’ai d\u00e9velopp\u00e9, awp-starter-theme<\/code>, situ\u00e9 dans mon dossier de th\u00e8me WordPress. Je souhaite s\u00e9parer mon d\u00e9veloppement Gutenberg de tous les autres fichiers de th\u00e8me, je cr\u00e9e donc un sous-r\u00e9pertoire gutenberg-dev<\/code>dans le dossier racine de mon th\u00e8me. Ce sera mon dossier de projet et le dossier auquel je me r\u00e9f\u00e9rerai pour le reste de la s\u00e9rie de tutoriels.<\/p>\n

J’ai d\u00e9j\u00e0 \u00e9crit un guide d\u00e9taill\u00e9 sur la configuration d’un environnement de d\u00e9veloppement pour Gutenberg, je vais donc parcourir rapidement les \u00e9tapes ici. Si vous ne l’avez jamais fait auparavant, je vous recommande de lire le post li\u00e9 ci-dessous, car il contient plus d’informations que ce que vous trouverez ici !<\/p>\n

Configurer le projet avec webpack<\/h2>\n

\u00c0 l’aide du terminal (terminal iOS ou Windows cmd, les deux fonctionnent correctement), acc\u00e9dez au dossier de votre projet (dans mon cas awp-starter-theme\/gutenberg-dev<\/code>). Nous initions un nouveau projet en demandant \u00e0 npm de g\u00e9n\u00e9rer un package.json<\/code>avec un contenu g\u00e9n\u00e9rique.<\/p>\n

Cr\u00e9ation de package.json<\/h3>\n
npm init -y<\/code><\/pre>\n
Ensuite, j’installerai les scripts de WordPress qui nous aideront beaucoup avec la configuration avec cette commande (qui ajoutera le sous-dossier node_modules<\/code>ainsi package-lock.json<\/code>que)\u00a0:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Ouvrez le package.json<\/code>fichier dans votre dossier de projet dans un \u00e9diteur et recherchez la scripts<\/code>propri\u00e9t\u00e9. Nous le rempla\u00e7ons par deux scripts du package WordPress que nous venons d’installer\u00a0:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
Le script \u00abbuild\u00bb va compiler mes fichiers. Mais comme il doit \u00eatre ex\u00e9cut\u00e9 manuellement \u00e0 chaque modification, nous utiliserons plut\u00f4t le script \u00abstart\u00bb pendant que nous d\u00e9veloppons. Il initiera alors un \u00abwatch mode\u00bb o\u00f9 il \u00e9coute aux modifications apport\u00e9es \u00e0 l’un de vos fichiers de script et les recompile chaque fois que vous enregistrez des modifications.<\/p>\n
Configuration Webpack<\/h3>\n
L’\u00e9tape suivante consiste \u00e0 cr\u00e9er un fichier de configuration Webpack. Je fais cela parce que je ne veux pas utiliser les noms de fichiers et dossiers source et de sortie par d\u00e9faut. Je veux d\u00e9cider par moi-m\u00eame o\u00f9 se trouvent mes fichiers source et o\u00f9 les fichiers compil\u00e9s doivent se retrouver.<\/p>\n
Avec l’aide du @wordpress\/scripts<\/code>package que nous avons install\u00e9, nous pouvons h\u00e9riter de la configuration Webpack de WordPress et remplacer uniquement les parties que nous voulons modifier.<\/p>\n
Dans notre dossier de projet, cr\u00e9ez un nouveau fichier nomm\u00e9 webpack.config.js<\/code>et ouvrez-le dans un \u00e9diteur. Ajoutez ce contenu\u00a0:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-awhitepixel-myfirstblock': '.\/src\/block-awhitepixel-myfirstblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
Cela d\u00e9finit mon fichier d’entr\u00e9e (actuellement un seul) dans la entry<\/code>propri\u00e9t\u00e9, situ\u00e9e dans un sous-dossier src<\/code>de mon dossier de projet, nomm\u00e9 block-awhitepixel-myfirstblock.js<\/code>. \u00c9videmment, nommez vos fichiers comme vous voulez, mais n’oubliez pas de changer \u00e0 la fois la cl\u00e9 et la valeur. Parce que dans la output<\/code>propri\u00e9t\u00e9, je demande \u00e0 webpack de compiler mes fichiers d’entr\u00e9e avec la cl\u00e9 d’entr\u00e9e comme nom de fichier. Dans la path<\/code>propri\u00e9t\u00e9, je demande de placer tous les fichiers compil\u00e9s une \u00e9tape hors de mon dossier de projet et dans le dossier du th\u00e8me assets\/js<\/code>. Ajustez les noms de fichiers et l’emplacement en fonction de votre projet. Reportez-vous \u00e0 mon guide d\u00e9taill\u00e9<\/a> si vous \u00eates confus.<\/p>\n
Cr\u00e9ez un sous-dossier src\/<\/code>dans le dossier du projet et c’est l\u00e0 que nous mettrons tous les fichiers source. (Ajustez si vous avez modifi\u00e9 l’ entry<\/code>emplacement dans webpack.config.js<\/code>). Cr\u00e9ez un fichier block-awhitepixel-myfirstblock.js<\/code>ici et laissez-le vide pour le moment.<\/p>\n
Il reste une \u00e9tape – et cela vaut pour nous qui voulons utiliser les derni\u00e8res fonctionnalit\u00e9s d’ESNext. La configuration par d\u00e9faut de WordPress Babel manque malheureusement de cela. Et parce que je veux utiliser des fonctionnalit\u00e9s telles que les fonctions fl\u00e9ch\u00e9es, je dois \u00e9galement configurer Babel.<\/p>\n
Mise en place de Babel<\/h2>\n
Nous devons d’abord installer quelques packages pour notre configuration Babel en tapant cette commande\u00a0:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Lorsque cela est fait, cr\u00e9ez un nouveau fichier .babelrc<\/code>dans notre dossier de projet. C’est l\u00e0 que nous allons mettre notre configuration Babel\u00a0:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
Et c’est tout pour la configuration de notre environnement de d\u00e9veloppement\u00a0!<\/p>\n
Construire des commandes<\/h2>\n
Tout au long du d\u00e9veloppement, vous devrez compiler vos fichiers Javascript. Dans notre package.json<\/code>, nous avons ajout\u00e9 deux scripts pour cela.<\/p>\n
Chaque fois que nous voulons d\u00e9velopper dans nos fichiers Javascript, nous ex\u00e9cutons ceci dans le terminal\u00a0:<\/p>\n
npm run build<\/code><\/pre>\n
Cette commande effectuera la compilation chaque fois que vous l’ex\u00e9cuterez dans le terminal. Essayez-le et vous devriez voir qu’il g\u00e9n\u00e8re le fichier block-awhitepixel-myfirstblock.js<\/code>(avec un ou deux autres fichiers "asset") dans votre dossier de sortie d\u00e9fini que vous avez d\u00e9fini dans webpack.config.js<\/code>. Dans mon cas, il appara\u00eet dans awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
L’utilisation de la commande ci-dessus fonctionne bien, mais devient ennuyeuse \u00e0 r\u00e9p\u00e9ter chaque fois que vous apportez des modifications \u00e0 vos fichiers. Vous pr\u00e9f\u00e9reriez probablement ex\u00e9cuter cette commande \u00e0 la place\u00a0:<\/p>\n
npm run start<\/code><\/pre>\n
Cela mettra votre terminal en "mode veille", d\u00e9tectera toutes les modifications enregistr\u00e9es dans vos fichiers Javascript et les compilera au fur et \u00e0 mesure. Chaque fois que vos fichiers contiennent des erreurs, le terminal affichera les messages d’erreur. Appuyez sur CTRL + C pour arr\u00eater le processus de surveillance.<\/p>\n
\"Cr\u00e9er<\/a><\/p>\n
Comme r\u00e9f\u00e9rence, mon dossier de projet ressemble maintenant \u00e0 l’image. Je pr\u00e9f\u00e8re s\u00e9parer tous les fichiers de configuration et en particulier le sous-dossier node_modules\/<\/code>(qui contient litt\u00e9ralement des dizaines de milliers de fichiers) du reste de mon code de th\u00e8me. Facilite la configuration des r\u00e8gles d’ignorance – par exemple les compilateurs SCSS ou git ignore. Nous avons d\u00e9j\u00e0 configur\u00e9 la configuration Webpack pour compiler les fichiers finaux directement awp-starter-theme\/assets\/js\/<\/code>avec d’autres fichiers Javascript pour mon th\u00e8me.<\/p>\n
Nous sommes maintenant pr\u00eats pour la partie suivante<\/a> o\u00f9 nous commencerons par enregistrer notre premier bloc personnalis\u00e9.<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Dans la premi\u00e8re partie de cette s\u00e9rie de tutoriels sur la cr\u00e9ation de blocs WordPress Gutenberg personnalis\u00e9s, nous apprenons \u00e0 configurer notre environnement de d\u00e9veloppement.<\/p>\n","protected":false},"author":1,"featured_media":152983,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,936,936,1110,811,811,841,841,862,862],"tags":[1167],"class_list":{"0":"post-234226","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-code-2","9":"category-gutenberg-3","11":"category-n-a","12":"category-plugins-2","14":"category-tutoriels","16":"category-wordpress-3","18":"tag-affiai-fr"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234226"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234226\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}