{"id":234267,"date":"2023-02-24T14:04:00","date_gmt":"2023-02-24T11:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234267"},"modified":"2022-11-12T02:55:34","modified_gmt":"2022-11-11T23:55:34","slug":"creer-un-bloc-gutenberg-personnalise-partie-3-accessoires-et-composants-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-un-bloc-gutenberg-personnalise-partie-3-accessoires-et-composants-wordpress\/","title":{"rendered":"Cr\u00e9er un bloc Gutenberg personnalis\u00e9 – Partie 3\u00a0: Accessoires et composants WordPress"},"content":{"rendered":"\n

L’ \u00e9tape pr\u00e9c\u00e9dente<\/a> de cette s\u00e9rie de tutoriels a expliqu\u00e9 comment enregistrer un bloc personnalis\u00e9, \u00e0 la fois en Javascript et en PHP. Dans cette \u00e9tape, nous apprendrons \u00e0 utiliser les composants de WordPress pour ajouter diff\u00e9rents types de champs et de param\u00e8tres.<\/p>\n

Afin d’utiliser les composants de WordPress dans notre bloc, nous devons d’abord conna\u00eetre les accessoires.<\/p>\n

Accessoires<\/h2>\n

Les accessoires sont une fonctionnalit\u00e9 majeure de React et constituent essentiellement un moyen de transmettre des variables ou des fonctions \u00e0 d’autres composants. Si vous n’\u00eates pas familier avec les accessoires React, vous pouvez lire le tutoriel officiel de React<\/a> \u00e0 ce sujet.<\/p>\n

WordPress fournit quelques accessoires pour les fonctions edit<\/code>et save<\/code>dans registerBlockType()<\/code>. \u00c0 l’int\u00e9rieur de ces accessoires, nous avons acc\u00e8s \u00e0 des \u00e9l\u00e9ments critiques, tels que des attributs et une m\u00e9thode pour mettre \u00e0 jour nos attributs. Nous passerons en revue les attributs en d\u00e9tail \u00e0 l’ \u00e9tape suivante<\/a>\u00a0!<\/p>\n

Jusqu’\u00e0 pr\u00e9sent, dans notre bloc, nous avons \u00e9crit la fonction pour edit<\/code>et save<\/code>comme ceci\u00a0:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Vous devriez vous habituer \u00e0 ajouter le param\u00e8tre props<\/code>\u00e0 la fois \u00e0 edit<\/code>et save<\/code>, comme ceci :<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Vous avez maintenant un acc\u00e8s complet \u00e0 la variable props<\/code>et \u00e0 tout ce qu’elle contient depuis edit<\/code>et save<\/code>. Si vous \u00eates curieux, vous pouvez ajouter un console.log(props);<\/code>dans la edit<\/code>fonction avant l’ return<\/code>instruction. Vous devriez voir quels accessoires sont disponibles dans le d\u00e9bogueur de la console.<\/p>\n
Utiliser les composants de WordPress<\/h2>\n
Comme mentionn\u00e9 pr\u00e9c\u00e9demment, nous avons acc\u00e8s \u00e0 une \u00e9norme biblioth\u00e8que de composants et de fonctions utiles \u00e0 l’int\u00e9rieur du package global wp<\/code>. Vous trouverez des composants pr\u00eats \u00e0 l’emploi pour tout type de composants li\u00e9s aux entr\u00e9es auxquels vous pouvez penser. Les exemples incluent les entr\u00e9es de texte, les entr\u00e9es de texte enrichi, les listes d\u00e9roulantes, les bascules, les cases \u00e0 cocher, les boutons de diff\u00e9rents styles, le t\u00e9l\u00e9chargeur de m\u00e9dias et les s\u00e9lecteurs de couleurs. Il existe \u00e9galement des fonctions et des composants pour des fonctionnalit\u00e9s plus avanc\u00e9es. Comme interroger WordPress pour le contenu (messages, cat\u00e9gories, etc.) avec des fonctions int\u00e9gr\u00e9es ou r\u00e9cup\u00e9rer avec l’API REST.<\/p>\n
Il est \u00e0 la fois plus facile et recommand\u00e9 d’utiliser les composants d’interface utilisateur de WordPress. Il s’agit de s’assurer que la conception et les fonctionnalit\u00e9s sont aussi rationalis\u00e9es que possible pour ne pas confondre ou ennuyer les utilisateurs.<\/p>\n
Mais malheureusement, au moment d’\u00e9crire ces lignes, la documentation de Gutenberg est tr\u00e8s rare. J’ai trouv\u00e9 le meilleur moyen d’en savoir plus sur ce qui existe dans le wp<\/code>package et sur le fonctionnement des composants en consultant leur repo officiel Gutenberg Github<\/a>. Certains des packages (dossiers) ont un texte readme qui offre un peu de documentation. Jetez un \u0153il au fichier readme pour un bouton<\/a> ou la bascule<\/a> par exemple.<\/p>\n
Le r\u00e9f\u00e9rentiel Github doit correspondre \u00e0 ce qui se trouve \u00e0 l’int\u00e9rieur du wp<\/code>package (selon la version que vous avez et la branche que vous regardez dans Github). Cela signifie que chaque dossier que vous voyez dans le packages<\/code>r\u00e9pertoire racine de Github r\u00e9side dans le wp<\/code>package global. Par exemple, rappelez-vous que la fonction que nous avons utilis\u00e9e \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente registerBlockType()<\/code>, \u00e9tait \u00e0 l’int\u00e9rieur wp.blocks<\/code>de, ce qui signifie que vous trouverez le code source de cette fonction export\u00e9 dans packages\/blocks\/<\/code>.<\/p>\n
Comme j’ai d\u00e9velopp\u00e9 un certain nombre de blocs Gutenberg personnalis\u00e9s et creus\u00e9 un peu dans le r\u00e9f\u00e9rentiel Github, j’ai d\u00e9couvert qu’il existe quelques packages contenant les fonctionnalit\u00e9s les plus courantes utilis\u00e9es pour cr\u00e9er des blocs personnalis\u00e9s. Je vais les inclure ci-dessous.<\/p>\n
Pour un aper\u00e7u plus complet des composants disponibles, je vous recommande de t\u00e9l\u00e9charger mon eBook gratuit couvrant les composants disponibles dans Gutenberg\u00a0! Il contient les composants les plus courants et les plus utiles avec une documentation sur les accessoires et des exemples de code\u00a0:<\/p>\n
Un aper\u00e7u rapide des packages les plus courants que vous utiliserez pour les blocs<\/h3>\n
\u00c9videmment, il y en a beaucoup plus disponibles, mais ce qui suit est ce qui est le plus courant pour le d\u00e9veloppement de blocs. Nous en utiliserons la plupart, sinon la totalit\u00e9, dans cette s\u00e9rie de didacticiels. Chaque fois que vous souhaitez utiliser un composant, vous devez savoir dans quel package il se trouve.<\/p>\n
composants wp<\/h4>\n
Vous trouverez la plupart des composants d’entr\u00e9e de l’interface utilisateur dans wp.components<\/code>. Les exemples sont diff\u00e9rentes entr\u00e9es de texte, s\u00e9lection, cases \u00e0 cocher, boutons radio, composants d\u00e9pla\u00e7ables, boutons, s\u00e9lecteur de couleurs, s\u00e9lecteur de date, etc. Vous trouverez \u00e9galement des composants d’interface utilisateur que vous pouvez utiliser pour la barre d’outils de bloc et le contenu de la barre lat\u00e9rale des param\u00e8tres (appel\u00e9e InspectorControls) dans l’\u00e9diteur.<\/p>\n
Consultez les dossiers dans le r\u00e9f\u00e9rentiel Github<\/a>.<\/p>\n
wp.blockEditor et wp.editor<\/h4>\n
Dans ces deux packages, vous trouverez des composants utiles pour le texte enrichi, la gestion des images \/ t\u00e9l\u00e9chargeurs de m\u00e9dias et des composants pour ajouter des barres d’outils ou des panneaux d’inspecteur personnalis\u00e9s (barre lat\u00e9rale).<\/p>\n
\u00c0 la fin de cette s\u00e9rie, nous verrons comment cr\u00e9er des blocs dynamiques dans lesquels nous utiliserons PHP pour rendre la sortie du bloc, et pour cela nous utiliserons un composant de wp.editor<\/code>.<\/p>\n
Si je comprends bien, la plupart des composants ont commenc\u00e9 au wp.editor<\/code>d\u00e9but de Gutenberg, mais surtout apr\u00e8s WordPress 5.3, beaucoup d’entre eux ont \u00e9t\u00e9 d\u00e9plac\u00e9s vers wp.blockEditor<\/code>. Si vous utilisez un composant dans wp.editor<\/code>lequel WordPress envisage de s’installer wp.blockEditor<\/code>, il n’\u00e9chouera pas pour le moment, mais dans le d\u00e9bogueur de la console, vous recevrez des avertissements indiquant qu’il est obsol\u00e8te et que vous devez basculer vers celui -ci wp.blockEditor<\/code>d\u00e8s que vous le pouvez. Et de mani\u00e8re r\u00e9versible, si vous suivez cette s\u00e9rie avec une ancienne version de WordPress pour une raison quelconque, vous pourriez rencontrer des erreurs lors de l’appel de composants qui n’ont pas wp.blockEditor<\/code>encore \u00e9t\u00e9 d\u00e9plac\u00e9s.<\/p>\n
\"Cr\u00e9er<\/a><\/p>\n
wp.element<\/h4>\n
\u00c0 l’ int\u00e9rieur wp.element<\/code>, vous trouverez des composants qui correspondent aux composants React. Par exemple Component<\/code>(qui correspond \u00e0 React.Component<\/code>) et Fragment<\/code>( React.Fragment<\/code>). Nous les utiliserons lorsque nous commencerons \u00e0 diviser notre code en composants distincts.<\/p>\n
wp.i18n<\/h4>\n
Comme son nom l’indique, le wp.i18n<\/code>package contient des fonctions de gestion de la traduction. Il contient les m\u00eames fonctions de traduction que nous connaissons en PHP ; par exemple __()<\/code>et _e()<\/code>. Nous verrons cela en d\u00e9tail dans <<<>>>> lorsque nous apprendrons comment traduire notre bloc.<\/p>\n
wp.data<\/h4>\n
Le wp.data<\/code>package permet d’interroger WordPress pour obtenir des donn\u00e9es en dehors de l’\u00e9diteur. Il existe des composants pour envoyer des messages, withSelect<\/code>et select<\/code>que nous utiliserons plus tard dans cette s\u00e9rie pour interroger les messages \u00e0 l’int\u00e9rieur de notre bloc.<\/p>\n
wp.composer<\/h4>\n
Le package pr\u00e9c\u00e9dent et wp.compose<\/code>sont destin\u00e9s \u00e0 la construction de blocs plus avanc\u00e9s. Dans ce package, nous trouverons des composants et des fonctions pour cr\u00e9er des composants dits d’ordre sup\u00e9rieur. Les composants d’ordre sup\u00e9rieur<\/a> sont une technique de mod\u00e8le dans React pour r\u00e9utiliser les composants et la logique, et nous l’utiliserons en combinaison avec wp.data<\/code>pour interroger les publications.<\/p>\n
Assez parl\u00e9 – comment utilisez-vous certains de ces composants dans la pratique\u00a0?<\/h2>\n
Comme mentionn\u00e9 pr\u00e9c\u00e9demment; pour utiliser les composants de WordPress, vous devez savoir o\u00f9 ils se trouvent. J’esp\u00e8re que mon aper\u00e7u ci-dessus, combin\u00e9 au r\u00e9f\u00e9rentiel Github<\/a>, vous donnera une id\u00e9e de l’endroit o\u00f9 les obtenir.<\/p>\n
N’oubliez pas que vous pouvez toujours ajouter des balises HTML normales, telles que div, span, titres, etc. N’oubliez pas de suivre les directives de React<\/a> dans les attributs. Par exemple class<\/code>, est un mot-cl\u00e9 r\u00e9serv\u00e9 dans React (pour cr\u00e9er des composants bas\u00e9s sur des classes), donc si vous voulez ajouter une classe \u00e0 un \u00e9l\u00e9ment HTML, vous devez utiliser className<\/code>.<\/p>\n
Remarque\u00a0: lors du d\u00e9veloppement, n’oubliez pas d’initier npm run start<\/code>la compilation de votre code.<\/p>\n
Comme exemple simple, essayons quelques composants pour voir \u00e0 quoi ils ressemblent. Nous les d\u00e9structurons de leurs packages correspondants et les utilisons dans notre edit<\/code>fonction.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\nconst { TextControl, TextareaControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    edit: (props) => { \n        return (<div>\n                Text input:\n                <TextControl \/> \n                Textarea:\n                <TextareaControl \/>\n                Richtext:\n                <RichText \/>\n            <\/div>\n        );\n    },\n    ...\n});<\/code><\/pre>\n
Cela aura par exemple pour r\u00e9sultat que notre bloc ressemblera \u00e0 ceci dans l’\u00e9diteur.<\/p>\n
\"Cr\u00e9er<\/a><\/p>\n
Vous remarquerez que vous obtiendrez des messages d’erreur dans la console lorsque vous les saisirez, et qu’il n’enregistrera pas ce que vous saisissez lors de la mise \u00e0 jour de la publication (et de l’actualisation). C’est parce qu’il nous manque des accessoires sur les composants qui sont la connexion aux attributs, o\u00f9 toutes nos donn\u00e9es de bloc sont stock\u00e9es. Les accessoires sont charg\u00e9s de transmettre les valeurs enregistr\u00e9es et les fonctions charg\u00e9es de mettre \u00e0 jour nos attributs lorsque quelque chose est modifi\u00e9 dans nos entr\u00e9es. C’est ce que nous ferons \u00e0 l’\u00e9tape suivante, o\u00f9 nous commencerons enfin \u00e0 \u00e9crire du code pour de vrai.<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
\u00c0 l’\u00e9tape pr\u00e9c\u00e9dente, nous avons enregistr\u00e9 un bloc Gutenberg personnalis\u00e9. Dans cette \u00e9tape, nous apprendrons \u00e0 utiliser les composants de WordPress pour ajouter diff\u00e9rents param\u00e8tres de type.<\/p>\n","protected":false},"author":1,"featured_media":151761,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,717,717,936,936,1110,811,811,841,841,862,862],"tags":[1167],"class_list":["post-234267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","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\/234267","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=234267"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234267\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}