{"id":60346,"date":"2022-08-08T07:58:33","date_gmt":"2022-08-08T06:58:33","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=60346&#038;preview=true&#038;preview_id=60346"},"modified":"2023-10-12T13:33:04","modified_gmt":"2023-10-12T12:33:04","slug":"blocs-dynamiques-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/","title":{"rendered":"Comment cr\u00e9er des blocs dynamiques pour Gutenberg"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">Gutenberg<\/a> vous laisse-t-il encore perplexe ? Ou faites-vous partie de ceux qui croient fermement au potentiel de l&rsquo;\u00e9diteur de blocs et qui veulent d\u00e9couvrir jusqu&rsquo;o\u00f9 ils peuvent pousser leur cr\u00e9ativit\u00e9 en utilisant l&rsquo;\u00e9diteur de blocs ?<\/p>\n<p>Quelle que soit la cat\u00e9gorie d&rsquo;utilisateurs \u00e0 laquelle vous appartenez, Gutenberg est l\u00e0 pour rester et cet article vous donnera un aper\u00e7u approfondi de ce qui se passe dans les coulisses de l&rsquo;\u00e9diteur de bloc WordPress. Mais ce n&rsquo;est pas tout !<\/p>\n<p>Suite \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">notre pr\u00e9c\u00e9dent tutoriel<\/a> o\u00f9 nous avons fourni une introduction g\u00e9n\u00e9rale au d\u00e9veloppement de blocs Gutenberg, cet article va au-del\u00e0 des bases, en pr\u00e9sentant des types de blocs plus avanc\u00e9s. Ces blocs sont d\u00e9sign\u00e9s sous le nom de blocs dynamiques.<\/p>\n<p>Aujourd&rsquo;hui, vous allez apprendre ce que sont les blocs dynamiques, comment ils fonctionnent et tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques \u00e0 partir de z\u00e9ro.<\/p>\n<p>Alors, que sont les blocs dynamiques de Gutenberg, et quelles sont les principales diff\u00e9rences entre les blocs <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">statiques<\/a> et dynamiques ?<\/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>Que sont les blocs dynamiques ? Un exemple<\/h2>\n<p>Alors qu&rsquo;avec les blocs statiques, le contenu est ajout\u00e9 manuellement par l&rsquo;utilisateur lors de la moficiation d&rsquo;un article ou d&rsquo;une page, avec les blocs dynamiques, le contenu est charg\u00e9 et trait\u00e9 \u00e0 la vol\u00e9e lors du chargement de la page. Avec les blocs dynamiques, le contenu du bloc est r\u00e9cup\u00e9r\u00e9 dans la base de donn\u00e9es et affich\u00e9 tel quel ou r\u00e9sultant de toute sorte de manipulation de donn\u00e9es.<\/p>\n<p>Expliquons cela \u00e0 l&rsquo;aide d&rsquo;un exemple. Supposons que vous souhaitiez cr\u00e9er un groupe de blocs imbriqu\u00e9s affichant les d\u00e9tails de l&rsquo;auteur de l&rsquo;article avec une s\u00e9lection des derniers articles du m\u00eame auteur.<\/p>\n<figure id=\"attachment_119966\" aria-describedby=\"caption-attachment-119966\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119966 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/from-the-author.jpg\" alt=\"Un bloc de groupe comprenant l'auteur de l'article et les derniers articles\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119966\" class=\"wp-caption-text\">Un bloc de groupe comprenant l&rsquo;auteur de l&rsquo;article et les derniers articles<\/figcaption><\/figure>\n<p>En tant qu&rsquo;utilisateurs de Gutenberg, vous pourriez utiliser les blocs suivants :<\/p>\n<ul>\n<li>Le bloc central <strong>Titre<\/strong><\/li>\n<li>Le bloc central <strong>Auteur de l&rsquo;article<\/strong><\/li>\n<li>Le bloc central <strong>Derniers articles<\/strong><\/li>\n<\/ul>\n<p>Vous pourriez \u00e9galement cr\u00e9er un groupe incluant ces blocs et ajouter le groupe aux blocs r\u00e9utilisables pour une utilisation future.<\/p>\n<figure id=\"attachment_119967\" aria-describedby=\"caption-attachment-119967\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119967 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-to-reusable-blocks.jpg\" alt=\"Ajout d'un groupe de blocs \u00e0 des blocs r\u00e9utilisables\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119967\" class=\"wp-caption-text\">Ajout d&rsquo;un groupe de blocs \u00e0 des blocs r\u00e9utilisables<\/figcaption><\/figure>\n<p>C&rsquo;est assez simple, n&rsquo;est-ce pas ? Vous pouvez cr\u00e9er un bloc dynamique et l&rsquo;ajouter \u00e0 vos articles et pages en un clin d&rsquo;\u0153il.<\/p>\n<p>\u00c0 partir de <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a>, l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur de blocs<\/a> propose plus de 90 blocs diff\u00e9rents, et il y a de fortes chances que vous trouviez le bloc qui vous convient d\u00e8s le d\u00e9part. Et, si vous avez besoin de plus, faites une recherche rapide dans le r\u00e9pertoire des extensions WordPress et vous trouverez de nombreuses extensions gratuites fournissant des <a href=\"https:\/\/wordpress.org\/plugins\/search\/gutenberg\/\">blocs suppl\u00e9mentaires<\/a>.<\/p>\n<p>Mais qu&rsquo;en est-il si vous \u00eates un d\u00e9veloppeur WordPress &#8211; ou si vous envisagez une carri\u00e8re de <a href=\"https:\/\/kinsta.com\/fr\/blog\/salaire-developpeur-wordpress\/\">d\u00e9veloppeur WordPress<\/a>? Peut-\u00eatre avez-vous des besoins tr\u00e8s sp\u00e9cifiques et ne trouvez pas le bloc que vous recherchez, ou vous voulez simplement acqu\u00e9rir de nouvelles comp\u00e9tences professionnelles. Dans de telles situations, vous pourriez vouloir apprendre \u00e0 cr\u00e9er vos blocs dynamiques.<\/p>\n\n<h2>Les blocs dynamiques de Gutenberg du point de vue d&rsquo;un d\u00e9veloppeur<\/h2>\n<p>Les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">blocs dynamiques<\/a> ont deux cas d&rsquo;utilisation principaux.<\/p>\n<p>Le premier cas d&rsquo;utilisation est lorsque vous devez mettre \u00e0 jour le contenu d&rsquo;un bloc alors que la page contenant le bloc n&rsquo;a pas \u00e9t\u00e9 mise \u00e0 jour. Par exemple, cela se produit lorsque le bloc comprend une liste des derniers articles ou commentaires, et en g\u00e9n\u00e9ral chaque fois que le contenu du bloc est g\u00e9n\u00e9r\u00e9 dynamiquement \u00e0 l&rsquo;aide de donn\u00e9es extraites de la base de donn\u00e9es.<\/p>\n<figure id=\"attachment_119976\" aria-describedby=\"caption-attachment-119976\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119976 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/query-loop-block.jpg\" alt=\"Ajout d'un bloc Query Loop\" width=\"1996\" height=\"1176\"><figcaption id=\"caption-attachment-119976\" class=\"wp-caption-text\">Ajout d&rsquo;un bloc Query Loop<\/figcaption><\/figure>\n<p>Le deuxi\u00e8me cas d&rsquo;utilisation est lorsqu&rsquo;une mise \u00e0 jour du code du bloc doit \u00eatre imm\u00e9diatement affich\u00e9e sur l&rsquo;interface publique. En utilisant un bloc dynamique au lieu d&rsquo;un bloc statique, les modifications sont imm\u00e9diatement appliqu\u00e9es \u00e0 toutes les occurrences du bloc.<\/p>\n<p>En revanche, si vous modifiez le HTML produit par un bloc statique, l&rsquo;utilisateur verra une <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-edit-save\/#validation\">bo\u00eete de dialogue d&rsquo;invalidation<\/a> jusqu&rsquo;\u00e0 ce que chaque instance de la version pr\u00e9c\u00e9dente du bloc soit supprim\u00e9e et remplac\u00e9e par la nouvelle version, ou que vous marquiez l&rsquo;ancienne version comme \u00e9tant d\u00e9pr\u00e9ci\u00e9e (voir \u00e9galement <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-deprecation\/\">D\u00e9pr\u00e9ciation<\/a> et <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/7604\">validation du bloc, D\u00e9pr\u00e9ciation et exp\u00e9rience de migration<\/a>).<\/p>\n<figure id=\"attachment_120364\" aria-describedby=\"caption-attachment-120364\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120364 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/this-block-contains-unexpected-or-invalid-content.jpg\" alt=\"Contenu inattendu ou non valide.\" width=\"1350\" height=\"378\"><figcaption id=\"caption-attachment-120364\" class=\"wp-caption-text\">Contenu inattendu ou non valide.<\/figcaption><\/figure>\n<p>Ceci \u00e9tant dit, il y a quelques concepts que vous devez comprendre avant de pouvoir commencer \u00e0 construire des blocs dynamiques.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>\u00c9tat de l&rsquo;application et stockage de donn\u00e9es<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#what-is-a-gutenberg-block\">Gutenberg est une application SPA React<\/a>, et tout dans Gutenberg est un composant React. Le titre de l&rsquo;article, les en-t\u00eates, les paragraphes, les images et tout bloc de contenu HTML dans l&rsquo;\u00e9diteur est un composant React, de m\u00eame que les contr\u00f4les de la colonne d&rsquo;outils lat\u00e9rale et des blocs.<\/p>\n<p>Dans notre article pr\u00e9c\u00e9dent, nous avons uniquement utilis\u00e9 les propri\u00e9t\u00e9s pour stocker des donn\u00e9es. Dans cet article, nous allons aller un peu plus loin en introduisant le concept de <strong>state<\/strong>.<\/p>\n<p>Pour faire simple, l&rsquo;objet <code>state<\/code> est <a href=\"https:\/\/www.w3schools.com\/react\/react_state.asp\">un objet JavaScript ordinaire<\/a> utilis\u00e9 pour contenir des informations sur un composant. Le <code>state<\/code> du composant peut changer au fil du temps, et chaque fois qu&rsquo;il change, le composant se pr\u00e9sente \u00e0 nouveau.<\/p>\n<p>Tout comme l&rsquo;objet <code>state<\/code>, les propri\u00e9t\u00e9s sont des objets JavaScript ordinaires utilis\u00e9s pour contenir des informations sur le composant. Mais il y a <a href=\"https:\/\/reactjs.org\/docs\/faq-state.html#what-is-the-difference-between-state-and-props\">une diff\u00e9rence essentielle<\/a> entre les propri\u00e9t\u00e9s et <code>state<\/code>:<\/p>\n<blockquote><p><code>props<\/code> sont transmises au composant (similaires aux param\u00e8tres de fonction) alors que <code>state<\/code> est g\u00e9r\u00e9 au sein du composant (similaire aux variables d\u00e9clar\u00e9es dans une fonction).<\/p><\/blockquote>\n<p>Vous pouvez consid\u00e9rer l&rsquo;\u00e9tat comme un instantan\u00e9 des donn\u00e9es prises \u00e0 un moment donn\u00e9 qu&rsquo;une application stocke pour contr\u00f4ler le comportement d&rsquo;un composant. Par exemple, si la colonne lat\u00e9rale des r\u00e9glages de l&rsquo;\u00e9diteur de blocs est ouverte, une information sera stock\u00e9e quelque part dans l&rsquo;objet <code>state<\/code>.<\/p>\n<p>Lorsque l&rsquo;information est partag\u00e9e au sein d&rsquo;un seul composant, nous l&rsquo;appelons <strong>\u00e9tat local<\/strong>. Lorsque l&rsquo;information est partag\u00e9e entre plusieurs composants au sein d&rsquo;une application, nous l&rsquo;appelons <strong>\u00e9tat d&rsquo;application<\/strong>.<\/p>\n<p>L&rsquo;Application State est \u00e9troitement li\u00e9 au concept de stockage. Selon la <a href=\"https:\/\/redux.js.org\/api\/store\">documentation de Redux<\/a>:<\/p>\n<blockquote><p>Un stockage contient l&rsquo;ensemble de l&rsquo;<a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">arbre d&rsquo;\u00e9tat<\/a> de votre application. La seule fa\u00e7on de changer l&rsquo;\u00e9tat \u00e0 l&rsquo;int\u00e9rieur de celui-ci est de distribuer une <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action\">action<\/a> <span style=\"font-size: 1.125rem\">sur celui-ci.<\/span><\/p><\/blockquote>\n<p>Ainsi, Redux stocke l&rsquo;\u00e9tat d&rsquo;une application dans un seul arbre d&rsquo;objets immuable (\u00e0 savoir un stockage). L&rsquo;arbre d&rsquo;objets ne peut \u00eatre modifi\u00e9 qu&rsquo;en cr\u00e9ant un nouvel objet \u00e0 l&rsquo;aide d&rsquo;<a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#designing-actions\">actions<\/a> et de <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#writing-reducers\">r\u00e9ducteurs<\/a>.<\/p>\n<p>Dans WordPress, les stockages sont g\u00e9r\u00e9s par le <strong>module de donn\u00e9es de WordPress<\/strong>.<\/p>\n<h3>Modularit\u00e9, paquets et stockages de donn\u00e9es dans Gutenberg<\/h3>\n<p>Le r\u00e9f\u00e9rentiel de Gutenberg est construit de A \u00e0 Z sur plusieurs <strong>modules r\u00e9utilisables et ind\u00e9pendants<\/strong> qui, combin\u00e9s ensemble, construisent l&rsquo;interface d&rsquo;\u00e9dition. Ces modules sont \u00e9galement appel\u00e9s <strong>paquets ou packages<\/strong>.<\/p>\n<p>La documentation officielle r\u00e9pertorie deux <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#types-of-packages\">types de paquets<\/a> diff\u00e9rents :<\/p>\n<ul>\n<li>Les <strong>paquets de production<\/strong> constituent le code de production qui s&rsquo;ex\u00e9cute dans le navigateur. Il existe deux types de paquets de production dans WordPress :\n<ul>\n<li>Les <strong>paquets avec des feuilles de style<\/strong> fournissent des feuilles de style pour fonctionner correctement.<\/li>\n<li>Les paquets <strong>avec stockage de donn\u00e9es<\/strong> d\u00e9finissent les stockages de donn\u00e9es pour g\u00e9rer leur \u00e9tat. Les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">paquets avec stockage de donn\u00e9es<\/a> peuvent \u00eatre utilis\u00e9s par des extensions et des th\u00e8mes tiers pour r\u00e9cup\u00e9rer et manipuler des donn\u00e9es.<\/li>\n<\/ul>\n<\/li>\n<li>Les <strong>paquets de d\u00e9veloppement<\/strong> sont utilis\u00e9s en mode d\u00e9veloppement. Ces paquets comprennent des outils de linting, de test, de construction, etc.<\/li>\n<\/ul>\n<p>Ici, nous nous int\u00e9ressons surtout aux <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">paquets avec des stockages de donn\u00e9es<\/a>, utilis\u00e9s pour r\u00e9cup\u00e9rer et manipuler des donn\u00e9es.<\/p>\n<h3>Le stockage de donn\u00e9es de WordPress<\/h3>\n<p>Le module de donn\u00e9es de WordPress est construit sur <a href=\"https:\/\/redux.js.org\/\">Redux<\/a> et partage les <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">trois principes fondamentaux de Redux<\/a>, avec toutefois <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md#comparison-with-redux\">quelques diff\u00e9rences essentielles<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\">Redux<\/a> est un gestionnaire d&rsquo;\u00e9tat pour les applications JavaScript. La fa\u00e7on dont Redux fonctionne est r\u00e9sum\u00e9e en <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">trois principes de base<\/a>:<\/p>\n<ul>\n<li><strong>Source unique de v\u00e9rit\u00e9 <\/strong>: l&rsquo;<a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">\u00e9tat global<\/a> de votre application est stock\u00e9 dans un arbre d&rsquo;objets au sein d&rsquo;un stockage unique.<\/li>\n<li><strong>L&rsquo;\u00e9tat est en lecture seule<\/strong>: La seule fa\u00e7on de modifier l&rsquo;\u00e9tat est d&rsquo;\u00e9mettre une action, un objet d\u00e9crivant ce qui s&rsquo;est pass\u00e9.<\/li>\n<li><strong>Les modifications sont effectu\u00e9es avec des fonctions pures<\/strong>: Pour sp\u00e9cifier comment l&rsquo;arbre d&rsquo;\u00e9tat est transform\u00e9 par les actions, vous \u00e9crivez des r\u00e9ducteurs purs.<\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>La documentation officielle fournit la <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md\">d\u00e9finition suivante<\/a>:<\/p>\n<blockquote><p>Le module de donn\u00e9es de WordPress sert de hub pour g\u00e9rer l&rsquo;\u00e9tat de l&rsquo;application \u00e0 la fois pour les extensions et pour WordPress lui-m\u00eame, en fournissant des outils pour g\u00e9rer les donn\u00e9es au sein et entre les modules distincts. Il est con\u00e7u comme un mod\u00e8le modulaire d&rsquo;organisation et de partage des donn\u00e9es : suffisamment simple pour satisfaire les besoins d&rsquo;une petite extension, tout en \u00e9tant \u00e9volutif pour r\u00e9pondre aux exigences d&rsquo;une application complexe \u00e0 page unique.<\/p><\/blockquote>\n<p>Par d\u00e9faut, Gutenberg enregistre <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/\">plusieurs stockages de donn\u00e9es<\/a> dans l&rsquo;\u00e9tat de l&rsquo;application. Chacun de ces stockages a un nom et un but sp\u00e9cifiques :<\/p>\n<ul>\n<li><code>core<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/core-data\">Donn\u00e9es du c\u0153ur de WordPress<\/a><\/li>\n<li><code>core\/annotations<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/annotations\">Annotations<\/a><\/li>\n<li><code>core\/blocks<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/blocks\">Donn\u00e9es sur les types de blocs<\/a><\/li>\n<li><code>core\/block-editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-editor\">Donn\u00e9es de l&rsquo;\u00e9diteur de blocs<\/a><\/li>\n<li><code>core\/editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/editor\">Donn\u00e9es de l&rsquo;\u00e9diteur de publication<\/a><\/li>\n<li><code>core\/edit-post<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/edit-post\">Les donn\u00e9es de l&rsquo;interface utilisateur de l&rsquo;\u00e9diteur<\/a><\/li>\n<li><code>core\/notices<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/notices\">Donn\u00e9es de notifications<\/a><\/li>\n<li><code>core\/nux<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/nux\">Donn\u00e9es NUX (New User Experience)<\/a><\/li>\n<li><code>core\/viewport<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/viewport\">Les donn\u00e9es de la fen\u00eatre d&rsquo;affichage<\/a><\/li>\n<\/ul>\n<p>Gr\u00e2ce \u00e0 ces stockages, vous pourrez acc\u00e9der \u00e0 tout un tas de donn\u00e9es :<\/p>\n<ol>\n<li><strong>Donn\u00e9es relatives \u00e0 l&rsquo;article actuel<\/strong>, telles que le titre de l&rsquo;article, l&rsquo;extrait, les cat\u00e9gories et les \u00e9tiquettes, les blocs, etc.<\/li>\n<li><strong>Donn\u00e9es relatives \u00e0 l&rsquo;interface utilisateur<\/strong>, par exemple si une bascule est activ\u00e9e ou d\u00e9sactiv\u00e9e.<\/li>\n<li><strong>Donn\u00e9es relatives \u00e0 l&rsquo;ensemble de l&rsquo;installation WordPress<\/strong>, telles que les taxonomies enregistr\u00e9es, les types d&rsquo;articles, le titre du blog, les auteurs, etc.<\/li>\n<\/ol>\n<p>Ces stockages vivent dans l&rsquo;objet global <code>wp<\/code>. Pour acc\u00e9der \u00e0 l&rsquo;\u00e9tat d&rsquo;un stockage, vous utiliserez la fonction <code>select<\/code>.<\/p>\n<p>Pour voir comment cela fonctionne, cr\u00e9ez un nouvel article ou une nouvelle page et lancez <a href=\"https:\/\/kinsta.com\/fr\/blog\/inspecter-elements\/\">l&rsquo;inspecteur de votre <\/a><a href=\"https:\/\/kinsta.com\/fr\/blog\/inspecter-elements\/\">navigateur<\/a>. Trouvez la console et saisissez la ligne de code suivante :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\")<\/code><\/pre>\n<p>Le r\u00e9sultat sera un objet comprenant une liste de fonctions que vous pouvez utiliser pour obtenir des donn\u00e9es du stockage de donn\u00e9es <code>core<\/code>. Ces fonctions sont appel\u00e9es <strong>s\u00e9lecteurs<\/strong> et agissent comme des interfaces pour acc\u00e9der aux valeurs d&rsquo;\u00e9tat.<\/p>\n<figure id=\"attachment_120245\" aria-describedby=\"caption-attachment-120245\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120245 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core.jpg\" alt=\"L'objet stockage de donn\u00e9es du c\u0153ur de WordPress\" width=\"1306\" height=\"1332\"><figcaption id=\"caption-attachment-120245\" class=\"wp-caption-text\">L&rsquo;objet stockage de donn\u00e9es du c\u0153ur de WordPress<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>L&rsquo;objet <code>selectors<\/code> comprend un ensemble de fonctions permettant d&rsquo;acc\u00e9der aux valeurs d&rsquo;\u00e9tat et de les d\u00e9river. Un s\u00e9lecteur est une fonction qui accepte l&rsquo;\u00e9tat et des arguments facultatifs et renvoie une certaine valeur de l&rsquo;\u00e9tat. L <em>&lsquo;appel de s\u00e9lecteurs est le principal m\u00e9canisme de r\u00e9cup\u00e9ration des donn\u00e9es de votre \u00e9tat<\/em>, et sert d&rsquo;abstraction utile par rapport aux donn\u00e9es brutes qui sont g\u00e9n\u00e9ralement plus susceptibles d&rsquo;\u00eatre modifi\u00e9es et moins facilement utilisables en tant qu&rsquo;<a href=\"https:\/\/redux.js.org\/usage\/structuring-reducers\/normalizing-state-shape#designing-a-normalized-state\">objet normalis\u00e9<\/a>. (Source : <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/9d4b83cbbafcd6c6cbd20c86b572f458fc65ff16\/packages\/data\/README.md#selectors\">Github<\/a>)<\/p>\n<\/aside>\n\n<p>Le stockage de donn\u00e9es de WordPress comprend des informations sur WordPress en g\u00e9n\u00e9ral et les s\u00e9lecteurs sont le moyen d&rsquo;obtenir ces informations. Par exemple, <code>getCurrentUser()<\/code> renvoie les d\u00e9tails de l&rsquo;utilisateur actuel :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getCurrentUser()<\/code><\/pre>\n<figure id=\"attachment_120246\" aria-describedby=\"caption-attachment-120246\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120246 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core-getcurrentuser.jpg\" alt=\"Inspecter la r\u00e9ponse de getCurrentUser\" width=\"1306\" height=\"1058\"><figcaption id=\"caption-attachment-120246\" class=\"wp-caption-text\">Inspecter la r\u00e9ponse de getCurrentUser<\/figcaption><\/figure>\n<p>Un autre s\u00e9lecteur que vous pouvez utiliser pour r\u00e9cup\u00e9rer les d\u00e9tails de l&rsquo;utilisateur \u00e0 partir du stockage de donn\u00e9es est <code>getUsers()<\/code><a id=\"getusers\"><\/a> :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()<\/code><\/pre>\n<p>L&rsquo;image suivante montre l&rsquo;objet de la r\u00e9ponse :<\/p>\n<figure id=\"attachment_120247\" aria-describedby=\"caption-attachment-120247\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120247 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getusers.jpg\" alt=\"Inspection de la r\u00e9ponse getUsers\" width=\"1306\" height=\"990\"><figcaption id=\"caption-attachment-120247\" class=\"wp-caption-text\">Inspection de la r\u00e9ponse getUsers<\/figcaption><\/figure>\n<p>Pour obtenir les d\u00e9tails d&rsquo;un seul utilisateur, vous pouvez simplement saisir la ligne suivante :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()[0]<\/code><\/pre>\n<p>En utilisant le m\u00eame s\u00e9lecteur, vous pouvez \u00e9galement r\u00e9cup\u00e9rer les utilisateurs du site avec le r\u00f4le <code>author<\/code> attribu\u00e9 :<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core' ).getUsers({ who: 'authors' })<\/code><\/pre>\n<p>Vous pouvez \u00e9galement r\u00e9cup\u00e9rer les taxonomies enregistr\u00e9es :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getTaxonomies()<\/code><\/pre>\n<figure id=\"attachment_120248\" aria-describedby=\"caption-attachment-120248\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120248 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-gettaxonomies.jpg\" alt=\"Inspection de la r\u00e9ponse getTaxonomies.\" width=\"1306\" height=\"790\"><figcaption id=\"caption-attachment-120248\" class=\"wp-caption-text\">Inspection de la r\u00e9ponse getTaxonomies.<\/figcaption><\/figure>\n<p>Une liste des types de publications enregistr\u00e9s :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPostTypes()<\/code><\/pre>\n<p>Ou une liste des extensions :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPlugins()<\/code><\/pre>\n<p>Essayons maintenant d&rsquo;acc\u00e9der \u00e0 un stockage de donn\u00e9es diff\u00e9rent. Pour cela, vous utiliserez toujours la fonction <code>select<\/code>, mais en fournissant un espace de noms diff\u00e9rent. Essayons ce qui suit :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\")<\/code><\/pre>\n<p>Maintenant, vous obtiendrez l&rsquo;objet de r\u00e9ponse suivant.<\/p>\n<figure id=\"attachment_120249\" aria-describedby=\"caption-attachment-120249\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120249 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post.jpg\" alt=\"Acc\u00e9der aux donn\u00e9es de l'interface utilisateur de l'\u00e9diteur\" width=\"1306\" height=\"1310\"><figcaption id=\"caption-attachment-120249\" class=\"wp-caption-text\">Acc\u00e9der aux donn\u00e9es de l&rsquo;interface utilisateur de l&rsquo;\u00e9diteur<\/figcaption><\/figure>\n<p>Si vous voulez savoir si la colonne lat\u00e9rale des r\u00e9glages est ouverte ou non, vous utiliserez le s\u00e9lecteur <code>isEditorSidebarOpened<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\").isEditorSidebarOpened()<\/code><\/pre>\n<p>Cette fonction renvoie <code>true<\/code> si la colonne lat\u00e9rale est ouverte :<\/p>\n<figure id=\"attachment_120957\" aria-describedby=\"caption-attachment-120957\" style=\"width: 1718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120957 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post-iseditorsidebaropened-2.jpg\" alt=\"La colonne lat\u00e9rale est ouverte.\" width=\"1718\" height=\"1052\"><figcaption id=\"caption-attachment-120957\" class=\"wp-caption-text\">La colonne lat\u00e9rale est ouverte.<\/figcaption><\/figure>\n<h2>Comment acc\u00e9der aux donn\u00e9es de l&rsquo;article<\/h2>\n<p>Vous devriez maintenant avoir une compr\u00e9hension de base de la fa\u00e7on d&rsquo;acc\u00e9der aux donn\u00e9es. Nous allons maintenant nous int\u00e9resser de plus pr\u00e8s \u00e0 un s\u00e9lecteur sp\u00e9cifique, la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">fonction<code>getEntityRecords<\/code> <\/a>, qui est le s\u00e9lecteur qui donne acc\u00e8s aux donn\u00e9es de l&rsquo;article.<\/p>\n<p>Dans l&rsquo;\u00e9diteur de bloc, faites un clic droit et s\u00e9lectionnez <strong>Inspecter<\/strong>. Dans l&rsquo;onglet Console, copiez et collez la ligne suivante :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post')<\/code><\/pre>\n<p>Ceci envoie une requ\u00eate \u00e0 l&rsquo;API Rest et renvoie un tableau d&rsquo;enregistrements correspondant aux derniers articles de blog publi\u00e9s.<\/p>\n<figure id=\"attachment_120303\" aria-describedby=\"caption-attachment-120303\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120303 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getentityrecords.jpg\" alt=\"getEntityRecords renvoie une liste d'articles.\" width=\"1698\" height=\"330\"><figcaption id=\"caption-attachment-120303\" class=\"wp-caption-text\">getEntityRecords renvoie une liste d&rsquo;articles.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Notez que la premi\u00e8re fois que vous envoyez la requ\u00eate \u00e0 l&rsquo;API Rest, la r\u00e9ponse sera <code>null<\/code> jusqu&rsquo;\u00e0 ce que la requ\u00eate soit termin\u00e9e. Donc, si vous obtenez <code>null<\/code>, ne vous inqui\u00e9tez pas, et r\u00e9essayez.<\/p>\n<\/aside>\n\n<p><code>getEntityRecords<\/code> accepte <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">trois param\u00e8tres<\/a>:<\/p>\n<ul>\n<li><code>kind<\/code> <em>cha\u00eene de caract\u00e8res <\/em>: Type d&rsquo;entit\u00e9 (par exemple, <code>postType<\/code>).<\/li>\n<li><code>name<\/code> <em>cha\u00eene de caract\u00e8res <\/em>: Nom de l&rsquo;entit\u00e9 (c.-\u00e0-d. <code>post<\/code>).<\/li>\n<li><code>query<\/code> <em>?objet <\/em>: Requ\u00eate de termes facultatifs (par exemple, <code>{author: 0}<\/code>).<\/li>\n<\/ul>\n<p>Vous pouvez construire des demandes plus sp\u00e9cifiques en utilisant un <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/posts\/#arguments\">objet d&rsquo;arguments<\/a>.<\/p>\n<p>Par exemple, vous pouvez d\u00e9cider que la r\u00e9ponse ne doit contenir que les articles d&rsquo;une cat\u00e9gorie sp\u00e9cifique :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {categories: 3})<\/code><\/pre>\n<p>Vous pouvez \u00e9galement demander uniquement les articles d&rsquo;un auteur donn\u00e9 :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2})<\/code><\/pre>\n<p>Si vous cliquez sur l&rsquo;un des enregistrements renvoy\u00e9s par <code>getEntityRecords<\/code>, vous obtenez une liste de propri\u00e9t\u00e9s pour l&rsquo;enregistrement s\u00e9lectionn\u00e9 :<\/p>\n<figure id=\"attachment_120305\" aria-describedby=\"caption-attachment-120305\" style=\"width: 1846px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120305 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords.jpg\" alt=\"Un exemple de requ\u00eate API avec getEntityRecords.\" width=\"1846\" height=\"746\"><figcaption id=\"caption-attachment-120305\" class=\"wp-caption-text\">Un exemple de requ\u00eate API avec getEntityRecords.<\/figcaption><\/figure>\n<p>Si vous voulez que la r\u00e9ponse inclue l&rsquo;image mise en avant, vous devrez ajouter un argument suppl\u00e9mentaire \u00e0 votre requ\u00eate pr\u00e9c\u00e9dente :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2, _embed: true})<\/code><\/pre>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"D\u00e9tails de l'image mise en avant dans la r\u00e9ponse getEntityRecords.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">D\u00e9tails de l&rsquo;image mise en avant dans la r\u00e9ponse getEntityRecords.<\/figcaption><\/figure>\n<p>Maintenant, vous devriez avoir une meilleure compr\u00e9hension de la fa\u00e7on d&rsquo;acc\u00e9der au stockage de donn\u00e9es de WordPress et de r\u00e9cup\u00e9rer les d\u00e9tails des articles. Pour voir de plus pr\u00e8s le s\u00e9lecteur <code>getEntityRecords<\/code>, voir aussi <a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Demander des donn\u00e9es dans Gutenberg avec getEntityRecords<\/a>.<\/p>\n<h2>Comment cr\u00e9er un bloc dynamique : Un exemple de projet<\/h2>\n<p>Apr\u00e8s notre long pr\u00e9ambule th\u00e9orique, nous pouvons passer \u00e0 la pratique et cr\u00e9er un bloc dynamique \u00e0 l&rsquo;aide des outils que nous avons pr\u00e9sent\u00e9s dans notre pr\u00e9c\u00e9dent tutoriel sur le d\u00e9veloppement de blocs.<\/p>\n<p>Dans cet article, nous avons abord\u00e9 les points suivants<\/p>\n<ol>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#setting-up-your-wordpress-development-environment\">Comment configurer un environnement de d\u00e9veloppement WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">Qu&rsquo;est-ce qu&rsquo;un \u00e9chafaudage de bloc<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#the-project-building-your-first-gutenberg-block\">Comment construire un bloc statique Gutenberg<\/a><\/li>\n<\/ol>\n<p>C&rsquo;est pourquoi nous ne couvrirons pas ces sujets en profondeur dans le pr\u00e9sent article, mais n&rsquo;h\u00e9sitez pas \u00e0 vous r\u00e9f\u00e9rer \u00e0 notre guide pr\u00e9c\u00e9dent pour toute information compl\u00e9mentaire, ou simplement pour vous rafra\u00eechir la m\u00e9moire.<\/p>\n<h3>Configuration d&rsquo;un environnement de d\u00e9veloppement JavaScript<\/h3>\n<p>Commen\u00e7ons par configurer un environnement de d\u00e9veloppement JavaScript.<\/p>\n<h4>Installez ou mettez \u00e0 jour Node.js<\/h4>\n<p>Tout d&rsquo;abord, <a href=\"https:\/\/nodejs.org\/en\/download\/\">installez ou mettez \u00e0 jour<\/a> Node.js. Une fois que vous avez termin\u00e9, lancez votre outil de ligne de commande et ex\u00e9cutez la commande suivante :<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Vous devriez voir votre version de node.<\/p>\n<h4>Configurez votre environnement de d\u00e9veloppement<\/h4>\n<p>Ensuite, vous aurez besoin d&rsquo;un environnement de d\u00e9veloppement pour WordPress. Pour nos exemples, nous avons utilis\u00e9 <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a>, notre outil de d\u00e9veloppement WordPress gratuit qui vous permet de lancer un site WordPress local en un rien de temps.<\/p>\n<figure id=\"attachment_120268\" aria-describedby=\"caption-attachment-120268\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120268 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta-create-custom-site.jpg\" alt=\"Cr\u00e9ation d'un site personnalis\u00e9 dans DevKinsta\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120268\" class=\"wp-caption-text\">Cr\u00e9ation d&rsquo;un site personnalis\u00e9 dans DevKinsta<\/figcaption><\/figure>\n<p>Mais vous \u00eates toujours libre de choisir l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/ebooks\/wordpress\/wordpress-developpement-local\/\">environnement de d\u00e9veloppement local WordPress<\/a> de votre choix, comme MAMP ou XAMPP, ou m\u00eame la <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">solution officielle wp-env<\/a>.<\/p>\n<p>Si vous utilisez DevKinsta, cliquez sur <strong>Nouveau site WordPress<\/strong> ou sur <strong>Site personnalis\u00e9<\/strong>, remplissez les champs du formulaire et appuyez sur <strong>Cr\u00e9er un site<\/strong>.<\/p>\n<p>Le processus d&rsquo;installation prend une minute ou deux. Lorsqu&rsquo;il est termin\u00e9, lancez votre site de d\u00e9veloppement WordPress local.<\/p>\n<figure id=\"attachment_120269\" aria-describedby=\"caption-attachment-120269\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120269 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta.jpg\" alt=\"\u00c9cran Infos du site dans DevKinsta.\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120269\" class=\"wp-caption-text\">\u00c9cran Infos du site dans DevKinsta.<\/figcaption><\/figure>\n<h4>Configurez votre plugin de bloc<\/h4>\n<p>Ce dont vous avez besoin maintenant, c&rsquo;est d&rsquo;un extension de bloc de d\u00e9marrage. Pour \u00e9viter tous les tracas d&rsquo;une configuration manuelle, l&rsquo;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">\u00e9quipe de d\u00e9veloppeurs du c\u0153ur<\/a> de WordPress\u00a0a publi\u00e9 l&rsquo;<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\">outil @wordpress\/create-block<\/a>, qui est <em>l&rsquo;outil officiel de configuration z\u00e9ro pour la cr\u00e9ation de blocs Gutenberg<\/em>.<\/p>\n<p>Nous avons couvert <code>@wordpress\/create-block<\/code> en profondeur dans notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#dev-environment\">article pr\u00e9c\u00e9dent<\/a>, donc ici nous pouvons commencer la configuration tout de suite.<\/p>\n<p>Dans votre outil de ligne de commande, allez dans le dossier <strong>\/wp-content\/plugins<\/strong>:<\/p>\n<figure id=\"attachment_105130\" aria-describedby=\"caption-attachment-105130\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105130 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/new-terminal-at-folder.jpg\" alt=\"Nouveau terminal au dossier dans Mac OS.\" width=\"1224\" height=\"958\"><figcaption id=\"caption-attachment-105130\" class=\"wp-caption-text\">Nouveau terminal au dossier dans Mac OS.<\/figcaption><\/figure>\n<p>Une fois l\u00e0, ex\u00e9cutez la commande suivante :<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Vous \u00eates maintenant pr\u00eat \u00e0 installer le paquet <code>@wordpress\/create-block<\/code>:<\/p>\n<figure id=\"attachment_120270\" aria-describedby=\"caption-attachment-120270\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120270 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-wordpress-create-block.jpg\" alt=\"Installation du paquet @wordpress\/create-block.\" width=\"1432\" height=\"296\"><figcaption id=\"caption-attachment-120270\" class=\"wp-caption-text\">Installation du paquet @wordpress\/create-block.<\/figcaption><\/figure>\n<p>Pour confirmer, saisissez <code>y<\/code> et appuyez sur Entr\u00e9e.<\/p>\n<p>Cela g\u00e9n\u00e8re les fichiers PHP, SCSS et JS de l&rsquo;extension en <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#set-up-the-plugin\">mode interactif<\/a>.<\/p>\n<p>Vous trouverez ci-dessous les d\u00e9tails que nous utiliserons dans notre exemple. N&rsquo;h\u00e9sitez pas \u00e0 modifier ces d\u00e9tails en fonction de vos pr\u00e9f\u00e9rences :<br \/>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><\/p>\n<ul>\n<li>Slug de bloc utilis\u00e9 pour l&rsquo;identification (\u00e9galement le nom de l&rsquo;extension et du dossier de sortie) : <strong>author-plugin<\/strong><\/li>\n<li>L&rsquo;espace de nom interne pour le nom du bloc (quelque chose d&rsquo;unique pour vos produits) : <strong>author-box<\/strong><\/li>\n<li>Le titre d&rsquo;affichage pour votre bloc : <strong>Author box<\/strong><\/li>\n<li>La courte description de votre bloc (facultatif) : <strong>Un exemple de bloc pour les lecteurs de Kinsta<\/strong><\/li>\n<li>Le dashicon pour faciliter l&rsquo;identification de votre bloc (facultatif) : <strong>businessperson<\/strong><\/li>\n<li>Le nom de la cat\u00e9gorie pour aider les utilisateurs \u00e0 naviguer et \u00e0 d\u00e9couvrir votre bloc : <strong>widgets<\/strong><\/li>\n<li>Le nom de l&rsquo;auteur du bloc (facultatif). Les auteurs multiples peuvent \u00eatre list\u00e9s en utilisant des virgules : <strong>your name<\/strong><\/li>\n<li>Le nom court de la licence du plugin (facultatif) : <strong>&#8211;<\/strong><\/li>\n<li>Un lien vers le texte int\u00e9gral de la licence (facultatif) : <strong>&#8211;<\/strong><\/li>\n<li>Le num\u00e9ro de la version actuelle de l&rsquo;extension : <strong>0.1.0<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n<br \/>\nUne fois que vous avez appuy\u00e9 sur Entr\u00e9e, l&rsquo;extension est t\u00e9l\u00e9charg\u00e9e et configur\u00e9e.<\/p>\n<figure id=\"attachment_120271\" aria-describedby=\"caption-attachment-120271\" style=\"width: 1424px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120271 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-the-block-plugin.jpg\" alt=\"Installation de l'extension de bloc.\" width=\"1424\" height=\"878\"><figcaption id=\"caption-attachment-120271\" class=\"wp-caption-text\">Installation de l&rsquo;extension de bloc.<\/figcaption><\/figure>\n<p>Le processus peut prendre quelques minutes. Lorsqu&rsquo;il est termin\u00e9, vous devriez voir l&rsquo;\u00e9cran suivant :<\/p>\n<figure id=\"attachment_120272\" aria-describedby=\"caption-attachment-120272\" style=\"width: 1428px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120272 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-bootstrapped.jpg\" alt=\"Block d\u00e9marr\u00e9 dans le dossier de l'extension.\" width=\"1428\" height=\"1026\"><figcaption id=\"caption-attachment-120272\" class=\"wp-caption-text\">Block d\u00e9marr\u00e9 dans le dossier de l&rsquo;extension.<\/figcaption><\/figure>\n<p>Vous verrez une liste des commandes que vous pouvez ex\u00e9cuter \u00e0 partir du r\u00e9pertoire de l&rsquo;extension :<\/p>\n<ul>\n<li><code>$ npm start<\/code> &#8211; Lancez la construction pour le d\u00e9veloppement.<\/li>\n<li><code>$ npm run build<\/code> &#8211; Construire le code pour la production.<\/li>\n<li><code>$ npm run format<\/code> &#8211; Formater les fichiers.<\/li>\n<li><code>$ npm run lint:css<\/code> &#8211; Lint les fichiers CSS.<\/li>\n<li><code>$ npm run lint:js<\/code> &#8211; Lint les fichiers JavaScript.<\/li>\n<li><code>$ npm run packages-update<\/code> &#8211; Mise \u00e0 jour des paquets WordPress \u00e0 la derni\u00e8re version.<\/li>\n<\/ul>\n<p>Ok, maintenant d\u00e9placez-vous dans le r\u00e9pertoire des extensions avec la commande suivante :<\/p>\n<pre><code class=\"language-bash\">cd author-plugin<\/code><\/pre>\n<p>Et d\u00e9marrez votre build de d\u00e9veloppement :<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Ensuite, allez vers l&rsquo;\u00e9cran des extensions dans votre tableau de bord WordPress et activez l&rsquo;extension <strong>Author box<\/strong>:<\/p>\n<figure id=\"attachment_120273\" aria-describedby=\"caption-attachment-120273\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120273 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/plugins-screen.jpg\" alt=\"L'extension de bloc est list\u00e9e dans l'\u00e9cran Extensions.\" width=\"2104\" height=\"1268\"><figcaption id=\"caption-attachment-120273\" class=\"wp-caption-text\">L&rsquo;extension de bloc est list\u00e9e dans l&rsquo;\u00e9cran Extensions.<\/figcaption><\/figure>\n<p>Vous pouvez maintenant v\u00e9rifier si l&rsquo;extension fonctionne correctement. Cr\u00e9ez un nouvel article et commencez \u00e0 saisir <code>\/<\/code> pour lancer l&rsquo;outil d&rsquo;insertion rapide :<\/p>\n<figure id=\"attachment_120958\" aria-describedby=\"caption-attachment-120958\" style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120958 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/quick-inserter-2.jpg\" alt=\"L'\u00e9l\u00e9ment bloc dans l'outil d'insertion rapide.\" width=\"1402\" height=\"804\"><figcaption id=\"caption-attachment-120958\" class=\"wp-caption-text\">L&rsquo;\u00e9l\u00e9ment bloc dans l&rsquo;outil d&rsquo;insertion rapide.<\/figcaption><\/figure>\n<p>Vous trouverez \u00e9galement le bloc <strong>Bo\u00eete d&rsquo;auteur<\/strong> dans l&rsquo;outil d&rsquo;insertion de blocs, sous la cat\u00e9gorie <strong>Widgets<\/strong>. S\u00e9lectionnez le bloc pour l&rsquo;ajouter au canevas de l&rsquo;\u00e9diteur :<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"L'outil d'insertion de blocs WordPress\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">L&rsquo;outil d&rsquo;insertion de blocs WordPress<\/figcaption><\/figure>\n<p>Vous avez termin\u00e9. Maintenant, enregistrez l&rsquo;article et pr\u00e9visualisez la page pour v\u00e9rifier si le bloc s&rsquo;affiche correctement.<\/p>\n<h4>L&rsquo;\u00e9chafaudage de blocs<\/h4>\n<p>Nous avons <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">couvert l&rsquo;\u00e9chafaudage de bloc<\/a> dans notre article pr\u00e9c\u00e9dent. Nous ne ferons donc ici qu&rsquo;un survol rapide des fichiers que nous allons modifier pour nos exemples.<\/p>\n<p><strong>Le dossier racine<\/strong><br \/>\nLe dossier racine est l&rsquo;endroit o\u00f9 vous trouverez le fichier PHP principal et plusieurs sous-dossiers.<\/p>\n<p><strong>author-plugin.php<\/strong><br \/>\nPar d\u00e9faut, le paquetage <code>@wordpress\/create-block<\/code> fournit le <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#plugin-file\">fichier PHP<\/a> suivant :<\/p>\n<pre><code class=\"language-php\">\/**\n * Plugin Name:       Author box\n * Description:       An example block for Kinsta readers\n * Requires at least: 5.8\n * Requires PHP:      7.0\n * Version:           0.1.0\n * Author:            Carlo\n * License:           GPL-2.0-or-later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain:       author-plugin\n *\n * @package           author-box\n *\/\n\n\/**\n * Registers the block using the metadata loaded from the `block.json` file.\n * Behind the scenes, it registers also all assets so they can be enqueued\n * through the block editor in the corresponding context.\n *\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n *\/\nfunction author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build' );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>Dans l&rsquo;en-t\u00eate, vous remarquerez les d\u00e9tails que nous avons saisis lors de la configuration.<\/p>\n<p>Avec les blocs statiques, vous travaillerez la plupart du temps sur les fichiers JavaScript situ\u00e9s dans le dossier <em>src<\/em>. Avec les blocs dynamiques, vous \u00e9crirez du code PHP pour afficher le contenu du bloc sur l&rsquo;interface publique.<\/p>\n<p><strong>Le dossier <em>src<\/em><\/strong><br \/>\nLe dossier <em>src<\/em> est votre dossier de d\u00e9veloppement. Vous y trouverez les fichiers suivants :<\/p>\n<ul>\n<li><em>block.json<\/em><\/li>\n<li><em>index.js<\/em><\/li>\n<li><em>edit.js<\/em><\/li>\n<li><em>save.js<\/em><\/li>\n<li><em>editor.scss<\/em><\/li>\n<li><em>style.scss<\/em><\/li>\n<\/ul>\n<p><strong>block.json<\/strong><br \/>\n<em>block.json<\/em> est votre fichier de m\u00e9tadonn\u00e9es. <code>@wordpress\/create-block<\/code> g\u00e9n\u00e8re le fichier <strong>block.json<\/strong> suivant :<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"author-box\/author-plugin\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Author box\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"businessperson\",\n\t\"description\": \"An example block for Kinsta readers\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"author-plugin\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n<p>Pour une vue plus d\u00e9taill\u00e9e du fichier <em>block.json<\/em> en g\u00e9n\u00e9ral, veuillez vous reporter \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#block-json\">notre pr\u00e9c\u00e9dent article de blog<\/a>.<\/p>\n<p><strong>index.js<\/strong><br \/>\nLe fichier <em>index.js<\/em> est l&rsquo;endroit o\u00f9 vous enregistrez le type de bloc sur le client :<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\n\nimport '.\/style.scss';\n\nimport Edit from '.\/edit';\nimport save from '.\/save';\n\nregisterBlockType('author-box\/author-plugin', {\n\tedit: Edit,\n\tsave,\n});<\/code><\/pre>\n<p><strong>edit.js<\/strong><br \/>\nLe fichier <em>edit.js<\/em> est l&rsquo;endroit o\u00f9 vous construirez l&rsquo;interface de bloc rendue dans l&rsquo;\u00e9diteur :<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p {...useBlockProps()}&gt;\n\t\t\t{__('Author box \u2013 hello from the editor!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p><strong>save.js<\/strong><br \/>\nLe fichier <em>save.js<\/em> contient le script qui construit le contenu du bloc \u00e0 enregistrer dans la base de donn\u00e9es. Nous n&rsquo;utiliserons pas ce fichier dans ce tutoriel :<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save() {\n\treturn (\n\t\t&lt;p {...useBlockProps.save()}&gt;\n\t\t\t{__('Author box \u2013 hello from the saved content!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<h2>Construire le bloc pour le rendre dans l&rsquo;\u00e9diteur<\/h2>\n<p>Ouvrez votre projet dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/#visual-studio-code\">Visual Studio Code<\/a> ou tout autre <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">\u00e9diteur de code<\/a> que vous souhaitez.<\/p>\n<p>Si vous utilisez Visual Studio Code, allez dans <strong>Terminal -&gt; Nouveau terminal<\/strong>. Cela lancera une fen\u00eatre de terminal sur le dossier racine de votre projet.<\/p>\n<p>Dans le terminal (ou dans votre outil de ligne de commande pr\u00e9f\u00e9r\u00e9), saisissez la commande suivante :<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Vous ex\u00e9cutez maintenant l&rsquo;environnement node en mode d\u00e9veloppement.<\/p>\n<figure id=\"attachment_120337\" aria-describedby=\"caption-attachment-120337\" style=\"width: 2378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120337 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/the-project-in-visual-studio-code.jpg\" alt=\"Le projet d'extension de bloc dans Visual Studio Code.\" width=\"2378\" height=\"1628\"><figcaption id=\"caption-attachment-120337\" class=\"wp-caption-text\">Le projet d&rsquo;extension de bloc dans Visual Studio Code.<\/figcaption><\/figure>\n<p>\u00c0 partir de maintenant, vous allez suivre deux voies diff\u00e9rentes. Pour rendre le bloc dans l&rsquo;\u00e9diteur, vous travaillerez dans le fichier <em>edit.js<\/em>. Pour rendre le bloc sur l&rsquo;interface publique, vous devrez \u00e9crire du code PHP dans le fichier principal de l&rsquo;extension.<\/p>\n<p>Maintenant, retroussez vos manches car le codage commence :<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"10\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Dans cet article, nous ne fournissons que des extraits de code. Le code complet est <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">disponible sur Gist<\/a><\/p>\n<\/aside>\n\n<h3>Enregistrer le bloc sur le serveur<\/h3>\n<p>Tout d&rsquo;abord, vous devez enregistrer le bloc sur le serveur et \u00e9crire le code PHP pour r\u00e9cup\u00e9rer les donn\u00e9es de la base de donn\u00e9es.<\/p>\n<p>Dans le fichier <em>author-plugin.php<\/em>, vous devrez passer un deuxi\u00e8me argument \u00e0 la <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#plugin-file\">fonction<code>register_block_type<\/code> <\/a>:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build', array(\n\t\t'render_callback' =&gt; 'author_box_author_plugin_render_author_content'\n\t) );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>Le deuxi\u00e8me argument est un tableau d&rsquo;arguments pour l&rsquo;enregistrement d&rsquo;un type de bloc (voir la <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_block_type\/__construct\/\">liste compl\u00e8te des arguments disponibles ici<\/a>). Dans le code ci-dessus, nous avons uniquement fourni <code>render_callback<\/code>, qui d\u00e9termine la fonction de rappel qui rend le bloc \u00e0 l&rsquo;\u00e9cran.<\/p>\n<p>Ensuite, vous allez d\u00e9clarer la fonction :<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content() {\n\treturn 'Hello World!';\n}<\/code><\/pre>\n<p>Enregistrez le fichier, cr\u00e9ez un nouvel article ou une nouvelle page, et ajoutez le bloc <strong>Author Box<\/strong> au canevas de l&rsquo;\u00e9diteur.<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"L'outil d'insertion de bloc de WordPress.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">L&rsquo;outil d&rsquo;insertion de bloc de WordPress.<\/figcaption><\/figure>\n<p>L&rsquo;\u00e9diteur de blocs affiche toujours le bloc de d\u00e9marrage, car nous n&rsquo;avons pas encore modifi\u00e9 le fichier <em>edit.js<\/em>.<\/p>\n<p>Mais si vous pr\u00e9visualisez l&rsquo;article dans l&rsquo;interface publique, vous verrez que le contenu du bloc d&rsquo;origine a maintenant \u00e9t\u00e9 remplac\u00e9 par la cha\u00eene \u00ab Hello World \u00bb.<\/p>\n<p>Maintenant, puisque le HTML rendu sur l&rsquo;interface publique est g\u00e9n\u00e9r\u00e9 par le fichier PHP, il ne sera pas n\u00e9cessaire que la fonction <code>save<\/code> renvoie quoi que ce soit. Passons donc directement au fichier <em>save.js<\/em> et modifions le code comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-js\">export default function save() {\n\treturn null;\n}<\/code><\/pre>\n<h3>D\u00e9finir les attributs du bloc<\/h3>\n<p>Vous avez maintenant besoin d&rsquo;un endroit pour stocker les r\u00e9glages de l&rsquo;utilisateur. Par exemple, le nombre d&rsquo;\u00e9l\u00e9ments de publication \u00e0 r\u00e9cup\u00e9rer dans la base de donn\u00e9es, l&rsquo;affichage ou non d&rsquo;un champ sp\u00e9cifique, etc. Pour cela, vous allez d\u00e9finir un certain nombre d&rsquo;<code>attributes<\/code> dans le fichier <em>block.json<\/em>.<\/p>\n<p>Par exemple, vous pouvez donner \u00e0 l&rsquo;utilisateur la possibilit\u00e9 de d\u00e9terminer le nombre d&rsquo;articles \u00e0 inclure dans le bloc, l&rsquo;option d&rsquo;afficher l&rsquo;image mise en avant, la date, l&rsquo;extrait, et\/ou de masquer\/afficher la photo de profil de l&rsquo;auteur.<\/p>\n<p>Voici la liste compl\u00e8te des attributs que nous utiliserons pour construire notre bloc d&rsquo;exemple :<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"attributes\": {\n\t\t\"numberOfItems\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 3\n\t\t},\n\t\t\"columns\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 1\n\t\t},\n\t\t\"displayDate\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayExcerpt\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayThumbnail\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayAuthorInfo\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"showAvatar\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}, \n\t\t\"avatarSize\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 48\n\t\t},\n\t\t\"showBio\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n<h3>Construire le bloc \u00e0 rendre dans l&rsquo;\u00e9diteur<\/h3>\n<p>Le s\u00e9lecteur <code>getEntityRecords<\/code> est inclus dans le paquetage <code>@wordpress\/data<\/code>. Pour l&rsquo;utiliser, vous devez importer le hook <code>useSelect<\/code> de ce paquet dans votre fichier <code>edit.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><code>useSelect<\/code> est un hook react personnalis\u00e9 pour r\u00e9cup\u00e9rer les valeurs des s\u00e9lecteurs enregistr\u00e9s, bas\u00e9 sur le <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\">hook react<code>useCallback<\/code><\/a> .<\/p>\n<\/aside>\n\n<p>Ensuite, ajoutez le code suivant \u00e0 la fonction <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect( ( select ) =&gt; {\n\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t'per_page': 3\n\t});\n});<\/code><\/pre>\n<p>Dans le code ci-dessus, nous avons cod\u00e9 en dur le nombre d&rsquo;articles. Mais vous voudrez peut-\u00eatre donner aux utilisateurs la possibilit\u00e9 de d\u00e9finir un nombre diff\u00e9rent d&rsquo;articles. Vous pouvez utiliser un attribut pour cela.<\/p>\n<p>Dans votre <em>block.json<\/em>, vous devriez avoir d\u00e9fini un attribut <code>numberOfItems<\/code>. Vous pouvez l&rsquo;utiliser dans votre fonction <code>Edit<\/code> comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect( ( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems\n\t\t});\n\t});\n\n\tconsole.log( posts );\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Vous ne verrez pas encore les articles \u00e0 l&rsquo;\u00e9cran, mais ex\u00e9cutez une <code>console.log<\/code> et voyez ce qui se passe dans la console de l&rsquo;inspecteur de votre navigateur :<\/p>\n<figure id=\"attachment_120340\" aria-describedby=\"caption-attachment-120340\" style=\"width: 1714px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120340 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/console-log.jpg\" alt=\"Le r\u00e9sultat dans la console du navigateur.\" width=\"1714\" height=\"906\"><figcaption id=\"caption-attachment-120340\" class=\"wp-caption-text\">Le r\u00e9sultat dans la console du navigateur.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"><code>useSelect<\/code> <\/a> peut prendre deux arguments : un callback en ligne et un tableau de d\u00e9pendances. Les deux renvoient une version <a href=\"https:\/\/en.wikipedia.org\/wiki\/Memoization\">m\u00e9moris\u00e9e<\/a> de la callback qui ne change que lorsqu&rsquo;une des d\u00e9pendances change.<\/p>\n<p>Ainsi, pour r\u00e9cup\u00e9rer \u00e0 nouveau les articles \u00e0 chaque modification de l&rsquo;attribut <code>numberOfItems<\/code>, vous devez modifier la fonction <code>Edit<\/code> comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t}, \n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Ensuite, vous devez <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">rendre votre liste d&rsquo;articles<\/a>. Pour cela, vous pouvez utiliser la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">m\u00e9thode JavaScript int\u00e9gr\u00e9e <code>map<\/code><\/a>:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\t\n\treturn (\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t&lt;ul&gt;\n\t\t\t\t{ posts && posts.map( ( post ) =&gt; {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t\t\t{ \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t\t\t&lt;\/li&gt;\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Tout d&rsquo;abord, elle v\u00e9rifie si vous avez au moins un article dans le tableau, puis ex\u00e9cute la boucle.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>La m\u00e9thode <code>map()<\/code> cr\u00e9e un nouveau tableau peupl\u00e9 des r\u00e9sultats de l&rsquo;appel d&rsquo;une fonction fournie sur chaque \u00e9l\u00e9ment du tableau appelant &#8211; Source : <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">MDN web docs<\/a>.<\/p>\n<\/aside>\n\n<p>Notez que, comme nous utilisons la m\u00e9thode <code>map<\/code> avec un composant React, nous utilisons \u00e9galement un attribut <code>key<\/code> pour attribuer l&rsquo;ID de l&rsquo;article \u00e0 l&rsquo;\u00e9l\u00e9ment de liste actuel.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Une \u00ab cl\u00e9 \u00bb est un attribut de cha\u00eene sp\u00e9cial que vous devez inclure lors de la cr\u00e9ation de listes d&rsquo;\u00e9l\u00e9ments &#8211; Source : <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">Listes et cl\u00e9s<\/a> dans React Docs.<\/p>\n<\/aside>\n\n<p><code>post.link<\/code> et <code>post.title.rendered<\/code> rendent respectivement l&rsquo;URL et le titre de l&rsquo;article.<\/p>\n<p>L&rsquo;image ci-dessous montre la liste compl\u00e8te des propri\u00e9t\u00e9s de l&rsquo;objet <code>post<\/code>.<\/p>\n<figure id=\"attachment_120341\" aria-describedby=\"caption-attachment-120341\" style=\"width: 2290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/js-loop-1.jpg\" alt=\"L'objet Post.\" width=\"2290\" height=\"1270\"><figcaption id=\"caption-attachment-120341\" class=\"wp-caption-text\">L&rsquo;objet Post.<\/figcaption><\/figure>\n<p>Le code ci-dessus n&rsquo;est qu&rsquo;un exemple de base de l&rsquo;utilisation de <code>getEntityRecords<\/code>. Il est maintenant temps de mettre nos connaissances en pratique.<\/p>\n<p>Disons que vous voulez emp\u00eacher votre bloc d&rsquo;afficher les balises HTML que l&rsquo;utilisateur a pu ajouter au titre de l&rsquo;article. WordPress fournit un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#rawhtml\">composant<code>RawHTML<\/code><\/a> pour cela.<\/p>\n<p>Tout d&rsquo;abord, vous allez importer le composant du <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/\">paquetage @wordpress\/element<\/a>:<\/p>\n<pre><code class=\"language-js\">import { RawHTML } from '@wordpress\/element';<\/code><\/pre>\n<p>Ensuite, vous allez envelopper le titre de l&rsquo;article dans un \u00e9l\u00e9ment <code>RawHTML<\/code>:<\/p>\n<pre><code class=\"language-jsx\">&lt;div { ...useBlockProps() }&gt;\n\t&lt;ul&gt;\n\t\t{ posts && posts.map((post) =&gt; {\n\t\t\treturn (\n\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t{ post.title.rendered ? (\n\t\t\t\t\t\t\t\t&lt;RawHTML&gt;\n\t\t\t\t\t\t\t\t\t{ post.title.rendered }\n\t\t\t\t\t\t\t\t&lt;\/RawHTML&gt;\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t&lt;\/li&gt;\n\t\t\t)\n\t\t})}\n\t&lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Et c&rsquo;est tout. Maintenant, ajoutez une balise HTML au titre de votre article et enregistrez l&rsquo;article. Testez ensuite votre code avec et sans <code>RawHTML<\/code> et voyez comment le contenu de votre bloc change \u00e0 l&rsquo;\u00e9cran.<\/p>\n<h3>Ajouter la date<\/h3>\n<p>WordPress fournit un certain nombre de fonctions JavaScript pour g\u00e9rer et formater les dates. Pour utiliser ces fonctions, vous devrez d&rsquo;abord les importer du <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-date\/\">paquet<code>@wordpress\/date<\/code><\/a> dans votre fichier <em>edit.js<\/em>:<\/p>\n<pre><code class=\"language-js\">import { dateI18n, format, __experimentalGetSettings } from '@wordpress\/date';<\/code><\/pre>\n<ul>\n<li><code>dateI18n<\/code>: Formate une date, en la traduisant dans la locale du site.<\/li>\n<li><code>format<\/code>: Formate une date.<\/li>\n<li><code>__experimentalGetSettings<\/code>: Affiche la date dans le format d\u00e9fini dans les r\u00e9glages g\u00e9n\u00e9raux de WordPress.<\/li>\n<\/ul>\n<p>Ces fonctions ne sont pas document\u00e9es, mais vous trouverez des exemples utiles dans le code source de plusieurs blocs. Voir par exemple les fichiers <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/latest-posts\/edit.js\">latest-posts<\/a> et <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-date\/edit.js\">post-date<\/a> <em>edit.js<\/em>.<\/p>\n<p>Ajoutez maintenant l&rsquo;attribut <code>displayDate<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate } = attributes;<\/code><\/pre>\n<p>Ajoutez ensuite le code suivant dans l&rsquo;\u00e9l\u00e9ment <code>&lt;li&gt;<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{ \n\tdisplayDate && (\n\t\t&lt;time\n\t\t\tclassName='wp-block-author-box-author-plugin__post-date'\n\t\t\tdateTime={ format( 'c', post.date_gmt ) }\n\t\t&gt;\n\t\t\t{ dateI18n(\n\t\t\t\t__experimentalGetSettings().formats.date, \n\t\t\t\tpost.date_gmt\n\t\t\t)}\n\t\t&lt;\/time&gt;\n\t) \n}<\/code><\/pre>\n<p>Que se passe-t-il ici ?<\/p>\n<ul>\n<li>Si <code>displayDate<\/code> est <code>true<\/code>, alors affichez la date en utilisant un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/time\">\u00e9l\u00e9ment<code>time<\/code><\/a> .<\/li>\n<li>L&rsquo;attribut <code>dateTime<\/code> fournit l&rsquo;heure et\/ou la date de l&rsquo;\u00e9l\u00e9ment dans l&rsquo;un des <a href=\"https:\/\/wordpress.org\/support\/article\/formatting-date-and-time\/\">formats autoris\u00e9s<\/a>.<\/li>\n<li><code>dateI18n<\/code> r\u00e9cup\u00e8re la date dans un format localis\u00e9. Cette fonction fonctionne de mani\u00e8re similaire \u00e0 la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/date_i18n\/\">fonction PHP <code>date_i18n<\/code> de WordPress<\/a>.<\/li>\n<\/ul>\n<h3>Ajouter l&rsquo;extrait<\/h3>\n<p>Il devrait maintenant \u00eatre facile d&rsquo;ajouter l&rsquo;extrait de l&rsquo;article. Tout d&rsquo;abord, jetez un coup d&rsquo;\u0153il \u00e0 la propri\u00e9t\u00e9 <code>excerpt<\/code> dans l&rsquo;inspecteur du navigateur. Vous verrez que le contenu r\u00e9el est stock\u00e9 dans <code>excerpt.rendered<\/code>.<\/p>\n<figure id=\"attachment_120343\" aria-describedby=\"caption-attachment-120343\" style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/inspecting-post-excerpt.jpg\" alt=\"Inspection de l'extrait de l'article dans Chrome DevTools.\" width=\"1640\" height=\"868\"><figcaption id=\"caption-attachment-120343\" class=\"wp-caption-text\">Inspection de l&rsquo;extrait de l&rsquo;article dans Chrome DevTools.<\/figcaption><\/figure>\n<p>Ensuite, ajoutez l&rsquo;attribut <code>displayExcerpt<\/code> \u00e0 l&rsquo;objet <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate, displayExcerpt } = attributes;<\/code><\/pre>\n<p>Puis ajoutez le code suivant avant la balise de fermeture <code>&lt;\/li&gt;<\/code> dans la fonction <code>Edit<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Si vous n&rsquo;\u00eates pas familier avec JavaScript, ici et ci-dessus, nous avons utilis\u00e9 l&rsquo;<strong>\u00e9valuation en circuit court<\/strong>, par laquelle, si toutes les conditions sont vraies, alors la valeur du dernier op\u00e9rande est renvoy\u00e9e (pour en savoir plus, lisez <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Inline If avec l&rsquo;op\u00e9rateur logique &#038;&#038;<\/a> et l&rsquo;op\u00e9rateur <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND\">logique AND (&#038;&#038;)<\/a>).<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>En JavaScript, <code>true &amp;&amp; expression<\/code> est toujours \u00e9valu\u00e9 \u00e0 <code>expression<\/code>, et <code>false &amp;&amp; expression<\/code> est toujours \u00e9valu\u00e9 \u00e0 <code>false<\/code>.<\/p>\n<p>Par cons\u00e9quent, si la condition est <code>true<\/code>, l&rsquo;\u00e9l\u00e9ment juste apr\u00e8s <code>&amp;&amp;<\/code> appara\u00eetra dans la sortie. Si c&rsquo;est <code>false<\/code>, React l&rsquo;ignorera et le sautera. Source : <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Conditional Rendering<\/a> dans React Docs<\/p>\n<\/aside>\n\n<p>Enfin, vous pouvez tester votre code \u00e0 nouveau. Changez la valeur de l&rsquo;attribut dans le fichier <em>block.json<\/em> et voyez ce qui se passe dans l&rsquo;\u00e9diteur.<\/p>\n<h3>Ajouter l&rsquo;image vedette<\/h3>\n<p>Vous devez maintenant ajouter le code qui rend les images vedettes. Commencez par ajouter l&rsquo;attribut <code>displayThumbnail<\/code> \u00e0 <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tdisplayDate, \n\tdisplayExcerpt, \n\tdisplayThumbnail \n} = attributes;<\/code><\/pre>\n<p>Vous devez maintenant d\u00e9terminer o\u00f9 est stock\u00e9e l&rsquo;image mise en avant. Comme nous l&rsquo;avons mentionn\u00e9 ci-dessus, pour obtenir l&rsquo;image mise en avant, vous devez ajouter un nouvel argument <code>_embed<\/code> \u00e0 votre requ\u00eate. De retour \u00e0 votre code, changez les arguments de la requ\u00eate comme suit :<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Ici, nous avons simplement ajout\u00e9 <code>'_embed': true<\/code> au tableau des arguments. Cela donne un objet <code>post<\/code> contenant la propri\u00e9t\u00e9 <code>_embedded<\/code>, qui fournit les d\u00e9tails de l&rsquo;image dont vous avez besoin pour distribuer les images mises en avant.<\/p>\n<p>Vous devriez maintenant savoir o\u00f9 <a href=\"#accessing-post-data-using-the-wordpress-rest-api\">trouver les d\u00e9tails de l&rsquo;image<\/a>.<\/p>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"D\u00e9tails de l'image mise en avant dans la r\u00e9ponse getEntityRecords.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">D\u00e9tails de l&rsquo;image mise en avant dans la r\u00e9ponse getEntityRecords.<\/figcaption><\/figure>\n<p>Il vous suffit d&rsquo;ajouter le code qui rend l&rsquo;image \u00e0 l&rsquo;\u00e9cran :<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayThumbnail && \n\tpost._embedded && \n\tpost._embedded['wp:featuredmedia'] &&\n\tpost._embedded['wp:featuredmedia'][0] &&\n\t&lt;img \n\tclassName='wp-block-author-box-author-plugin__post-thumbnail'\n\t\tsrc={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }\n\t\talt={ post._embedded['wp:featuredmedia'][0].alt_text }\n\t\/&gt;\n}<\/code><\/pre>\n<p>Enregistrez le fichier, passez \u00e0 l&rsquo;\u00e9diteur de blocs, et v\u00e9rifiez si l&rsquo;image s&rsquo;affiche correctement lorsque l&rsquo;attribut <code>displayThumbnail<\/code> est d\u00e9fini sur <code>true<\/code>.<\/p>\n<figure id=\"attachment_120354\" aria-describedby=\"caption-attachment-120354\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt.jpg\" alt=\"Une liste d'articles avec image mise en avant, date et extrait.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120354\" class=\"wp-caption-text\">Une liste d&rsquo;articles avec image mise en avant, date et extrait.<\/figcaption><\/figure>\n<h3>Ajouter des contr\u00f4les de colonne lat\u00e9rale<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons utilis\u00e9 les valeurs par d\u00e9faut des attributs d\u00e9finies dans le <em>block.json<\/em>. Mais gr\u00e2ce \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#define-attributes\">notre article pr\u00e9c\u00e9dent<\/a>, nous savons que nous pouvons d\u00e9finir des gestionnaires d&rsquo;\u00e9v\u00e9nements pour donner aux utilisateurs la possibilit\u00e9 d&rsquo;attribuer des valeurs personnalis\u00e9es \u00e0 chaque attribut.<\/p>\n<p>Pour ce faire, vous allez ajouter un ensemble de contr\u00f4les \u00e0 la <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#settings-sidebar\">colonne lat\u00e9rale des r\u00e9glages du bloc<\/a>. Dans <em>edit.js<\/em>, importez les composants suivants depuis les paquets correspondants :<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps,\n\tInspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n\tPanelBody,\n\tPanelRow,\n\tQueryControls,\n\tToggleControl,\n\tRangeControl\n} from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li><code>InspectorControls<\/code>: Contient les r\u00e9glages de la colonne lat\u00e9rale qui affectent l&rsquo;ensemble du bloc (voir <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">sur GitHub<\/a>)<\/li>\n<li><code>PanelBody<\/code>: Ajoute un conteneur pliable \u00e0 la colonne lat\u00e9rale des r\u00e9glages (voir <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelbody\">sur GitHub<\/a>)<\/li>\n<li><code>PanelRow<\/code>: Produit un conteneur g\u00e9n\u00e9rique pour les contr\u00f4les de la colonne lat\u00e9rale (voir <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelrow\">sur GitHub<\/a>)<\/li>\n<li><code>QueryControls<\/code>: Fournit des contr\u00f4les de r\u00e9glages pour construire une requ\u00eate (voir <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/query-controls\">sur GitHub<\/a>)<\/li>\n<li><code>ToggleControl<\/code>: Fournit un bouton \u00e0 bascule pour que les utilisateurs puissent activer\/d\u00e9sactiver une option sp\u00e9cifique (voir <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/toggle-control\/README.md\">sur GitHub<\/a>)<\/li>\n<li><code>RangeControl<\/code>: Est utilis\u00e9 pour effectuer des s\u00e9lections dans une gamme de valeurs incr\u00e9mentielles (voir <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/range-control\">sur GitHub<\/a>)<\/li>\n<\/ul>\n<p>Ensuite, vous devez mettre \u00e0 jour la fonction <code>Edit<\/code> pour utiliser les contr\u00f4les d\u00e9sormais disponibles. Tout d&rsquo;abord, modifiez la fonction <code>Edit<\/code> comme suit :<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\n\tconst { \n\t\tnumberOfItems, \n\t\tcolumns, \n\t\tdisplayExcerpt, \n\t\tdisplayDate, \n\t\tdisplayThumbnail\n\t} = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems,\n\t\t\t\t'_embed': true\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\t...\n}<\/code><\/pre>\n<p>Notez la propri\u00e9t\u00e9 <code>setAttributes<\/code> transmise \u00e0 la fonction <code>Edit<\/code>.<\/p>\n<p>Vous pouvez maintenant ajouter les \u00e9l\u00e9ments correspondants \u00e0 votre code JSX :<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Content Settings', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;QueryControls \n\t\t\t\t\t\tnumberOfItems={ numberOfItems }\n\t\t\t\t\t\tonNumberOfItemsChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { numberOfItems: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminItems={ 1 }\n\t\t\t\t\t\tmaxItems={ 10 }\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;RangeControl\n\t\t\t\t\t\tlabel={ __( 'Number of Columns', 'author-plugin' ) }\n\t\t\t\t\t\tvalue={ columns }\n\t\t\t\t\t\tonChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { columns: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 4 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Featured Image', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayThumbnail }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayThumbnail: ! displayThumbnail } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Date', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayDate }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayDate: ! displayDate } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Excerpt', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayExcerpt }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayExcerpt: ! displayExcerpt } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PanelBody&gt;\n\t\t&lt;\/InspectorControls&gt;\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t...\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>C&rsquo;est beaucoup de code, n&rsquo;est-ce pas ? Mais c&rsquo;est assez facile \u00e0 comprendre.<\/p>\n<p>Les attributs d&rsquo;\u00e9l\u00e9ment qui m\u00e9ritent le plus votre attention ici sont <code>onNumberOfItemsChange<\/code> dans <code>QueryControls<\/code> et <code>onChange<\/code> dans <code>RangeControl<\/code> et <code>ToggleControl<\/code>. Ces attributs d\u00e9finissent les <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Event_handlers\">gestionnaires d&rsquo;\u00e9v\u00e9nements<\/a> n\u00e9cessaires pour permettre \u00e0 l&rsquo;utilisateur de personnaliser l&rsquo;apparence et\/ou le comportement d&rsquo;un bloc.<\/p>\n<p>Vous remarquerez \u00e9galement que nous avons utilis\u00e9 les balises <code>&lt;&gt;<\/code> et <code>&lt;\/&gt;<\/code>, qui sont la syntaxe courte pour d\u00e9clarer les <a href=\"https:\/\/reactjs.org\/docs\/fragments.html#short-syntax\">fragments React<\/a>.<\/p>\n<p>Maintenant, enregistrez votre fichier, passez dans l&rsquo;\u00e9diteur et rafra\u00eechissez la page :<\/p>\n<figure id=\"attachment_120367\" aria-describedby=\"caption-attachment-120367\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120367 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-box-content-settings.jpg\" alt=\"R\u00e9glages du bloc.\" width=\"1862\" height=\"1022\"><figcaption id=\"caption-attachment-120367\" class=\"wp-caption-text\">R\u00e9glages du bloc.<\/figcaption><\/figure>\n<p>Tout est l\u00e0 ? Alors passons \u00e0 autre chose et ajoutons les d\u00e9tails de l&rsquo;auteur du post.<\/p>\n<h3>Trouver l&rsquo;auteur de l&rsquo;article<\/h3>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 ci-dessus, notre bloc affichera une liste d&rsquo;articles \u00e9crits par le m\u00eame auteur que l&rsquo;article actuel.<\/p>\n<p>Pour obtenir l&rsquo;ID de l&rsquo;auteur de l&rsquo;article, vous allez importer le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-editor\/#getcurrentpostattribute\">s\u00e9lecteur<code>getCurrentPostAttribute<\/code><\/a> depuis le stockage de donn\u00e9es <code>core\/editor<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core\/editor' ).getCurrentPostAttribute( 'author' )<\/code><\/pre>\n<p><code>getCurrentPostAttribute<\/code> renvoie une valeur d&rsquo;attribut pour l&rsquo;article enregistr\u00e9.<\/p>\n<p>Une fois que vous avez obtenu l&rsquo;ID de l&rsquo;auteur, vous pouvez modifier la requ\u00eate comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\t\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Avec ce code, vous obtiendrez une liste des articles <code>n<\/code> du m\u00eame auteur que l&rsquo;article actuel.<\/p>\n<p>Maintenant que vous avez l&rsquo;ID de l&rsquo;auteur, vous pouvez \u00e9galement l&rsquo;utiliser pour r\u00e9cup\u00e9rer des donn\u00e9es suppl\u00e9mentaires dans la base de donn\u00e9es.<\/p>\n<h3>Afficher les d\u00e9tails de l&rsquo;auteur<\/h3>\n<p>Comme nous ne disposons d&rsquo;aucune documentation, nous avons utilis\u00e9 le code du <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-author\/edit.js\">bloc du c\u0153ur Auteur de l&rsquo;article<\/a>\u00a0comme r\u00e9f\u00e9rence.<\/p>\n<p>Pour afficher les d\u00e9tails de l&rsquo;auteur, vous devez d&rsquo;abord importer une nouvelle d\u00e9pendance :<\/p>\n<pre><code class=\"language-js\">import { forEach } from 'lodash';<\/code><\/pre>\n<p>Ensuite, dans la fonction <code>Edit<\/code>, mettez \u00e0 jour l&rsquo;objet <code>attributes<\/code> comme suit :<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tcolumns, \n\tdisplayExcerpt, \n\tdisplayDate, \n\tdisplayThumbnail, \n\tdisplayAuthorInfo, \n\tshowAvatar, \n\tavatarSize, \n\tshowBio \n} = attributes;<\/code><\/pre>\n<p>Une fois cela fait, vous modifierez le code vu dans la section pr\u00e9c\u00e9dente pour r\u00e9cup\u00e9rer les d\u00e9tails de l&rsquo;auteur :<\/p>\n<pre><code class=\"language-js\">const { authorDetails, posts } = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\n\t\tconst authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null;\n\t\n\t\tconst posts = select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\n\t\treturn { \n\t\t\tauthorDetails: authorDetails,\n\t\t\tposts: posts\n\t\t};\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Notez que nous avons utilis\u00e9 le <a href=\"#getusers\">s\u00e9lecteur<code>getUser<\/code><\/a> pour obtenir les d\u00e9tails de l&rsquo;auteur.<\/p>\n<p>Ensuite, vous voudrez peut-\u00eatre obtenir l&rsquo;avatar de l&rsquo;auteur. Le code ci-dessous construit un tableau d&rsquo;\u00e9l\u00e9ments stockant les URL et les tailles des avatars :<\/p>\n<pre><code class=\"language-js\">const avatarSizes = [];\nif ( authorDetails ) {\n\tforEach( authorDetails.avatar_urls, ( url, size ) =&gt; {\n\t\tavatarSizes.push( {\n\t\t\tvalue: size,\n\t\t\tlabel: `${ size } x ${ size }`,\n\t\t} );\n\t} );\n}<\/code><\/pre>\n<p>Ensuite, vous ajouterez les panneaux et les contr\u00f4les de la barre lat\u00e9rale pour permettre aux utilisateurs de personnaliser la zone de l&rsquo;auteur dans le bloc :<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Author Info', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Author Info', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayAuthorInfo }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayAuthorInfo: ! displayAuthorInfo } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t{ displayAuthorInfo && (\n\t\t\t\t\t&lt;&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show avatar' ) }\n\t\t\t\t\t\t\t\tchecked={ showAvatar }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showAvatar: ! showAvatar } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t\t\t&lt;SelectControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Avatar size' ) }\n\t\t\t\t\t\t\t\t\tvalue={ avatarSize }\n\t\t\t\t\t\t\t\t\toptions={ avatarSizes }\n\t\t\t\t\t\t\t\t\tonChange={ ( size ) =&gt; {\n\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\tavatarSize: Number( size ),\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show Bio', 'author-plugin' ) }\n\t\t\t\t\t\t\t\tchecked={ showBio }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showBio: ! showBio } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;\/&gt;\n\t\t\t\t) }\n\t\t\t&lt;\/PanelBody&gt;\n\t\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\t\t...\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>L&rsquo;image ci-dessous montre la colonne lat\u00e9rale de r\u00e9glages mise \u00e0 jour :<\/p>\n<figure id=\"attachment_120379\" aria-describedby=\"caption-attachment-120379\" style=\"width: 1908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120379\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-settings-panel.jpg\" alt=\"The Author Info settings panel.\" width=\"1908\" height=\"960\"><figcaption id=\"caption-attachment-120379\" class=\"wp-caption-text\">Le panneau de param\u00e8tres Info Auteur.<\/figcaption><\/figure>\n<p>Enfin, vous pouvez ajouter la section de l&rsquo;auteur \u00e0 votre bloc :<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t{ displayAuthorInfo  && authorDetails && (\n\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__author\"&gt;\n\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__avatar\"&gt;\n\t\t\t\t\t\t\t&lt;img\n\t\t\t\t\t\t\t\twidth={ avatarSize }\n\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\tauthorDetails.avatar_urls[\n\t\t\t\t\t\t\t\t\t\tavatarSize\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\talt={ authorDetails.name }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t) }\n\t\t\t\t\t&lt;div className='wp-block-author-box-author-plugin__author-content'&gt;\n\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__name'&gt;\n\t\t\t\t\t\t\t{ authorDetails.name }\n\t\t\t\t\t\t&lt;\/p&gt;\n\t\t\t\t\t\t{ showBio &&\n\t\t\t\t\t\t\t\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\n\t\t\t\t\t\t\tauthorDetails?.description &&\n\t\t\t\t\t\t\tauthorDetails.description.length &gt; 0 && (\n\t\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__description'&gt;{ authorDetails.description }&lt;\/p&gt;\n\t\t\t\t\t\t) }\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t)}\n\t\t\t&lt;ul&gt;\n\t\t\t...\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>L&rsquo;image suivante montre le rendu \u00e0 l&rsquo;\u00e9cran.<\/p>\n<figure id=\"attachment_120380\" aria-describedby=\"caption-attachment-120380\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120380 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings.jpg\" alt=\"Section des d\u00e9tails de l'auteur et r\u00e9glages d'information.\" width=\"1912\" height=\"844\"><figcaption id=\"caption-attachment-120380\" class=\"wp-caption-text\">Section des d\u00e9tails de l&rsquo;auteur et r\u00e9glages d&rsquo;information.<\/figcaption><\/figure>\n<p>Enregistrez maintenant votre fichier <em>edit.js<\/em> et ex\u00e9cutez vos tests. Votre bloc devrait inclure diff\u00e9rents \u00e9l\u00e9ments en fonction des r\u00e9glages du bloc.<\/p>\n<figure id=\"attachment_120384\" aria-describedby=\"caption-attachment-120384\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120384 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings-no-bio-2.jpg\" alt=\"Les d\u00e9tails de l'auteur ne montrent pas la bio de l'auteur.\" width=\"1912\" height=\"484\"><figcaption id=\"caption-attachment-120384\" class=\"wp-caption-text\">Les d\u00e9tails de l&rsquo;auteur ne montrent pas la bio de l&rsquo;auteur.<\/figcaption><\/figure>\n<p>Il manque encore une derni\u00e8re chose : le nombre de colonnes pour afficher les articles.<\/p>\n<h3>Modifiez le nombre de colonnes<\/h3>\n<p>Pour donner \u00e0 l&rsquo;utilisateur la possibilit\u00e9 d&rsquo;afficher les aper\u00e7us d&rsquo;articles en colonnes, nous avons d\u00e9fini l&rsquo;attribut <code>columns<\/code> dans le fichier <em>block.json<\/em>. Nous avons \u00e9galement inclus un attribut <code>columns<\/code> dans le script et cr\u00e9\u00e9 un contr\u00f4le des r\u00e9glages pour permettre aux utilisateurs de modifier le nombre de colonnes, bien que ce changement n&rsquo;ait aucun effet pour le moment.<\/p>\n<p>Dans le code JSX ci-dessus, vous devriez avoir remarqu\u00e9 que nous avons ajout\u00e9 des classes CSS \u00e0 plusieurs \u00e9l\u00e9ments :<\/p>\n<p>Classes attribu\u00e9es aux \u00e9l\u00e9ments de la section Auteur :<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__author<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__avatar<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__author-content<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__name<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__description<\/code><\/li>\n<\/ul>\n<p>Classes attribu\u00e9es aux \u00e9l\u00e9ments de la section du contenu :<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__post-items<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-thumbnail<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-title<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-date<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-excerpt<\/code><\/li>\n<\/ul>\n<p>Une classe est encore manquante. Le nom de cette classe sera g\u00e9n\u00e9r\u00e9 dynamiquement pour refl\u00e9ter le nombre de colonnes d\u00e9fini par l&rsquo;utilisateur.<\/p>\n<p>Retournez au fichier <code>Edit.js<\/code> et modifiez l&rsquo;\u00e9l\u00e9ment <code>ul<\/code> comme suit :<\/p>\n<pre><code class=\"language-jsx\">&lt;ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }&gt;\n\t...\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Nous avons ajout\u00e9 une nouvelle classe <code>columns-${ columns }<\/code> selon la syntaxe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">Template literals<\/a> pour ins\u00e9rer une expression \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une cha\u00eene de caract\u00e8res. De cette fa\u00e7on, l&rsquo;attribut attach\u00e9 \u00e0 l&rsquo;\u00e9l\u00e9ment <code>ul<\/code> d\u00e9pendra des r\u00e9glages de l&rsquo;utilisateur (par exemple, <code>columns-1<\/code>, <code>columns-2<\/code>, etc.).<\/p>\n<p>Ouvrez maintenant le fichier <code>style.scss<\/code> et remplacez le code existant par le suivant :<\/p>\n<pre><code class=\"language-css\">.wp-block-author-box-author-plugin {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: .6em;\n\tul.wp-block-author-box-author-plugin__post-items {\n\t\tpadding: 0;\n\t\tlist-style-type: none;\n\t\tdisplay: grid;\n\t\tgap: .5em;\n\t\t@for $i from 2 through 4 {\n\t\t\t&.columns-#{ $i } {\n\t\t\t\tgrid-template-columns: repeat(#{ $i }, 1fr);\n\t\t\t}\n\t\t}\n\t\tli {\n\t\t\tlist-style: none;\n\t\t\timg.wp-block-author-box-author-plugin__post-thumbnail {\n\t\t\t\theight: auto;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t\n\t}\n}\n.wp-block-author-box-author-plugin__author {\n\tdisplay: flex;\n    flex-wrap: wrap;\n}\n\n.wp-block-author-box-author-plugin__avatar {\n\tmargin-right: 1em;\n}\n\n.wp-block-author-box-author-plugin__author-content {\n\tflex-basis: 0;\n    flex-grow: 1;\n}<\/code><\/pre>\n<p>Nous n&rsquo;irons pas en profondeur dans ce code, \u00e9tant au-del\u00e0 de la port\u00e9e de cet article. Mais si vous souhaitez plonger plus profond\u00e9ment, vous pouvez vous r\u00e9f\u00e9rer aux ressources suivantes :<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">Disposition de la grille CSS<\/a><\/li>\n<li><a href=\"https:\/\/learncssgrid.com\/\">Apprendre la grille CSS<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/at-rules\/control\/for\">La r\u00e8gle @for dans Sass<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/style-rules#nesting\">L&rsquo;imbrication dans Sass<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_120388\" aria-describedby=\"caption-attachment-120388\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120388 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-block-editor-view.jpg\" alt=\"Le bloc Auteur dans l'\u00e9diteur.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120388\" class=\"wp-caption-text\">Le bloc Auteur dans l&rsquo;\u00e9diteur.<\/figcaption><\/figure>\n<p>Et c&rsquo;est tout pour le rendu du bloc dans l&rsquo;\u00e9diteur.<\/p>\n<h2>Construire le bloc pour le rendre sur la page<\/h2>\n<p>Maintenant que le code qui assure le rendu du bloc dans l&rsquo;\u00e9diteur est complet, nous pouvons passer \u00e0 la construction du bloc pour le rendu sur l&rsquo;interface publique.<\/p>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 pr\u00e9c\u00e9demment, lorsqu&rsquo;il s&rsquo;agit de blocs dynamiques, le fichier de l&rsquo;extension est responsable de la g\u00e9n\u00e9ration du HTML \u00e0 rendre sur l&rsquo;interface publique.<\/p>\n<p>Ouvrez donc le fichier principal de votre extension<em>(author-plugin.php<\/em> dans notre exemple).<\/p>\n<p>La premi\u00e8re chose \u00e0 faire est de mettre les attributs du bloc \u00e0 la disposition de la fonction PHP de WordPress. Dans votre fichier PHP, modifiez la d\u00e9finition de la fonction comme suit :<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t...\n}<\/code><\/pre>\n<p>Vous pouvez maintenant utiliser les fonctions WordPress pour r\u00e9cup\u00e9rer et manipuler des donn\u00e9es. Par exemple, vous pouvez utiliser <code>get_posts<\/code> pour r\u00e9cup\u00e9rer les derniers articles du blog (pour en savoir plus, lisez notre article d\u00e9taill\u00e9 sur la <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-get_posts\/\">fonction<code>get_posts<\/code> <\/a>) :<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems'],\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t$output .= '&lt;li&gt;&lt;a href=\"' . esc_url( get_permalink( $p-&gt;ID ) ) . '\"&gt;' \n\t\t\t. $p-&gt;post_title . '&lt;\/a&gt;&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>La fonction ci-dessus r\u00e9cup\u00e8re les derniers articles de blog <code>numberOfItems<\/code> de votre base de donn\u00e9es WordPress (par d\u00e9faut, <code>post_type<\/code> est d\u00e9fini sur <code>post<\/code>) et renvoie un tableau d&rsquo;objets <code>$post<\/code>. Ensuite, elle it\u00e8re sur le tableau pour construire les \u00e9l\u00e9ments de la liste.<\/p>\n<p>Si vous inspectez la sortie HTML, vous remarquerez qu&rsquo;il s&rsquo;agit d&rsquo;une simple liste d&rsquo;articles, comme celle pr\u00e9sent\u00e9e dans l&rsquo;image suivante :<\/p>\n<figure id=\"attachment_120521\" aria-describedby=\"caption-attachment-120521\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120521 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts.jpg\" alt=\"Une simple liste d'articles.\" width=\"1866\" height=\"732\"><figcaption id=\"caption-attachment-120521\" class=\"wp-caption-text\">Une simple liste d&rsquo;articles.<\/figcaption><\/figure>\n<p>Dans notre article pr\u00e9c\u00e9dent, nous avons mentionn\u00e9 que vous utiliserez le hook React <code>useBlockProps<\/code> pour marquer l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#import-components\">\u00e9l\u00e9ment wrapper<\/a> du bloc dans votre code JSX. Vous devrez faire de m\u00eame dans votre fonction PHP.<\/p>\n<p>WordPress fournit la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">fonction<code>get_block_wrapper_attributes<\/code><\/a> pour cela.<\/p>\n<p>Donc, modifiez votre code PHP comme suit :<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\t$output .= '&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;';\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Maintenant, une <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">classe<code>wp-block-author-box-author-plugin<\/code><\/a> a \u00e9t\u00e9 attribu\u00e9e \u00e0 l&rsquo;\u00e9l\u00e9ment conteneur et le bloc a une couleur d&rsquo;arri\u00e8re-plan diff\u00e9rente.<\/p>\n<p>Ensuite, la fonction <code>get_posts<\/code> obtient les donn\u00e9es <code>WP_Posts<\/code> et le cycle <code>foreach<\/code> construit les \u00e9l\u00e9ments de la liste (voir aussi <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-get_posts\/#display\">Comment afficher les donn\u00e9es retourn\u00e9es par get_posts<\/a>).<\/p>\n<figure id=\"attachment_120520\" aria-describedby=\"caption-attachment-120520\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120520 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-2.jpg\" alt=\"Une liste d'articles avec une classe CSS attribu\u00e9e.\" width=\"1866\" height=\"650\"><figcaption id=\"caption-attachment-120520\" class=\"wp-caption-text\">Une liste d&rsquo;articles avec une classe CSS attribu\u00e9e.<\/figcaption><\/figure>\n<h3>Ajouter l&rsquo;image mise en avant, la date et l&rsquo;extrait<\/h3>\n<p>Ensuite, vous devrez ajouter les images mises en avant, les dates et les extraits des messages. Dans le m\u00eame fichier, modifiez votre code PHP comme suit :<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-\"&gt;';\n\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\t\t\t$thumbnail = has_post_thumbnail( $p-&gt;ID ) ? get_the_post_thumbnail( $p-&gt;ID, 'medium' ) : '';\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\tif( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){\n\t\t\t\t$output .= $thumbnail;\n\t\t\t}\n\t\t\t$output .= '&lt;h5&gt;&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;&lt;\/h5&gt;';\n\t\t\tif( $attr['displayDate'] ){\n\t\t\t\t$output .= '&lt;time datetime=\"' . esc_attr( get_the_date( 'c', $p ) ) . '\"&gt;' . esc_html( get_the_date( '', $p ) ) . '&lt;\/time&gt;';\n\t\t\t}\n\t\t\tif( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){\n\t\t\t\t$output .= '&lt;p&gt;' . get_the_excerpt( $p ) . '&lt;\/p&gt;';\n\t\t\t}\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>La boucle <code>foreach<\/code> it\u00e8re sur le tableau <code>$my_posts<\/code>. \u00c0 chaque it\u00e9ration, plusieurs conditions v\u00e9rifient les valeurs des attributs et construisent la sortie en cons\u00e9quence.<\/p>\n<p>Regardez maintenant la sortie \u00e0 l&rsquo;\u00e9cran :<\/p>\n<figure id=\"attachment_120649\" aria-describedby=\"caption-attachment-120649\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120649 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt-1.jpg\" alt=\"Une liste d'articles avec des images mises en avant, des dates et des extraits.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120649\" class=\"wp-caption-text\">Une liste d&rsquo;articles avec des images mises en avant, des dates et des extraits.<\/figcaption><\/figure>\n<p>Vous pouvez maintenant ex\u00e9cuter vos tests. Modifiez les r\u00e9glages de date, d&rsquo;extrait et de miniature et v\u00e9rifiez comment le contenu du bloc change sur l&rsquo;interface publique.<\/p>\n<h3>Afficher les articles en colonnes<\/h3>\n<p>Dans notre code JavaScript, nous avons utilis\u00e9 une classe <code>columns-${ columns }<\/code> pour afficher les aper\u00e7us des articles en colonnes. Nous devons maintenant faire la m\u00eame chose en PHP.<\/p>\n<p>Pour ce faire, il suffit d&rsquo;ajouter ces deux lignes de code :<\/p>\n<pre><code class=\"language-php\">$num_cols = $attr['columns'] &gt; 1 ? strval( $attr['columns'] ) : '1';\n\n$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '\"&gt;';<\/code><\/pre>\n<p>Cela ajoutera une classe <code>columns-n<\/code> \u00e0 l&rsquo;\u00e9l\u00e9ment <code>ul<\/code> contenant les aper\u00e7us des articles. Maintenant, le nombre de colonnes affich\u00e9es sur la page devrait correspondre au nombre de colonnes d\u00e9fini dans les r\u00e9glages du bloc.<\/p>\n<h3>Construire la bo\u00eete de l&rsquo;auteur<\/h3>\n<p>Enfin, vous devez cr\u00e9er la bo\u00eete contenant les d\u00e9tails de l&rsquo;auteur, notamment son avatar, son nom et sa description.<\/p>\n<p>Dans la fonction de rappel, vous devrez ajouter un ensemble de conditions pour v\u00e9rifier la valeur actuelle de chaque attribut :<\/p>\n<pre><code class=\"language-php\">if( $attr['displayAuthorInfo'] ){\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author\"&gt;';\n\t\n\tif( $attr['showAvatar'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__avatar\"&gt;' \n\t\t\t. get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author-content\"&gt;';\n\t\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__name\"&gt;' \n\t\t. get_the_author_meta( 'display_name' ) \n\t\t. '&lt;\/div&gt;';\n\n\tif( $attr['showBio'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__description\"&gt;' \n\t\t\t. get_the_author_meta( 'description' ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;\/div&gt;';\n\t$output .= '&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>Le code est assez simple. Il v\u00e9rifie la valeur actuelle de chaque attribut, et s&rsquo;il s&rsquo;agit de <code>true<\/code>, il g\u00e9n\u00e8re le HTML n\u00e9cessaire.<\/p>\n<p>Maintenant, enregistrez votre fichier PHP et comparez le bloc dans l&rsquo;\u00e9diteur par rapport au m\u00eame bloc sur l&rsquo;interface publique.<\/p>\n<figure id=\"attachment_120952\" aria-describedby=\"caption-attachment-120952\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/full-block.jpg\" alt=\"Notre bloc personnalis\u00e9 dans l'\u00e9diteur de bloc.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120952\" class=\"wp-caption-text\">Notre bloc personnalis\u00e9 dans l&rsquo;\u00e9diteur de bloc.<\/figcaption><\/figure>\n<p>Vous trouverez le code complet du bloc d&rsquo;exemple dans <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">ce Gist public<\/a>.<\/p>\n\n<h2>Ressources recommand\u00e9es pour le d\u00e9veloppement de blocs dynamiques<\/h2>\n<p>Si vous avez dress\u00e9 l&rsquo;oreille en lisant cet article et commenc\u00e9 \u00e0 reconna\u00eetre les opportunit\u00e9s de d\u00e9veloppement professionnel qui d\u00e9coulent de l&rsquo;apprentissage de la cr\u00e9ation de blocs Gutenberg, eh bien, notre conseil est de continuer \u00e0 explorer et \u00e0 acqu\u00e9rir de nouvelles comp\u00e9tences dans les technologies derri\u00e8re le d\u00e9veloppement de blocs.<\/p>\n<p>Bien qu&rsquo;une documentation officielle fiable fasse toujours d\u00e9faut, il existe n\u00e9anmoins d&rsquo;excellentes ressources, gratuites ou payantes, que nous avons consult\u00e9es lors de la r\u00e9daction de cet article. Parmi les nombreuses ressources disponibles, nous vous recommandons les suivantes :<\/p>\n<p><strong>Ressources officielles<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md\">Donn\u00e9es<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/core-data\/README.md\">Donn\u00e9es du c\u0153ur<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">Cr\u00e9ation de blocs dynamiques<\/a><\/li>\n<li><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-gutenberg-block-development\/\">Introduction au d\u00e9veloppement de blocs Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/www.meetup.com\/en-US\/wordpress-social-learning\/\">WordPress Social Learning<\/a> sur MeetUp<\/li>\n<\/ul>\n<p><b>Tutoriels recommand\u00e9s par les contributeurs du c\u0153ur de WordPress<\/b><\/p>\n<ul>\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 (@ryanwelcher)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">Un aper\u00e7u pratique de l&rsquo;API @wordpress\/data<\/a> par Darren Ethier (@nerrad)<\/li>\n<\/ul>\n<p><strong>Ressources JavaScript, React et Redux<br \/>\n<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Tutorials#javascript_tutorials\">Tutoriels JavaScript<\/a> par MDN<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\">Getting Started with React<\/a> (officiel)<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/essentials\/part-1-overview-concepts\">Tutoriel Redux<\/a> (officiel)<\/li>\n<\/ul>\n<p><strong>Ressources similaires Kinsta<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">Qu&rsquo;est-ce que JavaScript ? Un regard sur le 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\/qu-est-ce-que-node-js\/\">Qu&rsquo;est-ce que Node.js et pourquoi l&rsquo;utiliser ?<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">Comment installer Node.js et npm sur Windows, macOS et Linux ?<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/deboguer-node\/\">Comment d\u00e9boguer du code Node.js en utilisant plusieurs outils<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/node-js-vs-php\/\">Node.js vs PHP : Une comparaison t\u00eate \u00e0 t\u00eate<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/applications-node-js\/\">les 10 types d&rsquo;applications Node.js les plus populaires en 2022<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/angular-vs-react\/\">Angular vs React : Une comparaison d\u00e9taill\u00e9e c\u00f4te \u00e0 c\u00f4te<\/a><\/li>\n<\/ul>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Nous sommes arriv\u00e9s \u00e0 la fin de ce (deuxi\u00e8me) long voyage dans le d\u00e9veloppement des blocs Gutenberg.<\/p>\n<p>Dans cet article, nous avons abord\u00e9 quelques sujets avanc\u00e9s, comme l&rsquo;Application State et les stockages Redux. Mais avec un peu de chance, vous devriez maintenant avoir une meilleure compr\u00e9hension du d\u00e9veloppement de blocs en g\u00e9n\u00e9ral.<\/p>\n<p>Oui, des comp\u00e9tences en Node.js, Webpack, <a href=\"https:\/\/kinsta.com\/fr\/blog\/transpiler-php\/#what-is-transpiling\">Babel<\/a>, React et Redux sont essentielles lorsqu&rsquo;il s&rsquo;agit de construire des blocs Gutenberg avanc\u00e9s, mais vous n&rsquo;avez pas besoin d&rsquo;\u00eatre un ninja de React pour vous lancer. Apprendre \u00e0 d\u00e9velopper des blocs Gutenberg n&rsquo;est pas forc\u00e9ment compliqu\u00e9. Il suffit de le faire avec la bonne motivation et en suivant le parcours d&rsquo;apprentissage appropri\u00e9.<\/p>\n<p>Et nous esp\u00e9rons que cet article &#8211; et le <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">pr\u00e9c\u00e9dent<\/a> &#8211; vous fourniront la bonne carte pour trouver votre chemin et vous lancer dans le d\u00e9veloppement de Gutenberg d\u00e8s maintenant.<\/p>\n<p><em>\u00c0 vous de jouer maintenant ! Avez-vous d\u00e9j\u00e0 cr\u00e9\u00e9 des blocs dynamiques ? Avez-vous des exemples \u00e0 partager avec nous ? Et quels ont \u00e9t\u00e9 les plus grands obstacles dans votre exp\u00e9rience ? N&rsquo;h\u00e9sitez pas \u00e0 laisser un commentaire ci-dessous.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg vous laisse-t-il encore perplexe ? Ou faites-vous partie de ceux qui croient fermement au potentiel de l&rsquo;\u00e9diteur de blocs et qui veulent d\u00e9couvrir jusqu&rsquo;o\u00f9 ils &#8230;<\/p>\n","protected":false},"author":36,"featured_media":60347,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[527,449,72],"topic":[1028],"class_list":["post-60346","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-development","tag-gutenberg","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 cr\u00e9er des blocs dynamiques pour Gutenberg<\/title>\n<meta name=\"description\" content=\"N&#039;attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.\" \/>\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\/blocs-dynamiques-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er des blocs dynamiques pour Gutenberg\" \/>\n<meta property=\"og:description\" content=\"N&#039;attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\" \/>\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=\"2022-08-08T06:58:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-12T12:33:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.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=\"N&#039;attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.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=\"45 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Comment cr\u00e9er des blocs dynamiques pour Gutenberg\",\"datePublished\":\"2022-08-08T06:58:33+00:00\",\"dateModified\":\"2023-10-12T12:33:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\"},\"wordCount\":7835,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"keywords\":[\"Block Editor\",\"development\",\"Gutenberg\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\",\"name\":\"Comment cr\u00e9er des blocs dynamiques pour Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"datePublished\":\"2022-08-08T06:58:33+00:00\",\"dateModified\":\"2023-10-12T12:33:04+00:00\",\"description\":\"N'attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#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 cr\u00e9er des blocs dynamiques pour 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 cr\u00e9er des blocs dynamiques pour Gutenberg","description":"N'attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.","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\/blocs-dynamiques-gutenberg\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er des blocs dynamiques pour Gutenberg","og_description":"N'attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.","og_url":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2022-08-08T06:58:33+00:00","article_modified_time":"2023-10-12T12:33:04+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"N'attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"45 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Comment cr\u00e9er des blocs dynamiques pour Gutenberg","datePublished":"2022-08-08T06:58:33+00:00","dateModified":"2023-10-12T12:33:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/"},"wordCount":7835,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","keywords":["Block Editor","development","Gutenberg"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/","url":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/","name":"Comment cr\u00e9er des blocs dynamiques pour Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","datePublished":"2022-08-08T06:58:33+00:00","dateModified":"2023-10-12T12:33:04+00:00","description":"N'attendez plus pour devenir un d\u00e9veloppeur de blocs. Dans ce guide, vous apprendrez tout ce que vous devez savoir pour cr\u00e9er des blocs dynamiques depuis le d\u00e9but.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/#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 cr\u00e9er des blocs dynamiques pour 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\/60346","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=60346"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/60346\/revisions"}],"predecessor-version":[{"id":60430,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/60346\/revisions\/60430"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60346\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/60347"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=60346"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=60346"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=60346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}