{"id":234280,"date":"2023-02-27T13:04:00","date_gmt":"2023-02-27T10:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234280"},"modified":"2022-11-12T03:30:48","modified_gmt":"2022-11-12T00:30:48","slug":"creer-un-bloc-gutenberg-personnalise-partie-4-attributs","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-un-bloc-gutenberg-personnalise-partie-4-attributs\/","title":{"rendered":"Cr\u00e9er un bloc Gutenberg personnalis\u00e9 &#8211; Partie 4\u00a0: Attributs"},"content":{"rendered":"\n<p>Dans cette partie, nous verrons comment d\u00e9finir des attributs, r\u00e9cup\u00e9rer leurs valeurs et les mettre \u00e0 jour. Avec les attributs, nous pouvons accepter les entr\u00e9es de l&rsquo;\u00e9diteur, les enregistrer et les sortir comme bon nous semble. Dans l&rsquo; <a href=\"https:\/\/awhitepixel.com\/blog\/wordpress-gutenberg-create-custom-blocks-part-3-props-wordpress-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e9tape pr\u00e9c\u00e9dente,<\/a> nous avons examin\u00e9 les composants WordPress, o\u00f9 les trouver et comment les mettre en \u0153uvre. Dans cet article, nous ajouterons des accessoires pour \u00e9tablir la connexion avec les attributs &#8211; les donn\u00e9es enregistr\u00e9es.<\/p>\n<h2>D\u00e9finir les attributs<\/h2>\n<p>Les attributs sont ajout\u00e9s en tant qu&rsquo;objets dans un tableau \u00e0 la <code>attributes<\/code>propri\u00e9t\u00e9 dans <code>registerBlockType()<\/code>. La cl\u00e9 de chaque attribut est le nom de l&rsquo;attribut, et vous devez avoir la propri\u00e9t\u00e9 <code>type<\/code>au minimum.<\/p>\n<p>La <code>type<\/code>propri\u00e9t\u00e9 peut \u00eatre l&rsquo;une des suivantes\u00a0; <code>null<\/code>, <code>boolean<\/code>, <code>object<\/code>, <code>array<\/code>, <code>number<\/code>, <code>string<\/code>ou <code>integer<\/code>.<\/p>\n<p>Vous pouvez \u00e9ventuellement fournir la propri\u00e9t\u00e9 <code>default<\/code>pour d\u00e9finir la valeur de d\u00e9part de votre attribut. Si vous ne fournissez pas de valeur par d\u00e9faut, l&rsquo;attribut sera par d\u00e9faut <code>null<\/code>.<\/p>\n<p>Une autre propri\u00e9t\u00e9 d&rsquo;attribut est <code>source<\/code>que fonctionne avec la <code>selector<\/code>propri\u00e9t\u00e9, mais ce sont des choses d\u00e9licates que nous examinerons en d\u00e9tail plus bas.<\/p>\n<p>Par exemple, d\u00e9finir deux attributs\u00a0; <code>exampleText<\/code>en tant que cha\u00eene et <code>postIds<\/code>en tant que tableau, ressemblerait \u00e0 ceci\u00a0:<\/p>\n<pre><code>const { registerBlockType } = wp.blocks;\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        },\n        postIds: {\n            type: 'array'\n            default: []\n        }\n    },\n    edit: (props) =&gt; { \n    ...<\/code><\/pre>\n<p><strong>Tout ce que vous avez besoin d&rsquo;enregistrer pour votre bloc (entr\u00e9e de l&rsquo;utilisateur\/\u00e9diteur) n\u00e9cessite un attribut<\/strong>. C&rsquo;est \u00e0 vous de d\u00e9cider comment structurer vos donn\u00e9es, en d\u00e9finissant des attributs distincts pour chacun ou en les regroupant tous dans un objet. Ce sera juste une diff\u00e9rence dans la fa\u00e7on dont vous r\u00e9cup\u00e9rez leurs donn\u00e9es et comment vous les mettez \u00e0 jour.<\/p>\n<h2>Obtenir des valeurs d&rsquo;attribut<\/h2>\n<p>Les attributs sont disponibles en tant qu&rsquo;accessoires pour vos blocs <code>edit<\/code>et <code>save<\/code>fonctions. Si vous avez suivi cette s\u00e9rie depuis <a href=\"https:\/\/awhitepixel.com\/blog\/wordpress-gutenberg-create-custom-blocks-part-3-props-wordpress-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;\u00e9tape pr\u00e9c\u00e9dente<\/a>, rappelez-vous que nous avons mis \u00e0 jour les fonctions pour passer les props en param\u00e8tre.<\/p>\n<p>Il est courant de <strong>d\u00e9structurer<\/strong> les attributs des accessoires, car vous vous y r\u00e9f\u00e9rez souvent. Par exemple, la sortie d&rsquo;un attribut appel\u00e9 <code>exampleText<\/code>ressemblerait \u00e0 ceci\u00a0:<\/p>\n<pre><code>edit: (props) =&gt; { \n    const { attributes } = props;\n    return &lt;div&gt;{attributes.exampleText}&lt;\/div&gt;\n},<\/code><\/pre>\n<h2>Mise \u00e0 jour des valeurs d&rsquo;attribut<\/h2>\n<p>Afin de mettre \u00e0 jour les attributs, nous avons une m\u00e9thode disponible dans les props, appel\u00e9e <code>setAttributes()<\/code>. Cette fonction accepte un objet dans lequel vous pouvez ajouter n&rsquo;importe quel attribut que vous souhaitez mettre \u00e0 jour. Vous ne pouvez mettre \u00e0 jour qu&rsquo;un seul attribut, plusieurs ou tous \u00e0 la fois. Si vous avez plusieurs attributs d\u00e9finis et appelez <code>setAttributes()<\/code>pour mettre \u00e0 jour un seul d&rsquo;entre eux, les autres ne sont pas touch\u00e9s.<\/p>\n<p>Si vous avez de l&rsquo;exp\u00e9rience avec React, vous reconna\u00eetrez probablement imm\u00e9diatement les similitudes entre <code>setAttributes()<\/code>et <code>setState()<\/code>. Ils fonctionnent exactement de la m\u00eame mani\u00e8re, mais la diff\u00e9rence est que l&rsquo;\u00e9tat dans React est juste quelque chose stock\u00e9 localement dans ce composant, et les attributs sont en fait enregistr\u00e9s en tant que donn\u00e9es en dehors du composant.<\/p>\n<p>Pour mettre \u00e0 jour un attribut, vous d\u00e9truisez g\u00e9n\u00e9ralement la fonction des accessoires et l&rsquo;appelez comme suit\u00a0: ci-dessous, nous mettons \u00e0 jour <code>exampleText<\/code>l&rsquo;attribut pour qu&rsquo;il soit &quot;\u00a0Salut&quot;.<\/p>\n<pre><code>const { setAttributes } = props;\nsetAttributes({ exampleText: 'Hi' });<\/code><\/pre>\n<p>Naturellement, vous ex\u00e9cuteriez l&rsquo; <code>setAttributes()<\/code>action \u00e0 partir de l&rsquo;int\u00e9rieur. Un exemple courant est \u00e0 l&rsquo;int\u00e9rieur de la <code>onChange<\/code>prop sur une sorte de champ d&rsquo;entr\u00e9e utilis\u00e9 pour stocker la valeur de l&rsquo; <code>exampleText<\/code>attribut.<\/p>\n<p>Assurez-vous d&rsquo;enregistrer les attributs dans le type que vous avez d\u00e9fini sur l&rsquo;attribut. Vous n&rsquo;aurez aucune chance d&rsquo;essayer d&rsquo;enregistrer des objets dans un attribut de cha\u00eene par exemple.<\/p>\n<p>Essayons-le en pratique! Lancez <code>npm run start<\/code>-vous si vous ne l&rsquo;avez pas d\u00e9j\u00e0 fait.<\/p>\n<h2>Affichage d&rsquo;un attribut dans une entr\u00e9e de texte personnalis\u00e9e et mise \u00e0 jour de la valeur de l&rsquo;attribut<\/h2>\n<p>Dans l&rsquo;\u00e9tape pr\u00e9c\u00e9dente, nous avons ajout\u00e9 quelques composants dans <code>edit<\/code>, par exemple une entr\u00e9e de texte, mais rien n&rsquo;a \u00e9t\u00e9 stock\u00e9. Ajoutons un attribut et une entr\u00e9e de texte pour celui-ci dans notre bloc. Nous nous assurerons tous les deux que l&rsquo;entr\u00e9e de texte affiche la valeur actuelle, et chaque fois que l&rsquo;entr\u00e9e est modifi\u00e9e, nous mettons \u00e0 jour l&rsquo;attribut.<\/p>\n<h3>Ajout de l&rsquo;entr\u00e9e de texte et de son <code>onChange<\/code>accessoire<\/h3>\n<pre><code>const { registerBlockType } = wp.blocks;\nconst { TextControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    attributes: {\n        exampleText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) =&gt; { \n        const { attributes, setAttributes } = props;\n        return (&lt;div&gt;\n                &lt;TextControl \n                    value={attributes.exampleText}\n                    onChange={(newtext) =&gt; setAttributes({ exampleText: newtext })}\n                \/&gt; \n            &lt;\/div&gt;\n        );\n    },\n    save:() =&gt; { \n        return &lt;div&gt;:)&lt;\/div&gt; \n    }\n});<\/code><\/pre>\n<p>Nous d\u00e9structurons <code>attributes<\/code>et partons car nous utiliserons les deux <code>setAttributes<\/code>. <code>props<\/code>Ensuite, nous utilisons un composant du package <code>TextControl<\/code>WordPress. <code>wp.components<\/code>Nous lui passons deux accessoires; <code>value<\/code>d\u00e9finira la valeur de l&rsquo;entr\u00e9e (\u00e0 la fois initialement et pendant que nous tapons) et une action sur l&rsquo;\u00e9v\u00e9nement de l&rsquo;entr\u00e9e <code>onChange<\/code>.<\/p>\n<p>Dans <code>value<\/code>nous le d\u00e9finissons sur la valeur de notre attribut ; <code>attributes.exampleText<\/code>. Dans le <code>onChange<\/code>cas o\u00f9 nous ex\u00e9cutons une fonction, en passant la valeur typ\u00e9e de notre entr\u00e9e en tant que param\u00e8tre, <code>newtext<\/code>(la valeur d&rsquo;entr\u00e9e est un accessoire renvoy\u00e9 par le composant). Dans cette fonction, nous appelons <code>setAttributes()<\/code>et mettons \u00e0 jour l&rsquo;attribut <code>exampleText<\/code>avec ce qui a \u00e9t\u00e9 tap\u00e9 dans l&rsquo;entr\u00e9e.<\/p>\n<p>C&rsquo;est React de base &#8211; mis \u00e0 part le fait que nous travaillons avec des attributs et non avec des \u00e9tats. Si ce qui pr\u00e9c\u00e8de vous a d\u00e9rout\u00e9, je vous recommande de consulter un tutoriel rapide dans React, car ceux-ci vous expliqueront probablement mieux que moi !<\/p>\n<p>Actualisez votre \u00e9diteur et voyez comment le bloc fonctionne\u00a0! Vous devriez obtenir une entr\u00e9e de texte standard pour saisir des \u00e9l\u00e9ments, et elle sera enregistr\u00e9e chaque fois que vous cliquerez sur Enregistrer\/Mettre \u00e0 jour dans la post-\u00e9dition.<\/p>\n<h3>Le r\u00e9sultat en frontend et dans la base de donn\u00e9es<\/h3>\n<p>Si vous visualisez votre message en frontend, il devrait toujours faire \u00e9cho \u00e0 une div avec &quot;:)&quot; car c&rsquo;est ce que nous avons toujours dans notre <code>save<\/code>fonction. Mais quelque chose s&rsquo;est pass\u00e9 dans les coulisses! Le bloc de commentaire de notre bloc contient maintenant la valeur de notre attribut en JSON.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151357-61e4ca89cf1d2.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151357-61e4ca89cf1d2.png\" alt=\"Cr\u00e9er un bloc Gutenberg personnalis\u00e9 - Partie 4\u00a0: Attributs\" ><\/a><\/p>\n<p>Vous ne pouvez pas voir les blocs de commentaires dans un mod\u00e8le qui effectue un <code>the_content()<\/code>appel normal. Pour voir les blocs de commentaires, vous avez deux options. Soit regardez <code>post_content<\/code>dans le tableau de la base de donn\u00e9es des publications. Ou ajoutez <code>echo get_the_content()<\/code>le mod\u00e8le et regardez-le dans l&rsquo;outil d&rsquo;inspection\/de d\u00e9bogage.<\/p>\n<p>\u00c9videmment, nous avons \u00e9galement acc\u00e8s aux attributs \u00e0 <code>save<\/code>partir des accessoires.<\/p>\n<h3>Affichage de la valeur de l&rsquo;entr\u00e9e dans<code>save<\/code><\/h3>\n<p>Affichons la valeur de l&rsquo;attribut \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un div dans notre <code>save<\/code>fonction\u00a0:<\/p>\n<pre><code>save: (props) =&gt; { \n    const { attributes } = props;\n    return &lt;div&gt;{attributes.exampleText}&lt;\/div&gt;\n}<\/code><\/pre>\n<p>Remarque\u00a0: Apr\u00e8s avoir effectu\u00e9 cette modification, vous obtiendrez un bloc cass\u00e9 dans le message auquel vous avez d\u00e9j\u00e0 ajout\u00e9 ce bloc. Cela se produit parce que l&rsquo;\u00e9diteur rencontre une sortie diff\u00e9rente de <code>save<\/code>celle que nous avons d\u00e9finie maintenant. Retirez le bloc et rajoutez-le. Entrez quelque chose dans votre saisie de texte, mettez \u00e0 jour le message et affichez-le dans le frontend.<\/p>\n<p>Et c&rsquo;est l&rsquo;essentiel en fait. Vous d\u00e9cidez des attributs dont vous avez besoin pour enregistrer ce que vous voulez dans votre bloc. Dans <code>edit<\/code>vous rendrez les moyens de saisie pour l&rsquo;utilisateur, en veillant \u00e0 ce que les valeurs actuelles soient affich\u00e9es et \u00e0 les mettre \u00e0 jour chaque fois qu&rsquo;elles changent. Et <code>save<\/code>vous extrayez les attributs enregistr\u00e9s et rendez la sortie comme vous le souhaitez.<\/p>\n<p>Nous aborderons beaucoup plus de composants et d&rsquo;attributs diff\u00e9rents au fur et \u00e0 mesure de cette s\u00e9rie de didacticiels. Mais regardons un autre composant dans cet article afin de voir en quoi <code>source<\/code>consiste la propri\u00e9t\u00e9 d&rsquo;attribut.<\/p>\n<h2>RichText et la propri\u00e9t\u00e9 d&rsquo;attribut<code>source<\/code><\/h2>\n<p>Le composant WordPress <code>RichText<\/code>vous offre une zone de texte &quot;sans bordure&quot; avec prise en charge de la mise en forme du texte. Vous pr\u00e9f\u00e9rerez peut-\u00eatre utiliser ceci au lieu d&rsquo;une entr\u00e9e de texte ou d&rsquo;une zone de texte standard (laide?). Mais gardez \u00e0 l&rsquo;esprit que cela <code>RichText<\/code>doit \u00eatre g\u00e9r\u00e9 un peu diff\u00e9remment car il y a plusieurs accessoires dont vous devez \u00eatre conscient, et il y a une diff\u00e9rence dans la fa\u00e7on dont nous obtenons la valeur dans notre <code>save<\/code>fonction.<\/p>\n<h3>Ajout d&rsquo;un <code>RichText<\/code>composant<\/h3>\n<p>La forme la plus simple <code>RichText<\/code>est de l&rsquo;impl\u00e9menter comme vous le feriez avec une entr\u00e9e de texte\u00a0:<\/p>\n<pre><code>const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    attributes: {\n        myRichText: {\n            type: 'string',\n            default: ''\n        }\n    },\n    edit: (props) =&gt; { \n        const { attributes, setAttributes } = props;\n        return (&lt;div&gt;\n                &lt;RichText \n                    value={attributes.myRichText}\n                    onChange={(newtext) =&gt; setAttributes({ myRichText: newtext })}\n                \/&gt; \n            &lt;\/div&gt;\n        );\n    },\n    ...<\/code><\/pre>\n<p>Nous d\u00e9structurons le <code>RichText<\/code>composant du <code>wp.blockEditor<\/code>package, mais sinon, ce qui pr\u00e9c\u00e8de est identique \u00e0 ce que nous avons fait avec la saisie de texte standard.<\/p>\n<h3>Manipulation <code>save<\/code>avec<code>RichText<\/code><\/h3>\n<p>Cependant, dans la <code>save<\/code>fonction, vous devez r\u00e9utiliser le <code>RichText<\/code>composant pour obtenir la valeur de l&rsquo;attribut. Nous appelons <code>RichText.Content<\/code>et d\u00e9finissons la prop <code>value<\/code>sur notre attribut\u00a0:<\/p>\n<pre><code>save: (props) =&gt; { \n    const { attributes } = props;\n    return (&lt;div&gt;\n            &lt;RichText.Content \n                value={attributes.myRichText}\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}<\/code><\/pre>\n<p>Cela affichera tout ce qui a \u00e9t\u00e9 tap\u00e9 dans l&rsquo; <code>RichText<\/code>\u00e9diteur directement sans aucun code HTML.<\/p>\n<p>Lorsque vous travaillez avec <code>RichText<\/code>, vous souhaitez probablement contr\u00f4ler le wrapper HTML autour du texte, par exemple a <code>&lt;p&gt;<\/code>ou a <code>&lt;h2&gt;<\/code>, \u00e0 la fois dans le frontend et dans l&rsquo;\u00e9diteur. Pour cela, nous pouvons utiliser un accessoire appel\u00e9 <code>tagName<\/code>.<\/p>\n<p>Le composant <code>RichText<\/code>permet \u00e9galement plusieurs autres accessoires. Vous pouvez d\u00e9finir un texte d&rsquo;espace r\u00e9serv\u00e9 qui est affich\u00e9 (estomp\u00e9) lorsqu&rsquo;il est vide avec le <code>placeholder<\/code>prop. Le composant vous permet \u00e9galement de contr\u00f4ler les options de formatage autoris\u00e9es par le champ (les boutons affich\u00e9s dans la barre d&rsquo;outils).<\/p>\n<h3><code>RichText<\/code>avec<code>tagName<\/code><\/h3>\n<p>Avec le prop <code>tagName<\/code>, vous pouvez pr\u00e9d\u00e9finir la balise HTML dans laquelle sa sortie est envelopp\u00e9e. Lorsque vous l&rsquo;utilisez <code>tagName<\/code>, vous devez utiliser le m\u00eame <code>tagName<\/code>prop et la m\u00eame valeur dans <code>edit<\/code>et <code>save<\/code>.<\/p>\n<p>Supposons que vous souhaitiez mettre la valeur de votre attribut dans a <code>&lt;h2&gt;<\/code>, ce qui, dans l&rsquo;\u00e9diteur, forcera toute entr\u00e9e \u00e0 \u00eatre un h2. En <code>edit<\/code>tu peux faire :<\/p>\n<pre><code>&lt;RichText \n    tagName=\"h2\"\n    placeholder=\"Write your heading here\"\n    value={attributes.myRichText}\n    onChange={(newtext) =&gt; setAttributes({ myRichText: newtext })}\n\/&gt;<\/code><\/pre>\n<p>Et dans <code>save<\/code>:<\/p>\n<pre><code>&lt;RichText.Content \n    tagName=\"h2\"\n    value={attributes.myRichText}\n\/&gt;<\/code><\/pre>\n<p>Ce qui pr\u00e9c\u00e8de affichera maintenant tout ce qui a \u00e9t\u00e9 tap\u00e9 dans la <code>RichText<\/code>zone \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une <code>&lt;h2&gt;<\/code>balise.<\/p>\n<h3>Utilisant<code>source<\/code><\/h3>\n<p>\u00c9videmment, vous pouvez combiner plusieurs richtext pour un bloc, par exemple un pour le titre et un pour un paragraphe. N&rsquo;oubliez pas que chacun aura besoin de son propre attribut. Par exemple:<\/p>\n<pre><code>attributes: {\n    myRichHeading: {\n        type: 'string'\n    },\n    myRichText: {\n        type: 'string'\n    }\n},\nedit: (props) =&gt; { \n    const { attributes, setAttributes } = props;\n    return (&lt;div&gt;\n            &lt;RichText \n                tagName=\"h2\"\n                placeholder=\"Write your heading here\"\n                value={attributes.myRichHeading}\n                onChange={(newtext) =&gt; setAttributes({ myRichHeading: newtext })}\n            \/&gt;\n            &lt;RichText\n                tagName=\"p\"\n                placeholder=\"Write your paragraph here\"\n                value={attributes.myRichText}\n                onChange={(newtext) =&gt; setAttributes({ myRichText: newtext })}\n            \/&gt;\n        &lt;\/div&gt;\n    );\n},\nsave: (props) =&gt; { \n    const { attributes } = props;\n    return (&lt;div&gt;\n            &lt;RichText.Content \n                tagName=\"h2\"\n                value={attributes.myRichHeading}\n            \/&gt;\n            &lt;RichText.Content \n                tagName=\"p\"\n                value={attributes.myRichText}\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}<\/code><\/pre>\n<p>Cependant, vous allez maintenant commencer \u00e0 rencontrer des probl\u00e8mes. M\u00eame si vous pouvez faire du formatage de texte dans l&rsquo;\u00e9diteur, rien (ou une partie) de votre formatage ne sera pas enregistr\u00e9. Lorsque vous affichez le message en frontend, il appara\u00eetra simplement sous la forme d&rsquo; <code>h2<\/code>un <code>p<\/code>, sans aucune mise en forme que vous ayez effectu\u00e9e (italique, gras, lien). M\u00eame le bloc de commentaires de votre bloc ne contient pas la mise en forme. C&rsquo;est la chose d\u00e9licate avec <code>RichText<\/code>. Pour r\u00e9soudre ce probl\u00e8me, nous devons travailler avec la propri\u00e9t\u00e9 d&rsquo;attribut <code>source<\/code>.<\/p>\n<p>La <code>source<\/code>propri\u00e9t\u00e9 permettant \u00e0 WordPress d&rsquo;extraire et d&rsquo;interpr\u00e9ter le contenu directement \u00e0 partir du contenu de la publication. Si un attribut n&rsquo;est pas <code>source<\/code>d\u00e9fini, il sera enregistr\u00e9 et extrait du bloc de commentaire HTML.<\/p>\n<p>Lorsque nous travaillons avec, <code>RichText<\/code>nous d\u00e9finissons g\u00e9n\u00e9ralement <code>source<\/code>sur <code>html<\/code>, qui utilise la biblioth\u00e8que de WordPress pour analyser le balisage HTML. La propri\u00e9t\u00e9 <code>source<\/code>fonctionne avec une autre propri\u00e9t\u00e9 d&rsquo;attribut ; <code>selector<\/code>qui d\u00e9finit de quelle balise HTML il doit extraire.<\/p>\n<p>\u00c0 titre d&rsquo;exemple, nous avons d\u00e9fini <code>source<\/code>comme <code>html<\/code>sur notre paragraphe <code>RichText<\/code>et d\u00e9fini <code>selector<\/code>comme <code>p<\/code>(sinon, il est par d\u00e9faut \u00e0 la racine de bloquer le bloc).<\/p>\n<pre><code>attributes: {\n    ...\n    myRichText: {\n        type: 'string',\n        source: 'html',\n        selector: 'p'\n    }\n},<\/code><\/pre>\n<p>Maintenant, notre deuxi\u00e8me <code>RichText<\/code>devrait enregistrer avec succ\u00e8s tout son formatage de texte. Vous remarquerez \u00e9galement que le bloc de commentaire n&rsquo;affiche d\u00e9sormais que l&rsquo; <code>myRichHeading<\/code>attribut en JSON. L&rsquo;attribut <code>myRichText<\/code>a compl\u00e8tement disparu du bloc de commentaire. En effet, <code>source<\/code>WordPress analyse d\u00e9sormais le contenu de la publication au lieu du bloc de commentaire pour la valeur de l&rsquo;attribut.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151357-61e4ca8ab1967.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151357-61e4ca8ab1967.png\" alt=\"Cr\u00e9er un bloc Gutenberg personnalis\u00e9 - Partie 4\u00a0: Attributs\" ><\/a><\/p>\n<p>Pour \u00eatre parfaitement honn\u00eate, je n&rsquo;ai pas du tout travaill\u00e9 avec l&rsquo; <code>source<\/code>attribut et je recommanderais de l&rsquo;\u00e9viter si vous le pouvez. La documentation de WordPress explique un peu plus sur la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-attributes\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">source et les attributs<\/a> que vous souhaitez v\u00e9rifier par vous-m\u00eame.<\/p>\n<p>Dans cet article, nous avons appris les bases des attributs\u00a0; comment les d\u00e9finir, les mettre \u00e0 jour et sortir leurs valeurs. Dans les prochaines \u00e9tapes, nous examinerons plus de composants diff\u00e9rents et comment ajouter des param\u00e8tres en dehors du contenu du bloc lui-m\u00eame\u00a0; dans la barre d&rsquo;outils et la barre lat\u00e9rale de l&rsquo;\u00e9diteur (appel\u00e9e Inspecteur).<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cette le\u00e7on de bloc de Gutenberg pour les d\u00e9butants, nous verrons comment d\u00e9finir des attributs, r\u00e9cup\u00e9rer leurs valeurs et les mettre \u00e0 jour.<\/p>\n","protected":false},"author":1,"featured_media":151358,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[936,936,1110,811,811,841,841,862,862],"tags":[1167],"class_list":["post-234280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-3","category-n-a","category-plugins-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234280"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234280\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/151358"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}