{"id":65579,"date":"2023-01-25T13:27:17","date_gmt":"2023-01-25T12:27:17","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=65579&#038;preview=true&#038;preview_id=65579"},"modified":"2023-10-04T11:47:32","modified_gmt":"2023-10-04T10:47:32","slug":"ajouter-boite-meta-champ-personnalise-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/","title":{"rendered":"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg"},"content":{"rendered":"<p>Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/advanced-custom-fields\/#what\">champs personnalis\u00e9s<\/a> permettent d&rsquo;attribuer des informations suppl\u00e9mentaires au contenu d&rsquo;un site web. Ces informations sont g\u00e9n\u00e9ralement connues sous le nom de <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">m\u00e9tadonn\u00e9es<\/a>.<\/p>\n<blockquote><p>Les m\u00e9tadonn\u00e9es sont des informations sur les informations. Dans le cas de WordPress, il s&rsquo;agit d&rsquo;informations associ\u00e9es aux articles, aux utilisateurs, aux commentaires et aux termes.<\/p>\n<p>\u00c9tant donn\u00e9 la relation \u00ab many-to-one \u00bb des m\u00e9tadonn\u00e9es dans WordPress, vos options sont assez illimit\u00e9es. Vous pouvez avoir autant d&rsquo;options de m\u00e9tadonn\u00e9es que vous le souhaitez, et vous pouvez y stocker \u00e0 peu pr\u00e8s n&rsquo;importe quoi.<\/p>\n<p><em><a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">-Facebook<\/a><\/em><\/p><\/blockquote>\n<p>Voici quelques exemples de m\u00e9tadonn\u00e9es que vous pouvez joindre \u00e0 un article \u00e0 l&rsquo;aide de champs personnalis\u00e9s :<\/p>\n<ul>\n<li>Les coordonn\u00e9es g\u00e9ographiques d&rsquo;un lieu ou d&rsquo;un bien immobilier<\/li>\n<li>La date d&rsquo;un \u00e9v\u00e8nement<\/li>\n<li>L&rsquo;ISBN ou l&rsquo;auteur d&rsquo;un livre<\/li>\n<li>L&rsquo;humeur du jour de l&rsquo;auteur<\/li>\n<\/ul>\n<p>Et il y en a bien d&rsquo;autres.<\/p>\n<p>D&#8217;embl\u00e9e, WordPress ne fournit pas un moyen facile d&rsquo;ajouter et de g\u00e9rer les champs personnalis\u00e9s. Dans l&rsquo;\u00e9diteur classique, les champs personnalis\u00e9s sont affich\u00e9s dans une boite plac\u00e9e en bas de la page, sous l&rsquo;\u00e9diteur d&rsquo;articles.<\/p>\n<figure id=\"attachment_142717\" aria-describedby=\"caption-attachment-142717\" style=\"width: 2555px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142717 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-fields-classic-editor.jpg\" alt=\"Champs personnalis\u00e9s dans l'\u00e9diteur classique.\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Champs personnalis\u00e9s dans l&rsquo;\u00e9diteur classique.<\/figcaption><\/figure>\n<p>Dans Gutenberg, les champs personnalis\u00e9s sont d\u00e9sactiv\u00e9s par d\u00e9faut, mais vous pouvez les afficher en s\u00e9lectionnant l&rsquo;\u00e9l\u00e9ment correspondant dans les r\u00e9glages des articles.<\/p>\n<figure id=\"attachment_142718\" aria-describedby=\"caption-attachment-142718\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142718 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/adding-custom-fields-to-the-block-editor.jpg\" alt=\"Ajout du panneau des champs personnalis\u00e9s \u00e0 l'\u00e9diteur de blocs.\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">Ajout du panneau des champs personnalis\u00e9s \u00e0 l&rsquo;\u00e9diteur de blocs.<\/figcaption><\/figure>\n<p>Malheureusement, il n&rsquo;existe aucun moyen d&rsquo;afficher les m\u00e9tadonn\u00e9es sur l&rsquo;interface publique sans utiliser une extension ou se salir les mains avec du code.<\/p>\n\n<p>Si vous \u00eates un utilisateur, vous trouverez plusieurs <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">excellentes pextensions<\/a> qui font le travail pour vous. Mais si vous \u00eates un d\u00e9veloppeur et que vous souhaitez tirer davantage parti des champs personnalis\u00e9s de WordPress, les int\u00e9grer de mani\u00e8re transparente dans l&rsquo;\u00e9diteur de blocs et les afficher sur l&rsquo;interface publique de votre site web WordPress \u00e0 l&rsquo;aide d&rsquo;un bloc Gutenberg personnalis\u00e9, alors vous \u00eates au bon endroit.<\/p>\n<p>Donc, si vous vous demandez quelle est la meilleure fa\u00e7on d&rsquo;utiliser les champs personnalis\u00e9s WordPress \u00e0 la fois dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">Gutenberg<\/a> et dans l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\">\u00e9diteur classique<\/a> pour les d\u00e9veloppeurs WordPress, la r\u00e9ponse rapide est \u00ab la cr\u00e9ation d&rsquo;une extension qui fonctionne \u00e0 la fois pour l&rsquo;\u00e9diteur classique et Gutenberg \u00bb.<\/p>\n<p>Mais ne vous inqui\u00e9tez pas trop. Si cr\u00e9er une extension pour g\u00e9rer les champs personnalis\u00e9s dans les deux \u00e9diteurs pourrait \u00eatre un peu d\u00e9licat, nous allons essayer de rendre le processus aussi simple que possible. Une fois que vous aurez compris les concepts que nous aborderons dans cet article, vous acquerrez les comp\u00e9tences n\u00e9cessaires pour g\u00e9rer les champs m\u00e9ta personnalis\u00e9s dans Gutenberg et construire toutes sortes de sites web.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Cet article suppose que vous \u00eates familier avec des technologies telles que <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-node-js\/\">Node.js<\/a> &#038; <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a> et <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a>. Des connaissances de base en mati\u00e8re de d\u00e9veloppement WordPress sont \u00e9galement n\u00e9cessaires.<\/p>\n<p>Si vous \u00eates novice en mati\u00e8re de d\u00e9veloppement de blocs Gutenberg, assurez-vous de consulter nos guides pr\u00e9c\u00e9dents avant de commencer \u00e0 lire cet article :<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">Construire des blocs Gutenberg personnalis\u00e9s<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\">Comment cr\u00e9er des blocs dynamiques pour Gutenberg<\/a><\/li>\n<\/ul>\n<p>Si vous pr\u00e9f\u00e9rez le contenu vid\u00e9o, consultez notre cours vid\u00e9o gratuit sur le <a href=\"https:\/\/kinsta.com\/courses\/course\/gutenberg-block-development\/\">d\u00e9veloppement de blocs personnalis\u00e9s pour Gutenberg<\/a>.<\/p>\n<\/aside>\n\n<p><strong>Note : Avant de faire quoi que ce soit, assurez-vous que vous avez une <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">version \u00e0 jour de Node.js<\/a> sur votre ordinateur<\/strong><\/p>\n<p>Ceci \u00e9tant dit, voici notre r\u00e9capitulatif :<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Cr\u00e9er un plugin de bloc avec l&rsquo;outil officiel create-block<\/h2>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er une nouvelle extnsion avec tous les fichiers et d\u00e9pendances n\u00e9cessaires pour enregistrer un nouveau type de bloc. L&rsquo;extension block vous permettra de cr\u00e9er facilement un type de bloc personnalis\u00e9 pour g\u00e9rer et afficher des m\u00e9tadonn\u00e9es personnalis\u00e9es.<\/p>\n<p>Pour cr\u00e9er un nouveau type de bloc, nous utiliserons l&rsquo;outil officiel <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">create-block<\/a>. Pour un aper\u00e7u d\u00e9taill\u00e9 de l&rsquo;utilisation de l&rsquo;outil create-block, consultez notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#create-block\">article pr\u00e9c\u00e9dent<\/a> sur le d\u00e9veloppement de blocs Gutenberg.<\/p>\n<p>Ouvrez votre outil de ligne de commande, naviguez dans le r\u00e9pertoire <strong>plugins<\/strong> de votre <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/staging\/\">site de d\u00e9veloppement WordPress<\/a> et ex\u00e9cutez la commande suivante :<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Lorsque vous y \u00eates invit\u00e9, ajoutez les d\u00e9tails suivants :<\/p>\n<ul>\n<li><strong>La variante de mod\u00e8le \u00e0 utiliser pour ce bloc :<\/strong> dynamic<\/li>\n<li><strong>Le slug du bloc utilis\u00e9 pour l&rsquo;identification (\u00e9galement le nom du dossier de sortie) :<\/strong> metadata-block<\/li>\n<li><strong>L&rsquo;espace de noms interne pour le nom du bloc (quelque chose d&rsquo;unique pour vos produits) :<\/strong> meta-fields<\/li>\n<li><strong>Le titre d&rsquo;affichage de votre bloc :<\/strong> Meta Fields<\/li>\n<li><strong>La courte description de votre bloc (facultatif) :<\/strong> Description du bloc<\/li>\n<li><strong>Le dashicon pour faciliter l&rsquo;identification de votre bloc (facultatif) :<\/strong> book<\/li>\n<li><strong>Le nom de la cat\u00e9gorie pour aider les utilisateurs \u00e0 naviguer et \u00e0 d\u00e9couvrir votre bloc :<\/strong> widgets<\/li>\n<li><strong>Voulez-vous personnaliser l&rsquo;extension WordPress ?<\/strong> Oui\/Non<\/li>\n<\/ul>\n<p>Prenons un moment pour examiner ces d\u00e9tails et essayer de comprendre o\u00f9 ils sont utilis\u00e9s.<\/p>\n<ul>\n<li><strong>Le slug du bloc utilis\u00e9 pour l&rsquo;identification<\/strong> d\u00e9finit le <strong>nom du dossier<\/strong> et le <strong>domaine de texte<\/strong> de l&rsquo;extension<\/li>\n<li><strong>L&rsquo;espace de noms interne pour le nom du bloc<\/strong> d\u00e9finit l&rsquo;<strong>espace de noms interne du<\/strong> bloc et le <strong>pr\u00e9fixe de fonction<\/strong> utilis\u00e9 dans tout le code de l&rsquo;extension.<\/li>\n<li><strong>Le titre d&rsquo;affichage de votre bloc<\/strong> d\u00e9finit le <strong>nom du plugin<\/strong> et le <strong>nom du bloc<\/strong> utilis\u00e9 dans l&rsquo;interface de l&rsquo;\u00e9diteur.<\/li>\n<\/ul>\n<p>La configuration peut prendre quelques minutes. Une fois le processus termin\u00e9, vous obtiendrez une liste des commandes disponibles.<\/p>\n<figure id=\"attachment_142731\" aria-describedby=\"caption-attachment-142731\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-bootstrapped.jpg\" alt=\"L'extension de bloc a bien \u00e9t\u00e9 install\u00e9e.\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">L&rsquo;extension de bloc a bien \u00e9t\u00e9 install\u00e9e.<\/figcaption><\/figure>\n<p>Avant de passer \u00e0 la section suivante, dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/commandes-linux\/\">outil de ligne de commande<\/a>, naviguez dans le dossier de votre extension et ex\u00e9cutez les commandes suivantes :<\/p>\n<pre><code class=\"language-bash\">cd metadata-block\nnpm start<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Assurez-vous d&rsquo;ex\u00e9cuter la commande <code>npm start<\/code> chaque fois que vous d\u00e9marrez votre environnement de d\u00e9veloppement Gutenberg.<\/p>\n<p>Lorsque vous ex\u00e9cutez <code>npm start<\/code>, un observateur s&rsquo;ex\u00e9cute dans le terminal et reconstruit les fichiers JS et CSS apr\u00e8s tout changement (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">en savoir plus<\/a>).<\/p>\n<\/aside>\n\n<p>Vous \u00eates pr\u00eat \u00e0 construire votre code. L&rsquo;\u00e9tape suivante consiste \u00e0 modifier le fichier PHP principal de l&rsquo;extension pour construire une boite m\u00e9ta pour l&rsquo;\u00e9diteur classique.<\/p>\n<p>Donc, avant de passer \u00e0 la section suivante, <strong>installez et activez l&rsquo;extension <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a><\/strong>.<\/p>\n<p>Ensuite, ouvrez l&rsquo;\u00e9cran Extensions et activez la nouvelle extension <strong>Meta Fields<\/strong>.<\/p>\n<figure id=\"attachment_143199\" aria-describedby=\"caption-attachment-143199\" style=\"width: 1726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143199 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/activate-plugins.jpg\" alt=\"Activer les extensions.\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Activer les extensions.<\/figcaption><\/figure>\n<h2>Ajouter une boite m\u00e9ta \u00e0 l&rsquo;\u00e9diteur classique<\/h2>\n<p>Dans le contexte de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/desactiver-editeur-gutenberg-wordpress\/\">\u00e9diteur classique<\/a>, une boite m\u00e9ta est un conteneur contenant des \u00e9l\u00e9ments de formulaire permettant de saisir des informations sp\u00e9cifiques, telles que l&rsquo;auteur, les balises, les cat\u00e9gories, etc.<\/p>\n<p>En plus des boites m\u00e9ta int\u00e9gr\u00e9es, les d\u00e9veloppeurs d&rsquo;extensions peuvent ajouter un nombre quelconque de <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">boites m\u00e9ta personnalis\u00e9es<\/a> pour inclure des \u00e9l\u00e9ments de formulaire HTML (ou tout <a href=\"https:\/\/kinsta.com\/fr\/blog\/apprendre-le-html\/\">contenu HTML<\/a>) o\u00f9 les utilisateurs d&rsquo;extensions peuvent saisir des donn\u00e9es sp\u00e9cifiques aux extensions.<\/p>\n<p>L&rsquo;API de WordPress fournit des fonctions utiles pour enregistrer facilement des boites m\u00e9ta personnalis\u00e9es afin d&rsquo;inclure tous les \u00e9l\u00e9ments HTML dont votre plugin a besoin pour fonctionner.<\/p>\n<p>Pour commencer, ajoutez le code suivant au fichier PHP de l&rsquo;extension que vous venez de cr\u00e9er :<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post',\n\t\t'side',\n\t\t'default'\n\t );\n}\n\n\/\/ build meta box\nfunction meta_fields_build_meta_box_callback( $post ){\n\t  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );\n\t  $title = get_post_meta( $post-&gt;ID, '_meta_fields_book_title', true );\n\t  $author = get_post_meta( $post-&gt;ID, '_meta_fields_book_author', true );\n\t  ?&gt;\n\t  &lt;div class=\"inside\"&gt;\n\t  \t  &lt;p&gt;&lt;strong&gt;Title&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\t\n\t\t  &lt;p&gt;&lt;strong&gt;Author&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_author\" name=\"meta_fields_book_author\" value=\"&lt;?php echo esc_attr( $author ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t  &lt;\/div&gt;\n\t  &lt;?php\n}\nadd_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );<\/code><\/pre>\n<p>La fonction <code>add_meta_box<\/code> enregistre une nouvelle boite m\u00e9ta, tandis que la fonction callback construit le HTML \u00e0 injecter dans la boite m\u00e9ta. Nous n&rsquo;approfondirons pas ce sujet car il d\u00e9passe le cadre de notre article, mais vous trouverez tous les d\u00e9tails dont vous avez besoin <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">ici<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">ici<\/a> et <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">ici<\/a>.<\/p>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 cr\u00e9er une fonction qui enregistre les donn\u00e9es saisies par l&rsquo;auteur chaque fois que le <a href=\"https:\/\/kinsta.com\/fr\/blog\/hooks-wordpress\/\">crochet<\/a> <code>save_post<\/code> est d\u00e9clench\u00e9 (voir <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Ressources pour d\u00e9veloppeurs<\/a>) :<\/p>\n<pre><code class=\"language-php\">\/\/ save metadata\nfunction meta_fields_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_author'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\t$author = sanitize_text_field( $_POST['meta_fields_book_author'] );\n\n\tupdate_post_meta( $post_id, '_meta_fields_book_title', $title );\n\tupdate_post_meta( $post_id, '_meta_fields_book_author', $author );\n}\nadd_action( 'save_post', 'meta_fields_save_meta_box_data' );<\/code><\/pre>\n<p>Encore une fois, consultez la documentation en ligne pour plus de d\u00e9tails. Ici, nous nous contenterons de souligner l&rsquo;underscore (<code>_<\/code>) qui pr\u00e9c\u00e8de la cl\u00e9 m\u00e9ta. Cela indique \u00e0 WordPress de masquer les cl\u00e9s de ces champs personnalis\u00e9s de la liste des champs personnalis\u00e9s disponibles par d\u00e9faut et rend vos champs personnalis\u00e9s visibles uniquement dans votre boite m\u00e9ta personnalis\u00e9e.<\/p>\n<p>L&rsquo;image ci-dessous montre \u00e0 quoi ressemble la boite m\u00e9ta personnalis\u00e9e dans l&rsquo;\u00e9diteur classique :<\/p>\n<figure id=\"attachment_142726\" aria-describedby=\"caption-attachment-142726\" style=\"width: 2154px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142726 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-meta-box.jpg\" alt=\"Une boite m\u00e9ta personnalis\u00e9e dans l'\u00e9diteur classique.\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">Une boite m\u00e9ta personnalis\u00e9e dans l&rsquo;\u00e9diteur classique.<\/figcaption><\/figure>\n<p>Maintenant, si vous d\u00e9sactivez l&rsquo;extension Classic Editor et v\u00e9rifiez ce qui se passe dans l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur de blocs<\/a>, vous verrez que la boite m\u00e9ta appara\u00eet et fonctionne toujours, mais pas exactement de la mani\u00e8re dont vous vous y attendez.<\/p>\n<p>Notre objectif est de cr\u00e9er un syst\u00e8me de gestion des m\u00e9tadonn\u00e9es attach\u00e9es aux articles de blog ou aux <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-publications-personnalises-wordpress\/\">types de publications personnalis\u00e9s<\/a> qui s&rsquo;int\u00e8gre de mani\u00e8re transparente dans l&rsquo;\u00e9diteur de blocs. Pour cette raison, le code pr\u00e9sent\u00e9 jusqu&rsquo;\u00e0 pr\u00e9sent ne sera n\u00e9cessaire que pour assurer la r\u00e9trocompatibilit\u00e9 avec l&rsquo;\u00e9diteur classique.<\/p>\n<p>Ainsi, avant de poursuivre, nous indiquerons \u00e0 WordPress de supprimer la boite de m\u00e9tadonn\u00e9es personnalis\u00e9e de l&rsquo;\u00e9diteur de blocs en ajoutant le drapeau <code>__back_compat_meta_box<\/code> \u00e0 la fonction <code>add_meta_box<\/code> (voir aussi <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Drapeaux de compatibilit\u00e9 de la boite de m\u00e9tadonn\u00e9es<\/a> et <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">compatibilit\u00e9 ascendante<\/a>).<\/p>\n<p>Revenons \u00e0 la fonction de rappel qui enregistre la boite m\u00e9ta et modifions-la comme suit :<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post', \n\t\t'side',\n\t\t'default',\n\t\t\/\/ hide the meta box in Gutenberg\n\t\tarray('__back_compat_meta_box' =&gt; true)\n\t );\n}<\/code><\/pre>\n<p>Enregistrez le fichier de l&rsquo;extension et retournez dans votre administration WordPress. Maintenant, vous ne devriez plus voir la boite m\u00e9ta personnalis\u00e9e dans l&rsquo;\u00e9diteur de blocs. Si vous r\u00e9activez l&rsquo;\u00e9diteur classique \u00e0 la place, votre boite m\u00e9ta personnalis\u00e9e apparaitra \u00e0 nouveau.<\/p>\n<h2>Ajouter des champs m\u00e9ta personnalis\u00e9s \u00e0 l&rsquo;\u00e9diteur de bloc Gutenberg (trois options)<\/h2>\n<p>Dans nos articles pr\u00e9c\u00e9dents sur le d\u00e9veloppement de blocs Gutenberg, nous avons fourni des aper\u00e7us d\u00e9taill\u00e9s de l&rsquo;\u00e9diteur, de ses parties, et de la fa\u00e7on de d\u00e9velopper des <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">blocs statiques<\/a> et des <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\">blocs dynamiques<\/a>.<\/p>\n<p>Comme nous l&rsquo;avons mentionn\u00e9, dans cet article, nous allons aller un peu plus loin et discuter de la fa\u00e7on d&rsquo;ajouter des champs m\u00e9ta personnalis\u00e9s aux articles de blog.<\/p>\n<p>Il existe plusieurs fa\u00e7ons de stocker et d&rsquo;utiliser les m\u00e9tadonn\u00e9es des articles dans Gutenberg. Nous aborderons ici les points suivants :<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Cr\u00e9er un bloc personnalis\u00e9 pour stocker et afficher des champs m\u00e9ta personnalis\u00e9s<\/h3>\n<p>Dans cette section, nous allons vous montrer comment cr\u00e9er et g\u00e9rer des champs m\u00e9ta personnalis\u00e9s \u00e0 partir d&rsquo;un <strong>bloc dynamique<\/strong>. Selon le manuel de l&rsquo;\u00e9diteur de bloc, un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">champ m\u00e9ta d&rsquo;article<\/a> est un objet WordPress utilis\u00e9 pour stocker des donn\u00e9es suppl\u00e9mentaires sur un article et nous devons d&rsquo;abord enregistrer un nouveau champ m\u00e9ta avant de pouvoir l&rsquo;utiliser.<\/p>\n<h4>Enregistrer les champs m\u00e9ta personnalis\u00e9s<\/h4>\n<p>Avant d&rsquo;enregistrer un champ m\u00e9ta personnalis\u00e9, vous devez vous assurer que le <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-publications-personnalises-wordpress\/\">type de publication<\/a> qui l&rsquo;utilisera prend en charge les champs personnalis\u00e9s. En outre, lorsque vous enregistrez un champ m\u00e9ta personnalis\u00e9, vous devez d\u00e9finir le param\u00e8tre <code>show_in_rest<\/code> sur <code>true<\/code>.<\/p>\n<p>Maintenant, revenons au fichier de l&rsquo;extension. Ajoutez le code suivant :<\/p>\n<pre><code class=\"language-php\">\/**\n * Register the custom meta fields\n *\/\nfunction meta_fields_register_meta() {\n\n    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];\n\n    foreach( $metafields as $metafield ){\n        \/\/ Pass an empty string to register the meta key across all existing post types.\n        register_post_meta( '', $metafield, array(\n            'show_in_rest' =&gt; true,\n            'type' =&gt; 'string',\n            'single' =&gt; true,\n            'sanitize_callback' =&gt; 'sanitize_text_field',\n            'auth_callback' =&gt; function() { \n                return current_user_can( 'edit_posts' );\n            }\n        ));\n    }  \n}\nadd_action( 'init', 'meta_fields_register_meta' );<\/code><\/pre>\n<p><code>register_post_meta<\/code> enregistre une cl\u00e9 m\u00e9ta pour les types de publication sp\u00e9cifi\u00e9s. Dans le code ci-dessus, nous avons enregistr\u00e9 deux champs m\u00e9ta personnalis\u00e9s pour tous les types de publications enregistr\u00e9s sur votre site web qui prennent en charge les champs personnalis\u00e9s. Pour plus d&rsquo;informations, consultez la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">r\u00e9f\u00e9rence de la fonction<\/a>.<\/p>\n<p>Une fois cela fait, ouvrez le fichier <strong>src\/index.js<\/strong> de votre extension de bloc.<\/p>\n<h4>Enregistrez le type de bloc sur le client<\/h4>\n<p>Naviguez maintenant dans le dossier <strong>wp-content\/plugins\/metadata-block\/src<\/strong> et ouvrez le fichier <strong>index.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport '.\/style.scss';\nimport Edit from '.\/edit';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n\tedit: Edit,\n} );<\/code><\/pre>\n<p>Avec les blocs statiques, nous aurions \u00e9galement vu une <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#indexjs\">fonction<code>save<\/code><\/a>. Dans ce cas, la fonction <code>save<\/code> est absente car nous avons install\u00e9 un bloc dynamique. Le contenu affich\u00e9 sur l&rsquo;interface publique sera g\u00e9n\u00e9r\u00e9 dynamiquement via PHP.<\/p>\n<h4>Cr\u00e9ez le type de bloc<\/h4>\n<p>Naviguez vers le dossier <strong>wp-content\/plugins\/metadata-block\/src<\/strong> et ouvrez le fichier <strong>edit.js<\/strong>. Vous devriez voir le code suivant (commentaires supprim\u00e9s) :<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p { ...useBlockProps() }&gt;\n\t\t\t{ __( 'Meta Fields \u2013 hello from the editor!', 'metadata-block' ) }\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>Vous ajouterez ici le code permettant de g\u00e9n\u00e9rer le bloc \u00e0 rendre dans l&rsquo;\u00e9diteur.<\/p>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 importer les composants et les fonctions n\u00e9cessaires \u00e0 la construction du bloc. Voici la liste compl\u00e8te des d\u00e9pendances :<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, InspectorControls, RichText } from '@wordpress\/block-editor';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\nimport { TextControl, PanelBody, PanelRow } from '@wordpress\/components';\nimport '.\/editor.scss';<\/code><\/pre>\n<p>Si vous avez lu nos articles pr\u00e9c\u00e9dents, vous devriez \u00eatre familier avec un grand nombre de ces <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">d\u00e9clarations<code>import<\/code><\/a>. Nous n&rsquo;en signalerons ici que quelques-unes :<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Une fois que vous avez import\u00e9 ces d\u00e9pendances, voici comment vous allez <code>useSelect<\/code> et <code>useEntityProp<\/code> dans la fonction <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\nconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );<\/code><\/pre>\n<ul>\n<li><code>useSelect<\/code> est un hook personnalis\u00e9 pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#build-the-block-to-be-rendered-in-the-editor\">r\u00e9cup\u00e9rer les props des s\u00e9lecteurs enregistr\u00e9s<\/a>. Nous l&rsquo;utiliserons pour r\u00e9cup\u00e9rer le type de publication actuel (voir \u00e9galement la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"> r\u00e9f\u00e9rence @wordpress\/data<\/a> et l&rsquo;<a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">introduction de useDispatch et useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> est un hook personnalis\u00e9 qui permet aux blocs de r\u00e9cup\u00e9rer et de modifier les champs m\u00e9ta des publication. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">Il est d\u00e9fini<\/a> comme un \u00ab hook qui renvoie la valeur et un setter pour la propri\u00e9t\u00e9 sp\u00e9cifi\u00e9e de l&rsquo;entit\u00e9 fournie la plus proche du type sp\u00e9cifi\u00e9 \u00bb. Il renvoie \u00ab un tableau o\u00f9 le premier \u00e9l\u00e9ment est la valeur de la propri\u00e9t\u00e9, le deuxi\u00e8me est le setter et le troisi\u00e8me est l&rsquo;objet de valeur complet de l&rsquo;API REST contenant plus d&rsquo;informations comme <code>raw<\/code>, <code>rendered<\/code> et <code>protected<\/code> props \u00bb. (Voir aussi <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">Mises \u00e0 jour g\u00e9n\u00e9rales de l&rsquo;API de l&rsquo;\u00e9diteur de blocs<\/a>)<\/li>\n<\/ul>\n<p>Ce code fournit l&rsquo;adresse actuelle <code>postType<\/code>, un objet de champs m\u00e9ta (<code>meta<\/code>), et une fonction setter pour les mettre \u00e0 jour (<code>setMeta<\/code>).<\/p>\n<p>Remplacez maintenant le code actuel de la fonction <code>Edit()<\/code> par le suivant :<\/p>\n<pre><code class=\"language-js\">export default function Edit() {\n\tconst blockProps = useBlockProps();\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\tconst bookTitle = meta[ '_meta_fields_book_title' ];\n\tconst bookAuthor = meta[ '_meta_fields_book_author' ];\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_title: newValue } );\n    };\n\tconst updateBookAuthorMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_author: newValue } );\n\t};\nreturn ( ... );\n}<\/code><\/pre>\n<p>Encore une fois :<\/p>\n<ul>\n<li>Nous avons utilis\u00e9 <code>useSelect<\/code> pour obtenir le type de publication actuel.<\/li>\n<li><code>useEntityProp<\/code> renvoie un tableau de champs m\u00e9ta et une fonction setter pour d\u00e9finir de nouvelles valeurs m\u00e9ta.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> et <code>updateBookAuthorMetaValue<\/code> sont deux gestionnaires d&rsquo;\u00e9v\u00e9nements pour enregistrer les valeurs des champs m\u00e9ta.<\/li>\n<\/ul>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 construire le code JSX (JavaScript XML) renvoy\u00e9 par la fonction <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit() {\n\t...\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t&lt;PanelBody \n\t\t\t\t\ttitle={ __( 'Book Details' )}\n\t\t\t\t\tinitialOpen={true}\n\t\t\t\t&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={__( 'Book title' )}\n\t\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Book author' ) }\n\t\t\t\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t&lt;div { ...blockProps }&gt;\n\t\t\t\t&lt;RichText \n\t\t\t\t\ttagName=\"h3\"\n\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\t\/&gt;\n\t\t\t\t&lt;TextControl\n\t\t\t\t\tlabel=\"Book Author\"\n\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>Le composant <code>RichText<\/code> fournit une entr\u00e9e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">contentable<\/a>, tandis que <code>TextControl<\/code> fournit de simples champs de texte.<\/p>\n<p>Nous avons \u00e9galement cr\u00e9\u00e9 un panneau lat\u00e9ral contenant deux champs de saisie \u00e0 utiliser \u00e0 la place des deux contr\u00f4les de formulaire inclus dans le bloc.<\/p>\n<p>Enregistrez le fichier et retournez dans l&rsquo;\u00e9diteur. Ajoutez le bloc <strong>Meta Fields<\/strong> \u00e0 partir de l&rsquo;inserteur de blocs et remplissez le titre du livre et l&rsquo;auteur.<\/p>\n<figure id=\"attachment_142769\" aria-describedby=\"caption-attachment-142769\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142769 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-2-meta-fields.jpg\" alt=\"Un bloc personnalis\u00e9 comprenant deux champs m\u00e9ta personnalis\u00e9s.\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">Un bloc personnalis\u00e9 comprenant deux champs m\u00e9ta personnalis\u00e9s.<\/figcaption><\/figure>\n<p>Vous remarquerez que chaque fois que vous modifiez la valeur du champ dans le bloc, la valeur du champ de texte correspondant dans la colonne lat\u00e9rale change \u00e9galement.<\/p>\n<p>Ensuite, nous devons cr\u00e9er le code PHP qui g\u00e9n\u00e8re le HTML \u00e0 rendre sur l&rsquo;interface publique.<\/p>\n<h4>Afficher le bloc sur le frontend<\/h4>\n<p>Ouvrez \u00e0 nouveau le fichier PHP principal dans votre \u00e9diteur de code et r\u00e9\u00e9crivez la fonction de rappel qui g\u00e9n\u00e8re la sortie du bloc comme suit :<\/p>\n<pre><code class=\"language-php\">function meta_fields_metadata_block_block_init() {\n\tregister_block_type(\n\t\t__DIR__ . '\/build',\n\t\tarray(\n\t\t\t'render_callback' =&gt; 'meta_fields_metadata_block_render_callback',\n\t\t)\n\t);\n}\nadd_action( 'init', 'meta_fields_metadata_block_block_init' );\n\nfunction meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {\n\t\n\t$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );\n\t$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );\n    \n\t$output = \"\";\n\n\tif( ! empty( $book_title ) ){\n\t\t$output .= '&lt;h3&gt;' . esc_html( $book_title ) . '&lt;\/h3&gt;';\n\t}\n\tif( ! empty( $book_author ) ){\n\t\t$output .= '&lt;p&gt;' . __( 'Book author: ' ) . esc_html( $book_author ) . '&lt;\/p&gt;';\n\t}\n\tif( strlen( $output ) &gt; 0 ){\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . $output . '&lt;\/div&gt;';\n\t} else {\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . '&lt;strong&gt;' . __( 'Sorry. No fields available here!' ) . '&lt;\/strong&gt;' . '&lt;\/div&gt;';\n\t}\n}<\/code><\/pre>\n<p>Ce code est assez explicite. Tout d&rsquo;abord, nous utilisons <code>get_post_meta<\/code> pour r\u00e9cup\u00e9rer les valeurs des champs m\u00e9ta personnalis\u00e9s. Ensuite, nous utilisons ces valeurs pour construire le contenu du bloc. Enfin, la fonction de rappel renvoie le HTML du bloc.<\/p>\n<p>Le bloc est pr\u00eat \u00e0 \u00eatre utilis\u00e9. Nous avons intentionnellement gard\u00e9 le code de cet exemple aussi simple que possible, mais en utilisant les composants natifs de Gutenberg, vous pouvez construire des blocs plus avanc\u00e9s et tirer le meilleur parti des champs m\u00e9ta personnalis\u00e9s de WordPress.<\/p>\n<figure id=\"attachment_142768\" aria-describedby=\"caption-attachment-142768\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142768 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-custom-meta-fields.jpg\" alt=\"Un bloc personnalis\u00e9 comprenant plusieurs champs m\u00e9ta.\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">Un bloc personnalis\u00e9 comprenant plusieurs champs m\u00e9ta.<\/figcaption><\/figure>\n<p>Dans notre exemple, nous avons utilis\u00e9 les \u00e9l\u00e9ments <code>h3<\/code> et <code>p<\/code> pour construire le bloc pour l&rsquo;interface publique.<\/p>\n<p>Mais vous pouvez afficher les donn\u00e9es de plusieurs fa\u00e7ons. L&rsquo;image suivante montre une simple liste non ordonn\u00e9e de champs m\u00e9ta.<\/p>\n<figure id=\"attachment_142770\" aria-describedby=\"caption-attachment-142770\" style=\"width: 1794px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142770 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-on-the-front-end.jpg\" alt=\"Un exemple de bloc pour l'interface publique.\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">Un exemple de bloc pour l&rsquo;interface publique.<\/figcaption><\/figure>\n<p>Vous trouverez le code complet de cet exemple dans <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">ce gist public<\/a>.<\/p>\n<h3>Ajout d&rsquo;un champ m\u00e9ta personnalis\u00e9 dans la colonne lat\u00e9rale du document<\/h3>\n<p>La deuxi\u00e8me option consiste \u00e0 attacher des champs m\u00e9ta personnalis\u00e9s aux publications \u00e0 l&rsquo;aide d&rsquo;une extension qui g\u00e9n\u00e8re un panneau de r\u00e9glages dans la colonne lat\u00e9rale du document.<\/p>\n<p>Le processus est assez similaire \u00e0 l&rsquo;exemple pr\u00e9c\u00e9dent, sauf que dans ce cas, nous n&rsquo;aurons pas besoin d&rsquo;un bloc pour g\u00e9rer les m\u00e9tadonn\u00e9es. Nous allons cr\u00e9er un composant pour g\u00e9n\u00e9rer un panneau comprenant un ensemble de contr\u00f4les dans la colonne lat\u00e9rale du document en suivant ces \u00e9tapes :<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Cr\u00e9er un nouveau plugin de bloc avec create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Enregistrez une boite m\u00e9ta personnalis\u00e9e pour l&rsquo;\u00e9diteur classique<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Enregistrer les champs m\u00e9ta personnalis\u00e9s dans le fichier principal du plugin via la fonction register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Enregistrer un plugin dans le fichier index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Construire le composant en utilisant les composants int\u00e9gr\u00e9s de Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Cr\u00e9er un nouveau plugin de bloc avec l&rsquo;outil create-block<\/h4>\n<p>Pour cr\u00e9er une nouvelle extension de bloc, suivez les \u00e9tapes de la <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">section pr\u00e9c\u00e9dente<\/a>. Vous pouvez cr\u00e9er une nouvelle extension ou modifier les scripts que nous avons construits dans l&rsquo;exemple pr\u00e9c\u00e9dent.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Enregistrer une boite m\u00e9ta personnalis\u00e9e pour l&rsquo;\u00e9diteur classique<\/h4>\n<p>Ensuite, vous devez enregistrer une bo\u00eete m\u00e9ta personnalis\u00e9e pour assurer la r\u00e9trocompatibilit\u00e9 avec les sites web WordPress qui utilisent encore l&rsquo;\u00e9diteur classique. Le processus est le m\u00eame que celui d\u00e9crit dans la <a href=\"#add-a-meta-box-to-the-classic-editor\">section pr\u00e9c\u00e9dente<\/a>.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Enregistrer les champs m\u00e9ta personnalis\u00e9s dans le fichier principal du plugin<\/h4>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 enregistrer les champs m\u00e9ta personnalis\u00e9s dans le fichier principal de l&rsquo;extension via la fonction <code>register_post_meta()<\/code>. L\u00e0 encore, vous pouvez suivre l&rsquo;<a href=\"#register-custom-meta-fields\">exemple pr\u00e9c\u00e9dent<\/a>.<\/p>\n<h4 id=\"option-2-register-plugin\">Enregistrer un plugin dans le fichier index.js<\/h4>\n<p>Une fois que vous avez termin\u00e9 les \u00e9tapes pr\u00e9c\u00e9dentes, il est temps d&rsquo;enregistrer une extension dans le fichier <strong>index.js<\/strong> pour rendre un composant personnalis\u00e9.<\/p>\n<p>Avant d&rsquo;enregistrer l&rsquo;extension, cr\u00e9ez un dossier <strong>components<\/strong> dans le dossier <strong>src<\/strong> de l&rsquo;extension. Dans le dossier <strong>components<\/strong>, cr\u00e9ez un nouveau fichier <strong>MetaBox.js<\/strong>. Vous pouvez choisir le nom que vous jugez bon pour votre composant. Veillez simplement \u00e0 respecter les <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">meilleures pratiques de nommage<\/a> dans React.<\/p>\n<p>Avant de continuer, installez le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">module<code>@wordpress\/plugins<\/code><\/a> \u00e0 partir de votre outil de ligne de commande.<\/p>\n<p>Arr\u00eatez le processus (mac), installez le module et relancez le processus :<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>Une fois fait, ouvrez le fichier <strong>index.js<\/strong> de votre extension et ajoutez le code suivant.<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport MetaBox from '.\/components\/MetaBox';<\/code><\/pre>\n<p>Ce code est assez explicite. Cependant, nous voulons prendre un moment pour nous attarder sur les deux d\u00e9clarations <code>import<\/code> pour les lecteurs qui n&rsquo;ont pas de comp\u00e9tences avanc\u00e9es en React.<\/p>\n<p>Avec la premi\u00e8re d\u00e9claration <code>import<\/code>, nous avons mis le nom de la fonction entre crochets. Avec la deuxi\u00e8me d\u00e9claration <code>import<\/code>, le nom du composant n&rsquo;est pas entour\u00e9 de crochets.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Une instruction <code>import<\/code> sans accolades est utilis\u00e9e pour <strong>importer l&rsquo;exportation par d\u00e9faut<\/strong>. Une instruction <code>import<\/code> avec des accolades est utilis\u00e9e pour <strong>importer une exportation nomm\u00e9e<\/strong>. Pour plus de d\u00e9tails, consultez les ressources suivantes :<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\">Importation et exportation de composants<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\">Importation d&rsquo;un composant<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\">Quand dois-je utiliser des accolades pour l&rsquo;importation ES6 ?<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>Ensuite, enregistrez votre extension :<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n\trender: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> enregistre simplement une extension. La fonction accepte deux param\u00e8tres :<\/p>\n<ul>\n<li>Une cha\u00eene unique qui identifie l&rsquo;extension<\/li>\n<li>Un objet de param\u00e8tres d&rsquo;extension. Notez que la propri\u00e9t\u00e9 <code>render<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">doit \u00eatre sp\u00e9cifi\u00e9e<\/a> et doit \u00eatre une fonction valide.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Construire le composant en utilisant les composants int\u00e9gr\u00e9s de Gutenberg<\/h4>\n<p>Il est temps de construire notre composant React. Ouvrez le fichier <strong>MetaBox.js<\/strong> (ou peu importe comment vous l&rsquo;avez appel\u00e9) et ajoutez les d\u00e9clarations d&rsquo;importation suivantes :<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li>La fonction <code>compose<\/code> effectue la <strong>composition de fonctions<\/strong>, ce qui signifie que le r\u00e9sultat d&rsquo;une fonction est transmis \u00e0 une autre fonction.Avant de pouvoir utiliser <code>compose<\/code>, vous devrez peut-\u00eatre installer le module correspondant :\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>Nous verrons la fonction <code>compose<\/code> en action dans un instant.<\/li>\n<li><code>withSelect<\/code> et <code>withDispatch<\/code> sont deux <strong>composants d&rsquo;ordre sup\u00e9rieur<\/strong> qui vous permettent de r\u00e9cup\u00e9rer ou d&rsquo;envoyer des donn\u00e9es depuis ou vers WordPress. <code>withSelect<\/code> est utilis\u00e9 pour injecter des accessoires d\u00e9riv\u00e9s de l&rsquo;\u00e9tat en utilisant des <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">s\u00e9lecteurs<\/a> enregistr\u00e9s, <code>withDispatch<\/code> est utilis\u00e9 pour envoyer des accessoires en utilisant des <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">cr\u00e9ateurs d&rsquo;actions<\/a> enregistr\u00e9s.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> rend les \u00e9l\u00e9ments dans la barre lat\u00e9rale du document (voir le code source <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">sur Github<\/a>).<\/li>\n<\/ul>\n<p>Ensuite, vous allez cr\u00e9er le composant permettant d&rsquo;afficher le panneau de la bo\u00eete m\u00e9ta dans la colonne lat\u00e9rale du document. Dans votre fichier <strong>MetaBox.js<\/strong>, ajoutez le code suivant :<\/p>\n<pre><code class=\"language-jsx\">const MetaBox = ( { postType, metaFields, setMetaFields } ) =&gt; {\n\n\tif ( 'post' !== postType ) return null;\n\n\treturn(\n\t\t&lt;PluginDocumentSettingPanel \n\t\t\ttitle={ __( 'Book details' ) } \n\t\t\ticon=\"book\"\n\t\t\tinitialOpen={ false }\n\t\t&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_title }\n\t\t\t\t\tlabel={ __( \"Title\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_author }\n\t\t\t\t\tlabel={ __( \"Author\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_publisher }\n\t\t\t\t\tlabel={ __( \"Publisher\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;DateTimePicker\n\t\t\t\t\tcurrentDate={ metaFields._meta_fields_book_date }\n\t\t\t\t\tonChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n\t\t\t\t\t__nextRemoveHelpButton\n\t\t\t\t\t__nextRemoveResetButton\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t);\n}\n\nconst applyWithSelect = withSelect( ( select ) =&gt; {\n\treturn {\n\t\tmetaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n\t\tpostType: select( 'core\/editor' ).getCurrentPostType()\n\t};\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n\treturn {\n\t\tsetMetaFields ( newValue ) {\n\t\t\tdispatch('core\/editor').editPost( { meta: newValue } )\n\t\t}\n\t}\n} );\n\nexport default compose([\n\tapplyWithSelect,\n\tapplyWithDispatch\n])(MetaBox);<\/code><\/pre>\n<p>D\u00e9composons ce code.<\/p>\n<ul>\n<li>L&rsquo;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\">\u00e9l\u00e9ment<code>PluginDocumentSettingPanel<\/code> <\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">rend un nouveau panneau<\/a> dans la colonne lat\u00e9rale du document. Nous d\u00e9finissons le titre (\u00ab Book Details \u00bb et l&rsquo;ic\u00f4ne, et d\u00e9finissons <code>initialOpen<\/code> sur <code>false<\/code>, ce qui signifie que le panneau est initialement ferm\u00e9.<\/li>\n<li>Dans <code>PluginDocumentSettingPanel<\/code>, nous avons trois champs de texte et un \u00e9l\u00e9ment <code>DateTimePicker<\/code> qui permet \u00e0 l&rsquo;utilisateur de d\u00e9finir la date de publication.<\/li>\n<li><code>withSelect<\/code> donne acc\u00e8s \u00e0 la fonction <code>select<\/code> que nous utilisons pour r\u00e9cup\u00e9rer <code>metaFields<\/code> et <code>postType<\/code>. <code>withDispatch<\/code> donne acc\u00e8s \u00e0 la fonction <code>dispatch<\/code>, qui permet de mettre \u00e0 jour les valeurs des m\u00e9tadonn\u00e9es.<\/li>\n<li>Enfin, la fonction <code>compose<\/code> nous permet de composer notre composant avec les composants d&rsquo;ordre sup\u00e9rieur <code>withSelect<\/code> et <code>withDispatch<\/code>. Cela donne au composant l&rsquo;acc\u00e8s aux propri\u00e9t\u00e9s <code>metaFields<\/code> et <code>postType<\/code> et \u00e0 la fonction <code>setMetaFields<\/code>.<\/li>\n<\/ul>\n<p>Enregistrez votre fichier <strong>MetaBox.js<\/strong> et cr\u00e9ez un nouvel article dans votre site de d\u00e9veloppement WordPress et jetez un coup d&rsquo;\u0153il \u00e0 la colonne lat\u00e9rale du document. Vous devriez voir le nouveau panneau <strong>Book Details<\/strong>.<\/p>\n<figure id=\"attachment_142918\" aria-describedby=\"caption-attachment-142918\" style=\"width: 1851px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/book-details-panel.jpg\" alt=\"Un panneau de boite m\u00e9ta personnalis\u00e9 dans Gutenberg.\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">Un panneau de boite m\u00e9ta personnalis\u00e9 dans Gutenberg.<\/figcaption><\/figure>\n<p>Maintenant, ex\u00e9cutez vos tests. D\u00e9finissez les valeurs de vos champs m\u00e9ta personnalis\u00e9s et enregistrez la publication. Rechargez ensuite la page et v\u00e9rifiez si les valeurs que vous avez saisies sont bien en place.<\/p>\n<p>Ajoutez le bloc que nous avons construit dans la section pr\u00e9c\u00e9dente et v\u00e9rifiez si tout fonctionne correctement.<\/p>\n<h3>Ajout d&rsquo;une colonne lat\u00e9rale personnalis\u00e9e pour g\u00e9rer les m\u00e9tadonn\u00e9es des publications<\/h3>\n<p>Si vous avez un grand nombre de champs m\u00e9ta personnalis\u00e9s \u00e0 ajouter \u00e0 vos articles ou \u00e0 vos types de publication personnalis\u00e9s, vous pouvez \u00e9galement cr\u00e9er une colonne lat\u00e9rale de r\u00e9glages personnalis\u00e9s sp\u00e9cifiquement pour votre extension.<\/p>\n<p>Le processus est tr\u00e8s similaire \u00e0 l&rsquo;exemple pr\u00e9c\u00e9dent, donc si vous avez compris les \u00e9tapes abord\u00e9es dans la section pr\u00e9c\u00e9dente, vous n&rsquo;aurez aucune difficult\u00e9 \u00e0 cr\u00e9er une colonne lat\u00e9rale personnalis\u00e9e pour Gutenberg.<\/p>\n<p>Encore une fois :<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Cr\u00e9er un nouveau plugin de bloc avec create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">Enregistrer un champ m\u00e9ta personnalis\u00e9 pour l&rsquo;\u00e9diteur classique<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">Enregistrer les champs m\u00e9ta personnalis\u00e9s dans le fichier principal du plugin via la fonction register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Enregistrer un plugin dans le fichier index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Construire le composant en utilisant les composants int\u00e9gr\u00e9s de Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Cr\u00e9er un nouveau plugin de bloc avec l&rsquo;outil create-block<\/h4>\n<p>Encore une fois, pour cr\u00e9er une nouvelle extension de bloc, suivez les \u00e9tapes pr\u00e9sent\u00e9es ci-dessus. Vous pouvez cr\u00e9er une nouvelle extension ou modifier les scripts construits dans les exemples pr\u00e9c\u00e9dents.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Enregistrer une bo\u00eete m\u00e9ta personnalis\u00e9e pour l&rsquo;\u00e9diteur classique<\/h4>\n<p>Enregistrez maintenant une bo\u00eete m\u00e9ta personnalis\u00e9e pour assurer la r\u00e9trocompatibilit\u00e9 avec les sites web WordPress qui utilisent encore l&rsquo;\u00e9diteur classique. Le processus est le m\u00eame que celui d\u00e9crit dans la section pr\u00e9c\u00e9dente.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Enregistrer les champs m\u00e9ta personnalis\u00e9s dans le fichier principal du plugin<\/h4>\n<p>Enregistrez les champs m\u00e9ta personnalis\u00e9s dans le fichier principal du plugin via la fonction <code>register_post_meta()<\/code>.<\/p>\n<h4 id=\"#option-3-register-plugin\">Enregistrer un plugin dans le fichier index.js<\/h4>\n<p>Cr\u00e9ez maintenant un fichier <strong>CustomSidebar.js<\/strong> vide dans votre dossier <strong>components<\/strong>.<\/p>\n<p>Une fois cela fait, modifiez votre fichier <strong>index.js<\/strong> comme suit :<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport CustomSidebar from '.\/components\/CustomSidebar';\n\/\/ import MetaBox from '.\/components\/MetaBox';\n\nregisterPlugin( 'metadata-block', {\n    render: CustomSidebar\n} );<\/code><\/pre>\n<p>Avec le code ci-dessus, nous importons d&rsquo;abord le composant <code>CustomSidebar<\/code>, puis nous indiquons \u00e0 la fonction <code>registerPlugin<\/code> de rendre le nouveau composant.<\/p>\n<h4 id=\"#option-3-build-component\">Construire le composant en utilisant les composants int\u00e9gr\u00e9s de Gutenberg<\/h4>\n<p>Ensuite, ouvrez le fichier <strong>CustomSidebar.js<\/strong> et ajoutez les d\u00e9pendances suivantes :<\/p>\n<pre><code class=\"language-php\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<p>Vous devriez remarquer que nous importons deux nouveaux composants :<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> ajoute une ic\u00f4ne dans la barre d&rsquo;outils Gutenberg qui, lorsqu&rsquo;on clique dessus, affiche une colonne lat\u00e9rale comprenant le contenu envelopp\u00e9 dans l&rsquo;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">\u00e9l\u00e9ment<code>&lt;PluginSidebar \/&gt;<\/code> <\/a> (Le composant est \u00e9galement document\u00e9 <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/569241a3e1b7d0cc0567fccb92b1b57eb1b5b9c5\/packages\/edit-site\/src\/components\/sidebar-edit-mode\/plugin-sidebar\/index.js\">sur GitHub<\/a>).<\/li>\n<li><code>PluginSidebarMoreMenuItem<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar-more-menu-item\/\">rend un \u00e9l\u00e9ment de menu<\/a> sous Extensions dans le menu d\u00e9roulant <strong>More Menu<\/strong> et peut \u00eatre utilis\u00e9 pour activer le composant <code>PluginSidebar<\/code> correspondant (voir \u00e9galement <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a7e2895829c16ecd77a5ba22d84f1dee1cfb0977\/packages\/edit-post\/src\/components\/header\/plugin-sidebar-more-menu-item\/index.js\">sur GitHub<\/a>).<\/li>\n<\/ul>\n<p>Vous pouvez maintenant construire votre composant personnalis\u00e9 :<\/p>\n<pre><code class=\"language-jsx\">const CustomSidebar = ( { postType, metaFields, setMetaFields } ) =&gt; {\n        \n    if ( 'post' !== postType ) return null;\n\n    return (\n        &lt;&gt;\n            &lt;PluginSidebarMoreMenuItem \n                target=\"metadata-sidebar\" \n                icon=\"book\"\n            &gt;\n                Metadata Sidebar\n            &lt;\/PluginSidebarMoreMenuItem&gt;\n            &lt;PluginSidebar \n                name=\"metadata-sidebar\" \n                icon=\"book\" \n                title=\"My Sidebar\"\n            &gt;\n                &lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_title }\n                            label={ __( \"Title\" ) }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_author }\n                            label={ __(\"Author\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_publisher }\n                            label={ __(\"Publisher\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;DateTimePicker\n                            currentDate={ metaFields._meta_fields_book_date }\n                            onChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n                            __nextRemoveHelpButton\n                            __nextRemoveResetButton\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/PluginSidebar&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<p>L&rsquo;\u00e9tape finale est la composition du composant avec les composants d&rsquo;ordre sup\u00e9rieur <code>withSelect<\/code> et <code>withDispatch<\/code>:<\/p>\n<pre><code class=\"language-js\">const applyWithSelect = withSelect( ( select ) =&gt; {\n    return {\n        metaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        postType: select( 'core\/editor' ).getCurrentPostType()\n    };\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n    return {\n        setMetaFields ( newValue ) {\n            dispatch('core\/editor').editPost( { meta: newValue } )\n        }\n    }\n} );\n\nexport default compose([\n    applyWithSelect,\n    applyWithDispatch\n])(CustomSidebar);<\/code><\/pre>\n<p>Enregistrez vos modifications, puis v\u00e9rifiez l&rsquo;interface de l&rsquo;\u00e9diteur. Si vous ouvrez le menu d\u00e9roulant <strong>Options<\/strong>, vous verrez un nouvel \u00e9l\u00e9ment <strong>Metadata Sidebar<\/strong> sous la section <strong>Extensions<\/strong>. En cliquant sur ce nouvel \u00e9l\u00e9ment, vous activerez votre toute nouvelle colonne lat\u00e9rale personnalis\u00e9e.<\/p>\n<figure id=\"attachment_143176\" aria-describedby=\"caption-attachment-143176\" style=\"width: 1858px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143176 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-sidebar-more-menu-item.jpg\" alt=\"Le composant PluginSidebarMoreMenuItem ajoute un \u00e9l\u00e9ment de menu sous Options - Extensions.\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">Le composant PluginSidebarMoreMenuItem ajoute un \u00e9l\u00e9ment de menu sous Options &#8211; Extensions.<\/figcaption><\/figure>\n<p>La m\u00eame chose se produit lorsque vous cliquez sur l&rsquo;ic\u00f4ne de livre dans le coin sup\u00e9rieur droit.<\/p>\n<figure id=\"attachment_143175\" aria-describedby=\"caption-attachment-143175\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143175 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-sidebar-open.jpg\" alt=\"La colonne lat\u00e9rale des r\u00e9glages.\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">La colonne lat\u00e9rale des r\u00e9glages.<\/figcaption><\/figure>\n<p>Retournez maintenant sur votre site de d\u00e9veloppement, et cr\u00e9ez un nouvel article de blog. Remplissez vos champs m\u00e9ta, puis ajoutez le bloc au canevas de l&rsquo;\u00e9diteur. Il devrait inclure les m\u00eames valeurs m\u00e9ta que vous avez saisies dans votre colonne lat\u00e9rale personnalis\u00e9e.<\/p>\n<p>Enregistrez l&rsquo;article et pr\u00e9visualisez la page sur l&rsquo;interface publique. Vous devriez voir votre fiche comprenant le titre du livre, l&rsquo;auteur, l&rsquo;\u00e9diteur et la date de publication.<\/p>\n<p>Vous trouverez le code complet de cet article dans ce <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">gist public<\/a>.<\/p>\n\n<h2>Lectures suppl\u00e9mentaires<\/h2>\n<p>Dans cet article, nous avons abord\u00e9 de nombreux sujets, des s\u00e9lecteurs aux composants d&rsquo;ordre sup\u00e9rieur et bien plus encore. Nous avons \u00e9galement mis en lien les principales ressources que nous avons utilis\u00e9es comme r\u00e9f\u00e9rence tout au long de l&rsquo;article.<\/p>\n<p>Mais si vous souhaitez plonger plus profond\u00e9ment dans ces sujets, vous pouvez \u00e9galement consulter les ressources suppl\u00e9mentaires suivantes :<\/p>\n<h3>Documentation Gutenberg et ressources officielles de WordPress<\/h3>\n<ul>\n<li>Plugin Handbook \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">Custom Meta Boxes<\/a><\/li>\n<li>Manuel du plugin \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\">Managing Post Metadata<\/a><\/li>\n<li>Guides pratiques \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\">Meta Boxes<\/a><\/li>\n<li>Guides pratiques \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">Plugin Sidebar<\/a><\/li>\n<li>Manuel de l&rsquo;\u00e9diteur de blocs \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">PluginSidebar<\/a><\/li>\n<li>R\u00e9f\u00e9rence des paquets \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Packages \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\">Comparaison avec Redux<\/a><\/li>\n<li>Paquets \/ donn\u00e9es \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\">withDispatch<\/a><\/li>\n<li>Paquets \/ donn\u00e9es \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\">dispatch<\/a><\/li>\n<li>Paquets \/ donn\u00e9es \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withselect\">withSelect<\/a><\/li>\n<li>Paquets \/ donn\u00e9es \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">select<\/a><\/li>\n<\/ul>\n<h3>Plus de ressources officielles<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Composants d&rsquo;ordre sup\u00e9rieur<\/a> en React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\">Cr\u00e9ateurs d&rsquo;actions<\/a> en Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\">D\u00e9rivation de donn\u00e9es avec des s\u00e9lecteurs<\/a> en Redux<\/li>\n<\/ul>\n<h3>Ressources suppl\u00e9mentaires de la communaut\u00e9<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\">Les hooks fantastiques et o\u00f9 les utiliser<\/a> (par Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">Pr\u00e9sentation et introduction des s\u00e9ries de donn\u00e9es WordPress<\/a> (par Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\">Guide de style React\/JSX d&rsquo;Airbnb<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">Composants d&rsquo;ordre sup\u00e9rieur (HOC) de React<\/a> (par Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\">Composition de fonctions en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Demander des donn\u00e9es dans Gutenberg avec getEntityRecords<\/a> (par Ryan Welcher)<\/li>\n<\/ul>\n<h3>Lectures utiles du site Kinsta<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">Qu&rsquo;est-ce que React.js ? Un regard sur la biblioth\u00e8que JavaScript populaire<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-react\/\">Meilleures pratiques React pour am\u00e9liorer votre jeu<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-composants-react-ui\/\">Biblioth\u00e8ques de composants React UI<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/flux-travail-wordpress\/\">Comment cr\u00e9er un flux de travail WordPress efficace pour les d\u00e9veloppeurs<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/salaire-developpeur-wordpress\/\">Salaire d&rsquo;un d\u00e9veloppeur WordPress : Le salaire moyen et comment augmenter le v\u00f4tre<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">Qu&rsquo;est-ce que JavaScript ? Un aper\u00e7u du langage de script le plus populaire du web<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/erreurs-dans-javascript\/\">Un guide d\u00e9finitif de la gestion des erreurs en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">Les 40 meilleures biblioth\u00e8ques et frameworks JavaScript pour 2023<\/a><\/li>\n<\/ul>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Dans ce troisi\u00e8me article de notre s\u00e9rie sur le d\u00e9veloppement des blocs Gutenberg, nous avons abord\u00e9 de nouveaux sujets avanc\u00e9s qui devraient rendre plus complet le tableau esquiss\u00e9 dans les articles pr\u00e9c\u00e9dents sur le <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\">d\u00e9veloppement des\u00a0blocs dynamiques<\/a>\u00a0et\u00a0<a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">statiques<\/a>.<\/p>\n<p>Vous devriez maintenant \u00eatre en mesure de tirer parti du potentiel des champs personnalis\u00e9s dans Gutenberg et de cr\u00e9er des sites web WordPress plus avanc\u00e9s et plus fonctionnels.<\/p>\n<p>Mais ce n&rsquo;est pas tout. Gr\u00e2ce aux comp\u00e9tences que vous avez acquises dans nos articles sur le d\u00e9veloppement de blocs, vous devriez \u00e9galement avoir une bonne id\u00e9e de la fa\u00e7on de d\u00e9velopper des composants React en dehors de WordPress. Apr\u00e8s tout, Gutenberg est un SPA bas\u00e9 sur React.<\/p>\n<p>Et maintenant, c&rsquo;est \u00e0 vous de jouer ! Avez-vous d\u00e9j\u00e0 cr\u00e9\u00e9 des blocs Gutenberg qui utilisent des champs m\u00e9ta personnalis\u00e9s ? Partagez vos cr\u00e9ations avec nous dans les commentaires ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les champs personnalis\u00e9s permettent d&rsquo;attribuer des informations suppl\u00e9mentaires au contenu d&rsquo;un site web. Ces informations sont g\u00e9n\u00e9ralement connues sous le nom de m\u00e9tadonn\u00e9es. Les m\u00e9tadonn\u00e9es sont &#8230;<\/p>\n","protected":false},"author":36,"featured_media":65580,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1039,1028],"class_list":["post-65579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-conseils-wordpress","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg<\/title>\n<meta name=\"description\" content=\"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l&#039;\u00e9diteur de blocs comme un pro.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l&#039;\u00e9diteur de blocs comme un pro.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T12:27:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-04T10:47:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l&#039;\u00e9diteur de blocs comme un pro.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg\",\"datePublished\":\"2023-01-25T12:27:17+00:00\",\"dateModified\":\"2023-10-04T10:47:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\"},\"wordCount\":5083,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\",\"name\":\"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg\",\"datePublished\":\"2023-01-25T12:27:17+00:00\",\"dateModified\":\"2023-10-04T10:47:32+00:00\",\"description\":\"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l'\u00e9diteur de blocs comme un pro.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg","description":"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l'\u00e9diteur de blocs comme un pro.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg","og_description":"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l'\u00e9diteur de blocs comme un pro.","og_url":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-01-25T12:27:17+00:00","article_modified_time":"2023-10-04T10:47:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l'\u00e9diteur de blocs comme un pro.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg","datePublished":"2023-01-25T12:27:17+00:00","dateModified":"2023-10-04T10:47:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/"},"wordCount":5083,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/","name":"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg","datePublished":"2023-01-25T12:27:17+00:00","dateModified":"2023-10-04T10:47:32+00:00","description":"Gutenberg change la fa\u00e7on dont nous utilisons les boites m\u00e9ta et les champs personnalis\u00e9s dans WordPress. Dans cet article, vous apprendrez \u00e0 g\u00e9rer les m\u00e9tadonn\u00e9es dans l'\u00e9diteur de blocs comme un pro.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01-11.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/ajouter-boite-meta-champ-personnalise-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment ajouter des boites m\u00e9ta et des champs personnalis\u00e9s aux articles dans Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/65579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=65579"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/65579\/revisions"}],"predecessor-version":[{"id":65594,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/65579\/revisions\/65594"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/translations\/fr"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65579\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/65580"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=65579"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=65579"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=65579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}