{"id":234228,"date":"2023-02-17T10:49:00","date_gmt":"2023-02-17T07:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234228"},"modified":"2022-11-12T01:12:09","modified_gmt":"2022-11-11T22:12:09","slug":"creer-un-bloc-gutenberg-personnalise-partie-7-creez-vos-propres-composants-personnalises","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-un-bloc-gutenberg-personnalise-partie-7-creez-vos-propres-composants-personnalises\/","title":{"rendered":"Cr\u00e9er un bloc Gutenberg personnalis\u00e9 – Partie 7\u00a0: Cr\u00e9ez vos propres composants personnalis\u00e9s"},"content":{"rendered":"\n

Jusqu’\u00e0 pr\u00e9sent, dans cette s\u00e9rie de didacticiels, nous avons \u00e9crit tout le code dans registerBlockType()<\/code>la edit<\/code>fonction de. Il est tout \u00e0 fait possible, et souvent recommand\u00e9, d’affecter \u00e0 la place la modification \u00e0 un composant distinct. Ce faisant, nous pouvons utiliser des fonctionnalit\u00e9s telles que l’\u00e9tat des composants et les m\u00e9thodes de cycle de vie. C’est aussi beaucoup plus propre, lisible et fournit un code r\u00e9utilisable !<\/p>\n

Si vous n’\u00eates pas familiaris\u00e9 avec la cr\u00e9ation de composants React ou les m\u00e9thodes d’\u00e9tat et de cycle de vie, je vous recommande de lire d’abord le guide officiel de React sur ce sujet<\/a>.<\/p>\n

D\u00e9finition d’un composant de classe pouredit<\/code><\/h2>\n

Vous pouvez d\u00e9finir un composant soit comme une fonction soit comme une classe. Avec un composant de classe, vous pouvez utiliser des fonctionnalit\u00e9s telles que les m\u00e9thodes d’\u00e9tat et de cycle de vie. Cependant, dans les nouvelles versions de React (16+), vous pouvez utiliser les crochets React pour simuler les m\u00e9thodes d’\u00e9tat et de cycle de vie \u00e0 l’int\u00e9rieur des composants de fonction. Mais dans ce didacticiel, nous nous concentrerons sur la cr\u00e9ation d’un composant de classe. Ce que nous avons cr\u00e9\u00e9 jusqu’\u00e0 pr\u00e9sent dans cette s\u00e9rie, "en ligne" dans registerBlockType()<\/code>for edit<\/code>et save<\/code>, sont des composants de fonction.<\/p>\n

Pour d\u00e9finir un composant de classe, nous \u00e9tendons WordPress’ Component<\/code>(dans wp.element<\/code>package), exactement comme vous \u00e9tendriez un composant de classe \u00e0 React.Component<\/code>.<\/p>\n

Gardez \u00e0 l’esprit que votre composant de classe doit inclure la fonction render()<\/code>. Et \u00e0 cause du fonctionnement de Javascript, votre classe doit \u00eatre d\u00e9finie avant votre registerBlockType()<\/code>appel (\u00e9crivez d’abord votre composant de classe dans le fichier, et conservez-le registerBlockType()<\/code>apr\u00e8s. Plus tard dans cet article, nous apprendrons comment s\u00e9parer les composants dans des fichiers s\u00e9par\u00e9s, exporter et inclure leur).<\/p>\n

Bref, comme \u00e7a :<\/p>\n

const { registerBlockType } = wp.blocks;\nconst { Component } = wp.element;\n\u00a0\nclass FirstBlockEdit extends Component {\n    render() {\n        const { attributes, setAttributes } = this.props;\n        return ...\n    }\n}\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    edit: FirstBlockEdit,\n    save: (props) => { \n        return ...\n    }\n});<\/code><\/pre>\n
Les accessoires de edit<\/code>sont automatiquement appliqu\u00e9s \u00e0 notre composant. N’oubliez pas qu’un composant de classe dont vous avez besoin pour faire r\u00e9f\u00e9rence aux accessoires avec this.props<\/code>. Il est courant dans le noyau de WordPress Gutenberg d’utiliser des composants s\u00e9par\u00e9s pour les edit<\/code>fonctions car ils contiennent le plus souvent beaucoup plus de code. La save<\/code>fonction peut souvent \u00eatre laiss\u00e9e \u00e0 registerBlockType()<\/code>moins qu’elle ne contienne \u00e9galement beaucoup de code.<\/p>\n
En faisant cela, vous pouvez maintenant \u00e9crire votre composant comme vous le feriez avec React. Vous pouvez ajouter des fonctions, des constructeurs, des \u00e9tats et des m\u00e9thodes de cycle de vie.<\/p>\n
Voici le code auquel nous nous sommes retrouv\u00e9s \u00e0 la derni\u00e8re \u00e9tape, converti en un composant de classe\u00a0:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { Component } = wp.element;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker, Toolbar, IconButton } = wp.components;\n\u00a0\nclass FirstBlockEdit extends Component {\n\u00a0\n    render() {\n        const { attributes, setAttributes } = this.props;\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return (<div className={alignmentClass}>\n                <InspectorControls>\n                    <PanelBody\n                        title=\"Most awesome settings ever\"\n                        initialOpen={true}\n                    >\n                        <PanelRow>\n                            <ToggleControl\n                                label=\"Toggle me\"\n                                checked={attributes.toggle}\n                                onChange={(newval) => setAttributes({ toggle: newval })}\n                            \/>\n                        <\/PanelRow>\n                        <PanelRow>\n                            <SelectControl\n                                label=\"What's your favorite animal?\"\n                                value={attributes.favoriteAnimal}\n                                options={[\n                                    {label: \"Dogs\", value: 'dogs'},\n                                    {label: \"Cats\", value: 'cats'},\n                                    {label: \"Something else\", value: 'weird_one'},\n                                ]}\n                                onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n                            \/>\n                        <\/PanelRow>\n                        <PanelRow>\n                            <ColorPicker\n                                color={attributes.favoriteColor}\n                                onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n                                disableAlpha\n                            \/>\n                        <\/PanelRow>\n                        <PanelRow>\n                            <CheckboxControl\n                                label=\"Activate lasers?\"\n                                checked={attributes.activateLasers}\n                                onChange={(newval) => setAttributes({ activateLasers: newval })}\n                            \/>\n                        <\/PanelRow>\n                    <\/PanelBody>\n                <\/InspectorControls>\n                <BlockControls>\n                    <AlignmentToolbar\n                        value={attributes.textAlignment}\n                        onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n                    \/>\n                    <Toolbar>\n                        <IconButton\n                            label=\"My very own custom button\"\n                            icon=\"edit\"\n                            className=\"my-custom-button\"\n                            onClick={() => console.log('pressed button')}\n                        \/>\n                    <\/Toolbar>\n                <\/BlockControls>\n                <RichText \n                    tagName=\"h2\"\n                    placeholder=\"Write your heading here\"\n                    value={attributes.myRichHeading}\n                    onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n                \/>\n                <RichText\n                    tagName=\"p\"\n                    placeholder=\"Write your paragraph here\"\n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/>\n            <\/div>\n        );\n    }\n}\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    icon: 'smiley',\n    description: 'Learning in progress',\n    keywords: ['example', 'test'],\n    attributes: {\n        myRichHeading: {\n            type: 'string',\n        },\n        myRichText: {\n            type: 'string',\n            source: 'html',\n            selector: 'p'\n        },\n        textAlignment: {\n            type: 'string',\n        },\n        toggle: {\n            type: 'boolean',\n            default: true\n        },\n        favoriteAnimal: {\n            type: 'string',\n            default: 'dogs'\n        },\n        favoriteColor: {\n            type: 'string',\n            default: '#DDDDDD'\n        },\n        activateLasers: {\n            type: 'boolean',\n            default: false\n        },\n    },\n    supports: {\n        align: ['wide', 'full']\n    },\n    edit: FirstBlockEdit,\n    save: (props) => { \n        const { attributes } = props;\n\u00a0\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return (<div className={alignmentClass}>\n                <RichText.Content \n                    tagName=\"h2\"\n                    value={attributes.myRichHeading}\n                \/>\n                <RichText.Content \n                    tagName=\"p\"\n                    value={attributes.myRichText}\n                \/>\n                {attributes.activateLasers && \n                    <div className=\"lasers\">Lasers activated<\/div>\n                }\n            <\/div>\n        );\n    }\n});<\/code><\/pre>\n
Si vous avez d\u00e9structur\u00e9 attributes<\/code>et setAttributes<\/code>\u00e0 partir d’accessoires comme nous l’avons fait, tout ce que vous devez changer lorsque vous passez \u00e0 un composant de classe s\u00e9par\u00e9 est de changer une ligne ; #9<\/code>de props<\/code>\u00e0 this.props<\/code>. Tout le code fonctionnera comme avant sans rien r\u00e9parer d’autre. C’est la beaut\u00e9 de la d\u00e9structuration. Si vous ne l’avez pas d\u00e9structur\u00e9 et que vous vous y \u00eates r\u00e9f\u00e9r\u00e9 props.attributes<\/code>directement, par exemple, vous devrez ajouter this.<\/code>devant toutes les r\u00e9f\u00e9rences individuelles \u00e0 attributes<\/code>et setAttributes<\/code>partout.<\/p>\n
Commen\u00e7ons \u00e0 faire des choses que nous pouvons maintenant faire avec un composant de classe\u00a0!<\/p>\n
D\u00e9finir les fonctions etthis<\/code><\/h2>\n
Certes, oui, vous pouvez d\u00e9finir des fonctions \u00e0 partir du edit<\/code>composant de fonction, avant d’appeler return<\/code>. Mais personnellement, j’ai toujours pr\u00e9f\u00e9r\u00e9 s\u00e9parer les fonctionnalit\u00e9s par la logique. Je trouve pr\u00e9f\u00e9rable de s\u00e9parer les fonctions \u00e0 des fins logiques et autres en dehors de la fonction responsable du rendu de la sortie. Certaines personnes pr\u00e9f\u00e8rent \u00e9galement appeler des fonctions dans des \u00e9v\u00e9nements, au lieu de les faire en ligne comme nous l’avons fait jusqu’\u00e0 pr\u00e9sent (setAttributes()<\/code>par onChange<\/code>exemple).<\/p>\n
\u00c0 l’heure actuelle, notre code contient deux choses qui pourraient \u00eatre b\u00e9n\u00e9fiques pour passer aux fonctions\u00a0; InspectorControls<\/code>et BlockControls<\/code>. Cela raccourcira return<\/code>consid\u00e9rablement notre et rendra notre code plus facile \u00e0 lire.<\/p>\n
Nous d\u00e9finissons deux fonctions qui renvoient le InspectorControls<\/code>bloc entier et le BlockControls<\/code>bloc entier. En utilisant les fonctions fl\u00e9ch\u00e9es (functionName =() => { ... }<\/code>), nous avons un acc\u00e8s complet \u00e0 this<\/code>pour obtenir des accessoires. Si vous n’avez pas fait la derni\u00e8re partie de l’\u00e9tape 1 – configurer Babel avec les syntaxes les plus r\u00e9centes, vous obtiendrez des erreurs de compilation. Vous devrez recourir \u00e0 la cr\u00e9ation d’un constructeur et d’une liaison this<\/code>pour chaque fonction. Vous pouvez en savoir plus sur la manipulation this<\/code>au d\u00e9but de la page FAQ de React<\/a>.<\/p>\n
Rappelez-vous \u00e9galement que parce que nous sommes dans une classe maintenant, vous devez appeler toutes ses fonctions avec this.<\/code>devant.<\/p>\n
class FirstBlockEdit extends Component {\n\u00a0\n    getInspectorControls =() => {\n        const { attributes, setAttributes } = this.props;\n\u00a0\n        return (<InspectorControls>\n                ...\n            <\/InspectorControls>\n        );\n    }\n\u00a0\n    getBlockControls = () => {\n        const { attributes, setAttributes } = this.props;\n\u00a0\n        return (<BlockControls>\n                ...\n            <\/BlockControls>\n        );\n    }\n\u00a0\n    render() {\n        const { attributes, setAttributes } = this.props;\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return ([\n            this.getInspectorControls(),\n            this.getBlockControls(),\n            <div className={alignmentClass}>\n                <RichText \n                    tagName=\"h2\"\n                    placeholder=\"Write your heading here\"\n                    value={attributes.myRichHeading}\n                    onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n                \/>\n                <RichText\n                    tagName=\"p\"\n                    placeholder=\"Write your paragraph here\"\n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/>\n            <\/div>\n        ]);\n    }\n}<\/code><\/pre>\n
Notez que j’ai exclu le contenu r\u00e9el de InspectorControls<\/code>et BlockControls<\/code>pour garder le code plus court. Rien dans leur code ne doit changer.<\/p>\n
Nous utilisons \u00e9galement le fait que l’ return<\/code>instruction peut \u00e9galement renvoyer un tableau. Tout dans le tableau sera rendu comme d’habitude dans l’ordre dans lequel ils se trouvent. Cela nous permet d’appeler facilement des fonctions directement \u00e0 l’int\u00e9rieur de l’ return<\/code>instruction.<\/p>\n
Vous pouvez \u00e9videmment \u00e9galement d\u00e9finir des m\u00e9thodes de cycle de vie, telles que componentDidMount()<\/code>. Il n’y a aucune diff\u00e9rence \u00e0 faire cela dans les composants Gutenberg que dans React.<\/p>\n
Constructeur et \u00e9tat d’utilisation<\/h2>\n
Essayons d’impl\u00e9menter l’\u00e9tat dans notre composant. Gardez \u00e0 l’esprit que l’\u00e9tat n’est que quelque chose de stock\u00e9 temporairement dans notre composant de classe et n’est enregistr\u00e9 nulle part, comme dans les attributs. C’est juste pour garder le contr\u00f4le de – enfin – l’\u00e9tat de votre composant. Les utilisations courantes de l’\u00e9tat consistent \u00e0 utiliser l’\u00e9tat comme indicateur d’\u00e9tat en attendant le retour d’un appel asynchrone, \u00e0 conserver le score de quelque chose de temporaire avant de l’enregistrer dans un attribut ou \u00e0 impl\u00e9menter des "modes de pr\u00e9visualisation\/\u00e9dition" de bloc.<\/p>\n
Vous vous r\u00e9f\u00e9rez \u00e0 l’\u00e9tat et \u00e0 l’\u00e9tat de mise \u00e0 jour comme dans React ; avec this.state<\/code>et setState()<\/code>. Normalement, vous initialisez l’\u00e9tat dans le constructeur. Et en ce qui concerne la d\u00e9finition d’un constructeur – c’est exactement comme dans React – n’oubliez pas de passer props<\/code>et de faire super(props)<\/code>aussi. Bref:<\/p>\n
class FirstBlockEdit extends Component {\n    constructor(props) {\n        super(props);\n\u00a0\n        this.state = {\n            example: 1\n        }\n    }\n\u00a0\n    render() {\n        this.setState({ example: 2 });\n        console.log(this.state.example);\n        ...<\/code><\/pre>\n
Bascule d’\u00e9dition\/d’aper\u00e7u du mode bloc<\/h3>\n
Utilisons ce que nous avons appris \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente dans les barres d’outils pour cr\u00e9er un "s\u00e9lecteur de mode" pour notre bloc. Nous impl\u00e9mentons une barre d’outils avec un bouton qui bascule l’\u00e9tat entre le mode aper\u00e7u et le mode \u00e9dition. En mode \u00e9dition, le bloc obtient les deux composants RichText comme d’habitude. Mais lors du passage en mode aper\u00e7u, nous avons d\u00e9sactiv\u00e9 l’\u00e9dition et rendu la sortie du bloc.<\/p>\n
Nous cr\u00e9ons d’abord un constructeur et configurons l’\u00e9tat avec une propri\u00e9t\u00e9 bool\u00e9enne ; editMode<\/code>qui commence par true<\/code>. Le super(props)<\/code>est n\u00e9cessaire lors de la d\u00e9finition d’un constructeur dans un composant React bas\u00e9 sur une classe.<\/p>\n
class FirstBlockEdit extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            editMode: true\n        }\n    }\n    ...<\/code><\/pre>\n
Dans notre fonction de sortie des barres d’outils, nous modifions le bouton personnalis\u00e9 que nous avons cr\u00e9\u00e9 pr\u00e9c\u00e9demment (qui ne fait que console.log<\/code>quelque chose en cliquant dessus). Sur sa onClick<\/code>prop, nous appelons setState()<\/code>et annulons la editMode<\/code>valeur bool\u00e9enne actuelle. Pour faciliter la compr\u00e9hension de l’utilisateur, nous basculons \u00e9galement entre l’ic\u00f4ne et l’\u00e9tiquette du bouton. Par exemple, lorsque le mode de pr\u00e9visualisation est actif, le bouton affiche l’\u00e9tiquette "Modifier" et une ic\u00f4ne en forme de crayon qui est g\u00e9n\u00e9ralement acceptable comme modification.<\/p>\n
getBlockControls = () => {\n    const { attributes, setAttributes } = this.props;\n    return (<BlockControls>\n            <AlignmentToolbar\n                value={attributes.textAlignment}\n                onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n            \/>\n            <Toolbar>\n                <IconButton\n                    label={ this.state.editMode? \"Preview\": \"Edit\" }\n                    icon={ this.state.editMode? \"format-image\": \"edit\" }\n                    onClick={() => this.setState({ editMode: !this.state.editMode })}\n                \/>\n            <\/Toolbar>\n        <\/BlockControls>\n    );\n}<\/code><\/pre>\n
Et enfin, dans la m\u00e9thode de rendu principale de notre bloc, nous pouvons faire ce que nous voulons. Cette partie d\u00e9pend vraiment de vous – vous faites la m\u00eame chose que nous avons fait avec l’\u00e9tiquette et l’ic\u00f4ne sur le bouton ci-dessus. Nous ajoutons deux blocs de sortie, un if this.state.editMode<\/code>is true<\/code>(qui devrait \u00eatre les composants modifiables habituels RichText<\/code>), et un autre if it’s false<\/code>.<\/p>\n
\u00c0 titre d’exemple, j’utilise deux composants WordPress de wp.components<\/code>; Placeholder<\/code>et Disabled<\/code>pour le mode de pr\u00e9visualisation. Le Placeholder<\/code>composant place votre bloc dans une jolie bo\u00eete grise, ce qui indique tr\u00e8s clairement qu’il n’est pas modifiable. Gardez \u00e0 l’esprit qu’il est livr\u00e9 avec un style, donc si vous vouliez un aper\u00e7u parfait, cela pourrait ne pas \u00eatre pour vous. Et Disabled<\/code>j’enveloppe \u00e9galement tout dans un composant qui rend tout \u00e0 l’int\u00e9rieur non modifiable, non cliquable et non d\u00e9pla\u00e7able. Voici notre nouvelle render()<\/code>fonction dans notre composant\u00a0:<\/p>\n
const { ..., Fragment } = wp.element;\nconst {... Placeholder, Disabled } = wp.components;  \/\/ Don't forget to add these at the top\n\u00a0\n...\nrender() {\n    const { attributes, setAttributes } = this.props;\n    const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n    return ([\n        this.getInspectorControls(),\n        this.getBlockControls(),\n        <div className={alignmentClass}>\n            {this.state.editMode && \n                <Fragment>\n                    <RichText \n                        tagName=\"h2\"\n                        placeholder=\"Write your heading here\"\n                        value={attributes.myRichHeading}\n                        onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n                    \/>\n                    <RichText\n                        tagName=\"p\"\n                        placeholder=\"Write your paragraph here\"\n                        value={attributes.myRichText}\n                        onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                    \/>\n                <\/Fragment>\n            }\n            {!this.state.editMode && \n                <Placeholder isColumnLayout={true}>\n                    <Disabled>\n                        <RichText.Content \n                            tagName=\"h2\"\n                            value={attributes.myRichHeading}\n                        \/>\n                        <RichText.Content\n                            tagName=\"p\"\n                            value={attributes.myRichText}\n                        \/>\n                    <\/Disabled>\n                <\/Placeholder>\n            }\n        <\/div>\n    ]);\n}\n...<\/code><\/pre>\n
J’utilise \u00e9galement un composant Fragment<\/code>( wp.element<\/code>package) qui est le m\u00eame que React.Fragment<\/code>. Si vous ne le connaissez pas, nous encapsulons la sortie \u00e0 l’int\u00e9rieur lorsque nous ne voulons pas ajouter d’encapsuleurs HTML suppl\u00e9mentaires inutiles. Dans React, tout doit avoir un n\u0153ud racine. Lorsque le mode d’\u00e9dition est actif (ligne #13<\/code>), nous produisons deux RichText<\/code>composants l’un apr\u00e8s l’autre, nous avons donc besoin d’un n\u0153ud racine autour d’eux.<\/p>\n
Lorsque le mode aper\u00e7u est actif (ligne #29<\/code>), nous affichons les RichText<\/code>valeurs des deux composants. Comme nous le faisons dans save<\/code>, nous utilisons RichText.Content<\/code>pour renvoyer leurs valeurs au lieu du petit \u00e9diteur.<\/p>\n
Le composant Placeholder<\/code>est disponible dans le style flex et par d\u00e9faut avec la ligne flex-direction. Fournir true<\/code>dans l’accessoire le isColumnLayout<\/code>change en colonne flex-direction (donc tout s’empile). Mais comme mentionn\u00e9 pr\u00e9c\u00e9demment, vous voudrez peut-\u00eatre ignorer ce composant et plut\u00f4t g\u00e9n\u00e9rer votre aper\u00e7u exactement comme il le serait dans le frontend.<\/p>\n
Et avec cela, nous avons un basculeur de pr\u00e9visualisation\/\u00e9dition en mode bloc. \u00c9videmment, vous pouvez ajuster le contenu du "mode d’\u00e9dition" pour afficher par exemple les entr\u00e9es de contr\u00f4le ou autres.<\/p>\n<\/p>\n
Vous pouvez cr\u00e9er autant de composants que vous le souhaitez, vous n’\u00eates pas limit\u00e9 \u00e0 n’en avoir qu’un pour la edit<\/code>fonction! Cr\u00e9ez simplement plus de composants et incluez-les dans une return<\/code>d\u00e9claration. C’est l’id\u00e9e de React, en fait – construire des morceaux de code encapsul\u00e9s, chacun g\u00e9rant \u00e9ventuellement son propre \u00e9tat et les combinant pour cr\u00e9er des interfaces utilisateur complexes.<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Dans cette partie de notre didacticiel sur les blocs Gutenberg, nous apprendrons comment d\u00e9placer la fonction d’\u00e9dition de registerBlockType vers un composant s\u00e9par\u00e9 bas\u00e9 sur une classe.<\/p>\n","protected":false},"author":1,"featured_media":152941,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,717,717,832,936,936,1110,801,801,832,841,841,862,862],"tags":[1167],"class_list":{"0":"post-234228","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-code-2","9":"category-developpeur","11":"category-guide-pour-les-debutants","12":"category-gutenberg-3","14":"category-n-a","15":"category-php-3","18":"category-tutoriels","20":"category-wordpress-3","22":"tag-affiai-fr"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234228","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=234228"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234228\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/152941"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}