{"id":228727,"date":"2022-10-18T16:14:00","date_gmt":"2022-10-18T13:14:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228727"},"modified":"2022-11-09T04:02:46","modified_gmt":"2022-11-09T01:02:46","slug":"ajouter-des-points-dentree-au-script-de-bloc-de-creation-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/ajouter-des-points-dentree-au-script-de-bloc-de-creation-wordpress\/","title":{"rendered":"Ajouter des points d&rsquo;entr\u00e9e au script de bloc de cr\u00e9ation WordPress"},"content":{"rendered":"\n<p>Lorsque vous cr\u00e9ez un bloc pour la premi\u00e8re fois avec le script de cr\u00e9ation de bloc WordPress, <code>npm init @wordpress\/block<\/code>il vous fournit un point d&rsquo;entr\u00e9e vers <code>\/src\/index.js<\/code>, que vous pouvez utiliser pour compiler tous vos \u00e9l\u00e9ments et styles bas\u00e9s sur des blocs.<\/p>\n<p>Parfois, vous souhaitez ajouter d&rsquo;autres points d&rsquo;entr\u00e9e, par exemple, vous pouvez utiliser des blocs WordPress Block Editor (Gutenberg) ailleurs dans l&rsquo;\u00e9diteur, par exemple <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sur une page de param\u00e8tres<\/a> ou dans le personnalisateur.<\/p>\n<p>Ce guide vous aide \u00e0 \u00e9tendre le WordPress Create Block Script <code>webpack.config<\/code>afin que vous puissiez ajouter ces points d&rsquo;entr\u00e9e suppl\u00e9mentaires.<\/p>\n<h2>Conditions pr\u00e9alables<\/h2>\n<ul>\n<li>Familiarisez-vous avec <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la cr\u00e9ation de plugins pour WordPress Gutenberg avec le script de bloc de cr\u00e9ation<\/a><\/li>\n<\/ul>\n<h2>Cr\u00e9ez vos fichiers<\/h2>\n<p>Suite au <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide de cr\u00e9ation de script de bloc<\/a>, nous allons cr\u00e9er quelques fichiers dans notre solution\u00a0:<\/p>\n<h3>Cr\u00e9er<code>\/src\/admin.js<\/code><\/h3>\n<p>Ce fichier sera le point d&rsquo;entr\u00e9e principal pour tout React que nous souhaitons ajouter \u00e0 l&rsquo;\u00e9cran d&rsquo;administration de WordPress (par exemple, si nous voulions <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cr\u00e9er une page d&rsquo;options pour contr\u00f4ler nos param\u00e8tres avec Gutenberg Components<\/a>.<\/p>\n<p>Cr\u00e9ez le fichier <code>\/src\/admin.js<\/code>et collez-y le code suivant\u00a0:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Nous ne faisons vraiment rien dans ce dossier pour l&rsquo;instant, cela fera l&rsquo;objet de guides ult\u00e9rieurs. Pour l&rsquo;instant, nous mettons simplement du code afin de pouvoir tester la sortie.<\/p>\n<p>Il importe cependant le <code>\/src\/admin.scss<\/code>fichier, qui se compilera pour contenir tous nos CSS personnalis\u00e9s pour l&rsquo;administrateur WordPress.<\/p>\n<h3>Cr\u00e9er<code>\/src\/admin.scss<\/code><\/h3>\n<p>Cr\u00e9ez le fichier <code>\/src\/admin.scss<\/code>et ajoutez quelques tests SCSS\u00a0:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>Encore une fois, ce code ne sert \u00e0 rien, sauf \u00e0 tester si le SCSS est compil\u00e9.<\/p>\n<h3>Cr\u00e9er<code>\/webpack.config.js<\/code><\/h3>\n<p>Cr\u00e9ez un fichier \u00e0 la racine de votre plugin appel\u00e9 <code>webpack.config.js<\/code>nous verrons ce qu&rsquo;il faut mettre dans ce fichier sous peu.<\/p>\n<h2>Modifier le fichier PHP racine du plugin<\/h2>\n<p>Si vous avez suivi le guide pr\u00e9c\u00e9dent, ce plugin s&rsquo;appellera <code>wholesome-plugin.php<\/code>.<\/p>\n<p>Dans ce fichier, nous voulons enregistrer les scripts pour la zone d&rsquo;administration, qui seront produits par notre configuration webpack. Ajoutez la fonction suivante au bas de ce fichier\u00a0:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_admin_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/admin.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $admin_js     = 'build\/admin.js';\n    $script_asset = require( $script_asset_path );\n    wp_register_script(\n        'wholesomecode-wholesome-plugin-admin-editor',\n        plugins_url( $admin_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    $admin_css = 'build\/admin.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-admin',\n        plugins_url( $admin_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$admin_css\") );\n}\nadd_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );\n<\/code><\/pre>\n<p>Nous avons \u00e0 peu pr\u00e8s copi\u00e9 le code du bloc de mise en file d&rsquo;attente pr\u00e9c\u00e9dent, mais l&rsquo;avons rendu pertinent pour nos fichiers de sortie attendus de <code>\/build\/admin.js<\/code>et <code>\/build\/admin.css<\/code>. Notez que nous chargeons \u00e9galement le <code>\/build\/admin.asset.php<\/code>fichier sp\u00e9cialement g\u00e9n\u00e9r\u00e9, qui ajoutera automatiquement toutes les d\u00e9pendances de l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg) pour notre script d&rsquo;administration.<\/p>\n<h2>Modifier le<code>webPack.config<\/code><\/h2>\n<p>A l&rsquo;\u00e9tape 2 nous avons cr\u00e9\u00e9 le fichier <code>webpack.config.js<\/code>, dans ce fichier ajoutez le code suivant :<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),\n    }\n};\n<\/code><\/pre>\n<p>Ce code importe le fichier <code>webpack.config<\/code>from <code>@wordpress\/scripts<\/code>. Il s&rsquo;agit du code qui s&rsquo;ex\u00e9cute \u00e0 chaque fois que vous ex\u00e9cutez <code>npm start<\/code>votre solution.<\/p>\n<p>Tout ce que nous faisons est de prendre cette configuration et d&rsquo;ajouter un autre point d&rsquo;entr\u00e9e, avec la ligne <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>Le reste du code indique simplement \u00e0 Webpack d&rsquo;utiliser les param\u00e8tres d\u00e9j\u00e0 en place (par exemple <code>...defautConfig<\/code>, <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Compiler le code<\/h2>\n<p>Compilez votre plugin avec la <code>npm start<\/code>commande, et regardons ce qui se passe :<\/p>\n<p>Compilation du code avec le nouveau point d&rsquo;entr\u00e9e<\/p>\n<p>Le script g\u00e9n\u00e8re maintenant de nouveaux fichiers pour nous\u00a0:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 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 nouveau point d&rsquo;entr\u00e9e. Il est mis en file d&rsquo;attente via le <code>wholesome-plugin.php<\/code>fichier de chargement principal via la fonction suppl\u00e9mentaire que nous avons mise en place.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 Il s&rsquo;agit du fichier CSS d&rsquo;administration, et il est mis en file d&rsquo;attente via le <code>wholesome-plugin.php<\/code>fichier de chargement principal via la fonction suppl\u00e9mentaire que nous avons mise en place.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 Il s&rsquo;agit du fichier JavaScript compil\u00e9 principal, et il est mis en file d&rsquo;attente via le <code>wholesome-plugin.php<\/code>fichier de chargement principal via la fonction suppl\u00e9mentaire que nous avons mise en place.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 Ce fichier n&rsquo;est g\u00e9n\u00e9r\u00e9 que lorsque vous compilez les actifs pour le mode de d\u00e9veloppement (IE que vous ex\u00e9cutez <code>npm start<\/code>et non <code>npm build<\/code>lorsque vous compilez vos actifs. C&rsquo;est un fichier utile pour les d\u00e9bogueurs pour aider \u00e0 identifier les noms de fichiers et les num\u00e9ros de ligne dans le CSS si des erreurs se produisent.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js.map<\/code>\u2014 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 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<\/li>\n<li>\n<p>Regardez comment utiliser <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">les champs post-m\u00e9ta dans les blocs Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Regardez comment utiliser <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">les options et les param\u00e8tres dans les blocs Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Regardez comment cr\u00e9er <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">des m\u00e9ta-bo\u00eetes personnalis\u00e9es dans Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Envisagez de cr\u00e9er une <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">page d&rsquo;options et de param\u00e8tres \u00e0 l&rsquo;aide de composants Gutenberg<\/a><\/p>\n<\/li>\n<\/ul>\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>Lorsque vous cr\u00e9ez un bloc pour la premi\u00e8re fois avec le script de cr\u00e9ation de bloc WordPress \u00e0 l&rsquo;aide de npm init @wordpress\/block, il vous fournit un point d&rsquo;entr\u00e9e vers \/src\/index.js, que vous pouvez utiliser pour compiler&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,780,748,841],"tags":[1167],"class_list":["post-228727","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-logiciels-open-source","category-open-source-projektmanagement-2","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228727","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=228727"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228727\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}