Heureusement, l’équipe de développement WordPress a un npm script pratique pour vous permettre de créer un plugin de bloc qui crée un bloc de démarrage afin que vous puissiez rapidement être opérationnel.

Par défaut, le type de plugin WordPress créé est un "bloc", mais cela nous donne également un bon point de départ pour d’autres types de plugins Gutenberg.

Conditions préalables

Node doit être installé sur votre machine pour que vous puissiez utiliser la npmcommande (qui signifie Node Package Manager)
Installer WordPress
Éditeur de codes
Accès à l’aérogare

Créez votre plugin

Après avoir installé node sur votre machine, vous devriez avoir accès à la npmcommande dans votre terminal.

Ouvrez votre terminal et assurez-vous que vous avez cd‘d (répertoire modifié) dans le dossier plugins de votre installation WordPress (par exemple cd wp-content/plugins).

Une fois là lancez la commande suivante :

npm init @wordpress/block

Cela téléchargera tout ce dont le script a besoin pour démarrer la construction. Une fois terminé, le script vous posera une série de questions nécessaires à la configuration de votre plugin.

Utilisation du terminal pour exécuter le script de création

Questions de configuration

Le script posera les questions suivantes, voici mes exemples de réponses :

Le slug de bloc utilisé pour l’identification (également le nom du plugin et du dossier de sortie) — Je veux que mon bloc s’appelle Wholesome Plugin, alors j’ai entré wholesome-plugin.
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 wholesomecode, car il s’agit du nom de ma société.
Le titre d’affichage de votre bloc — j’ai entré le titre du plugin, Wholesome Plugin.
La courte description de votre bloc (optionnel) — j’ai saisi " An example plugin to demonstrate the create-block-script".
Le dashicon pour faciliter l’identification de votre bloc (optionnel) — Appelant rapidement la ressource WordPress Dashicons, j’ai choisi admin-pluginscar il a une icône de plugin. N’oubliez pas d’omettre dashicon- du préfixe dashicon lors de cette opération.
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 design. Bien qu’une catégorie personnalisée conviendrait probablement mieux.
Le nom de l’auteur du plugin (facultatif). Plusieurs auteurs peuvent être répertoriés à l’aide de virgules – j’ai entré wholesomecode.
Le nom abrégé de la licence du plug-in (facultatif) — J’ai appuyé sur Entrée pour accepter la GPL v2.0 ou ultérieure.
Un lien vers le texte intégral de la licence (facultatif) — J’ai appuyé sur Entrée pour insérer l’URL de la licence GPL v2.0.
Le numéro de version actuel du plugin — j’ai appuyé sur Entrée pour insérer 0.1.0.

Questions sur la configuration des scripts

Le script finira alors de s’exécuter.

Qu’est-ce qui vient juste de se passer?

Quelques événements se produisent pendant l’exécution du script, à savoir :

Il crée le dossier du plugin,
Il génère tous les fichiers du plugin (voir explorer le plugin pour les détails de ce qu’ils font )
Il installe les dépendances dont il a besoin, y compris le @wordpress/scriptspackage (cela fait le gros du travail en termes de construction du plugin)
Il compile le code
Il affiche une liste de commandes que vous pouvez utiliser

Construire des commandes

Nous les explorerons davantage dans la section Explorer le plugin.

Utilisation du plug-in

Avant de pouvoir utiliser le plugin, vous devez l’activer. Vous pouvez le faire en choisissant Pluginsdans le menu d’administration de WordPress, puis en sélectionnant activatesous le nom du plugin.

Activer le plugin

Vous devez maintenant modifier un article dans WordPress et insérer le plugin à l’aide de l’éditeur Gutenberg.

Insertion du bloc dans un poteau

Notez que le plugin ne fait pas grand chose par défaut, il crée juste un Block. Il fournit cependant un cadre que vous pouvez utiliser pour créer votre propre plugin.

Affichage du bloc sur le front-end

Par défaut, le bloc ressemble à ceci sur le front-end. Notez qu’il a une apparence légèrement différente, ceci est délibéré afin que vous puissiez vous familiariser avec le CSS sur le front et le backend de WordPress.

Le bloc sur le front-end

Explorer le plugin

L’objectif de Create Block Script est de vous permettre de créer votre propre plugin. Explorons plus en détail les fichiers qu’il a générés :

Fichiers générés

wholesome-plugin— 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 d’installation.

**/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-plugin.phpfichier de chargement principal.

**/build/index.css**— Il s’agit du fichier CSS de l’éditeur, mis en file d’attente via le wholesome-plugin.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-plugin.phpfichier de chargement principal.

