{"id":79072,"date":"2025-01-20T09:19:45","date_gmt":"2025-01-20T08:19:45","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=79072&preview=true&preview_id=79072"},"modified":"2025-01-20T14:29:12","modified_gmt":"2025-01-20T13:29:12","slug":"plugin-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/plugin-gutenberg\/","title":{"rendered":"Comment construire un plugin Gutenberg pour ajouter des fonctionnalit\u00e9s \u00e0 l’\u00e9diteur de blocs."},"content":{"rendered":"

Au fil des ans, nous avons explor\u00e9 Gutenberg sous de nombreux angles. Nous avons diss\u00e9qu\u00e9 les fonctionnalit\u00e9s de l’\u00e9diteur<\/a>, les avons compar\u00e9es \u00e0 celles d’autres constructeurs de pages<\/a>, avons construit des blocs personnalis\u00e9s statiques<\/a> et dynamiques<\/a>, et bien plus encore.<\/a><\/p>\n

Avec les derni\u00e8res versions de WordPress, de nouvelles fonctionnalit\u00e9s et de nouveaux outils vous permettent de cr\u00e9er des mises en page complexes plus facilement en enrichissant et en am\u00e9liorant les fonctionnalit\u00e9s de l’\u00e9diteur de blocs sans avoir besoin de construire des blocs personnalis\u00e9s.<\/p>\n

Gr\u00e2ce \u00e0 l’introduction de compositions de blocs<\/a> et d’outils de d\u00e9veloppement tels que l’API Block Bindings<\/a>, les cas d’utilisation de blocs personnalis\u00e9s sont moins nombreux. Vous pouvez d\u00e9sormais cr\u00e9er des structures de blocs complexes, injecter des valeurs de m\u00e9tadonn\u00e9es dans votre contenu et automatiser une bonne partie de votre flux de travail sans quitter l’interface de l’\u00e9diteur. En bref, aujourd’hui, WordPress vous permet de cr\u00e9er des sites complexes en aussi peu de clics qu’auparavant.<\/p>\n

L’ajout de commandes et d’outils personnalis\u00e9s \u00e0 l’\u00e9diteur peut contribuer \u00e0 rendre le processus de cr\u00e9ation de contenu plus fluide. Par exemple, vous pouvez avoir besoin d’ajouter un panneau \u00e0 la colonne lat\u00e9rale de publication pour ajouter des fonctionnalit\u00e9s ou cr\u00e9er une colonne lat\u00e9rale personnalis\u00e9e pour g\u00e9rer plusieurs champs m\u00e9ta.<\/p>\n

C’est parti !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comment cr\u00e9er un plugin d’\u00e9diteur de blocs sans cr\u00e9er de bloc personnalis\u00e9 ?<\/h2>\n

WordPress fournit un outil de ligne de commande<\/a> pratique qui vous permet d’installer un environnement de d\u00e9veloppement Node.js local avec tous les fichiers et d\u00e9pendances n\u00e9cessaires pour cr\u00e9er un bloc personnalis\u00e9. Il suffit de saisir npx @wordpress\/create-block<\/code> dans l’outil de ligne de commande, d’attendre quelques secondes, et le tour est jou\u00e9.<\/p>\n

Cependant, l’\u00e9chafaudage d’un bloc personnalis\u00e9 n’est pas n\u00e9cessaire lorsque vous avez seulement besoin d’ajouter une colonne lat\u00e9rale ou un simple panneau de r\u00e9glages. Dans ce cas, vous devez cr\u00e9er une extension Gutenberg.<\/p>\n

WordPress ne fournit pas d’utilitaire pour automatiser le processus de cr\u00e9ation d’une exwtension pour Gutenberg, vous devez donc le faire manuellement. Mais ne vous inqui\u00e9tez pas outre mesure. Le processus est relativement simple, et nous allons vous guider \u00e0 travers lui. Voici les \u00e9tapes \u00e0 suivre :<\/p>\n

<\/div><\/kinsta-auto-toc>\n

1. T\u00e9l\u00e9charger et installer un environnement de d\u00e9veloppement local<\/h3>\n

Chaque chose en son temps :<\/strong> Bien que vous puissiez d\u00e9velopper votre extension Gutenberg dans un environnement distant, il peut \u00eatre plus pratique pour vous d’installer localement un site WordPress de d\u00e9veloppement. Vous pouvez utiliser n’importe quel environnement bas\u00e9 sur PHP et MySQL. Parmi les nombreuses alternatives<\/a> disponibles sur le march\u00e9, nous vous recommandons DevKinsta<\/a>. Il est gratuit, dot\u00e9 de toutes les fonctionnalit\u00e9s, facile \u00e0 utiliser et 100 % compatible avec l’h\u00e9bergement Kinsta.<\/p>\n

Une fois votre site de d\u00e9veloppement configur\u00e9, vous \u00eates pr\u00eat \u00e0 cr\u00e9er une extension d’\u00e9diteur de blocs Gutenberg.<\/p>\n

2. T\u00e9l\u00e9charger et installer Node.js et npm.<\/h3>\n

T\u00e9l\u00e9chargez Node.js depuis nodejs.org<\/a> et installez-le sur votre ordinateur. Cela permettra \u00e9galement d’installer npm, le gestionnaire de paquets de Node.<\/p>\n

Une fois que vous avez fait cela, lancez votre outil de ligne de commande et ex\u00e9cutez node -v<\/code> et npm -v<\/code>. Vous devriez voir les versions install\u00e9es de Node.js et de npm.<\/p>\n

\"V\u00e9rifier
V\u00e9rifier les versions de node et de npm<\/figcaption><\/figure>\n

3. Cr\u00e9er le dossier de votre plugin<\/h3>\n

Cr\u00e9ez un nouveau dossier sous wp-content\/plugins<\/code> et renommez-le my-sidebar-plugin<\/code> ou quelque chose de similaire. N’oubliez pas que ce nom doit refl\u00e9ter le nom de votre extension.<\/p>\n

Ouvrez le terminal, naviguez jusqu’au dossier de l’extension et initialisez un projet npm avec la commande suivante :<\/p>\n

npm init -y<\/code><\/pre>\n
Cela cr\u00e9era un fichier de base package.json<\/code>.<\/p>\n
\"Cr\u00e9er
Cr\u00e9er un fichier package.json de base<\/figcaption><\/figure>\n
4. Installer les d\u00e9pendances<\/h3>\n
Dans votre outil de ligne de commande, saisissez la commande suivante :<\/p>\n
npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n