{"id":234264,"date":"2023-02-24T18:18:00","date_gmt":"2023-02-24T15:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234264"},"modified":"2022-11-12T02:48:05","modified_gmt":"2022-11-11T23:48:05","slug":"guide-complet-sur-la-configuration-dun-environnement-de-developpement-pour-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/guide-complet-sur-la-configuration-dun-environnement-de-developpement-pour-gutenberg\/","title":{"rendered":"Guide complet sur la configuration d’un environnement de d\u00e9veloppement pour Gutenberg"},"content":{"rendered":"\n

Ce guide est destin\u00e9 \u00e0 ceux qui souhaitent \u00e9crire du code pour Gutenberg avec les syntaxes ES6, ESNext et JSX, et qui doivent configurer webpack et babel pour les transformer en fichiers utilisables dans l’\u00e9diteur Gutenberg. Nous examinerons ce que vous devez faire, pourquoi et comment nous pouvons utiliser et \u00e9tendre les valeurs par d\u00e9faut de WordPress et les personnaliser en fonction de nos besoins.<\/p>\n

Si vous \u00eates tout nouveau dans l’ensemble des concepts npm, webpcak et Babel, vous devriez lire la section suivante qui vise \u00e0 expliquer les bases du fonctionnement de ces outils et comment vous les utilisez. Cependant, si vous l’avez d\u00e9j\u00e0 fait et que vous connaissez le processus, peut-\u00eatre en d\u00e9veloppant avec React, passez \u00e0 la section suivante o\u00f9 nous allons r\u00e9ellement configurer les choses.<\/p>\n

Pour les d\u00e9butants: npm, webpack et babel<\/h2>\n

Si vous ne savez pas pourquoi nous devons faire tout cela pour \u00e9crire Javascript pour Gutenberg, je vous recommande de lire mon article<\/a> qui explore les bases du d\u00e9veloppement pour Gutenberg – o\u00f9 j’explique la diff\u00e9rence entre les versions de Javascript et pourquoi cela en vaut la peine.<\/p>\n

Si vous ne l’avez jamais fait auparavant, vous devrez d’abord installer Node.js<\/a> sur votre ordinateur. Cliquez sur le lien, t\u00e9l\u00e9chargez-le et installez-le. Inclus dans Node.js, vous obtiendrez un outil que nous utiliserons pour configurer la majeure partie de la configuration. Cet outil est npm<\/code>, qui vous permet d’installer des biblioth\u00e8ques Javascript et d’ex\u00e9cuter des scripts via la ligne de commande\/le terminal. Vous pouvez \u00e9galement utiliser yarn<\/code>si vous le pr\u00e9f\u00e9rez, mais pour ce guide, nous utiliserons npm<\/code>.<\/p>\n

npm<\/h3>\n

Ce guide n’entrera pas dans les d\u00e9tails de toutes les choses que vous pouvez faire avec npm<\/code>, mais il en expliquera le concept de base et les \u00e9l\u00e9ments pertinents pour nos besoins. Nous allons utiliser npm<\/code>pour deux choses\u00a0; pour installer les biblioth\u00e8ques requises dans notre projet et pour ex\u00e9cuter des commandes pour cr\u00e9er (compiler) nos fichiers Javascript.<\/p>\n

Avec npm<\/code>, vous pouvez installer n’importe quel package Javascript open source public. Si nous devions d\u00e9velopper avec React (en dehors de WordPress), nous aurions besoin d’installer des biblioth\u00e8ques React et des biblioth\u00e8ques Webpack. WordPress propose toute une gamme de biblioth\u00e8ques (principalement pour Gutenberg) que vous pouvez installer, mais nous ne sommes vraiment int\u00e9ress\u00e9s que par une: @wordpress\/scripts<\/code>\u2013 qui nous aide \u00e0 simplifier notre configuration.<\/p>\n

Chaque fois que vous installez une biblioth\u00e8que, npm<\/code>cr\u00e9era un sous-dossier " node_modules<\/code>" o\u00f9 les biblioth\u00e8ques install\u00e9es sont stock\u00e9es. Vous n’aurez jamais besoin d’entrer dans ce dossier ou de modifier quoi que ce soit ici, mais gardez \u00e0 l’esprit que ce dossier contiendra facilement (litt\u00e9ralement\u00a0!) Des dizaines de milliers de fichiers. Il s’agit d’un dossier que vous ne devriez jamais engager dans git ou inclure dans un th\u00e8me ou un plugin fini. Les biblioth\u00e8ques ne sont n\u00e9cessaires que lors du d\u00e9veloppement.<\/p>\n

Lorsque votre environnement est configur\u00e9, vous pouvez utiliser npm<\/code>pour ex\u00e9cuter des scripts d\u00e9finis dans votre package.json<\/code>fichier. Selon le projet, vous auriez normalement au moins deux scripts ; un pour construire les scripts et un pour d\u00e9marrer le "mode montre". En "mode montre", npm<\/code>d\u00e9marre un processus dans le terminal qui attend et \u00e9coute les modifications apport\u00e9es \u00e0 n’importe quel fichier, et les compile au moment de l’ex\u00e9cution chaque fois que vous cliquez sur Enregistrer. Vous connaissez peut-\u00eatre ce concept si vous avez d\u00e9j\u00e0 utilis\u00e9 des programmes de compilation SCSS ou LESS. Il est beaucoup plus efficace d’ex\u00e9cuter un script "watch" en arri\u00e8re-plan qui se recompile \u00e0 chaque fois que vous enregistrez, au lieu d’aller au terminal et d’ex\u00e9cuter la commande build apr\u00e8s chaque modification.<\/p>\n

webpack et babel<\/h3>\n

Vous pouvez d\u00e9velopper en d\u00e9veloppant pour Gutenberg sans faire de configuration webpack ou babel. Parce que nous utilisons les biblioth\u00e8ques de WordPress, ils s’en chargeront pour nous. Cependant, cela pr\u00e9sente un inconv\u00e9nient – il utilise par d\u00e9faut un emplacement et un nom de fichier fixes pour vos fichiers source et de sortie. L’ensemble de votre d\u00e9veloppement Javascript doit \u00eatre \u00e9crit dans un seul fichier, dans project-folder\/src\/index.js<\/code>, et la construction finira toujours dans project-folder\/build\/index.js<\/code>. Si cela vous convient, vous pouvez ignorer toute la partie sur la configuration du webpack. Cependant, si vous d\u00e9veloppez un th\u00e8me ou un plug-in avec plusieurs fonctionnalit\u00e9s de Gutenberg (blocs personnalis\u00e9s, filtres, etc.), vous souhaiterez peut-\u00eatre au moins un nom de fichier et un emplacement de sortie diff\u00e9rents, ainsi que l’autorisation de plusieurs fichiers.<\/p>\n

Si vous utilisez le package WordPress pour g\u00e9rer la configuration (@wordpress\/scripts<\/code>), Babel est d\u00e9j\u00e0 configur\u00e9. Mais vous devez savoir que le package de WordPress peut ne pas inclure les plugins que vous souhaitez utiliser. Il y a par exemple un package qui vous permet d’utiliser les nouvelles \u00abfonctions fl\u00e9ch\u00e9es\u00bb (myFunction = (param) => { }<\/code>), pour d\u00e9finir des fonctions sans avoir besoin de lier this<\/code>. Si vous voulez absolument utiliser ces fonctionnalit\u00e9s ESNext, vous devrez configurer Babel vous-m\u00eame au lieu d’utiliser les param\u00e8tres par d\u00e9faut de WordPress. Je vais expliquer comment ci-dessous.<\/p>\n

Le processus<\/h3>\n

Le processus de d\u00e9veloppement avec Webpack une fois que tout est configur\u00e9 et install\u00e9, consiste \u00e0 acc\u00e9der \u00e0 votre dossier de projet dans le terminal et \u00e0 d\u00e9marrer le script "watch". Il restera ouvert et \u00e9coutera les modifications apport\u00e9es \u00e0 vos fichiers JS. Chaque fois que vous appuyez sur Enregistrer dans vos fichiers Javascript, le terminal affichera (esp\u00e9rons-le) des informations indiquant qu’il a recompil\u00e9 le fichier avec succ\u00e8s. S’il y a eu des erreurs de compilation, elles appara\u00eetront dans le terminal. Pour arr\u00eater le processus de "montre", appuyez sur CTRL + C.<\/p>\n

Mise en place de l’environnement<\/h2>\n

Je suppose que vous avez d\u00e9j\u00e0 un WordPress local en cours d’ex\u00e9cution sur une pile LAMP (des programmes tels que WampServer, XAMPP, Docker ou similaire), et que vous avez soit un plugin ou un th\u00e8me pr\u00eat \u00e0 commencer \u00e0 coder votre Javascript.<\/p>\n

Je recommande de cr\u00e9er un sous-dossier d\u00e9di\u00e9 \u00e0 votre d\u00e9veloppement Javascript car vous pourriez vous retrouver avec plusieurs fichiers et dossiers de configuration. Cela facilite la s\u00e9paration des fichiers et des dossiers (par exemple node_modules\/<\/code>) que vous ne souhaitez pas inclure dans les commits git ou les versions finales. Mais il est parfaitement possible d’utiliser votre th\u00e8me principal ou votre dossier de plug-in comme dossier de projet pour le d\u00e9veloppement Javascript.<\/p>\n

Dans le terminal (terminal Mac OS ou invite de commande Windows, les deux fonctionnent correctement), acc\u00e9dez au dossier de votre projet. En ce qui concerne ce didacticiel, je suppose que nous sommes dans un th\u00e8me et que nous avons cr\u00e9\u00e9 un sous-dossier vide comme dossier gutenberg-dev\/<\/code>de projet.<\/p>\n

La premi\u00e8re \u00e9tape consiste \u00e0 initialiser un projet npm – qui consiste essentiellement npm<\/code>\u00e0 g\u00e9n\u00e9rer un package.json<\/code>fichier. Ce package.json<\/code>fichier informe npm<\/code>sur les packages requis et les scripts disponibles pour l’ex\u00e9cution. Tapez ceci dans le terminal\u00a0;<\/p>\n

npm init -y<\/code><\/pre>\n
Cela g\u00e9n\u00e8re un package.json<\/code>fichier avec un contenu par d\u00e9faut dans votre dossier de projet.<\/p>\n
Ensuite, nous installerons le package WordPress qui nous aidera \u00e0 r\u00e9duire la quantit\u00e9 de configuration que nous aurons \u00e0 faire. Ex\u00e9cutez cette commande\u00a0:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
La balise --save-dev<\/code>informe npm<\/code>que les biblioth\u00e8ques donn\u00e9es ne sont n\u00e9cessaires qu’au d\u00e9veloppement et --save-exact<\/code>s’assure npm<\/code>qu’une seule version est install\u00e9e, la plus r\u00e9cente.<\/p>\n
Ouvrez le package.json<\/code>fichier dans votre \u00e9diteur. (npm<\/code>aura \u00e9galement g\u00e9n\u00e9r\u00e9 un package-lock.json<\/code>lors de l’installation des packages, vous pouvez simplement ignorer ce fichier, c’est dans celui-ci package.json<\/code>que vous apporterez des modifications). Il devrait \u00eatre rempli avec la configuration par d\u00e9faut, et vous remarquerez peut-\u00eatre que l’installation du package que nous avons effectu\u00e9e pr\u00e9c\u00e9demment a ajout\u00e9 une entr\u00e9e d’ @wordpress\/scripts<\/code>une certaine version dans devDependencies<\/code>. Au fur et \u00e0 mesure que vous installerez plus de packages, npm<\/code>mettra \u00e0 jour package.json<\/code>avec des entr\u00e9es pour chaque package. Tout ce dont nous devons nous pr\u00e9occuper dans ce fichier est la scripts<\/code>propri\u00e9t\u00e9, qui concerne les scripts (commandes) que vous pouvez utiliser npm<\/code>pour ex\u00e9cuter. Mettez \u00e0 jour la propri\u00e9t\u00e9 scripts dans celle-ci (vous pouvez supprimer le "test" par d\u00e9faut)\u00a0:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
Ce morceau de code indique npm<\/code>que nous avons deux scripts que nous pouvons ex\u00e9cuter dans ce dossier de projet\u00a0; "construire" et "d\u00e9marrer". Nous ex\u00e9cutons un script avec la commande npm run <scriptname><\/code>, dans laquelle npm<\/code>recherchera package.json<\/code>et ex\u00e9cutera la commande d\u00e9finie comme sa valeur. Nous utilisons l’outil wp-scripts<\/code>fourni dans le package que nous venons d’installer pour compiler notre Javascript une fois (\"build\"<\/code>) ou d\u00e9marrer le mode "regarder" \/ "\u00e9couter" pour compiler chaque fois que nous enregistrons les modifications (\"start\"<\/code>).<\/p>\n
Cela nous permet \u00e9galement d’utiliser le webpack de WordPress et la configuration Babel, nous n’avons donc pas \u00e0 le faire nous-m\u00eames.<\/p>\n
Dans votre dossier de projet, cr\u00e9ez un sous-dossier appel\u00e9 src\/<\/code>. Dans ce dossier, cr\u00e9ez un index.js<\/code>fichier.<\/p>\n
Si vous \u00eates d’accord avec les valeurs par d\u00e9faut du webpack, vous avez maintenant termin\u00e9\u00a0! \u00c9crivez votre code ES6 et JSX dans index.js<\/code>, et dites npm<\/code>de les compiler en ex\u00e9cutant la commande build :<\/p>\n
npm run build<\/code><\/pre>\n
ou d\u00e9marrez un processus "watch" dans le terminal qui \u00e9coute les modifications apport\u00e9es avec cette commande (utilisez CTRL + C pour arr\u00eater le processus de surveillance):<\/p>\n
npm run start<\/code><\/pre>\n
L’ex\u00e9cution de l’un de ces \u00e9l\u00e9ments g\u00e9n\u00e9rera directement un sous- build\/<\/code>dossier dans votre projet avec le r\u00e9sultat compil\u00e9 dans build\/index.js<\/code>.<\/p>\n
C’est tout pour la configuration de l’environnement la plus basique\u00a0! Vous \u00eates maintenant pr\u00eat \u00e0 \u00e9crire du Javascript ES6 pour Gutenberg !<\/strong><\/p>\n
Si vous souhaitez modifier l’emplacement et les noms de fichiers de vos fichiers source ou de sortie, lisez la suite.<\/p>\n
Configuration des noms et chemins des fichiers source et de sortie<\/h3>\n
Si, comme moi, vous n’\u00eates pas satisfait du nom de fichier et de la structure par d\u00e9faut, en particulier pour le ou les fichiers de sortie, vous devez envisager de configurer Webpack. Normalement, par exemple si vous d\u00e9veloppiez pour React en dehors de WordPress, vous auriez besoin de mettre en place une configuration compl\u00e8te de webpack avec le plugin Babel. Heureusement, WordPress s’en charge pour nous et nous permet d’\u00e9tendre la propre configuration du pack Web de WordPress et d’ajuster uniquement les parties que nous voulons modifier.<\/p>\n
Dans votre dossier de projet (m\u00eame dossier que package.json<\/code>) cr\u00e9ez un fichier nomm\u00e9 webpack.config.js<\/code>et ouvrez-le dans votre \u00e9diteur. \u00c9crivez ce qui suit dans ce fichier\u00a0:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-mynamespace-myblock': '.\/src\/block-mynamespace-myblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js\/gutenberg'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
La premi\u00e8re chose que nous faisons est @wordpress\/scripts<\/code>de r\u00e9cup\u00e9rer la configuration du webpack dans la variable defaultConfig<\/code>. Dans la configuration du webpack module.exports<\/code>, la premi\u00e8re chose que nous faisons est d’appliquer tout en defaultConfig<\/code>utilisant l’op\u00e9rateur de propagation (...<\/code>). Ces deux parties garantissent que nous \u00e9tendons la configuration du pack Web de WordPress en incluant tout ce qu’il contient. Apr\u00e8s l’op\u00e9rateur de propagation, nous pouvons ajuster ou ajouter toute propri\u00e9t\u00e9 que nous souhaitons modifier\u00a0; dans notre cas, l’emplacement source et l’emplacement de sortie.<\/p>\n
La entry<\/code>propri\u00e9t\u00e9 d\u00e9finit les fichiers source, qui est par d\u00e9faut .\/src\/index.js<\/code>. Chaque entr\u00e9e dans entry<\/code>la propri\u00e9t\u00e9 est une paire cl\u00e9 + valeur \u00e0 partir de laquelle Webpack compilera (et surveillera). Dans l’exemple ci-dessus, j’ai d\u00e9fini ‘ block-mynamespace-myblock<\/code>‘ situ\u00e9 dans src\/block-mynamespace-myblock.js<\/code>comme un point d’entr\u00e9e. Vous pouvez ajouter autant de paires cl\u00e9 + valeur ici pour chaque fichier source que vous souhaitez compiler.<\/p>\n
La output<\/code>propri\u00e9t\u00e9 d\u00e9cide de l’emplacement des fichiers compil\u00e9s. Dans path<\/code>vous d\u00e9finissez le dossier de destination pour tous les fichiers compil\u00e9s. J’utilise un assistant de chemin pour pouvoir naviguer correctement dans les r\u00e9pertoires de ma configuration. Dans l’exemple ci-dessus, je dis \u00e0 webpack que tous les fichiers compil\u00e9s doivent se retrouver dans mon theme-folder\/assets\/js\/gutenberg\/<\/code>dossier. L’important est d’utiliser ..\/<\/code>pour remonter dans l’arborescence des r\u00e9pertoires, hors du dossier du projet et dans un autre dossier o\u00f9 je veux que tous les fichiers Javascript de mon th\u00e8me soient. Ajustez le chemin pour l’adapter \u00e0 la structure de votre projet.<\/p>\n
Deuxi\u00e8mement, je dis \u00e0 webpack que tous les noms de fichiers doivent \u00eatre nomm\u00e9s comme leurs entry<\/code>noms de cl\u00e9 correspondants. Cette configuration Webpack compilera mon theme-folder\/gutenberg-dev\/src\/block-mynamespace-myblock.js<\/code>fichier theme-folder\/assets\/js\/gutenberg\/block-mynamespace-myblock.js<\/code>. Si je devais ajouter un autre fichier source en tant que paire cl\u00e9 + valeur dans entry<\/code>, il serait compil\u00e9 dans le m\u00eame dossier avec la cl\u00e9 comme nom de fichier.<\/p>\n
Effectuez les ajustements souhait\u00e9s dans votre webpack.config.js<\/code>fichier et enregistrez. R\u00e9ex\u00e9cutez l’une des npm<\/code>commandes de construction pour g\u00e9n\u00e9rer des fichiers dans leurs nouveaux emplacements.<\/p>\n
C’est \u00e7a! Vous avez maintenant \u00e9tendu la configuration webpack de WordPress et vous contr\u00f4lez maintenant o\u00f9 vos fichiers source et vos fichiers de sortie doivent aller.<\/strong><\/p>\n
Cependant, je souhaite inclure un dernier conseil dans ce guide. La configuration par d\u00e9faut de WordPress pour Babel peut manquer de certains plugins Babel pour certaines nouvelles fonctionnalit\u00e9s dans ESNext. Par exemple, avec la valeur par d\u00e9faut ci-dessus et les valeurs par d\u00e9faut de WordPress, vous ne pourrez pas utiliser les fonctions fl\u00e9ch\u00e9es dans votre code. Si cela vous int\u00e9resse, lisez la suite.<\/p>\n
Ajout de la prise en charge des nouvelles syntaxes ESNext avec Babel<\/h3>\n
Au moment de la r\u00e9daction de cette configuration Babel par d\u00e9faut de WordPress, il manque la prise en charge des \u00absyntaxes exp\u00e9rimentales\u00bb, qui incluent par exemple les fonctions fl\u00e9ch\u00e9es. Pour ajouter la prise en charge de cela, vous devez fournir votre fichier de configuration Babel, et pour l’instant je n’ai pas trouv\u00e9 de moyen d’\u00e9tendre la configuration Babel de WordPress comme nous l’avons fait avec la configuration webpack ci-dessus. Nous devons donc red\u00e9finir les pr\u00e9r\u00e9glages de Babel ainsi que l’ajout du plugin "syntaxes exp\u00e9rimentales". Mais ne vous inqui\u00e9tez pas, c’est un tr\u00e8s petit fichier.<\/p>\n
La premi\u00e8re \u00e9tape consiste \u00e0 installer certains packages dont nous avons besoin pour les pr\u00e9r\u00e9glages Babel – nous devons installer les m\u00eames que ceux d\u00e9finis dans la configuration Babel de WordPress. Ex\u00e9cutez cette commande pour installer @babel\/preset-env<\/code>et @babel\/preset-react<\/code>, ainsi que le package qui nous int\u00e9resse ; @babel\/plugin-proposal-class-properties<\/code>:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
La deuxi\u00e8me \u00e9tape consiste \u00e0 ajouter le fichier de configuration de Babel. Dans votre dossier de projet, cr\u00e9ez un fichier nomm\u00e9 .babelrc<\/code>(sans extension de fichier).<\/p>\n
Remarque pour Windows\u00a0: si vous \u00eates assis sur une machine Windows, vous n’\u00eates pas autoris\u00e9 \u00e0 cr\u00e9er des fichiers sans extensions de fichier. Pour contourner cela, vous pouvez cr\u00e9er ce fichier \u00e0 l’aide du terminal\/invite de commande. Ex\u00e9cutez cette commande\u00a0:<\/p>\n
echo hi > .babelrc<\/code><\/pre>\n
Cette commande affichera "salut" dans le fichier .babelrc<\/code>du dossier actuel. Vous pouvez maintenant ouvrir ce fichier dans votre \u00e9diteur, supprimer le "salut" et ajouter le contenu r\u00e9el ci-dessous.<\/p>\n
Votre .babelrc<\/code>devrait ressembler \u00e0 ceci\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
Nous d\u00e9finissons les m\u00eames pr\u00e9r\u00e9glages que vous feriez normalement dans un projet React, et de la m\u00eame mani\u00e8re que WordPress le fait. Ce que nous ajoutons est la plugins<\/code>propri\u00e9t\u00e9. \u00c0 l’int\u00e9rieur du tableau, plugins<\/code>nous ajoutons le @babel\/plugin-proposal-class-properties<\/code>plug-in Babel n\u00e9cessaire pour les "syntaxes exp\u00e9rimentales" telles que les fonctions fl\u00e9ch\u00e9es.<\/p>\n
Conclusion<\/h2>\n
Gardez \u00e0 l’esprit que WordPress peut modifier sa configuration \u00e0 tout moment, cela est particuli\u00e8rement susceptible de se produire car Gutenberg est relativement nouveau. Parce que nous \u00e9tendons la configuration de WordPress, nous pourrions \u00e0 un moment donn\u00e9 avoir besoin de mettre \u00e0 jour notre configuration \u00e0 nouveau pour r\u00e9pondre \u00e0 nos besoins. Peut-\u00eatre que WordPress d\u00e9cide d’inclure la prise en charge des syntaxes exp\u00e9rimentales afin que nous n’ayons pas \u00e0 faire toute la configuration de Babel.<\/p>\n
Ce n’est en aucun cas un guide exhaustif pour configurer Webpack et Babel, mais le r\u00e9sultat de nombreuses exp\u00e9rimentations et d\u00e9couvertes. J’esp\u00e8re que cela vous a aid\u00e9 \u00e0 apprendre \u00e0 configurer votre propre environnement de d\u00e9veloppement Gutenberg et l’a rendu assez facile pour que ce ne soit pas un si gros obstacle pour commencer \u00e0 apprendre ES6, ESNext, JSX et toutes ces bonnes choses b\u00e9n\u00e9fiques pour d\u00e9velopper pour Gutenberg\u00a0!<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Il s’agit d’un guide complet sur la configuration de npm, webpack et babel afin d’\u00e9crire du code pour Gutenberg avec les syntaxes ES6, ESNext et JSX.<\/p>\n","protected":false},"author":1,"featured_media":151834,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,832,936,936,915,1110,811,811,832,841,841,862,862],"tags":[1167],"class_list":["post-234264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-guide-pour-les-debutants","category-gutenberg-3","category-n-a","category-plugins-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234264","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=234264"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234264\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/151834"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}