**/build/style-index.css**— Il s’agit du fichier CSS frontal, mis en file d’attente via le wholesome-plugin.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 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**— Il s’agit du 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/edit.js**— Il s’agit de la fonction d’édition du bloc et contrôle la façon dont le bloc est affiché dans l’éditeur de bloc lorsqu’il est en mode édition.
**/src/editor.scss**– Ceci est le SCSS non compilé pour l’éditeur, il sera compilé en /build/index.css.
**/src/index.js**— Il s’agit du principal fichier JavaScript non compilé pour votre bloc WordPress Editor (Gutenberg). Il enregistre le bloc et contient les paramètres par défaut.
**/src/save.js**— Il s’agit de la fonction d’enregistrement du bloc et contrôle le balisage du bloc lorsqu’il est enregistré.
**/src/style.scss**– Il s’agit du SCSS non compilé pour le frontal, il sera compilé en /build/style-index.css.
**/.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.
**/block.json**— Ce fichier définit le plugin afin qu’il puisse être découvert par la bibliothèque de blocs WordPress. Si vous apportez des modifications au plugin, assurez-vous que ce fichier est mis à jour. Dans les versions plus récentes du script NPM, ce fichier est utilisé à la place d’ /src/index.jsenregistrer votre bloc.
**/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.
**/readme.txt**— Ce fichier est un fichier Lisez-moi du référentiel de plugins WordPress, qui est requis si vous souhaitez que le bloc soit répertorié dans le référentiel de plugins.
**/wholesome-plugin.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 les commandes de construction

Avant de pouvoir exécuter nos commandes de construction, nous devons nous assurer que nous sommes dans le dossier du plugin. Dans cet exemple, nous exécuterions cd wholesome-plugindans le terminal pour changer de répertoire dans notre dossier de plug-in.

Nous pouvons alors exécuter les commandes suivantes :

**npm start**— Démarre la construction pour le développement. Si vous apportez une modification au plug-in, vous devez le faire pour que les modifications s’affichent (vous devrez probablement également actualiser votre navigateur).
**npm run build**— Construit le code pour la production. Faites-le si vous créez une version finale du plugin.
**npm run format:js**— Formate automatiquement les fichiers JavaScript, en utilisant les meilleures pratiques.
**npm run lint:css**— Lints (recherche les erreurs dans) les fichiers CSS.
**npm run lint:js**— Lints (recherche les erreurs dans) les fichiers JavaScript.
**npm run packages-update**— Met à jour les packages WordPress vers la dernière version.

Nous utiliserons un ou plusieurs d’entre eux lors de la modification du plugin.

Modification du plugin

Commençons par rendre notre bloc modifiable.

Ajouter des attributs à`/src/index.js`

Ouvrez /src/index.jsdans votre éditeur et ajoutez ce qui suit à l’intérieur de la registerBlockTypefonction, sousapiVersion :

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Cela nous donnera un endroit pour stocker les données dans notre plugin appelé blockTextaccessible via la attributespropriété (prop). Notez que nous lui avons donné par défaut le texte original généré par le script de création du plugin.

Ajouter RichText à`/src/edit.js`

Ouvrez /src/edit.jsdans votre éditeur et remplacez l’importation pour useBlockPropspar ce qui suit :

import { RichText, useBlockProps } from '@wordpress/block-editor';

Cela nous permettra d’utiliser le composant RichText dans notre méthode de rendu d’édition.

Modifiez ensuite l’ensemble de la fonction d’édition comme suit :

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Cela définit la valeur du RichTextcomposant pour qu’elle soit la même que celle stockée dans l’ blockTextattribut, et la onChangepropriété définit l’ blockTextattribut sur ce qui a été entré dans le RichTextcomposant.

Sortez les attributs dans`/src/save.js`

Ouvrez /src/save.jsdans votre éditeur et remplacez la savefonction par ce qui suit :

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Cela affiche simplement la valeur de blockTextdans le paragraphe.

Compilation du plugin

Ouvrez le terminal, assurez-vous d’être dans le répertoire racine de votre plugin et lancez la commande suivante :

Le script compilera. Si vous avez des erreurs, le terminal devrait vous en informer.

Construire le plugin

Insertion du plugin

Assurez-vous d’avoir actualisé votre message. La version précédente du bloc peut maintenant être cassée, c’est très bien, supprimez-la simplement et insérez-en une nouvelle.

Insérez le bloc en utilisant le symbole plus en haut à gauche de l’éditeur, et lorsqu’il est inséré, cliquez sur son texte. Tu devrais. maintenant être en mesure de modifier le texte.

Insertion du bloc modifiable

Affichage du plug-in

Enregistrez le message et affichez-le sur le front-end du site Web, le texte que vous avez modifié doit être affiché à la place du texte d’origine.

Bloc modifiable sur le front-end du site Web

Si vous souhaitez que vos blocs apparaissent dans une catégorie de blocs personnalisés, ajoutez simplement le code suivant à la racine de votre plugin (dans ce caswholesome-plugin.php :

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Cela enregistrera une catégorie de bloc personnalisée dans votre insertion de bloc.

Ensuite, tout ce que vous avez à faire est d’ajuster l’ categoryargument de la registerBlockTypefonction dans /src/index.jspour faire référence à votre catégorie de bloc et recompiler :


category: 'wholesome-blocks',

Maintenant quand vous venez d’insérer votre bloc, vous le trouverez dans votre catégorie de bloc nouvellement créée :

Catégorie de bloc personnalisée dans l’outil d’insertion de bloc

Jetez un œil à l’utilisation de PHP pour rendre votre bloc avec des blocs dynamiques
Envisagez d’ utiliser les champs post-méta comme attributs dans votre bloc
Ajouter une barre latérale de bloc avec InspectorControls
Étendez votre plugin en ajoutant des points d’entrée supplémentaires au fichier webpack.config

Source d’enregistrement: wholesomecode.ltd