Un aperçu du script de bloc de création de WordPress

L’équipe officielle de l’éditeur WordPress (Gutenberg) vous a fourni un petit script soigné pour créer un plugin de bloc avec leur @wordpress/create-blockscript npm.

Cet article donne un aperçu du WordPress Create Block Script, ainsi que des détails sur ce qu’il produit.

REMARQUE : cet article concerne une ancienne version de Créer un script de bloc

Bien que la théorie puisse toujours être appliquée, certaines des informations contenues dans cet article peuvent ne plus être compatibles avec le dernier script de bloc de création. Vous pouvez consulter notre guide de création de script de bloc mis à jour ici.

Exécution du script de création de bloc

La documentation officielle vous donne quelques paramètres différents à passer dans la npm init @wordpress/blockcommande.

Pour ma configuration, je l’ai exécuté en mode interactif en omettant les paramètres. J’ai entré la commande suivante dans mon terminal (tout en étant cddans mon wp-content/pluginsdossier):

npm init @wordpress/block

Le Script m’a posé quelques questions afin de m’aider à construire mon bloc.

Voulant créer un bloc de démarrage pour une idée de plugin que j’ai ("Wholesome Notes"), j’ai répondu aux questions comme suit :

• Le slug de bloc utilisé pour l’identification (également le nom du plug-in et du dossier de sortie) : je veux que mon bloc s’appelle Wholesome Notes, j’ai donc entré wholesome-notes.

• L’espace de noms interne pour le nom du bloc (quelque chose d’unique pour vos produits) : Comme il devrait être unique pour tous mes produits que j’ai saisis wholesome-code, car il s’agit du nom de ma société. Avec le recul, il serait préférable de raccourcir wcou wcltd.

• Le titre d’affichage de votre bloc : J’ai saisi le titre du plugin, Wholesome Notes.

• Un aperçu du script WordPress Create Block Je n’étais pas sûr à 100% de ce que je voulais écrire ici, alors j’ai juste entré du texte que j’ai l’intention de modifier plus tard.

• Le dashicon pour faciliter l’identification de votre bloc (facultatif) : En faisant apparaître rapidement la ressource WordPress Dashicons, j’ai choisi admin-commentscar il a une icône de style note.

• Le nom de la catégorie pour aider les utilisateurs à parcourir et découvrir votre bloc (utilisez les touches fléchées) : j’ai choisi layout, même si pour être honnête, ce type de bloc aurait probablement besoin de sa propre catégorie. C’est quelque chose que je peux modifier ultérieurement.

Fonctionnementnpm init @wordpress/block

Le script est ensuite allé de l’avant et a installé toutes les dépendances dont il avait besoin via npm (à ce stade, il installe simplement le wp-scriptspackage npm en tant que dépendance).

Inspection de la sortie

Avec les commandes ci-dessus, le WordPress Create Block Script vous donne le résultat suivant :

• notes-saines
  • construire
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • src
    • index.js
  • .editorconfig
  • .gitignore
  • éditeur.css
  • package.json
  • style.css
  • notes-saines.php

@wordpress /bloquer la sortie

Voici une ventilation de chacun de ces fichiers et dossiers.

wholesome-notes

C’est le dossier racine du plugin, il a le même nom que celui que j’ai entré pour le ‘slug’ dans les questions de configuration.

/build

Il s’agit du dossier de construction. Il contient tous les actifs JavaScript et PHP générés à partir du /srcdossier. Ceux-ci sont mis en file d’attente via le wholesome-notes.phpfichier de chargement principal.

/build/index.assets.php

Ce fichier PHP est généré automatiquement lors de la /srccompilation du dossier. Il contient un tableau de toutes les décences JavaScript de l’éditeur WordPress (Gutenberg) utilisées par votre plugin. Il est mis en file d’attente via le wholesome-notes.phpfichier de chargement principal.

/build/index.js

Il s’agit du fichier JavaScript compilé principal et il est mis en file d’attente via le wholesome-notes.phpfichier de chargement principal.

/build/index.js.map

