Cet article est une introduction rapide \u00e0 un moyen de maintenir votre code Gutenberg aux normes actuelles en utilisant les crochets React. Nous verrons comment cela est b\u00e9n\u00e9fique, pourquoi nous devrions le faire et comment.<\/p>\n
Je suppose que vous avez d\u00e9j\u00e0 une certaine exp\u00e9rience de travail avec des blocs ou des plugins Gutenberg un peu plus complexes qui interrogent les messages, ou r\u00e9cup\u00e8rent et mettent \u00e0 jour les m\u00e9ta post. Et donc travaill\u00e9 avec D\u00e9but 2019, React a lanc\u00e9 des crochets<\/a> (version 16.8) – qui vous permettent d’utiliser l’\u00e9tat sans utiliser de classe et d’am\u00e9liorer d’autres fonctionnalit\u00e9s qui donnent un code plus lisible et r\u00e9utilisable. Par exemple, en supprimant la n\u00e9cessit\u00e9 d’envelopper votre code dans des composants d’ordre sup\u00e9rieur afin d’acc\u00e9der aux registres. Et \u00e0 l’\u00e9t\u00e9 2019, WordPress a suivi<\/a>, en lan\u00e7ant des hooks personnalis\u00e9s: Les avantages des crochets sont nombreux. L’exemple le plus courant permet d’utiliser l’\u00e9tat du composant sans avoir \u00e0 \u00e9crire une classe Javascript ( Passons directement \u00e0 quelques exemples et voyons comment impl\u00e9menter Commen\u00e7ons par \u00c0 des fins de d\u00e9monstration, je commencerai par un exemple simple. Supposons que j’ai un composant de bloc o\u00f9 j’ai un s\u00e9lecteur de publication quelque part. Afin de remplir les choix de publication, j’ai besoin d’acc\u00e9der au registre ‘ Si je veux interroger des publications dans un bloc, je devrais envelopper mon composant dans Veuillez noter que cet exemple de code n’est pas complet en tant que v\u00e9ritable bloc fonctionnel ou plug-in JS, il a \u00e9t\u00e9 supprim\u00e9 pour ne montrer que les concepts de base de Comme vous pouvez le voir en ligne Comme mentionn\u00e9 pr\u00e9c\u00e9demment, cette m\u00e9thode fonctionne tr\u00e8s bien – et continuera de le faire. Mais il y a plusieurs inconv\u00e9nients \u00e0 cela. La premi\u00e8re est que ce n’est pas tr\u00e8s facile \u00e0 comprendre. Bien s\u00fbr, c’\u00e9tait un exemple tr\u00e8s simple. \u00c0 premi\u00e8re vue, au composant lui-m\u00eame, vous ne savez pas d’o\u00f9 Faisons mieux en utilisant des crochets.<\/p>\n Convertir un Le code ci-dessus fournit exactement le m\u00eame r\u00e9sultat que celui avec Note importante<\/strong>: Regardons maintenant Encore une fois, \u00e0 des fins de d\u00e9monstration, mes exemples de code ne sont pas des morceaux de code fonctionnels complets – ils illustrent uniquement les parties concernant ces mod\u00e8les. Dans cet exemple, je suppose que j’ai un champ de texte affichant une m\u00e9ta de publication – et je souhaite mettre \u00e0 jour la valeur de la m\u00e9ta de publication en cas de modification.<\/p>\n Comme Par exemple:<\/p>\n \u00c0 la ligne, Encore une fois, nous pouvons voir que le code n’est pas aussi simple \u00e0 comprendre. Vous devez savoir rechercher l’emballage afin de d\u00e9terminer ce qu’est Changer Par exemple:<\/p>\n Chez line Pourtant, l’utilisation Il y a de fortes chances que si vous utilisez Si vous avez besoin d’utiliser plusieurs composants d’ordre sup\u00e9rieur enroul\u00e9s autour de votre composant, vous utiliserez tr\u00e8s probablement une autre fonction Gutenberg\u00a0; Regardons un exemple plus complet d’un composant qui r\u00e9cup\u00e8re une m\u00e9ta-valeur post dans un champ de texte et se met \u00e0 jour lorsque sa valeur est modifi\u00e9e. Nous commen\u00e7ons par la fa\u00e7on dont nous devrions nous y prendre en utilisant Chez line Comme vous pouvez le voir, le code n\u00e9cessaire en dehors de notre composant est plus long que le composant lui-m\u00eame. Je ne sais pas pour vous, mais pour moi, c’est un peu d\u00e9cousu. Les d\u00e9veloppeurs peuvent commencer \u00e0 lire ce code par le haut, sans voir la partie inf\u00e9rieure, et commencer \u00e0 se demander d’o\u00f9 Regardons comment nous convertirions l’exemple ci-dessus en crochets.<\/p>\n Qu’est-ce que c’est beau et lisible\u00a0?\u00a0! Nous pouvons voir imm\u00e9diatement dans notre composant Notez que dans la J’esp\u00e8re que cela a \u00e9t\u00e9 instructif et utile pour quelqu’un. Je connais encore un peu mal les hame\u00e7ons, mais voyant les avantages de les utiliser je ne reviens pas en arri\u00e8re !<\/p>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withSelect)<\/code>et\/ou [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#withDispatch)<\/code>. Ce sont des composants d’ordre sup\u00e9rieur dans WordPress qui vous permettent d’acc\u00e9der aux magasins WordPress afin de r\u00e9cup\u00e9rer ou de pousser des informations un peu en dehors du bloc "normal" ou de la post-\u00e9dition. Vous avez peut-\u00eatre \u00e9galement \u00e9t\u00e9 oblig\u00e9 d’utiliser compose<\/code>afin de combiner votre composant avec plusieurs composants d’ordre sup\u00e9rieur. Si votre code utilise ces mod\u00e8les, ne vous inqui\u00e9tez pas\u00a0: ils fonctionnent parfaitement et continueront de fonctionner\u00a0! Mais \u00e0 mesure que la technologie progresse, nous pouvons faire mieux.<\/p>\n[useDispatch](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useDispatch)<\/code>et [useSelect](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useSelect)<\/code>.<\/p>\nuseState<\/code>). Mais \u00e0 mon avis, le plus grand avantage est la r\u00e9utilisabilit\u00e9. En supprimant la n\u00e9cessit\u00e9 d’utiliser des mod\u00e8les tels que des accessoires de rendu et des composants d’ordre sup\u00e9rieur, les composants peuvent \u00eatre \u00e9crits en morceaux beaucoup plus ind\u00e9pendants. Un autre avantage des crochets est qu’ils rendent votre code plus facile \u00e0 lire et \u00e0 comprendre !<\/p>\nuseSelect<\/code>et useDispatch<\/code>crocheter notre code\u00a0!<\/p>\nEx\u00e9cution
useSelect<\/code><\/h2>\nwithSelect<\/code>et son crochet correspondant useSelect<\/code>. Ceux-ci sont utilis\u00e9s pour obtenir des accessoires d\u00e9riv\u00e9s de l’\u00e9tat \u00e0 partir de s\u00e9lecteurs enregistr\u00e9s. Des exemples courants sont l’acc\u00e8s aux s\u00e9lecteurs ‘ core<\/code>‘ ou ‘ core\/editor<\/code>‘ afin d’effectuer des requ\u00eates pour les publications (getEntityRecords<\/code>), acc\u00e9der \u00e0 la m\u00e9ta des publications (getEditedPostAttribute<\/code>) ou simplement obtenir le type de publication actuel ou d’autres informations.<\/p>\ncore<\/code>‘ et d’effectuer un GetEntityRecords()<\/code>appel.<\/p>\nUtilisation \u00e0 l’ancienne
withSelect<\/code><\/h3>\nwithSelect<\/code>. Cela se fait couramment dans la export<\/code>d\u00e9claration.<\/p>\nwithSelect<\/code>. Si vous recherchez des exemples de code pratiques, j’ai d’autres articles qui traitent de cela: par exemple, comment impl\u00e9menter des blocs avec un post select<\/a>, ou comment ajouter post meta \u00e0 l’inspector<\/a>. Ceux-ci sont \u00e9crits avec withSelect<\/code>et withDispatch<\/code>, ceux-l\u00e0 aussi, puis revenez ici pour apprendre \u00e0 les transformer en crochets.<\/p>\nconst { withSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin = ({ somePosts }) => {\n console.log(\"Posts from withSelect = \", somePosts);\n return(\n <div>\n ...\n <\/div>\n );\n}\n\u00a0\nexport default withSelect( (select) => { \n return {\n somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n };\n}) (AWP_Example_Plugin );<\/code><\/pre>\n#12-16<\/code>, j’enveloppe mon composant avec withSelect<\/code>. \u00c0 l’int\u00e9rieur de la fonction withSelect, je peux acc\u00e9der au magasin que je veux et je renvoie une requ\u00eate de publication dans la prop " somePosts<\/code>". Cet accessoire sera alors disponible dans mon AWP_Example_Plugin<\/code>composant (comme vous pouvez le voir, je d\u00e9structure somePosts<\/code>les accessoires \u00e0 la ligne #3<\/code>).<\/p>\nsomePosts<\/code>vient l’accessoire ni de quoi il s’agit. Vous devez savoir rechercher la d\u00e9claration d’exportation et voir s’il y a des emballages. Il se sent aussi un peu d\u00e9cousu. Vous faites une bonne partie du travail important en dehors de votre composant, pour quelque chose que vous voulez r\u00e9ellement disponible \u00e0 l’int\u00e9rieur de votre composant.<\/p>\nConversion en
useSelect<\/code><\/h3>\nwithSelect<\/code>en useSelect<\/code>est aussi simple que possible. La premi\u00e8re \u00e9tape consiste \u00e0 d\u00e9finir la variable \u00e0 l’ somePosts<\/code>int\u00e9rieur de notre composant, plut\u00f4t qu’\u00e0 l’ext\u00e9rieur par l’ export<\/code>instruction. La deuxi\u00e8me \u00e9tape consiste \u00e0 d\u00e9placer toute la fonction que nous avions withSelect<\/code>dans useSelect<\/code>. Et c’est tout.<\/p>\nconst { useSelect } = wp.data;\n\u00a0\nconst AWP_Example_Plugin =() => {\n const { somePosts } = useSelect( (select) => { \n return {\n somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),\n };\n } );\n console.log(\"Posts from useSelect = \", somePosts);\n return(\n <div>\n ...\n <\/div>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\nwithSelect<\/code>. La diff\u00e9rence est que le code est maintenant beaucoup plus compr\u00e9hensible! Nous pouvons maintenant voir tr\u00e8s facilement que la variable somePosts<\/code>stocke le r\u00e9sultat d’une requ\u00eate post, directement dans notre composant.<\/p>\nuseSelect<\/code>accepte un deuxi\u00e8me param\u00e8tre\u00a0; un tableau de d\u00e9pendances. Les d\u00e9pendances sont des variables qui garantissent que nous n’ex\u00e9cutons que useSelect<\/code>lorsque l’une des d\u00e9pendances (valeurs variables) a chang\u00e9. Ce bit est plus important useDispatch<\/code>qu’ici, donc je vais l’expliquer plus en d\u00e9tail dans la useDispatch<\/code>section ci-dessous.<\/p>\nEx\u00e9cution
useDispatch<\/code><\/h2>\nwithDispatch<\/code>et son crochet correspondant useDispatch<\/code>. Ils sont utilis\u00e9s pour envoyer des props aux registres. Par exemple, dire \u00e0 Gutenberg de mettre \u00e0 jour une m\u00e9ta de publication via ‘ core\/editor<\/code>‘.<\/p>\nUtilisation \u00e0 l’ancienne
withDispatch<\/code><\/h3>\nwithDispatch<\/code>il s’agit d’un composant d’ordre sup\u00e9rieur, j’aurais besoin d’envelopper mon composant \u00e0 l’int\u00e9rieur. Cela se fait couramment dans la export<\/code>d\u00e9claration. Afin de faire fonctionner le champ de texte de notre m\u00e9ta, nous<\/p>\nconst { withDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin = ({ setPostMeta }) => { \n return(\n <PluginDocumentSettingPanel title={ __( 'withDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value=\"\"\n onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default withDispatch( (dispatch) => {\n return {\n setPostMeta( newMeta) {\n dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n }\n };\n} )( AWP_Example_Plugin );<\/code><\/pre>\n#20-26<\/code>nous enveloppons le composant \u00e0 l’int\u00e9rieur withDispatch<\/code>de, dans lequel nous renvoyons une fonction " setPostMeta<\/code>" qui distribue la post m\u00e9ta (pour la mettre \u00e0 jour). \u00c0 la ligne, #6<\/code>nous d\u00e9structurons le prop afin de pouvoir l’utiliser dans l’ onChange<\/code>\u00e9v\u00e9nement du champ de texte \u00e0 la ligne #13<\/code>. (Veuillez noter que l’exemple ci-dessus ne serait pas fonctionnel car nous avons d\u00e9fini la valeur du champ de texte sur une cha\u00eene vide. C’est juste pour montrer comment nous utiliserions dispatch).<\/p>\nsetPostMeta<\/code>ou d’o\u00f9 vient l’accessoire " ". Faisons mieux en utilisant des crochets\u00a0!<\/p>\nConversion en
useDispatch<\/code><\/h3>\nwithDispatch<\/code>en useDispatch<\/code>n’est pas aussi simple que de se convertir withSelect<\/code>en useSelect<\/code>. C’est quand m\u00eame assez facile. Il y a deux choses \u00e0 garder \u00e0 l’esprit. La premi\u00e8re est que useDispatch<\/code>prend un nom de magasin comme premier param\u00e8tre. Nous acc\u00e9dons alors au magasin et appelons ses fonctions disponibles lorsque nous l’utilisons (par exemple dans l’ onChange<\/code>\u00e9v\u00e9nement d’un champ de texte). Deuxi\u00e8mement, le tableau des d\u00e9pendances du useDispatch<\/code>deuxi\u00e8me param\u00e8tre de est plus important qu’avec useSelect<\/code>. Vous pouvez risquer que votre code se retrouve dans une boucle \u00e9ternelle si vous ne g\u00e9rez pas correctement les d\u00e9pendances. Ce n’est que lorsque les variables de d\u00e9pendance sont modifi\u00e9es que le script s’ex\u00e9cutera \u00e0 nouveau useDispatch<\/code>.<\/p>\nconst { useDispatch } = wp.data;\nconst { __ } = wp.i18n;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\nconst AWP_Example_Plugin =() => { \n const tmpMetaValue = \"\";\n const { editPost } = useDispatch( 'core\/editor', [ tmpMetaValue ] );\n\u00a0\n return(\n <PluginDocumentSettingPanel title={ __( 'useDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ tmpMetaValue }\n onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\n#8<\/code>on d\u00e9structure ce dont on a besoin du magasin ‘ core\/editor<\/code>‘. Nous ne sommes int\u00e9ress\u00e9s que par la editPost<\/code>fonction que nous pouvons utiliser pour mettre \u00e0 jour la m\u00e9ta post. Comme deuxi\u00e8me param\u00e8tre, useDispatch<\/code>nous fournissons des d\u00e9pendances. Comme pour un exemple de mise \u00e0 jour de post meta, utiliser la valeur de post meta (en utilisant useSelect<\/code>) serait parfait comme d\u00e9pendance. Dans cet exemple, je viens de le d\u00e9finir comme une variable factice. Regardez plus bas pour un exemple plus complet et r\u00e9aliste. Et puis \u00e0 la ligne #16<\/code>dans l’\u00e9v\u00e9nement du champ de texte onChange<\/code>, nous appelons editPost<\/code>pour mettre \u00e0 jour la m\u00e9ta. Notez la diff\u00e9rence entre cette ligne et l’utilisation withDispatch<\/code>ci-dessus\u00a0! Puisque nous utilisons editPost<\/code>directement au lieu de renvoyer une fonction pour mettre \u00e0 jour la m\u00e9ta post pour nous (setPostMeta<\/code>), nous devons fournir un objet avecmeta<\/code>comme cl\u00e9, puis un objet avec la m\u00e9ta post que nous voulons mettre \u00e0 jour. Nous avons en quelque sorte divis\u00e9 le withDispatch<\/code>code en morceaux.<\/p>\nuseDispatch<\/code>rend le code beaucoup plus lisible et compr\u00e9hensible. Plus de code ajout\u00e9 en dehors de notre composant que nous devons utiliser \u00e0 l’int\u00e9rieur.<\/p>\nUn exemple plus complet et \u00e9liminant le besoin de
compose<\/code><\/h2>\nwithDispatch<\/code>, vous aurez \u00e9galement besoin withSelect<\/code>de ce composant. Dans les exemples de conversion ci- useDispatch<\/code>dessus, nous mettons \u00e0 jour une m\u00e9ta-valeur post. Mais pour que le champ de texte fonctionne correctement (et affiche \u00e9galement la valeur actuelle), nous aurions \u00e9galement besoin de r\u00e9cup\u00e9rer la m\u00e9ta-valeur post.<\/p>\n[compose](https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/)<\/code>. C’est une fonction pratique pour combiner plusieurs composants d’ordre sup\u00e9rieur en un seul composant d’ordre sup\u00e9rieur autour duquel vous pouvez envelopper votre composant.<\/p>\nwithSelect<\/code>et withDispatch<\/code>(et donc aussi compose<\/code>).<\/p>\nEn utilisant
withSelect<\/code>, withDispatch<\/code>etcompose<\/code><\/h3>\nconst { __ } = wp.i18n;\nconst { compose } = wp.compose;\nconst { withSelect, withDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = ({ postMeta, setPostMeta }) => {\n return(\n <PluginDocumentSettingPanel title={ __( 'withSelect and withDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ postMeta.example_post_meta }\n onChange={ (value) => setPostMeta( { example_post_meta: value }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default compose( [\n withSelect( (select) => { \n return {\n postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n };\n } ),\n withDispatch( (dispatch) => {\n return {\n setPostMeta( newMeta) {\n dispatch( 'core\/editor' ).editPost( { meta: newMeta } );\n }\n };\n }) ] )( AWP_Example_Plugin );<\/code><\/pre>\n#21-34<\/code>nous les composons withSelect<\/code>et withDispatch<\/code>les enroulons autour de notre composant. postMeta<\/code>from withSelect<\/code>et setPostMeta<\/code>from withDispatch<\/code>sont maintenant disponibles dans notre composant en tant qu’accessoires. Nous les d\u00e9structurons \u00e0 la ligne #7<\/code>et les utilisons dans #13<\/code>et #14<\/code>.<\/p>\npostMeta<\/code>et d’o\u00f9 setPostMeta<\/code>ils viennent – ils semblent \u00eatre disponibles comme par magie. Pour moi, c’est tr\u00e8s peu intuitif.<\/p>\nUtiliser
useSelect<\/code>etuseDispatch<\/code><\/h3>\nconst { __ } = wp.i18n;\nconst { useSelect, useDispatch } = wp.data;\nconst { PluginDocumentSettingPanel } = wp.editPost;\nconst { TextControl, PanelRow } = wp.components;\n\u00a0\nconst AWP_Example_Plugin = () => {\n const { postMeta } = useSelect( (select) => { \n return {\n postMeta: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n };\n } );\n const { editPost } = useDispatch( 'core\/editor', [ postMeta.example_post_meta ] );\n\u00a0\n return(\n <PluginDocumentSettingPanel title={ __( 'useSelect and useDispatch Example', 'txtdomain') }>\n <PanelRow>\n <TextControl\n label={ __( 'Example post meta', 'txtdomain') }\n value={ postMeta.example_post_meta }\n onChange={ (value) => editPost( { meta: { example_post_meta: value } }) }\n \/>\n <\/PanelRow>\n <\/PluginDocumentSettingPanel>\n );\n}\n\u00a0\nexport default AWP_Example_Plugin;<\/code><\/pre>\npostMeta<\/code>d’o\u00f9 est r\u00e9cup\u00e9r\u00e9 et comment nous avons acc\u00e8s \u00e0 editPost<\/code>. Notre composant est \u00e9galement devenu beaucoup plus facile \u00e0 r\u00e9utiliser.<\/p>\nuseDispatch<\/code>ligne #12<\/code>nous ajoutons le postmeta que nous mettons \u00e0 jour en tant que d\u00e9pendance (postMeta.example_post_meta<\/code>). Si vous deviez maintenir \u00e0 jour plusieurs variables m\u00e9ta de publication dans ce composant, vous devrez ajouter chacune en tant que d\u00e9pendance pour vous assurer que l’envoi s’ex\u00e9cute (en fait, en sauvegardant la m\u00e9ta de publication) lorsque la valeur de l’une d’entre elles change.<\/p>\n