wp<\/code>Le package global et la d\u00e9structuration<\/h2>\nLorsque nous sommes dans un fichier Javascript mis en file d’attente dans l’\u00e9diteur Gutenberg, nous avons acc\u00e8s \u00e0 un objet\/package global\u00a0: wp<\/code>. Il s’agit d’un objet Javascript tr\u00e8s vari\u00e9 et il contient tout un tas de composants et de fonctions utiles que nous utiliserons pour cr\u00e9er des blocs. Lors de l’\u00e9criture de Javascript pour des blocs personnalis\u00e9s, vous vous r\u00e9f\u00e9rerez \u00e0 wp<\/code>beaucoup de choses.<\/p>\nPar cons\u00e9quent, il est courant, \u00e0 la fois en Javascript moderne et en React, de d\u00e9structurer ce que nous voulons en utiliser. Fondamentalement, cela signifie simplement que nous d\u00e9finissons des variables locales \u00e0 partir de parties d’une structure plus grande. Par exemple, la premi\u00e8re fonction que nous utiliserons est registerBlockType()<\/code>celle qui existe dans wp.blocks<\/code>. Nous pourrions invoquer la fonction comme suit\u00a0:<\/p>\nwp.blocks.registerBlockType();<\/code><\/pre>\nMais c’est plus facile de le d\u00e9structurer comme \u00e7a :<\/p>\n
const { registerBlockType } = wp.blocks;\nregisterBlockType();<\/code><\/pre>\nVous pouvez maintenant vous r\u00e9f\u00e9rer directement \u00e0 la fonction sans la pr\u00e9fixer avec sa structure. Cela devient beaucoup plus utile lorsque nous nous r\u00e9f\u00e9rons \u00e0 des fonctions ou \u00e0 des composants que nous r\u00e9p\u00e9terons souvent.<\/p>\n
Nous ferons une restructuration dans cette s\u00e9rie, et au fur et \u00e0 mesure que nous avancerons dans le didacticiel, nous verrons \u00e0 quel point notre code devient plus lisible et plus court.<\/p>\n
Enregistrer un nouveau bloc<\/h2>\n
La fonction d’enregistrement d’un nouveau bloc personnalis\u00e9 est registerBlockType()<\/code>disponible dans le wp.blocks<\/code>package. Il accepte deux param\u00e8tres\u00a0; d’abord une cha\u00eene avec l’espace de noms et le nom du bloc, et ensuite un objet avec la configuration compl\u00e8te du bloc.<\/p>\nGutenberg s’attend \u00e0 ce que tous les blocs aient un espace de noms et un nom, d\u00e9finis avec une barre oblique entre eux. L’espace de noms sert \u00e0 garantir que le nom de votre bloc n’entrera pas en conflit avec d’autres blocs susceptibles d’utiliser le m\u00eame nom. Tous les blocs de WordPress utilisent l’espace de noms core<\/code>. Par exemple, le bloc de paragraphe standard dans WordPress porte le nom core\/paragraph<\/code>. Si vous choisissez un autre espace de noms, vous pouvez \u00e9galement cr\u00e9er un bloc nomm\u00e9 paragraphe sans causer de probl\u00e8mes.<\/p>\nD\u00e9cidez d’un espace de noms de version slug qui vous est propre. J’utiliserai l’espace de noms awp<\/code>(version courte de A White Pixel) dans cette s\u00e9rie.<\/p>\nOuvrez le fichier source que nous avons cr\u00e9\u00e9 \u00e0 la derni\u00e8re \u00e9tape\u00a0; src\/block-awhitepixel-myfirstblock.js<\/code>, chez un \u00e9diteur. Nous appellerons d’abord registerBlockType<\/code>depuis destructured wp.blocks<\/code>, avec le nom awp\/firstblock<\/code>. Ajustez votre nom et votre espace de noms au fur et \u00e0 mesure.<\/p>\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n \/\/ Your block configuration and code here\n});<\/code><\/pre>\nDans le deuxi\u00e8me param\u00e8tre, l’objet de configuration de bloc, nous devons d\u00e9finir quelques propri\u00e9t\u00e9s pour qu’il soit enregistr\u00e9 avec succ\u00e8s. N’oubliez pas que la configuration du bloc est un objet, ce qui signifie que vous devez tout \u00e9crire sous forme de paires cl\u00e9 + valeur, s\u00e9par\u00e9es par une virgule. Il y a pas mal de propri\u00e9t\u00e9s de configuration possibles, alors passons en revue celles-ci et nous verrons le code final \u00e0 la fin.<\/p>\n
Obligatoire\u00a0: titre<\/h3>\n
La premi\u00e8re propri\u00e9t\u00e9 requise est title<\/code>. C’est le nom tel qu’il appara\u00eetra lorsque vous s\u00e9lectionnerez un bloc. D\u00e9finissez cette propri\u00e9t\u00e9 comme n’importe quel nom que vous souhaitez dans une cha\u00eene.<\/p>\nNous ajouterons ce qui suit comme titre\u00a0:<\/p>\n
title: 'My first block',<\/code><\/pre>\nPS: Nous reviendrons sur la fa\u00e7on dont nous \u00e9crivons toutes les cha\u00eenes de notre bloc pour nous assurer qu’elles peuvent \u00eatre traduites dans la partie 8. Mais pour l’instant, nous allons rester simples et simplement \u00e9crire des cha\u00eenes.<\/p>\n
Obligatoire\u00a0: cat\u00e9gorie<\/h3>\n
La propri\u00e9t\u00e9 category<\/code>d\u00e9finit o\u00f9 dans quelle cat\u00e9gorie de bloc votre bloc appara\u00eetra lorsque vous s\u00e9lectionnez des blocs \u00e0 ins\u00e9rer dans l’\u00e9diteur. Les valeurs possibles sont common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, embed<\/code>.<\/p>\nMettons-le dans common<\/code>, la premi\u00e8re cat\u00e9gorie de bloc.<\/p>\ncategory: 'common',<\/code><\/pre>\nFacultatif\u00a0: ic\u00f4ne<\/h3>\n
Si vous avez utilis\u00e9 Gutenberg, vous avez probablement remarqu\u00e9 que tous les blocs ont des ic\u00f4nes. Vous pouvez ajouter une ic\u00f4ne \u00e0 votre bloc avec une cha\u00eene qui fait r\u00e9f\u00e9rence \u00e0 l’un des Dashicons de WordPress<\/a>, ou vous pouvez fournir un svg<\/code>\u00e9l\u00e9ment personnalis\u00e9.<\/p>\nJe vais juste choisir l’un des dashicons de WordPress, le smiley<\/a> – mais vous pouvez choisir celui que vous voulez. Notez que vous ignorez l’inclusion de "dashicons-" dans votre nom de classe d’ic\u00f4nes.<\/p>\nicon: 'smiley',<\/code><\/pre>\nFacultatif\u00a0: description<\/h3>\n
Vous pouvez fournir une description qui sera affich\u00e9e dans la barre lat\u00e9rale Param\u00e8tres (sur le c\u00f4t\u00e9 droit) lorsque le bloc est actif.<\/p>\n
Je vais juste ajouter un texte rapide \u00e0 titre d’exemple\u00a0:<\/p>\n
description: 'Learning in progress',<\/code><\/pre>\nFacultatif\u00a0: mots cl\u00e9s<\/h3>\n
Gutenberg prend en charge une fonctionnalit\u00e9 de recherche lors du choix des types de blocs. Vous pouvez fournir un tableau de correspondances possibles dans la propri\u00e9t\u00e9 keywords<\/code>. Sans keywords<\/code>vous ne trouveriez votre bloc qu’en recherchant son nom.<\/p>\nJ’ajouterai example<\/code>et test<\/code>, afin que nous puissions facilement trouver notre bloc personnalis\u00e9 lorsque nous commen\u00e7ons \u00e0 taper l’un de ces mots-cl\u00e9s.<\/p>\nkeywords: ['example', 'test'],<\/code><\/pre>\nFacultatif\u00a0: attributs<\/h3>\n
La propri\u00e9t\u00e9 attributes<\/code>est une propri\u00e9t\u00e9 tr\u00e8s importante que nous reviendrons assez souvent dans cette s\u00e9rie de tutoriels. C’est l\u00e0 que vous stockez vos donn\u00e9es structur\u00e9es et les informations saisies par l’utilisateur pour votre bloc. Vous pouvez l’imaginer sous forme de variables. Nous ne l’ajouterons pas pour l’instant, mais nous y reviendrons certainement tr\u00e8s bient\u00f4t.<\/p>\n(En quelque sorte) obligatoire\u00a0: modifier et facultatif\u00a0: enregistrer<\/h3>\n
Dans edit<\/code>et save<\/code>les propri\u00e9t\u00e9s sont en fait l’endroit o\u00f9 vous ajouterez tout votre code pour la sortie de l’\u00e9diteur et le rendu frontal. Ces deux propri\u00e9t\u00e9s attendent une fonction qui doit renvoyer une sortie.<\/p>\nLa propri\u00e9t\u00e9 edit<\/code>d\u00e9crit la structure de votre bloc dans l’\u00e9diteur. La save<\/code>propri\u00e9t\u00e9 g\u00e8re essentiellement deux choses; la sortie de votre bloc en frontend, mais aussi la structure de la fa\u00e7on dont votre bloc est enregistr\u00e9 dans la base de donn\u00e9es. Vous travaillerez principalement dans edit<\/code>car c’est l\u00e0 que vous ajoutez des entr\u00e9es pour entrer ou choisir des choses et mettre \u00e0 jour les donn\u00e9es du bloc. La save<\/code>fonction ne doit en aucun cas mettre \u00e0 jour ou modifier les donn\u00e9es, elle doit simplement sortir.<\/p>\nGutenberg doit pouvoir reconstruire votre bloc avec tous ses param\u00e8tres dans l’\u00e9diteur \u00e0 partir de ce qui est sorti dans la save<\/code>fonction (et les attributs). Si Gutenberg ouvre un message o\u00f9 la sortie du bloc pr\u00e9c\u00e9demment enregistr\u00e9 diff\u00e8re (m\u00eame l\u00e9g\u00e8rement) de ce qui est d\u00e9fini dans l’enregistrement, votre bloc deviendra invalide.<\/p>\n![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d21609214.png\")
<\/a><\/p>\nJe peux vous garantir que vous rencontrerez souvent cela lors du d\u00e9veloppement de blocs personnalis\u00e9s. Lorsque cela se produit, vous devez supprimer le bloc (des points dans la barre d’outils) et le rajouter. Je recommande \u00e9galement d’actualiser le navigateur (F5 ou CTRL+R).<\/p>\n
WordPress a une page de documentation<\/a> d\u00e9di\u00e9e aux fonctions d’\u00e9dition et d’enregistrement du bloc si vous souhaitez en savoir plus.<\/p>\nEn ce qui concerne notre premier bloc, produisons quelque chose de basique. Nous renverrons la m\u00eame chose pour edit<\/code>et save<\/code>; un \u00ab:)\u00bb entour\u00e9 de <div><\/code>. L’ic\u00f4ne du bloc est un smiley apr\u00e8s tout.<\/p>\nedit:() => { \n return <div>:)<\/div> \n},\nsave:() => { \n return <div>:)<\/div> \n}<\/code><\/pre>\nAutres propri\u00e9t\u00e9s<\/h3>\n
Il existe des propri\u00e9t\u00e9s plus facultatives pour registerBlockType<\/code>; parent<\/code>, supports<\/code>, transforms<\/code>, example<\/code>et styles<\/code>. Nous allons les ignorer pour le moment, car la plupart sont destin\u00e9s \u00e0 la construction de blocs plus avanc\u00e9s ou personnalis\u00e9s. Si vous souhaitez en savoir plus \u00e0 ce sujet, consultez la documentation de WordPress<\/a>.<\/p>\nCode de bloc de registre final<\/h2>\n
Notre code ressemble maintenant \u00e0 ceci.<\/p>\n
const { registerBlockType } = wp.blocks;\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 edit: () => { \n return <div>:)<\/div> \n },\n save: () => { \n return <div>:)<\/div> \n }\n});<\/code><\/pre>\nAvec cela, nous en avons assez pour que notre bloc soit enregistr\u00e9 avec succ\u00e8s en tant que bloc personnalis\u00e9. Voyons cela en pratique dans l’\u00e9diteur Gutenberg.<\/p>\n
Avez-vous pens\u00e9 \u00e0 compiler votre Javascript\u00a0? \u00c0 l’\u00e9tape pr\u00e9c\u00e9dente, nous avons appris que nous ne pouvions pas charger ce fichier Javascript dans Gutenberg\u00a0; nous avons besoin de la version compil\u00e9e. Vous d\u00e9veloppez g\u00e9n\u00e9ralement avec npm run start<\/code>une ex\u00e9cution en arri\u00e8re-plan, ou vous pouvez simplement ex\u00e9cuter npm run build<\/code>une fois maintenant. Cela devrait compiler notre source Javascript et le placer l\u00e0 o\u00f9 vous l’avez d\u00e9fini pour qu’il soit plac\u00e9 et nomm\u00e9 dans votre fichier webpack.config.js<\/code>.<\/p>\nLa partie PHP de l’enregistrement d’un bloc<\/h2>\n
Pour chaque bloc, vous devez enregistrer le fichier Javascript et c’est exactement la m\u00eame chose que vous enregistreriez n’importe quel autre script dans WordPress – en utilisant [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>. Notez que nous enregistrons le script, pas le mettons en file d’attente. En effet, nous devons \u00e9galement appeler une fonction PHP pour enregistrer chaque bloc personnalis\u00e9, et cette fonction est responsable de la mise en file d’attente du script lorsque cela est n\u00e9cessaire.<\/p>\nJe pr\u00e9f\u00e8re conserver le code li\u00e9 \u00e0 Gutenberg dans un fichier s\u00e9par\u00e9 dans mes th\u00e8mes. Mais vous pouvez, et nous le ferons dans ce tutoriel, simplement \u00e9crire tout le code PHP directement \u00e0 l’int\u00e9rieur du th\u00e8me functions.php<\/code>pour des raisons de simplicit\u00e9.<\/p>\nJe recommande d’utiliser le init<\/code>crochet pour votre fonction, et non enqueue_block_assets<\/code>. Nous pouvons mettre \u00e0 la fois l’enregistrement du script et l’enregistrement du bloc ensemble.<\/p>\nadd_action('init', function() {\n wp_register_script('awp-myfirstblock-js', get_template_directory_uri(). '\/assets\/js\/gutenberg\/block-awhitepixel-myfirstblock.js');\n\u00a0\n register_block_type('awp\/firstblock', [\n 'editor_script' => 'awp-myfirstblock-js',\n ]);\n});<\/code><\/pre>\nLa fonction PHP que nous utiliserons pour enregistrer un nouveau bloc est [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. De m\u00eame que Javascript, registerBlockType()<\/code>il accepte deux param\u00e8tres\u00a0; l’espace de noms et le nom du bloc, et un tableau avec des arguments. Assurez-vous de fournir exactement le m\u00eame espace de noms et le m\u00eame nom en PHP qu’en Javascript.<\/p>\nDans le deuxi\u00e8me argument, il y a quelques arguments possibles (dont nous reviendrons sur certains plus tard dans cette s\u00e9rie). Mais le plus important est celui editor_script<\/code>o\u00f9 vous fournissez le handle (premier param\u00e8tre de wp_register_script()<\/code>) du script enregistr\u00e9.<\/p>\nEt c’est tout!<\/p>\n
Notre bloc dans l’\u00e9diteur Gutenberg<\/h2>\n
Maintenant, lorsque vous actualisez votre \u00e9diteur dans un article, vous devriez trouver notre bloc – soit en ouvrant la cat\u00e9gorie Commun, soit en recherchant l’un des mots cl\u00e9s ou le nom que vous avez fourni.<\/p>\n
![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d216d1cdb.png\")
<\/a>![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d217e1762.gif\")
<\/a><\/p>\nNotre bloc rend un simple ":)" \u00e0 la fois dans l’\u00e9diteur et dans le frontend. Pour l’instant, vous ne pouvez rien modifier dans le bloc, mais c’est ce que nous apprendrons dans les prochaines \u00e9tapes\u00a0!<\/p>\n