{"id":228639,"date":"2022-10-16T09:28:00","date_gmt":"2022-10-16T06:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228639"},"modified":"2022-11-09T03:26:55","modified_gmt":"2022-11-09T00:26:55","slug":"utilisation-des-champs-post-meta-pour-stocker-les-attributs-dans-lediteur-de-blocs-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/utilisation-des-champs-post-meta-pour-stocker-les-attributs-dans-lediteur-de-blocs-wordpress-gutenberg\/","title":{"rendered":"Utilisation des champs post-m\u00e9ta pour stocker les attributs dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg)"},"content":{"rendered":"\n<p>Lorsque vous enregistrez et stockez des attributs dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg), vous avez la possibilit\u00e9 de les stocker en tant que m\u00e9ta post, au lieu des attributs de bloc habituels.<\/p>\n<p>En utilisant cette m\u00e9thode, vous pourriez avoir un param\u00e8tre dans votre bloc qui peut contr\u00f4ler quelque chose \u00e0 l&rsquo;\u00e9chelle de la publication ou sur le mod\u00e8le.<\/p>\n<p><strong>Une note importante sur le rendu des m\u00e9ta-attributs de publication<\/strong><\/p>\n<p>Vous ne pouvez pas afficher les m\u00e9ta-attributs de publication \u00e0 l&rsquo;aide d&rsquo;une m\u00e9thode d&rsquo;enregistrement JavaScript. Une d\u00e9cision a \u00e9t\u00e9 prise par l&rsquo;\u00e9quipe de Gutenberg pour emp\u00eacher cela, car les blocs qui rendent les champs m\u00e9ta post peuvent facilement \u00eatre cass\u00e9s en raison du changement de m\u00e9ta post ailleurs sur le post.<\/p>\n<p>Dans ce guide, nous allons d\u00e9velopper ce que nous avons d\u00e9j\u00e0 construit dans notre <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide du plugin WordPress Gutenberg<\/a>, ainsi que dans le <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Dynamic Block<\/a>.<\/p>\n<h2>Conditions pr\u00e9alables<\/h2>\n<ul>\n<li>Se familiariser avec <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la cr\u00e9ation de plugins pour WordPress Gutenberg<\/a><\/li>\n<li>Familiarisez-vous avec <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">les blocs dynamiques et le rendu c\u00f4t\u00e9 serveur<\/a><\/li>\n<\/ul>\n<h2>Enregistrement du Post Meta en PHP<\/h2>\n<p>Avant de pouvoir utiliser un champ post meta en JavaScript, nous devons nous assurer que nous l&rsquo;avons enregistr\u00e9 dans PHP en utilisant <code>register_meta<\/code>et que l&rsquo; <code>show_in_rest<\/code>argument a \u00e9t\u00e9 d\u00e9fini sur true.<\/p>\n<p>Suite au <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Dynamic Block<\/a>, ouvrez le fichier PHP racine du plugin (dans ce cas <code>wholesome-plugin.php<\/code>) et ajoutez le code suivant au bas de ce fichier apr\u00e8s toutes les autres fonctions\u00a0:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_block_text',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; __( 'Wholesome Plugin \u2013 hello from the editor!', 'wholesome-plugin' ),\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>Ce code enregistre un champ m\u00e9ta appel\u00e9 <code>_wholesomecode_wholesome_plugin_block_text<\/code>pour le <code>post<\/code>type de publication. Cela garantit \u00e9galement que l&rsquo;API REST peut acc\u00e9der \u00e0 ce champ m\u00e9ta avec la <code>show_in_rest<\/code>valeur d\u00e9finie sur true.<\/p>\n<p>Nous transmettons \u00e9galement la fonction <code>__return_true<\/code>\u00e0 l&rsquo; <code>auth_callback<\/code>argument pour nous assurer que nous avons les autorisations n\u00e9cessaires pour acc\u00e9der \u00e0 ce param\u00e8tre. Si nous voulions une meilleure s\u00e9curit\u00e9 pour ce param\u00e8tre, nous le modifierions en une fonction personnalis\u00e9e qui v\u00e9rifie un certain r\u00f4le d&rsquo;utilisateur.<\/p>\n<h2>Enregistrement des m\u00e9ta-attributs de publication en JavaScript<\/h2>\n<p>Encore une fois, \u00e0 la suite du guide pr\u00e9c\u00e9dent, ouvrez <code>\/src\/index.js<\/code>et remplacez le <code>attributes<\/code>par ce qui suit\u00a0:<\/p>\n<pre><code>attributes: {\n  blockText: {\n    meta: '_wholesomecode_wholesome_plugin_block_text',\n    source: 'meta',\n  },\n},\n<\/code><\/pre>\n<p>Au lieu d&rsquo;indiquer le type d&rsquo;attribut et d&rsquo;attribuer une valeur par d\u00e9faut, nous d\u00e9finissons \u00e0 la place la m\u00e9ta-cl\u00e9 d&rsquo;o\u00f9 proviendra l&rsquo;attribut de donn\u00e9es et indiquons que le <code>source<\/code>de l&rsquo;attribut est <code>meta<\/code>.<\/p>\n<p>Comme indiqu\u00e9 dans l&rsquo;avertissement en haut de ce guide, vous n&rsquo;\u00eates pas en mesure d&rsquo;acc\u00e9der aux attributs de champ m\u00e9ta post via la <code>save<\/code>m\u00e9thode JavaScript, alors compilez le plugin avec <code>npm start<\/code>et voyons comment nous pouvons sortir le m\u00e9ta.<\/p>\n<h2>Rendu du Post Meta<\/h2>\n<p>Parce que nous avons enregistr\u00e9 notre attribut en tant que post meta, nous pourrions le sortir n&rsquo;importe o\u00f9 dans WordPress en utilisant <code>get_post_meta<\/code>(\u00e0 condition que nous ayons le <code>$post_id<\/code>):<\/p>\n<pre><code>get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );\n<\/code><\/pre>\n<p>En continuant le <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Dynamic Block<\/a>, voyons comment acc\u00e9der \u00e0 cet attribut c\u00f4t\u00e9 serveur en PHP.<\/p>\n<p>La m\u00e9ta n&rsquo;est pas disponible via le <code>$attributes<\/code>param\u00e8tre de <code>render_callback<\/code>, car les attributs post-meta ne transmettent pas leur valeur \u00e0 ce param\u00e8tre, mais nous pouvons acc\u00e9der \u00e0 l&rsquo; <code>$post<\/code>objet global pour obtenir l&rsquo;ID de publication.<\/p>\n<p>Gardant cela \u00e0 l&rsquo;esprit, mettons \u00e0 jour notre <code>register_block_type<\/code>pour g\u00e9n\u00e9rer la m\u00e9ta post\u00a0:<\/p>\n<pre><code>register_block_type(\n  'wholesomecode\/wholesome-plugin',\n  array(\n    'editor_script'   =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'editor_style'    =&gt; 'wholesomecode-wholesome-plugin-block-editor',\n    'render_callback' =&gt; function( $attributes, $content) {\n      global $post;\n      $block_text = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_block_text', true );\n      return \"&lt;p class='wp-block-wholesomecode-wholesome-plugin'&gt;$block_text&lt;\/p&gt;\";\n    },\n    'style'           =&gt; 'wholesomecode-wholesome-plugin-block',) );\n<\/code><\/pre>\n<p>Notez que nous n&rsquo;avons plus besoin d&rsquo;enregistrer le <code>attributes<\/code>ici, car nous acc\u00e9dons uniquement au champ m\u00e9ta post via la <code>get_post_meta<\/code>fonction.<\/p>\n<h3>Utilisation du bloc<\/h3>\n<p>Ce n&rsquo;est pas le meilleur cas d&rsquo;utilisation de ce type de m\u00e9ta, mais lorsque nous utilisons le bloc, nous pouvons voir que parce que nous stockons les attributs en tant que m\u00e9ta post, si nous mettons \u00e0 jour l&rsquo;attribut dans un bloc, il met \u00e0 jour tous les blocs, comme la m\u00e9ta de la publication est stock\u00e9e contre la publication, pas le bloc individuel\u00a0:<\/p>\n<p>Publier les m\u00e9ta-attributs en action<\/p>\n<ul>\n<li>D\u00e9couvrez comment cr\u00e9er <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">des blocs enfants imbriqu\u00e9s avec le <code>InnerBlocks<\/code>composant<\/a><\/li>\n<li>Allez plus loin dans l&rsquo;utilisation de la post-m\u00e9ta dans Gutenberg en <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-custom-meta-boxes-using-the-wordpress-block-editor-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cr\u00e9ant des m\u00e9ta-bo\u00eetes personnalis\u00e9es dans Gutenberg<\/a><\/li>\n<li>Jetez un \u0153il \u00e0 <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;utilisation des param\u00e8tres pour stocker des donn\u00e9es dans le tableau des options de Gutenberg<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque vous enregistrez et stockez des attributs dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg), vous avez la possibilit\u00e9 de les stocker en tant que m\u00e9ta post, au lieu des attributs de bloc habituels. En utilisant ce m&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223685,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,936,811,862],"tags":[1167],"class_list":["post-228639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-gutenberg-3","category-plugins-2","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228639"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228639\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223685"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}