{"id":228590,"date":"2022-10-14T10:08:00","date_gmt":"2022-10-14T07:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228590"},"modified":"2022-11-09T03:09:29","modified_gmt":"2022-11-09T00:09:29","slug":"un-apercu-du-script-de-bloc-de-creation-de-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/un-apercu-du-script-de-bloc-de-creation-de-wordpress\/","title":{"rendered":"Un aper\u00e7u du script de bloc de cr\u00e9ation de WordPress"},"content":{"rendered":"\n<p>L&rsquo;\u00e9quipe officielle de l&rsquo;\u00e9diteur WordPress (Gutenberg) vous a fourni <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">un petit script soign\u00e9 pour cr\u00e9er un plugin de bloc<\/a> avec leur <code>@wordpress\/create-block<\/code>script npm.<\/p>\n<p>Cet article donne un aper\u00e7u du WordPress Create Block Script, ainsi que des d\u00e9tails sur ce qu&rsquo;il produit.<\/p>\n<p><strong>REMARQUE\u00a0: cet article concerne une ancienne version de Cr\u00e9er un script de bloc<\/strong><\/p>\n<p>Bien que la th\u00e9orie puisse toujours \u00eatre appliqu\u00e9e, certaines des informations contenues dans cet article peuvent ne plus \u00eatre compatibles avec le dernier script de bloc de cr\u00e9ation. Vous pouvez <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">consulter notre guide de cr\u00e9ation de script de bloc mis \u00e0 jour ici<\/a>.<\/p>\n<h2>Ex\u00e9cution du script de cr\u00e9ation de bloc<\/h2>\n<p>La documentation officielle vous donne quelques param\u00e8tres diff\u00e9rents \u00e0 passer dans la <code>npm init @wordpress\/block<\/code>commande.<\/p>\n<p>Pour ma configuration, je l&rsquo;ai ex\u00e9cut\u00e9 en mode interactif en omettant les param\u00e8tres. J&rsquo;ai entr\u00e9 la commande suivante dans mon terminal (tout en \u00e9tant <code>cd<\/code>dans mon <code>wp-content\/plugins<\/code>dossier):<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>Le Script m&rsquo;a pos\u00e9 quelques questions afin de m&rsquo;aider \u00e0 construire mon bloc.<\/p>\n<p>Voulant cr\u00e9er un bloc de d\u00e9marrage pour une id\u00e9e de plugin que j&rsquo;ai (&quot;Wholesome Notes&quot;), j&rsquo;ai r\u00e9pondu aux questions comme suit\u00a0:<\/p>\n<ul>\n<li>\n<p><strong>Le slug de bloc utilis\u00e9 pour l&rsquo;identification (\u00e9galement le nom du plug-in et du dossier de sortie)\u00a0:<\/strong> je veux que mon bloc s&rsquo;appelle <code>Wholesome Notes<\/code>, j&rsquo;ai donc entr\u00e9 <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>L&rsquo;espace de noms interne pour le nom du bloc (quelque chose d&rsquo;unique pour vos produits) :<\/strong> Comme il devrait \u00eatre unique pour tous mes produits que j&rsquo;ai saisis <code>wholesome-code<\/code>, car il s&rsquo;agit du nom de ma soci\u00e9t\u00e9. Avec le recul, il serait pr\u00e9f\u00e9rable de raccourcir <code>wc<\/code>ou <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Le titre d&rsquo;affichage de votre bloc :<\/strong> J&rsquo;ai saisi le titre du plugin, <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>Un aper\u00e7u du script WordPress Create Block Je n&rsquo;\u00e9tais pas s\u00fbr \u00e0 100% de ce que je voulais \u00e9crire ici, alors j&rsquo;ai juste entr\u00e9 du texte que j&rsquo;ai l&rsquo;intention de modifier plus tard.<\/p>\n<\/li>\n<li>\n<p><strong>Le dashicon pour faciliter l&rsquo;identification de votre bloc (facultatif) :<\/strong> En faisant appara\u00eetre rapidement la <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ressource WordPress Dashicons<\/a>, j&rsquo;ai choisi <code>admin-comments<\/code>car il a une ic\u00f4ne de style note.<\/p>\n<\/li>\n<li>\n<p><strong>Le nom de la cat\u00e9gorie pour aider les utilisateurs \u00e0 parcourir et d\u00e9couvrir votre bloc (utilisez les touches fl\u00e9ch\u00e9es)\u00a0:<\/strong> j&rsquo;ai choisi <code>layout<\/code>, m\u00eame si pour \u00eatre honn\u00eate, ce type de bloc aurait probablement besoin de sa propre cat\u00e9gorie. C&rsquo;est quelque chose que je peux modifier ult\u00e9rieurement.<\/p>\n<\/li>\n<\/ul>\n<p>Fonctionnement<code>npm init @wordpress\/block<\/code><\/p>\n<p>Le script est ensuite all\u00e9 de l&rsquo;avant et a install\u00e9 toutes les d\u00e9pendances dont il avait besoin via npm (\u00e0 ce stade, il installe simplement le <code>wp-scripts<\/code>package npm en tant que d\u00e9pendance).<\/p>\n<h2>Inspection de la sortie<\/h2>\n<p>Avec les commandes ci-dessus, le WordPress Create Block Script vous donne le r\u00e9sultat suivant\u00a0:<\/p>\n<ul>\n<li>notes-saines\n<ul>\n<li>construire\n<ul>\n<li>index.asset.php<\/li>\n<li>index.js<\/li>\n<li>index.js.map<\/li>\n<\/ul>\n<\/li>\n<li>node_modules<\/li>\n<li>src\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<\/li>\n<li>.editorconfig<\/li>\n<li>.gitignore<\/li>\n<li>\u00e9diteur.css<\/li>\n<li>package.json<\/li>\n<li>style.css<\/li>\n<li>notes-saines.php<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e80786cc626.png\" alt=\"Un aper\u00e7u du script de bloc de cr\u00e9ation de WordPress\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/bloquer la sortie<\/p>\n<p>Voici une ventilation de chacun de ces fichiers et dossiers.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>C&rsquo;est le dossier racine du plugin, il a le m\u00eame nom que celui que j&rsquo;ai entr\u00e9 pour le &lsquo;slug&rsquo; dans les questions de configuration.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>Il s&rsquo;agit du dossier de construction. Il contient tous les actifs JavaScript et PHP g\u00e9n\u00e9r\u00e9s \u00e0 partir du <code>\/src<\/code>dossier. Ceux-ci sont mis en file d&rsquo;attente via le <code>wholesome-notes.php<\/code>fichier de chargement principal.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>Ce fichier PHP est g\u00e9n\u00e9r\u00e9 automatiquement lors de la <code>\/src<\/code>compilation du dossier. Il contient un tableau de toutes les d\u00e9cences JavaScript de l&rsquo;\u00e9diteur WordPress (Gutenberg) utilis\u00e9es par votre plugin. Il est mis en file d&rsquo;attente via le <code>wholesome-notes.php<\/code>fichier de chargement principal.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>Il s&rsquo;agit du fichier JavaScript compil\u00e9 principal et il est mis en file d&rsquo;attente via le <code>wholesome-notes.php<\/code>fichier de chargement principal.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>Ce fichier n&rsquo;est g\u00e9n\u00e9r\u00e9 que lorsque vous compilez les actifs pour le mode de d\u00e9veloppement (c&rsquo;est-\u00e0-dire que vous ex\u00e9cutez <code>npm start<\/code>et non <code>npm run build<\/code>lorsque vous compilez vos actifs. C&rsquo;est un fichier utile pour les d\u00e9bogueurs JavaScript pour aider \u00e0 identifier les noms de fichiers et les num\u00e9ros de ligne si des erreurs se produisent.<\/p>\n<p><code>\/node_modules<\/code><\/p>\n<p>C&rsquo;est le dossier dans lequel toutes les d\u00e9pendances JavaScript de votre plugin sont install\u00e9es.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>Il s&rsquo;agit du dossier qui contient tous les actifs non compil\u00e9s de votre plugin.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>Il s&rsquo;agit du principal fichier JavaScript non compil\u00e9 pour votre bloc WordPress Editor (Gutenberg). Il contient initialement toute la logique du bloc.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>Ce fichier contient des pr\u00e9r\u00e9glages utiles pour votre IDE (environnement de d\u00e9veloppement int\u00e9gr\u00e9), tels que Visual Studio Code.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>Ce fichier indique \u00e0 git d&rsquo;ignorer certains fichiers lorsque vous vous engagez dans un r\u00e9f\u00e9rentiel git (tel que GitHub).<\/p>\n<p><code>\/editor.css<\/code><\/p>\n<p>Les styles de ce fichier sont sortis uniquement dans l&rsquo;\u00e9diteur, il est mis en file d&rsquo;attente via le <code>wholesome-notes.php<\/code>fichier de chargement principal.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>Ce fichier contient toutes les d\u00e9pendances npm pour le plug-in et les commandes que vous pouvez ex\u00e9cuter. Notez que le plugin utilise <code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>) comme base, donc initialement les d\u00e9pendances charg\u00e9es sont pour ce paquet.<\/p>\n<p><code>\/style.css<\/code><\/p>\n<p>Les styles de ce fichier sont sortis dans l&rsquo;\u00e9diteur et sur le front-end du site, ils sont mis en file d&rsquo;attente via le <code>wholesome-notes.php<\/code>fichier de chargement principal.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>Il s&rsquo;agit du fichier de chargement principal du plugin. Son nom a \u00e9t\u00e9 d\u00e9fini via le &quot;slug&quot; que nous avons entr\u00e9 dans le script de configuration initial. Il met en file d&rsquo;attente tous les actifs JavaScript n\u00e9cessaires au plugin.<\/p>\n<h2>Explorer le plugin<\/h2>\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 votre plugin, si vous l&rsquo;activez et l&rsquo;ins\u00e9rez dans l&rsquo;\u00e9diteur, il ressemblera aux captures d&rsquo;\u00e9cran suivantes (frontend et backend).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"Un aper\u00e7u du script de bloc de cr\u00e9ation de WordPress\" \/>Cr\u00e9er un script de bloc \u2013 Front End par d\u00e9faut<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"Un aper\u00e7u du script de bloc de cr\u00e9ation de WordPress\" \/>Cr\u00e9er un script de bloc &#8211; Backend par d\u00e9faut<\/p>\n<p>Comme vous pouvez le voir, le bloc nous fournit une sortie de base que nous pouvons facilement modifier pour impl\u00e9menter notre propre bloc.<\/p>\n<h3>Bloquer CSS<\/h3>\n<p>Comme vous pouvez le voir sur les captures d&rsquo;\u00e9cran, l&rsquo;exemple de code dans <code>editor.css<\/code>impl\u00e9mente une bordure rouge dans l&rsquo;\u00e9diteur, tandis que les exemples de styles dans <code>styles.css<\/code>sont appliqu\u00e9s \u00e0 la fois au front et au backend.<\/p>\n<h3>Bloquer JavaScript<\/h3>\n<p>Le point d&rsquo;entr\u00e9e pour personnaliser le bloc nouvellement cr\u00e9\u00e9 est le <code>\/src\/index.js<\/code>fichier.<\/p>\n<p>Il y a beaucoup de documentation en ligne dans ce fichier, expliquant pourquoi certaines fonctions sont import\u00e9es, comme <code>registerBlockType<\/code>pour l&rsquo;enregistrement du bloc et <code>__<\/code>pour la prise en charge de la traduction de texte i18n.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"Un aper\u00e7u du script de bloc de cr\u00e9ation de WordPress\" \/>Cr\u00e9er des commentaires en ligne index.js Block<\/p>\n<p>Il vous donne \u00e9galement une sortie tr\u00e8s basique pour les fonctions <code>edit<\/code>et <code>save<\/code>qui sont pass\u00e9es dans l&rsquo;enregistrement de bloc.<\/p>\n<p><strong>Remarque :<\/strong> Dans les versions ult\u00e9rieures du script, ceux-ci ont \u00e9t\u00e9 extraits dans leurs propres fichiers et inclus en tant que modules dans ce fichier.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"Un aper\u00e7u du script de bloc de cr\u00e9ation de WordPress\" \/>Cr\u00e9er un bloc index.js Modifier et enregistrer<\/p>\n<h2>Construire le bloc<\/h2>\n<p>Selon la <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentation create block npm<\/a>, vous pouvez utiliser plusieurs commandes dans votre terminal (\u00e0 partir du dossier racine de votre plugin), pour faire des choses comme v\u00e9rifier la qualit\u00e9 du code ou mettre \u00e0 jour des packages.<\/p>\n<p>Les principales commandes dont vous aurez besoin pour construire le bloc seront <code>npm start<\/code>de compiler votre plugin pour le d\u00e9veloppement et <code>npm run build<\/code>de compiler la version finale.<\/p>\n<p><code>wp-scripts<\/code>(du <code>@wordpress\/scripts<\/code>paquet npm) est la principale d\u00e9pendance de votre plugin. Cette d\u00e9pendance fait abstraction de tous les outils de votre bloc, vous pouvez donc vous concentrer uniquement sur la construction du JavaScript.<\/p>\n<p>Les coulisses <code>wp-scripts<\/code>utilisent <code>webpack<\/code>pour compiler tous vos actifs dans le <code>\/build\/index.js<\/code>fichier.<\/p>\n<p>Vous pouvez en savoir plus <code>wp-scripts<\/code>dans le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">manuel de l&rsquo;\u00e9diteur de blocs<\/a> et vous pouvez en savoir plus sur la configuration de la construction de webpack dans la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">section &quot;Configuration de la construction JavaScript&quot; du manuel.<\/a><\/p>\n<h3>Extension de la configuration du webpack Cr\u00e9er un bloc<\/h3>\n<p>La base de code de votre bloc peut s&rsquo;\u00e9tendre sur plusieurs fichiers, ou m\u00eame avoir un certain nombre de sous-blocs, ou contenir des styles complexes. Dans des moments comme ceux-ci, vous souhaiterez peut-\u00eatre \u00e9tendre la configuration de webpack int\u00e9gr\u00e9e \u00e0 <code>wp-scripts<\/code>.<\/p>\n<p>Pour plus d&rsquo;informations, consultez mon article sur l&rsquo; <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">extension de la <code>wp-scripts<\/code>configuration du pack Web<\/a> ou consultez la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">section Scripts de package du manuel de l&rsquo;\u00e9diteur de blocs<\/a> pour obtenir des conseils.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;\u00e9quipe officielle de l&rsquo;\u00e9diteur WordPress (Gutenberg) vous a fourni un petit script soign\u00e9 pour cr\u00e9er un plugin de bloc avec son script @wordpress\/create-block npm.Cet article donne&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224138,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,841,862],"tags":[1167],"class_list":["post-228590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228590","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=228590"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}