npm<\/code> script pratique pour vous permettre de cr\u00e9er un plugin de bloc<\/a> qui cr\u00e9e un bloc de d\u00e9marrage afin que vous puissiez rapidement \u00eatre op\u00e9rationnel.<\/p>\nPar d\u00e9faut, le type de plugin WordPress cr\u00e9\u00e9 est un "bloc", mais cela nous donne \u00e9galement un bon point de d\u00e9part pour d’autres types de plugins Gutenberg.<\/p>\n
Conditions pr\u00e9alables<\/h2>\n\n- Node doit \u00eatre install\u00e9 sur votre machine<\/a> pour que vous puissiez utiliser la
npm<\/code>commande (qui signifie Node Package Manager)<\/li>\n- Installer WordPress<\/li>\n
- \u00c9diteur de codes<\/li>\n
- Acc\u00e8s \u00e0 l’a\u00e9rogare<\/li>\n<\/ul>\n
Cr\u00e9ez votre plugin<\/h2>\n
Apr\u00e8s avoir install\u00e9 node sur votre machine, vous devriez avoir acc\u00e8s \u00e0 la npm<\/code>commande dans votre terminal.<\/p>\nOuvrez votre terminal et assurez-vous que vous avez cd<\/code>‘d (r\u00e9pertoire modifi\u00e9) dans le dossier plugins de votre installation WordPress (par exemple cd wp-content\/plugins<\/code>).<\/p>\nUne fois l\u00e0 lancez la commande suivante :<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nCela t\u00e9l\u00e9chargera tout ce dont le script a besoin pour d\u00e9marrer la construction. Une fois termin\u00e9, le script vous posera une s\u00e9rie de questions n\u00e9cessaires \u00e0 la configuration de votre plugin.<\/p>\n
Utilisation du terminal pour ex\u00e9cuter le script de cr\u00e9ation<\/p>\n
Questions de configuration<\/h3>\n
Le script posera les questions suivantes, voici mes exemples de r\u00e9ponses\u00a0:<\/p>\n
\n- \n
Le slug de bloc utilis\u00e9 pour l’identification (\u00e9galement le nom du plugin et du dossier de sortie)<\/strong> \u2014 Je veux que mon bloc s’appelle Wholesome Plugin<\/code>, alors j’ai entr\u00e9 wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
L’espace de noms interne pour le nom du bloc (quelque chose d’unique pour vos produits)<\/strong> \u2014 Comme il devrait \u00eatre unique pour tous mes produits que j’ai saisis wholesomecode<\/code>, car il s’agit du nom de ma soci\u00e9t\u00e9.<\/p>\n<\/li>\n- \n
Le titre d’affichage de votre bloc<\/strong> \u2014 j’ai entr\u00e9 le titre du plugin, Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
La courte description de votre bloc (optionnel)<\/strong> \u2014 j’ai saisi " An example plugin to demonstrate the create-block-script<\/code>".<\/p>\n<\/li>\n- \n
Le dashicon pour faciliter l’identification de votre bloc (optionnel)<\/strong> \u2014 Appelant rapidement la ressource WordPress Dashicons<\/a>, j’ai choisi admin-plugins<\/code>car il a une ic\u00f4ne de plugin. N’oubliez pas d’omettre dashicon- du pr\u00e9fixe dashicon lors de cette op\u00e9ration.<\/p>\n<\/li>\n- \n
Le nom de la cat\u00e9gorie pour aider les utilisateurs \u00e0 parcourir et d\u00e9couvrir votre bloc (utilisez les touches fl\u00e9ch\u00e9es)<\/strong> \u2014 j’ai choisi design<\/code>. Bien qu’une cat\u00e9gorie personnalis\u00e9e conviendrait probablement mieux.<\/p>\n<\/li>\n- \n
Le nom de l’auteur du plugin (facultatif). Plusieurs auteurs peuvent \u00eatre r\u00e9pertori\u00e9s \u00e0 l’aide de virgules<\/strong> – j’ai entr\u00e9 wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
Le nom abr\u00e9g\u00e9 de la licence du plug-in (facultatif)<\/strong> \u2014 J’ai appuy\u00e9 sur Entr\u00e9e pour accepter la GPL v2.0 ou ult\u00e9rieure.<\/p>\n<\/li>\n- \n
Un lien vers le texte int\u00e9gral de la licence (facultatif)<\/strong> \u2014 J’ai appuy\u00e9 sur Entr\u00e9e pour ins\u00e9rer l’URL de la licence GPL v2.0.<\/p>\n<\/li>\n- \n
Le num\u00e9ro de version actuel du plugin<\/strong> \u2014 j’ai appuy\u00e9 sur Entr\u00e9e pour ins\u00e9rer 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Questions sur la configuration des scripts<\/p>\n
Le script finira alors de s’ex\u00e9cuter.<\/p>\n
Qu’est-ce qui vient juste de se passer?<\/h3>\n
Quelques \u00e9v\u00e9nements se produisent pendant l’ex\u00e9cution du script, \u00e0 savoir\u00a0:<\/p>\n
\n- Il cr\u00e9e le dossier du plugin,<\/li>\n
- Il g\u00e9n\u00e8re tous les fichiers du plugin (voir explorer le plugin pour les d\u00e9tails de ce qu’ils font<\/a> )<\/li>\n
- Il installe les d\u00e9pendances dont il a besoin, y compris le
@wordpress\/scripts<\/code>package (cela fait le gros du travail en termes de construction du plugin)<\/li>\n- Il compile le code<\/li>\n
- Il affiche une liste de commandes que vous pouvez utiliser<\/li>\n<\/ul>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Construire des commandes<\/p>\n
Nous les explorerons davantage dans la section Explorer le plugin<\/a>.<\/p>\nUtilisation du plug-in<\/h2>\n
Avant de pouvoir utiliser le plugin, vous devez l’activer. Vous pouvez le faire en choisissant Plugins<\/code>dans le menu d’administration de WordPress, puis en s\u00e9lectionnant activate<\/code>sous le nom du plugin.<\/p>\n![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Activer le plugin<\/p>\n
Vous devez maintenant modifier un article dans WordPress et ins\u00e9rer le plugin \u00e0 l’aide de l’\u00e9diteur Gutenberg.<\/p>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Insertion du bloc dans un poteau<\/p>\n
Notez que le plugin ne fait pas grand chose par d\u00e9faut, il cr\u00e9e juste un Block. Il fournit cependant un cadre que vous pouvez utiliser pour cr\u00e9er votre propre plugin.<\/p>\n
Affichage du bloc sur le front-end<\/h3>\n
Par d\u00e9faut, le bloc ressemble \u00e0 ceci sur le front-end. Notez qu’il a une apparence l\u00e9g\u00e8rement diff\u00e9rente, ceci est d\u00e9lib\u00e9r\u00e9 afin que vous puissiez vous familiariser avec le CSS sur le front et le backend de WordPress.<\/p>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
Le bloc sur le front-end<\/p>\n
Explorer le plugin<\/h2>\n
L’objectif de Create Block Script est de vous permettre de cr\u00e9er votre propre plugin. Explorons plus en d\u00e9tail les fichiers qu’il a g\u00e9n\u00e9r\u00e9s\u00a0:<\/p>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
Fichiers g\u00e9n\u00e9r\u00e9s<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 C’est le dossier racine du plugin, il a le m\u00eame nom que celui que j’ai entr\u00e9 pour le ‘slug’ dans les questions d’installation.<\/p>\n**\/build**<\/code>\u2014 Il s’agit du dossier de construction. Il contient tous les actifs JavaScript et PHP g\u00e9n\u00e9r\u00e9s \u00e0 partir du \/src<\/code>dossier. Ceux-ci sont mis en file d’attente via le wholesome-notes.php<\/code>fichier de chargement principal.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 Ce fichier PHP est g\u00e9n\u00e9r\u00e9 automatiquement lors de la \/src<\/code>compilation du dossier. Il contient un tableau de toutes les d\u00e9cences JavaScript de l’\u00e9diteur WordPress (Gutenberg) utilis\u00e9es par votre plugin. Il est mis en file d’attente via le wholesome-plugin.php<\/code>fichier de chargement principal.<\/p>\n**\/build\/index.css**<\/code>\u2014 Il s’agit du fichier CSS de l’\u00e9diteur, mis en file d’attente via le wholesome-plugin.php<\/code>fichier de chargement principal.<\/p>\n**\/build\/index.js**<\/code>\u2014 Il s’agit du fichier JavaScript compil\u00e9 principal et il est mis en file d’attente via le wholesome-plugin.php<\/code>fichier de chargement principal.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 Il s’agit du fichier CSS frontal, mis en file d’attente via le wholesome-plugin.php<\/code>fichier de chargement principal.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 Ce fichier n’est g\u00e9n\u00e9r\u00e9 que lorsque vous compilez les actifs pour le mode de d\u00e9veloppement (c’est-\u00e0-dire que vous ex\u00e9cutez npm start<\/code>et non npm build<\/code>lorsque vous compilez vos actifs. C’est un fichier utile pour les d\u00e9bogueurs JavaScript pour aider \u00e0 identifier les noms de fichiers et les num\u00e9ros de ligne si des erreurs se produisent.<\/p>\n\n- \n
**\/node_modules**<\/code>\u2014 Il s’agit du dossier dans lequel toutes les d\u00e9pendances JavaScript de votre plugin sont install\u00e9es.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 Il s’agit du dossier qui contient tous les actifs non compil\u00e9s de votre plugin.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 Il s’agit de la fonction d’\u00e9dition du bloc et contr\u00f4le la fa\u00e7on dont le bloc est affich\u00e9 dans l’\u00e9diteur de bloc lorsqu’il est en mode \u00e9dition.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>– Ceci est le SCSS non compil\u00e9 pour l’\u00e9diteur, il sera compil\u00e9 en \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 Il s’agit du principal fichier JavaScript non compil\u00e9 pour votre bloc WordPress Editor (Gutenberg). Il enregistre le bloc et contient les param\u00e8tres par d\u00e9faut.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 Il s’agit de la fonction d’enregistrement du bloc et contr\u00f4le le balisage du bloc lorsqu’il est enregistr\u00e9.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>– Il s’agit du SCSS non compil\u00e9 pour le frontal, il sera compil\u00e9 en \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 Ce fichier contient des pr\u00e9r\u00e9glages utiles pour votre IDE (environnement de d\u00e9veloppement int\u00e9gr\u00e9), tels que Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 Ce fichier indique \u00e0 git d’ignorer certains fichiers lorsque vous vous engagez dans un r\u00e9f\u00e9rentiel git (tel que GitHub).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 Les styles de ce fichier sont sortis uniquement dans l’\u00e9diteur, il est mis en file d’attente via le wholesome-notes.php<\/code>fichier de chargement principal.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 Ce fichier d\u00e9finit le plugin afin qu’il puisse \u00eatre d\u00e9couvert par la biblioth\u00e8que de blocs WordPress. Si vous apportez des modifications au plugin, assurez-vous que ce fichier est mis \u00e0 jour. Dans les versions plus r\u00e9centes du script NPM, ce fichier est utilis\u00e9 \u00e0 la place d’ \/src\/index.js<\/code>enregistrer votre bloc.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 Ce fichier contient toutes les d\u00e9pendances npm pour le plug-in et les commandes que vous pouvez ex\u00e9cuter. Notez que le plugin utilise wp-scripts<\/code>( @wordpress\/scripts<\/code>) comme base, donc initialement les d\u00e9pendances charg\u00e9es sont pour ce paquet.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 Ce fichier est un fichier Lisez-moi du r\u00e9f\u00e9rentiel de plugins WordPress, qui est requis si vous souhaitez que le bloc soit r\u00e9pertori\u00e9 dans le r\u00e9f\u00e9rentiel de plugins.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 Il s’agit du fichier de chargement principal du plugin. Son nom a \u00e9t\u00e9 d\u00e9fini via le "slug" que nous avons entr\u00e9 dans le script de configuration initial. Il met en file d’attente tous les actifs JavaScript n\u00e9cessaires au plugin.<\/p>\n<\/li>\n<\/ul>\nExplorer les commandes de construction<\/h3>\n
Avant de pouvoir ex\u00e9cuter nos commandes de construction, nous devons nous assurer que nous sommes dans le dossier du plugin. Dans cet exemple, nous ex\u00e9cuterions cd wholesome-plugin<\/code>dans le terminal pour changer de r\u00e9pertoire dans notre dossier de plug-in.<\/p>\nNous pouvons alors ex\u00e9cuter les commandes suivantes\u00a0:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 D\u00e9marre la construction pour le d\u00e9veloppement. Si vous apportez une modification au plug-in, vous devez le faire pour que les modifications s’affichent (vous devrez probablement \u00e9galement actualiser votre navigateur).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Construit le code pour la production. Faites-le si vous cr\u00e9ez une version finale du plugin.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Formate automatiquement les fichiers JavaScript, en utilisant les meilleures pratiques.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Lints (recherche les erreurs dans) les fichiers CSS.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Lints (recherche les erreurs dans) les fichiers JavaScript.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>\u2014 Met \u00e0 jour les packages WordPress vers la derni\u00e8re version.<\/p>\n<\/li>\n<\/ul>\nNous utiliserons un ou plusieurs d’entre eux lors de la modification du plugin.<\/p>\n
Modification du plugin<\/h2>\n
Commen\u00e7ons par rendre notre bloc modifiable.<\/p>\n
Ajouter des attributs \u00e0\/src\/index.js<\/code><\/h3>\nOuvrez \/src\/index.js<\/code>dans votre \u00e9diteur et ajoutez ce qui suit \u00e0 l’int\u00e9rieur de la registerBlockType<\/code>fonction, sousapiVersion<\/code>\u00a0:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nCela nous donnera un endroit pour stocker les donn\u00e9es dans notre plugin appel\u00e9 blockText<\/code>accessible via la attributes<\/code>propri\u00e9t\u00e9 (prop). Notez que nous lui avons donn\u00e9 par d\u00e9faut le texte original g\u00e9n\u00e9r\u00e9 par le script de cr\u00e9ation du plugin.<\/p>\nAjouter RichText \u00e0\/src\/edit.js<\/code><\/h3>\nOuvrez \/src\/edit.js<\/code>dans votre \u00e9diteur et remplacez l’importation pour useBlockProps<\/code>par ce qui suit\u00a0:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nCela nous permettra d’utiliser le composant RichText dans notre m\u00e9thode de rendu d’\u00e9dition.<\/p>\n
Modifiez ensuite l’ensemble de la fonction d’\u00e9dition comme suit\u00a0:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nCela d\u00e9finit la valeur du RichText<\/code>composant pour qu’elle soit la m\u00eame que celle stock\u00e9e dans l’ blockText<\/code>attribut, et la onChange<\/code>propri\u00e9t\u00e9 d\u00e9finit l’ blockText<\/code>attribut sur ce qui a \u00e9t\u00e9 entr\u00e9 dans le RichText<\/code>composant.<\/p>\nSortez les attributs dans\/src\/save.js<\/code><\/h3>\nOuvrez \/src\/save.js<\/code>dans votre \u00e9diteur et remplacez la save<\/code>fonction par ce qui suit\u00a0:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nCela affiche simplement la valeur de blockText<\/code>dans le paragraphe.<\/p>\nCompilation du plugin<\/h3>\n
Ouvrez le terminal, assurez-vous d’\u00eatre dans le r\u00e9pertoire racine de votre plugin et lancez la commande suivante :<\/p>\n
Le script compilera. Si vous avez des erreurs, le terminal devrait vous en informer.<\/p>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Construire le plugin<\/p>\n
Insertion du plugin<\/h3>\n
Assurez-vous d’avoir actualis\u00e9 votre message. La version pr\u00e9c\u00e9dente du bloc peut maintenant \u00eatre cass\u00e9e, c’est tr\u00e8s bien, supprimez-la simplement et ins\u00e9rez-en une nouvelle.<\/p>\n
Ins\u00e9rez le bloc en utilisant le symbole plus en haut \u00e0 gauche de l’\u00e9diteur, et lorsqu’il est ins\u00e9r\u00e9, cliquez sur son texte. Tu devrais. maintenant \u00eatre en mesure de modifier le texte.<\/p>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Insertion du bloc modifiable<\/p>\n
Affichage du plug-in<\/h3>\n
Enregistrez le message et affichez-le sur le front-end du site Web, le texte que vous avez modifi\u00e9 doit \u00eatre affich\u00e9 \u00e0 la place du texte d’origine.<\/p>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Bloc modifiable sur le front-end du site Web<\/p>\n
Si vous souhaitez que vos blocs apparaissent dans une cat\u00e9gorie de blocs personnalis\u00e9s, ajoutez simplement le code suivant \u00e0 la racine de votre plugin (dans ce caswholesome-plugin.php<\/code>\u00a0:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nCela enregistrera une cat\u00e9gorie de bloc personnalis\u00e9e dans votre insertion de bloc.<\/p>\n
Ensuite, tout ce que vous avez \u00e0 faire est d’ajuster l’ category<\/code>argument de la registerBlockType<\/code>fonction dans \/src\/index.js<\/code>pour faire r\u00e9f\u00e9rence \u00e0 votre cat\u00e9gorie de bloc et recompiler\u00a0:<\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nMaintenant quand vous venez d’ins\u00e9rer votre bloc, vous le trouverez dans votre cat\u00e9gorie de bloc nouvellement cr\u00e9\u00e9e :<\/p>\n
![\"Cr\u00e9ation](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Cat\u00e9gorie de bloc personnalis\u00e9e dans l’outil d’insertion de bloc<\/p>\n
\n- Jetez un \u0153il \u00e0 l’utilisation de PHP pour rendre votre bloc avec des blocs dynamiques<\/a><\/li>\n
- Envisagez d’ utiliser les champs post-m\u00e9ta comme attributs dans votre bloc<\/a><\/li>\n
- Ajouter une barre lat\u00e9rale de bloc avec InspectorControls<\/a><\/li>\n
- \u00c9tendez votre plugin en ajoutant des points d’entr\u00e9e suppl\u00e9mentaires au fichier webpack.config<\/a><\/li>\n<\/ul>\n