{"id":234239,"date":"2023-02-19T17:26:00","date_gmt":"2023-02-19T14:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234239"},"modified":"2022-11-12T01:39:34","modified_gmt":"2022-11-11T22:39:34","slug":"creer-un-bloc-gutenberg-personnalise-partie-9-blocs-dynamiques-et-rendu-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-un-bloc-gutenberg-personnalise-partie-9-blocs-dynamiques-et-rendu-php\/","title":{"rendered":"Cr\u00e9er un bloc Gutenberg personnalis\u00e9 &#8211; Partie 9\u00a0: Blocs dynamiques et rendu PHP"},"content":{"rendered":"\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons rendu la sortie du bloc en Javascript. Cependant, avec un contenu dynamique comme des publications r\u00e9centes ou l&rsquo;affichage d&rsquo;une publication, nous devons rendre la sortie du bloc en PHP. Dans cet article, nous allons apprendre comment et pourquoi.<\/p>\n<h2>Pourquoi devons-nous g\u00e9rer les blocs dynamiques diff\u00e9remment\u00a0?<\/h2>\n<p>Certains exemples sont \u00e9vidents; un bloc qui affiche les derniers messages d&rsquo;une cat\u00e9gorie est dynamique car les messages changeront au fil du temps. Vous ne choisissez pas les publications dans le bloc ; \u00e0 la place, vous aurez probablement des param\u00e8tres pour choisir la cat\u00e9gorie, les informations \u00e0 afficher pour chaque publication, le nombre de publications, le nombre de colonnes, etc. Chaque fois que WordPress charge un article avec ce bloc, il doit interroger WordPress \u00e0 ce moment-l\u00e0 pour les articles les plus r\u00e9cents. L&rsquo;affichage du m\u00eame message le mois suivant peut donner des r\u00e9sultats diff\u00e9rents, m\u00eame si le message avec le bloc lui-m\u00eame n&rsquo;a pas \u00e9t\u00e9 mis \u00e0 jour.<\/p>\n<p>Mais la n\u00e9cessit\u00e9 de blocs dynamiques n&rsquo;est parfois pas si \u00e9vidente. Vous pouvez imaginer qu&rsquo;un bloc de publication en vedette dans lequel vous choisissez une publication sp\u00e9cifique pour l&rsquo;afficher n&rsquo;est pas n\u00e9cessairement dynamique. Mais cela pourrait \u00eatre &#8211; et devrait \u00eatre. N&rsquo;oubliez pas que le message s\u00e9lectionn\u00e9 peut mettre \u00e0 jour son titre, son extrait ou son image \u00e0 tout moment &#8211; et cela doit \u00eatre refl\u00e9t\u00e9 dans les blocs qui pr\u00e9sentent ce message.<\/p>\n<p>Afin de cr\u00e9er un bloc non dynamique pour afficher une seule publication, vous devrez enregistrer l&rsquo;ID de la publication, son URL, l&rsquo;URL de l&rsquo;image en vedette, la cha\u00eene d&rsquo;extrait ou tout ce dont vous avez besoin pour pr\u00e9visualiser la publication, dans les attributs du bloc. Et c&rsquo;est l\u00e0 que r\u00e9side le probl\u00e8me. Si vous mettez \u00e0 jour l&rsquo;image en vedette de la publication s\u00e9lectionn\u00e9e, la publication avec le bloc de publication en vedette ne mettra pas automatiquement \u00e0 jour ses attributs. Il restera enregistr\u00e9 avec l&rsquo;ancienne URL de l&rsquo;image s\u00e9lectionn\u00e9e. Ce n&rsquo;est que lorsque vous modifiez la publication avec le bloc et que vous vous assurez qu&rsquo;il r\u00e9enregistre les attributs avec les informations mises \u00e0 jour que le bloc affichera les informations mises \u00e0 jour correctes.<\/p>\n<p>Ainsi, chaque fois que nous traitons avec du contenu dynamique &#8211; publications, cat\u00e9gories ou tout ce qui peut changer avec le temps &#8211; nous traitons avec des blocs dynamiques. Et pour les blocs dynamiques, nous devons utiliser PHP &#8211; code c\u00f4t\u00e9 serveur &#8211; pour rendre notre bloc afin de nous assurer qu&rsquo;il r\u00e9cup\u00e9rera des informations mises \u00e0 jour \u00e0 chaque rendu.<\/p>\n<h2>La nature modifi\u00e9e des blocs dynamiques dans l&rsquo;\u00e9diteur<\/h2>\n<p>Lorsque vous commencez \u00e0 d\u00e9velopper des blocs dynamiques, la nature de votre bloc dans l&rsquo;\u00e9diteur change. La fonction de votre bloc <code>edit<\/code>doit souvent \u00eatre \u00e9galement dynamique. Par exemple, pour un bloc de publication en vedette, vous devrez r\u00e9cup\u00e9rer les publications parmi lesquelles choisir, ou pour un bloc de nouvelles les plus r\u00e9centes, vous devrez r\u00e9cup\u00e9rer une liste de cat\u00e9gories parmi lesquelles l&rsquo;utilisateur pourra choisir.<\/p>\n<p>Il est tout \u00e0 fait possible de demander des informations \u00e0 WordPress depuis l&rsquo;\u00e9diteur en effectuant des requ\u00eates AJAX &#8211; soit en utilisant des packages et des composants, soit en les ex\u00e9cutant manuellement avec l&rsquo; <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API WordPress REST<\/a>. Quelle que soit la m\u00e9thode choisie, votre bloc doit g\u00e9rer le flux d&rsquo;entr\u00e9e asynchrone &#8211; le d\u00e9lai d&rsquo;attente d&rsquo;une r\u00e9ponse.<\/p>\n<p>Il existe plusieurs m\u00e9thodes et mod\u00e8les pour cr\u00e9er un bloc dynamique pour Gutenberg. Le plus souvent, vous utiliserez un mod\u00e8le React appel\u00e9 <a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">composants d&rsquo;ordre sup\u00e9rieur<\/a> dans lequel WordPress fournit de nombreuses fonctions et composants.<\/p>\n<p>Nous verrons comment r\u00e9cup\u00e9rer des messages et comment r\u00e9cup\u00e9rer des cat\u00e9gories dans notre bloc dans la prochaine partie du didacticiel. Pour l&rsquo;instant, nous devons apprendre \u00e0 faire en sorte que PHP rende notre bloc.<\/p>\n<h2>Pr\u00e9parer notre bloc pour le rendu PHP<\/h2>\n<p>La partie principale que nous devons faire en Javascript est de rendre la <code>save<\/code>fonction du bloc return <code>null<\/code>. Vous pouvez conserver la sortie d&rsquo;origine, mais une fois que nous disons \u00e0 WordPress d&rsquo;utiliser PHP pour rendre le bloc, cela sera ignor\u00e9. Pour qu&rsquo;il soit clair pour nous et pour les autres que la sortie du bloc n&rsquo;est pas g\u00e9r\u00e9e en Javascript, nous allons changer la <code>save<\/code>fonction.<\/p>\n<pre><code>registerBlockType('awp\/firstblock', {\n    title: __('My first block', 'awhitepixel'), \n    category: 'common',\n    ...\n    edit: FirstBlockEdit,\n    save:() =&gt; { return null }\n});<\/code><\/pre>\n<p>N&rsquo;oubliez pas que la modification de la fonction de sauvegarde entra\u00eenera la rupture de tous les blocs existants. Ajoutez \u00e0 nouveau le bloc. Le bloc devrait fonctionner comme avant ; avec les param\u00e8tres et la mise \u00e0 jour des attributs. Il ne sortira plus rien en frontend. Le bloc de commentaires sera l\u00e0, stockant tous les attributs dans JSON, mais aucun code HTML visible n&rsquo;est rendu.<\/p>\n<p>Cependant; si l&rsquo;un de vos attributs utilise la <code>source<\/code>propri\u00e9t\u00e9, vous devez le modifier. Ceci n&rsquo;est pas pris en charge avec les blocs rendus avec PHP car ils sont analys\u00e9s directement \u00e0 partir de la sortie de la sauvegarde &#8211; sur laquelle nous revenons maintenant <code>null<\/code>. Nous utilisons source sur le deuxi\u00e8me <code>RichText<\/code>de notre bloc &#8211; pour le paragraphe. \u00c0 ce stade, l&rsquo;\u00e9diteur n&rsquo;enregistrera pas du tout ce que vous y mettez <code>RichText<\/code>.<\/p>\n<p>Donc, si vous utilisez toujours <code>source<\/code>l&rsquo; <code>myRichText<\/code>attribut, nous devons supprimer les propri\u00e9t\u00e9s <code>source<\/code>et <code>selector<\/code>pour nous assurer que les attributs seront stock\u00e9s et non analys\u00e9s \u00e0 partir de la <code>save<\/code>fonction\u00a0:<\/p>\n<pre><code>attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n    },\n    ...<\/code><\/pre>\n<p>Apr\u00e8s cela, notre bloc est pr\u00eat pour le rendu en PHP. On peut laisser les fichiers Javascript (n&rsquo;oubliez pas de le compiler) et le reste se fait en PHP.<\/p>\n<h2>Rendre des blocs en PHP<\/h2>\n<p>Afin de dire \u00e0 WordPress de rendre la sortie du bloc en PHP, nous ajoutons un nouvel argument \u00e0 la fonction <code>register_block_type()<\/code>. Nous devons ajouter la cl\u00e9 <code>render_callback<\/code>au tableau avec une valeur de la fonction qu&rsquo;elle doit ex\u00e9cuter.<\/p>\n<pre><code>add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' =&gt; 'awp-myfirstblock-js',\n        'render_callback' =&gt; 'awp_myfirstblock_render'\n    ]);\n});<\/code><\/pre>\n<h3>La fonction de rendu PHP<\/h3>\n<p>D\u00e9finissons la fonction <code>awp_myfirstblock_render<\/code>plus bas <code>functions.php<\/code>(ou l\u00e0 o\u00f9 vous avez mis votre code PHP). Notre fonction obtiendra deux param\u00e8tres\u00a0; nous les appellerons <code>$attr<\/code>et <code>$content<\/code>.<\/p>\n<pre><code>function awp_myfirstblock_render($attr, $content) {\n    \/\/ return the block's output here\n}<\/code><\/pre>\n<p>Le param\u00e8tre <code>$attr<\/code>sera un tableau associatif avec tous les attributs enregistr\u00e9s. Le deuxi\u00e8me param\u00e8tre, <code>$content<\/code>, est pour les blocs \u00e0 l&rsquo;int\u00e9rieur de notre bloc. Ceci n&rsquo;est pertinent que pour les blocs qui prennent en charge les blocs imbriqu\u00e9s &#8211; ce que font, par exemple, les colonnes ou la couverture.<\/p>\n<p>La fonction ne devrait jamais <code>echo<\/code>rien sortir. Toutes les sorties doivent \u00eatre renvoy\u00e9es, vous devez donc cr\u00e9er une cha\u00eene et la renvoyer \u00e0 la fin.<\/p>\n<p>Une chose importante \u00e0 retenir \u00e0 propos des attributs est que seuls les attributs enregistr\u00e9s appara\u00eetront dans le premier param\u00e8tre de la fonction. Si un attribut n&rsquo;a jamais \u00e9t\u00e9 r\u00e9ellement modifi\u00e9 et enregistr\u00e9 &#8211; c&rsquo;est-\u00e0-dire qu&rsquo;il s&rsquo;appuie simplement sur son <code>default<\/code>, l&rsquo;attribut ne sera pas du tout inclus pour notre fonction PHP.<\/p>\n<p>Vous devez g\u00e9rer ce probl\u00e8me en v\u00e9rifiant toujours <code>if (isset($attr['...']))<\/code>ou de la mani\u00e8re pr\u00e9f\u00e9rable\u00a0: d\u00e9finir les attributs dans notre <code>register_block_type()<\/code>appel. Nous pouvons fournir une autre cl\u00e9, <code>attributes<\/code>et d\u00e9finir sa valeur sur un tableau avec tous les attributs que nous souhaitons extraire de notre bloc. La structure doit \u00eatre identique \u00e0 celle que vous avez d\u00e9finie en Javascript, mais au lieu d&rsquo;un objet Javascript, vous en avez besoin dans un tableau PHP. Cela peut \u00eatre un peu fastidieux de red\u00e9finir les m\u00eames attributs, mais avec un \u00e9diteur de code intelligent, il devrait \u00eatre assez rapide de le copier-coller et de le modifier sur plusieurs lignes dans PHP.<\/p>\n<h3>Ajout des attributs pour notre fonction de rendu<\/h3>\n<p>Ajoutons le nouvel <code>attributes<\/code>\u00e9l\u00e9ment <code>register_block_type()<\/code>et collons exactement les m\u00eames attributs que nous avons d\u00e9finis dans notre fichier Javascript\u00a0:<\/p>\n<pre><code>add_action('init', function() {\n    register_block_type('awp\/firstblock', [\n        'editor_script' =&gt; 'awp-myfirstblock-js',\n        'render_callback' =&gt; 'awp_myfirstblock_render',\n        'attributes' =&gt; [\n            'myRichHeading' =&gt; [\n                'type' =&gt; 'string'\n            ],\n            'myRichText' =&gt; [\n                'type' =&gt; 'string'\n            ],\n            'textAlignment' =&gt; [\n                'type' =&gt; 'string',\n            ],\n            'toggle' =&gt; [\n                'type' =&gt; 'boolean',\n                'default' =&gt; true\n            ],\n            'favoriteAnimal' =&gt; [\n                'type' =&gt; 'string',\n                'default' =&gt; 'dogs'\n            ],\n            'favoriteColor' ==&gt; [\n                'type' =&gt; 'string',\n                'default' =&gt; '#DDDDDD'\n            ],\n            'activateLasers' =&gt; [\n                'type' =&gt; 'boolean',\n                'default' =&gt; false\n            ],\n        ]\n    ]);\n});\n\u00a0\nfunction awp_myfirstblock_render($attr, $content) {\n    return '&lt;div&gt;'.$attr['favoriteColor'].'&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>Gardez \u00e0 l&rsquo;esprit que si vous d\u00e9finissez a <code>default<\/code>pour tous les attributs, le <code>$attr<\/code>param\u00e8tre de votre fonction doit toujours contenir tous les attributs. Par exemple, l&rsquo;attribut <code>textAlignment<\/code>ci-dessus n&rsquo;existera que dans <code>$attr<\/code>s&rsquo;il a \u00e9t\u00e9 modifi\u00e9 &#8211; et vous devrez v\u00e9rifier <code>isset($attr['textAlignment'])<\/code>.<\/p>\n<p>Malheureusement, pour le moment, il y a deux choses que vous <strong>ne comprendrez pas avec PHP block render<\/strong>. L&rsquo;un est l&rsquo; <code>className<\/code>accessoire &#8211; vous devez donc cr\u00e9er vous-m\u00eame la classe d&#8217;emballage (si vous le souhaitez). L&rsquo;autre est la <code>support<\/code>propri\u00e9t\u00e9 d&rsquo;alignement des blocs. Pour le moment, WordPress ne prend pas en charge cette propri\u00e9t\u00e9 dans les blocs dynamiques. Nous n&rsquo;obtiendrons pas la valeur de l&rsquo;alignement de bloc choisi \u00e0 moins de le changer en attribut et de le g\u00e9rer manuellement en Javascript.<\/p>\n<p>Quant \u00e0 la sortie HTML de la fonction, cela d\u00e9pend enti\u00e8rement de vous\u00a0!<\/p>\n<h2>Demande de rendu PHP depuis l&rsquo;\u00e9diteur interne<\/h2>\n<p>Il est possible de demander le rendu PHP de notre bloc dans l&rsquo;\u00e9diteur. Ceci est utile si vous souhaitez pouvoir pr\u00e9visualiser la sortie du bloc dans l&rsquo;\u00e9diteur. Nous pouvons le faire avec un composant appel\u00e9 <code>ServerSideRender<\/code>depuis le <code>wp.editor<\/code>package.<\/p>\n<p>En tant qu&rsquo;accessoires <code>ServerSideRender<\/code>, vous devez d\u00e9finir tous les attributs que vous souhaitez transmettre. Au minimum, vous devez fournir le nom du bloc au prop <code>block<\/code>, afin que WordPress sache quelle m\u00e9thode de rendu rechercher. Ceci est disponible pour vous dans <code>props.name<\/code>la <code>edit<\/code>fonction. Vous devez \u00e9galement fournir tous les attributs dont vous avez besoin dans le prop <code>attributes<\/code>. Si vous le souhaitez, vous pouvez \u00e9galement ajouter ici des variables personnalis\u00e9es en dehors des attributs. Gardez simplement \u00e0 l&rsquo;esprit que cela ne fonctionnera que pour l&rsquo;\u00e9diteur interne, et non pour l&rsquo;interface.<\/p>\n<p>Vous ne pouvez pas utiliser <code>ServerSideRender<\/code>dans la fonction du bloc <code>save<\/code>. Votre <code>save<\/code>fonction doit toujours retourner <code>null<\/code>.<\/p>\n<p>Mettons en \u0153uvre <code>ServerSideRender<\/code>dans notre bloc pour le voir en pratique.<\/p>\n<h3>Utilisation de ServerSideRender pour le mode aper\u00e7u\/\u00e9dition de bloc<\/h3>\n<p>Si vous avez suivi l&rsquo;\u00e9tape pr\u00e9c\u00e9dente o\u00f9 nous avons cr\u00e9\u00e9 un basculeur de mode aper\u00e7u\/\u00e9dition pour notre bloc, nous pouvons maintenant l&rsquo;utiliser <code>ServerSideRender<\/code>pour afficher l&rsquo;aper\u00e7u du bloc \u00e0 partir de PHP lorsque nous passons en mode aper\u00e7u.<\/p>\n<p>Il faut d&rsquo;abord se rappeler de d\u00e9structurer <code>ServerSideRender<\/code>en haut :<\/p>\n<pre><code>const { ServerSideRender } = wp.editor;<\/code><\/pre>\n<p>Si vous vous souvenez de l&rsquo;\u00e9tape pr\u00e9c\u00e9dente, nous avons utilis\u00e9 les composants <code>Disabled<\/code>et\/ou <code>Placeholder<\/code>pour conserver l&rsquo;aper\u00e7u. Le probl\u00e8me avec l&rsquo;utilisation <code>Placeholder<\/code>est que nous obtenons un style ind\u00e9sirable appliqu\u00e9 \u00e0 notre sortie. Rempla\u00e7ons <code>Placeholder<\/code>par <code>ServerSideRender<\/code>. Vous pouvez choisir de conserver le <code>Disabled<\/code>composant, pour vous assurer qu&rsquo;aucun de ses contenus ne sera cliquable ou d\u00e9pla\u00e7able.<\/p>\n<p>Au niveau du code pour rendre le bloc lorsque l&rsquo;attribut <code>editMode<\/code>est faux, nous faisons :<\/p>\n<pre><code>...\n{!this.state.editMode &amp;&amp; \n    &lt;ServerSideRender\n        block={this.props.name}\n        attributes={{ \n            myRichHeading: attributes.myRichHeading, \n            myRichText: attributes.myRichText, \n            textAlignment: attributes.textAlignment, \n            toggle: attributes.toggle, \n            favoriteAnimal: attributes.favoriteAnimal, \n            favoriteColor: attributes.favoriteColor,\n            activateLasers: attributes.activateLasers\n        }}\n    \/&gt;\n}\n...<\/code><\/pre>\n<p>Maintenant, notre bouton personnalis\u00e9 dans la barre d&rsquo;outils affichera la sortie de PHP lorsque nous passerons en mode aper\u00e7u. La sortie doit \u00eatre identique lors de la visualisation du message en frontend. C&rsquo;est une bonne habitude pour s&rsquo;assurer que la sortie est identique dans l&rsquo;\u00e9diteur et le frontend.<\/p>\n<h2>Exemple\u00a0: bloc dynamique affichant une publication s\u00e9lectionn\u00e9e<\/h2>\n<p>La sortie de votre fonction de rendu PHP peut \u00eatre n&rsquo;importe quoi et vous avez un acc\u00e8s complet \u00e0 toutes les fonctions de WordPress. Supposons un bloc o\u00f9 un ID de publication sera enregistr\u00e9 dans un attribut. Dans la <code>render_callback<\/code>fonction PHP, vous pouvez interroger la publication \u00e0 partir de l&rsquo;ID et afficher ses informations. La proc\u00e9dure \u00e0 suivre devrait \u00eatre assez explicite, mais voici un exemple rapide.<\/p>\n<p><strong>NB<\/strong>: Dans cet exemple, nous allons simplement ajouter une entr\u00e9e de texte \u00e0 l&rsquo;\u00e9diteur pour saisir manuellement un identifiant de publication. Ce n&rsquo;est pas une solution tr\u00e8s intuitive et conviviale pour s\u00e9lectionner un message &#8211; mais c&rsquo;est ce que nous apprendrons \u00e0 l&rsquo;\u00e9tape suivante. L&rsquo;accent est mis ici sur la partie PHP du rendu du message s\u00e9lectionn\u00e9.<\/p>\n<p>Ajoutons un attribut <code>selectedPostId<\/code>de type num\u00e9ro\u00a0:<\/p>\n<pre><code>attributes: {\n    selectedPostId: {\n        type: 'number'\n    }\n}<\/code><\/pre>\n<p>Et quelque part dans la fonction de notre bloc, <code>edit<\/code>nous ajoutons un <code>TextControl<\/code>composant. Il peut \u00eatre o\u00f9 vous voulez &#8211; \u00e0 l&rsquo;int\u00e9rieur du bloc ou dans l&rsquo;inspecteur.<\/p>\n<pre><code>&lt;TextControl \n    label={__(\"Type in post ID\", 'awhitepixel')}\n    type=\"number\"\n    value={attributes.selectedPostId}\n    onChange={(newval) =&gt; setAttributes({ selectedPostId: parseInt(newval) })}\n\/&gt;<\/code><\/pre>\n<p>Notez que je prends des pr\u00e9cautions suppl\u00e9mentaires pour m&rsquo;assurer que l&rsquo;entr\u00e9e enregistre correctement l&rsquo;attribut sous forme de nombre en le convertissant en entier avec <code>parseInt()<\/code>. M\u00eame si nous d\u00e9finissons le type prop <code>type<\/code>sur <code>number<\/code>afin de rendre une entr\u00e9e num\u00e9rique, la valeur modifi\u00e9e est toujours interpr\u00e9t\u00e9e comme une cha\u00eene. WordPress n&rsquo;enregistrera pas votre attribut s&rsquo;il est au mauvais format.<\/p>\n<p>N&rsquo;oubliez pas d&rsquo;ajouter le nouvel attribut \u00e0 votre <code>ServerSideRender<\/code>composant si vous en avez un\u00a0:<\/p>\n<pre><code>&lt;ServerSideRender\n    block={this.props.name}\n    attributes={{ \n        selectedPostId: attributes.selectedPostId,\n        ...<\/code><\/pre>\n<h3>La partie PHP<\/h3>\n<p>Cela aurait d\u00fb prendre en charge la partie Javascript. Passons \u00e0 PHP. Nous devons d&rsquo;abord ajouter le nouvel attribut <code>selectedPostId<\/code>au <code>attributes<\/code>tableau dans <code>register_block_type()<\/code>:<\/p>\n<pre><code>register_block_type('awp\/firstblock', [\n    'editor_script' =&gt; 'awp-myfirstblock-js',\n    'render_callback' =&gt; 'awp_myfirstblock_render',\n    'attributes' =&gt; [\n        'selectedPostId' =&gt; [\n            'type' =&gt; 'number',\n            'default' =&gt; 0\n        ],\n        ...\n    ]\n]);<\/code><\/pre>\n<p>Dans la <code>render_callback<\/code>fonction, nous pouvons maintenant acc\u00e9der \u00e0 l&rsquo;ID de publication avec <code>$attr['selectedPostId']<\/code>. Nous pouvons avec cela effectuer un simple <code>get_post()<\/code>et sortir les donn\u00e9es du poste; son lien et son titre :<\/p>\n<pre><code>function awp_myfirstblock_render($attr, $content) {\n    $str = '';\n    if ($attr['selectedPostId'] &gt; 0) {\n        $post = get_post($attr['selectedPostId']);\n        if (!$post) {\n            return $str;\n        }\n        $str = '&lt;div class=\"awp-myfirstblock\"&gt;';\n        $str .= '&lt;a href=\"'. get_the_permalink($post). '\"&gt;';\n        $str .= '&lt;h3&gt;'. get_the_title($post). '&lt;\/h3&gt;';\n        $str .= '&lt;\/a&gt;';\n        $str .= '&lt;\/div&gt;';\n    }\n    return $str;\n}<\/code><\/pre>\n<p>Il s&rsquo;agit d&rsquo;un exemple tr\u00e8s basique destin\u00e9 \u00e0 servir de tremplin pour vous permettre d&rsquo;\u00e9crire du code plus avanc\u00e9 et personnalis\u00e9.<\/p>\n<p>Maintenant que nous savons comment g\u00e9rer le rendu des blocs dynamiques, la prochaine \u00e9tape consiste \u00e0 apprendre \u00e0 rendre \u00e9galement la partie \u00e9diteur plus intuitive. Dans l&rsquo;\u00e9tape suivante, nous nous concentrerons sur la fa\u00e7on d&rsquo;interroger les publications \u00e0 partir de l&rsquo;\u00e9diteur de blocs et de fournir \u00e0 l&rsquo;utilisateur un meilleur moyen de s\u00e9lectionner une publication.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avec un contenu de bloc dynamique comme des publications r\u00e9centes ou l&rsquo;affichage d&rsquo;une publication, nous devons rendre la sortie du bloc en PHP. Dans cet article, nous allons apprendre comment et pourquoi.<\/p>\n","protected":false},"author":1,"featured_media":152680,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,936,936,1110,801,801,841,841,862,862],"tags":[1167],"class_list":{"0":"post-234239","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-code-2","9":"category-gutenberg-3","11":"category-n-a","12":"category-php-3","14":"category-tutoriels","16":"category-wordpress-3","18":"tag-affiai-fr"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234239","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=234239"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/152680"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}