Ce fichier n’est généré que lorsque vous compilez les actifs pour le mode de développement (c’est-à-dire que vous exécutez npm startet non npm run buildlorsque vous compilez vos actifs. C’est un fichier utile pour les débogueurs JavaScript pour aider à identifier les noms de fichiers et les numéros de ligne si des erreurs se produisent.

/node_modules

C’est le dossier dans lequel toutes les dépendances JavaScript de votre plugin sont installées.

/src

Il s’agit du dossier qui contient tous les actifs non compilés de votre plugin.

/src/index.js

Il s’agit du principal fichier JavaScript non compilé pour votre bloc WordPress Editor (Gutenberg). Il contient initialement toute la logique du bloc.

/.editorconfig

Ce fichier contient des préréglages utiles pour votre IDE (environnement de développement intégré), tels que Visual Studio Code.

/.gitignore

Ce fichier indique à git d’ignorer certains fichiers lorsque vous vous engagez dans un référentiel git (tel que GitHub).

/editor.css

Les styles de ce fichier sont sortis uniquement dans l’éditeur, il est mis en file d’attente via le wholesome-notes.phpfichier de chargement principal.

/package.json

Ce fichier contient toutes les dépendances npm pour le plug-in et les commandes que vous pouvez exécuter. Notez que le plugin utilise wp-scripts( @wordpress/scripts) comme base, donc initialement les dépendances chargées sont pour ce paquet.

/style.css

Les styles de ce fichier sont sortis dans l’éditeur et sur le front-end du site, ils sont mis en file d’attente via le wholesome-notes.phpfichier de chargement principal.

/wholesome-notes.php

Il s’agit du fichier de chargement principal du plugin. Son nom a été défini via le "slug" que nous avons entré dans le script de configuration initial. Il met en file d’attente tous les actifs JavaScript nécessaires au plugin.

Explorer le plugin

Après avoir créé votre plugin, si vous l’activez et l’insérez dans l’éditeur, il ressemblera aux captures d’écran suivantes (frontend et backend).

Créer un script de bloc – Front End par défaut

Créer un script de bloc – Backend par défaut

Comme vous pouvez le voir, le bloc nous fournit une sortie de base que nous pouvons facilement modifier pour implémenter notre propre bloc.

Bloquer CSS

Comme vous pouvez le voir sur les captures d’écran, l’exemple de code dans editor.cssimplémente une bordure rouge dans l’éditeur, tandis que les exemples de styles dans styles.csssont appliqués à la fois au front et au backend.

Bloquer JavaScript

Le point d’entrée pour personnaliser le bloc nouvellement créé est le /src/index.jsfichier.

Il y a beaucoup de documentation en ligne dans ce fichier, expliquant pourquoi certaines fonctions sont importées, comme registerBlockTypepour l’enregistrement du bloc et __pour la prise en charge de la traduction de texte i18n.

Créer des commentaires en ligne index.js Block

Il vous donne également une sortie très basique pour les fonctions editet savequi sont passées dans l’enregistrement de bloc.

Remarque : Dans les versions ultérieures du script, ceux-ci ont été extraits dans leurs propres fichiers et inclus en tant que modules dans ce fichier.

Créer un bloc index.js Modifier et enregistrer

Construire le bloc

Selon la documentation create block npm, vous pouvez utiliser plusieurs commandes dans votre terminal (à partir du dossier racine de votre plugin), pour faire des choses comme vérifier la qualité du code ou mettre à jour des packages.

Les principales commandes dont vous aurez besoin pour construire le bloc seront npm startde compiler votre plugin pour le développement et npm run buildde compiler la version finale.

wp-scripts(du @wordpress/scriptspaquet npm) est la principale dépendance de votre plugin. Cette dépendance fait abstraction de tous les outils de votre bloc, vous pouvez donc vous concentrer uniquement sur la construction du JavaScript.

Les coulisses wp-scriptsutilisent webpackpour compiler tous vos actifs dans le /build/index.jsfichier.

Vous pouvez en savoir plus wp-scriptsdans le manuel de l’éditeur de blocs et vous pouvez en savoir plus sur la configuration de la construction de webpack dans la section "Configuration de la construction JavaScript" du manuel.

Extension de la configuration du webpack Créer un bloc

La base de code de votre bloc peut s’étendre sur plusieurs fichiers, ou même avoir un certain nombre de sous-blocs, ou contenir des styles complexes. Dans des moments comme ceux-ci, vous souhaiterez peut-être étendre la configuration de webpack intégrée à wp-scripts.

Pour plus d’informations, consultez mon article sur l’ extension de la wp-scriptsconfiguration du pack Web ou consultez la section Scripts de package du manuel de l’éditeur de blocs pour obtenir des conseils.