[add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)()<\/code>. Cette fonction vous permet d’ajouter une bo\u00eete m\u00e9ta avec votre contenu personnalis\u00e9 soit en bas, soit sur le c\u00f4t\u00e9 lors de l’\u00e9dition d’un article. Cette m\u00e9thode fonctionne toujours, \u00e9galement dans l’\u00e9diteur Gutenberg\u00a0!<\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51080f2022.png\")
<\/a><\/p>\nCependant, il semble un peu d\u00e9cal\u00e9 par rapport au reste du contenu de la barre lat\u00e9rale de Gutenberg. Et sans oublier, vous auriez besoin d’\u00e9crire manuellement le code d’entr\u00e9e (case \u00e0 cocher, entr\u00e9es de texte, etc.) avec PHP et \u00e9galement d’\u00e9crire du code suppl\u00e9mentaire pour les enregistrer lorsque le message est mis \u00e0 jour. Et si vous vouliez que vos param\u00e8tres post-m\u00e9ta soient dynamiques (disons que vous vouliez masquer un champ \u00e0 moins qu’un autre champ ne soit activ\u00e9), alors vous devriez mettre manuellement un script en file d’attente et oui, vous l’avez devin\u00e9, g\u00e9rer manuellement la logique dynamique de cacher et de montrer. Tout cela est d\u00e9sormais obsol\u00e8te et simplifi\u00e9 gr\u00e2ce au nouvel \u00e9diteur Gutenberg bas\u00e9 sur Javascript. On peut assez facilement faire quelque chose comme \u00e7a :<\/p>\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153559-61e51081c74ff.png\")
<\/a><\/p>\nLe processus<\/h2>\n
Le processus est le suivant :<\/p>\n
\n- Nous enregistrons chaque cl\u00e9 m\u00e9ta de publication personnalis\u00e9e que nous voulons ajouter en PHP \u00e0 l’aide de
[register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>, et la d\u00e9finissons comme disponible dans l’API WP REST. Il s’agit d’une \u00e9tape n\u00e9cessaire pour rendre la m\u00e9ta de publication disponible dans l’\u00e9diteur Gutenberg.<\/li>\n- Nous cr\u00e9ons un fichier Javascript et le mettons en file d’attente sp\u00e9cifiquement pour l’\u00e9diteur (uniquement).<\/li>\n
- Dans le fichier Javascript, nous enregistrons un plugin en
[registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>lui disant de rendre notre composant.<\/li>\n- \u00c0 l’int\u00e9rieur de ce composant, nous pouvons produire tout ce dont nous avons besoin. Nous pouvons utiliser les composants int\u00e9gr\u00e9s de WordPress pour rendre facilement diff\u00e9rents types de param\u00e8tres. Et en utilisant le package de donn\u00e9es WordPress, nous pouvons r\u00e9cup\u00e9rer et mettre \u00e0 jour les m\u00e9ta-valeurs de publication imm\u00e9diatement au fur et \u00e0 mesure qu’elles sont modifi\u00e9es.<\/li>\n<\/ul>\n
Allons droit au but, en commen\u00e7ant par la partie PHP\u00a0; enregistrement de la post m\u00e9ta.<\/p>\n
Enregistrement de post-m\u00e9ta<\/h2>\n
Pour chaque m\u00e9ta post que vous souhaitez ajouter \u00e0 la barre lat\u00e9rale de Gutenberg, vous devrez vous inscrire en utilisant [register_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/)()<\/code>. Cela est n\u00e9cessaire pour les rendre disponibles via l’API WP REST (que Gutenberg utilise) et donc disponibles dans notre Javascript.<\/p>\nDans le fichier de votre th\u00e8me functions.php<\/code>ou dans un autre fichier PHP actif, ajoutez une fonction accroch\u00e9e au crochet ‘ init<\/code>‘. Dans la fonction, vous r\u00e9p\u00e9tez a register_post_meta()<\/code>pour chaque m\u00e9ta de publication personnalis\u00e9e que vous souhaitez ajouter. La fonction prend trois arguments ; Le premier param\u00e8tre est le type de publication pour lequel vous souhaitez enregistrer la m\u00e9ta (d\u00e9fini comme cha\u00eene vide pour tous les types de publication). Le deuxi\u00e8me param\u00e8tre est le nom de la cl\u00e9 m\u00e9ta pour votre m\u00e9ta. Et le troisi\u00e8me est un tableau de param\u00e8tres. C’est ici que nous d\u00e9finissons que cette m\u00e9ta doit \u00eatre accessible dans l’API WP REST en d\u00e9finissant ‘ show_in_rest<\/code>‘ sur true.<\/p>\nPar exemple, disons que je veux ajouter une bascule marche\/arr\u00eat et une entr\u00e9e de texte dans la barre lat\u00e9rale de l’\u00e9diteur. Cela signifie que j’appelle register_post_meta()<\/code>respectivement un bool\u00e9en et un type de valeur de cha\u00eene. Je souhaite \u00e9galement limiter ces post meta au type de publication ‘post’ uniquement. Cela ressemblerait \u00e0 quelque chose comme :<\/p>\nadd_action( 'init', function() {\n register_post_meta( 'post', '_my_custom_bool', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'boolean',\n ] );\n\u00a0\n register_post_meta( 'post', '_my_custom_text', [\n 'show_in_rest' => true,\n 'single' => true,\n 'type' => 'string',\n ] );\n} );<\/code><\/pre>\nMaintenant, j’ai une cl\u00e9 m\u00e9ta post _my_custom_bool<\/code>et _my_custom_text<\/code>pr\u00eate et disponible dans Gutenberg. Je vous recommande de les renommer en quelque chose qui a du sens pour vous.<\/p>\nEnregistrement de notre plugin Javascript<\/h2>\n
Pour notre prochaine \u00e9tape, nous allons ajouter un fichier Javascript et nous assurer de le mettre en file d’attente \u00e0 l’aide de PHP.<\/p>\n
Gardez \u00e0 l’esprit que j’\u00e9cris le code Javascript dans la syntaxe ES6. Cela signifie que j’ai mis en place une configuration webpack\/Babel pour compiler mon fichier dans un fichier Javascript lisible s\u00e9par\u00e9 pour le navigateur.<\/p>\n
J’ai un guide sur la fa\u00e7on de configurer cela si vous n’\u00eates pas s\u00fbr de la fa\u00e7on dont cela fonctionne:<\/p>\n
Nous devons nous assurer que WordPress charge notre script dans l’\u00e9diteur. Pour ce faire, nous accrochons une fonction \u00e0 enqueue_block_editor_assets<\/code>et appelons[wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>\u00a0:<\/p>\nadd_action( 'enqueue_block_editor_assets', function() {\n wp_enqueue_script(\n 'awp-custom-meta-plugin', \n get_template_directory_uri(). '\/assets\/js\/gutenberg\/plugin-awp-custom-postmeta.js', \n [ 'wp-edit-post' ],\n false,\n false\n );\n} );<\/code><\/pre>\nJe suppose que vous savez comment mettre des scripts en file d’attente et que vous pouvez remplacer les valeurs par les v\u00f4tres. Comme deuxi\u00e8me param\u00e8tre, je fournis le chemin vers le fichier de construction (pas le fichier source). Pour m’assurer que notre script n’est pas charg\u00e9 trop t\u00f4t, j’ai d\u00e9fini ‘ wp-edit-post<\/code>‘ comme d\u00e9pendance. C’est le package dont nous avons besoin pour g\u00e9rer la post-m\u00e9ta.<\/p>\nPassons maintenant \u00e0 la partie Javascript.<\/p>\n
Nous devons d’abord appeler [registerPlugin](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/#registerPlugin)()<\/code>et transmettre notre composant pour rendre le panneau dans la barre lat\u00e9rale du document Gutenberg. Cette fonction est disponible dans le wp.plugins<\/code>package, je la d\u00e9structure donc en haut. J’aime garder mes fichiers bien rang\u00e9s, alors je cr\u00e9e un autre fichier ; "awp-custom-postmeta-fields.js" pour contenir le composant rendu et l’importer.<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nimport AWP_Custom_Plugin from '.\/awp-custom-postmeta-fields';\n\u00a0\nregisterPlugin( 'my-custom-postmeta-plugin', {\n render() {\n return(<AWP_Custom_Plugin \/>);\n }\n} );<\/code><\/pre>\n\u00c9crire notre composant<\/h2>\n
Commen\u00e7ons par cr\u00e9er un composant de base qui ne fait rien d’autre que de s’asseoir l\u00e0 au bon endroit, donc nous l’\u00e9liminons d’abord. Afin de rendre un composant dans la barre lat\u00e9rale Document de Gutenberg, nous utilisons le [PluginDocumentSettingPanel](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/)<\/code>composant. Nous pouvons d\u00e9finir des attributs tels que a title<\/code>, icon<\/code>et className<\/code>. Et tout ce qu’il y a \u00e0 l’int\u00e9rieur sera rendu dans la barre lat\u00e9rale du document. Pour l’instant, je ne fais que sortir du texte "Bonjour l\u00e0-bas".<\/p>\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { PanelRow } = wp.components;\n\u00a0\nconst AWP_Custom_Plugin =() => {\n return(\n <PluginDocumentSettingPanel title={ __( 'My Custom Post meta', 'txtdomain') } initialOpen=\"true\">\n <PanelRow>\n Hello there.\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Custom_Plugin;<\/code><\/pre>\nAvec le code ci-dessus (compil\u00e9), on obtient ceci :<\/p>\n