{"id":228661,"date":"2022-10-16T11:02:00","date_gmt":"2022-10-16T08:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228661"},"modified":"2022-11-09T03:38:16","modified_gmt":"2022-11-09T00:38:16","slug":"utilisation-de-php-pour-rendre-un-bloc-dans-lediteur-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/utilisation-de-php-pour-rendre-un-bloc-dans-lediteur-wordpress-gutenberg\/","title":{"rendered":"Utilisation de PHP pour rendre un bloc dans l&rsquo;\u00e9diteur WordPress (Gutenberg)"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Lors de la cr\u00e9ation d&rsquo;un bloc dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg), vous avez probablement utilis\u00e9 JavaScript pour rendre le bloc dans le contenu de votre message. Dans ce guide, nous allons examiner l&rsquo;utilisation de PHP pour rendre le bloc, en cr\u00e9ant ce que l&rsquo;on appelle un &quot;bloc dynamique&quot;.<\/p>\n<p>Nous allons rester simple dans ce guide et 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>. Cependant, les blocs dynamiques sont super utiles pour pr\u00e9senter des informations plus complexes dans un bloc, comme une post-boucle.<\/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<\/ul>\n<h2>Cr\u00e9er PHP pour le bloc dynamique<\/h2>\n<p>Si vous ne l&rsquo;avez pas d\u00e9j\u00e0 fait, suivez les \u00e9tapes du <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>, afin d&rsquo;avoir une zone RichText modifiable.<\/p>\n<p>Ajoutez le PHP suivant dans votre plugin (dans cet exemple <code>wholesome-plugin.php<\/code>), en rempla\u00e7ant le bloc de code commen\u00e7ant par <code>register_block_type<\/code>:<\/p>\n<pre><code>register_block_type(\n  'wholesomecode\/wholesome-plugin',\n  [\n    'attributes'      =&gt; [\n      'blockText' =&gt; [\n        'default' =&gt; 'Wholesome Plugin \u2013 hello from the editor!',\n        'type'    =&gt; 'string',\n      ],\n    ],\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      $block_text = esc_html( $attributes['blockText'] );\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  ]\n);\n<\/code><\/pre>\n<h3>Les attributs<\/h3>\n<p>La premi\u00e8re chose que vous remarquerez est que nous avons red\u00e9fini les attributs dans ce fichier, et ce sont les m\u00eames que ceux que nous avons d\u00e9finis dans le <code>\/src\/index.js<\/code>fichier de notre guide pr\u00e9c\u00e9dent.<\/p>\n<p>La raison pour laquelle nous devons le faire est que notre sortie puisse acc\u00e9der aux types d&rsquo;attributs et \u00e0 leur contenu par d\u00e9faut.<\/p>\n<h3>Rappel de rendu<\/h3>\n<p>Dans le code ci-dessus, nous avons \u00e9galement ajout\u00e9 l&rsquo;argument <code>render_callback<\/code>\u00e0 la <code>register_block_type<\/code>fonction. Ceci g\u00e8re la sortie du bloc, rempla\u00e7ant la <code>save<\/code>fonction dans le <code>\/src\/index.js<\/code>fichier.<\/p>\n<p>La <code>render_callback<\/code>fonction prend deux param\u00e8tres. Ceux-ci sont:<\/p>\n<ul>\n<li><strong><code>$attributes<\/code><\/strong>&#8211; cela re\u00e7oit les attributs que nous avons d\u00e9finis \u00e0 la fois dans l&rsquo; <code>attributes<\/code>argument de cette fonction et ceux du <code>\/src\/index.js<\/code>fichier<\/li>\n<li><strong><code>$content<\/code><\/strong>&#8211; cela re\u00e7oit tout ce qui a \u00e9t\u00e9 enregistr\u00e9 via la <code>save<\/code>m\u00e9thode dans le <code>\/src\/save.js<\/code>fichier. C&rsquo;est pratique si nous rendons <code>InnerBlocks<\/code>, qui autrement ne serait pas transmis \u00e0 la m\u00e9thode de rendu PHP.<\/li>\n<\/ul>\n<p>Dans cet exemple, nous avons utilis\u00e9 une fonction anonyme pour le <code>render_callback<\/code>, mais nous aurions pu assez facilement passer une r\u00e9f\u00e9rence \u00e0 une fonction ici \u00e0 la place, et la d\u00e9finir ailleurs.<\/p>\n<p>Notez que nous n&rsquo;avons pas la possibilit\u00e9 d&rsquo;acc\u00e9der aux props dans PHP render_callback, nous avons donc d\u00fb ajouter manuellement la classe HTML \u00e0 la <code>&lt;p&gt;<\/code>balise afin que nos styles fonctionnent toujours (en th\u00e9orie, nous pourrions tirer parti du <code>$content<\/code>param\u00e8tre et faire un peu de trouver et remplacer la supercherie si nous les voulions, mais c&rsquo;est quelque chose pour un autre guide).<\/p>\n<h2>Supprimer la m\u00e9thode d&rsquo;enregistrement JavaScript<\/h2>\n<p>Comme mentionn\u00e9 pr\u00e9c\u00e9demment, le <code>$content<\/code>param\u00e8tre de la <code>render_callback<\/code>fonction stocke la sortie de la <code>save<\/code>m\u00e9thode JavaScript, mais notez que nous ne l&rsquo;utilisons pas dans notre code.<\/p>\n<p>Dans le fichier, <code>\/src\/index.js<\/code>remplacez la <code>save<\/code>m\u00e9thode par la suivante\u00a0:<\/p>\n<p>Cela indique \u00e0 la m\u00e9thode save de ne rien renvoyer.<\/p>\n<h3>Supprimer l&rsquo; <code>save<\/code>importation<\/h3>\n<p>Pendant que nous y sommes, <strong>supprimez<\/strong> \u00e9galement la ligne suivante de <code>\/src\/index.js<\/code>:<\/p>\n<pre><code>import save from '.\/save';\n<\/code><\/pre>\n<p>Vous pouvez maintenant \u00e9galement supprimer le <code>\/src\/save.js<\/code>fichier.<\/p>\n<h3>Compilation du plugin<\/h3>\n<p>Ouvrez le terminal, assurez-vous d&rsquo;\u00eatre dans le r\u00e9pertoire racine de votre plugin et lancez la commande suivante :<\/p>\n<p>Le script compilera. Si vous avez des erreurs, le terminal devrait vous en informer.<\/p>\n<h2>Utiliser le bloc dynamique<\/h2>\n<p>Vous devriez maintenant pouvoir ins\u00e9rer le bloc dans une page, modifier son contenu et l&rsquo;afficher sur le front-end.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168957-61e7f94128d01.gif\" alt=\"Utilisation de PHP pour rendre un bloc dans l&#039;\u00e9diteur WordPress (Gutenberg)\" \/>Le bloc dynamique en action<\/p>\n<p>Dans cet exemple de base, le bloc aura le m\u00eame aspect et se comportera que si vous aviez utilis\u00e9 une m\u00e9thode de rendu JavaScript.<\/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>Explorez <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">le stockage des attributs Gutenberg en tant que champs post-m\u00e9ta<\/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>Lors de la cr\u00e9ation d&rsquo;un bloc dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg), vous avez probablement utilis\u00e9 JavaScript pour rendre le bloc dans le contenu de votre message. Dans ce guide, nous allons &#8230;<\/p>\n","protected":false},"author":1,"featured_media":223841,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,936,801,841],"tags":[1167],"class_list":["post-228661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-gutenberg-3","category-php-3","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228661","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=228661"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228661\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223841"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}