Un didacticiel Gutenberg pour les développeurs débutants: créez votre premier plugin de bloc

Tutoriel Gutenberg pour débutants


Si vous envisagez de développer quelque chose pour WordPress en 2020, ignorer Gutenberg n’est tout simplement pas une option. Les plugins et les thèmes doivent tous coopérer correctement avec Gutenberg et offrir une expérience utilisateur cohérente dans tout ce qu’un utilisateur peut voir dans le tableau de bord WordPress. Et d’autant plus que Gutenberg fait désormais partie intégrante de WordPress – simplement appelé l’éditeur de blocs.

Cela étant dit, commencer avec Gutenberg n’est pas aussi simple. Alors qu’il y a quelques années, vous pouviez écrire un plugin WordPress de qualité en utilisant uniquement le Bloc-notes, le processus est devenu beaucoup plus difficile maintenant.

Gutenberg utilise des technologies telles que l’API REST WordPress, JavaScript et React. Ainsi, de nouvelles exigences pour les plugins et les thèmes étaient nécessaires pour travailler avec Gutenberg.

La bonne nouvelle, c’est qu’on va parler de tout ça aujourd’hui! Ce message sert de tutoriel Gutenberg pour les débutants, qui cherchent à créer un plugin pour Gutenberg pour la première fois.

Nous nous concentrons principalement sur les différents aspects de la création d’un plugin pour Gutenberg – la configuration de l’environnement de développement, la création d’un plugin de base et quelques nuances de travail avec des blocs.

1. Configurez votre environnement de développement Gutenberg

Pour commencer le développement de Gutenberg, vous avez besoin de connaissances de base sur JavaScript et React. Voici un tutoriel sur JavaScript pour un développeur WordPress. De plus, des packages supplémentaires dans Gutenberg peuvent nécessiter l’utilisation d’un gestionnaire de packages NodeJS, npm.

Vous pouvez installer la dernière version stable de NodeJS sur Windows ou MacOS à l’aide des programmes d’installation sur le site officiel. Si vous avez un serveur Linux, vous pouvez soit compiler le code source, soit utiliser le gestionnaire de packages correspondant (comme apt et yum). Par exemple, si vous utilisez Ubuntu, exécutez les commandes suivantes sur le terminal.

mise à jour sudo apt
sudo apt install nodejs npm

Une fois l’installation terminée, vous pouvez exécuter la commande suivante pour vérifier la version de NodeJS.

nodejs –version

Après avoir coché ces cases, c’est une bonne idée de configurer votre site Web WordPress de test avec une instance du plugin Gutenberg actuel (le plugin autonome) ou même la version de développement de celui-ci – vous pouvez l’obtenir de GitHub.

⚠️ Remarque; alors que Gutenberg est désormais intégré à WordPress, cette version n’est pas la dernière. Le développement sur Gutenberg se fait toujours assez séparément et tout ce qui est nouveau est d’abord inclus dans le plugin autonome Gutenberg. La version actuelle de Gutenberg dans le noyau n’a pas encore reçu de mise à jour majeure depuis son inclusion dans WordPress 5.0. Vous voulez toujours travailler sur la dernière version de Gutenberg car cela vous donne une meilleure chance de pérenniser votre travail et de vous assurer que votre création sera en phase avec tout ce qui arrivera au cœur de WordPress plus tard..

Sur une autre note, si vous avez l’intention de contribuer au plugin Gutenberg de base, le référentiel a directives de contribution sur la façon de configurer votre environnement local et de configurer les modifications pour examen.

�� Enfin, si vous cherchez à adapter vos plugins existants à Gutenberg, voici un tutoriel détaillé sur la façon d’y parvenir: partie 1 et partie 2.

Pour commencer avec un répertoire de plugins de modèles déjà prêt à coopérer avec Gutenberg, vous pouvez envisager d’utiliser le plugin de passe-partout Gutenberg. Une telle solution vous aide avec la structure de fichier de base afin que vous puissiez vous concentrer sur le contenu du plugin. Pour utiliser le passe-partout, téléchargez et installez le plugin d’ici (zip). L’installation et l’activation du plugin passe-partout active les exemples de blocs, que nous allons explorer dans ce tutoriel. Vous pouvez trouver le code de chaque bloc dans son répertoire respectif à l’emplacement du plugin du passe-partout.

2. Configuration initiale

Juste pour vous rappeler, Gutenberg présente le concept de blocs, qui remplacent le canevas standard de l’éditeur TinyMCE. Dans certains cas, les blocs peuvent également remplacer les shortcodes et d’autres éléments de contenu supplémentaires que les plugins utilisaient pour ajouter au contenu WordPress de diverses manières.

Si vous souhaitez construire pour Gutenberg, l’approche la plus courante consiste à créer un plugin qui crée de nouveaux blocs et les met à la disposition de l’utilisateur. C’est exactement ce que nous allons faire dans ce tutoriel Gutenberg.

Les sections suivantes décrivent le processus du début à la fin.

Le plugin spécifique que nous allons créer imprime un message avec un certain arrière-plan personnalisable. Juste un exemple de construction, mais vous pouvez prendre les principes présentés ici et les appliquer à votre propre plugin plus complexe.

Les bases de la construction d’un tel plugin doivent être familières. Vous commencez par créer un nouveau répertoire dans le répertoire des plugins de WordPress. Dans ce document, nous allons placer quatre fichiers:

  • index.php – Ce fichier contient des métadonnées sur le nouveau bloc Gutenberg.
  • block.js – Ce fichier JavaScript enregistre le bloc Gutenberg personnalisé.
  • editor.css – Ce fichier contient des styles pour l’éditeur.
  • style.css – Ce fichier contient les styles pour l’extrémité avant du bloc.

Les deux premiers fichiers de la liste s’occupent de l’enregistrement du bloc et les deux fichiers suivants définissent les styles visuels des éléments du bloc.

3. Enregistrement du bloc

Dans cette étape d’enregistrement d’un bloc pour Gutenberg, nous couvrirons globalement deux choses:

  • enregistrement des métadonnées du plugin avec le moteur PHP de WordPress,
  • enregistrer le bloc avec le framework React sur lequel Gutenberg s’exécute.

Le fichier index.php contient les actifs de mise en file d’attente du bloc et de l’éditeur.

  • Tout d’abord, enregistrez les fonctions personnalisées via add_action.
  • Ensuite, définissez les fonctions qui répertorient le chemin des fichiers JavaScript et CSS pour le bloc et l’éditeur à l’aide des fonctions wp_enqueue_style et wp_enqueue_script.

Résumons cela à travers le code PHP ci-dessous:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

function gb_block_01_basic_editor_assets () {
// Scripts.
wp_enqueue_script (
«gb-block-01-basic»,
plugins_url (‘block.js’, __FILE__),
tableau (‘wp-blocks’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Modes.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url (‘editor.css’, __FILE__),
tableau (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Ceci définit les ressources de l’éditeur de base. Pour le bloc, seul le fichier CSS est nécessaire, qui est défini via la fonction wp_enqueue_style.

Le fichier block.js décrit les propriétés du bloc dans l’éditeur Gutenberg. Nous définissons les attributs et propriétés suivants:

  • title – Le titre du bloc
  • icône – Une icône à afficher pour le bloc; vous pouvez sélectionner n’importe quelle icône cette collection de dashicons
  • catégorie – Le groupe auquel le bloc appartiendra. Des exemples de groupes de blocs sont "commun," "mise en page," "intégrer."
  • edit – Une fonction JavaScript qui renvoie un élément DOM. Nous utilisons la fonction wp.element.createElement pour créer un élément DOM de paragraphe personnalisé, p, avec du texte personnalisé écrit dedans. Gutenberg invoque cette propriété lorsqu’un utilisateur clique sur le bloc depuis l’éditeur.

( une fonction() {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
title: __ (‘GB Basic’, ‘GB’),
icône: ‘shield-alt’,
catégorie: «commun»,

edit: fonction (accessoires) {
retourne wp.element.createElement (
«p»,
{className: props.className},
‘Bonjour le monde! – de l’éditeur (01 Basic Block). »
);
},

});
}) ();

De même, vous pouvez créer une propriété de sauvegarde qui est invoquée lorsque le bloc est sélectionné à partir de l’extrémité avant.

Dans le code ci-dessus, nous avons défini le className de l’élément p avec le props.className, qui créera un nom de classe commençant par wp-block, suivi du nom du bloc. Dans la section suivante de ce tutoriel Gutenberg, nous définissons les styles de cette classe.

4. Personnalisation du bloc

Comme indiqué dans la section précédente, l’étape suivante de ce didacticiel consiste à définir les propriétés des éléments de bloc. Définissons une couleur de fond, une couleur de texte et une bordure.

.wp-block-gb-basic-01 {
couleur: # 000;
fond: mistyrose;
bordure: 0,2 rouge solide;
}

Au lieu des fichiers CSS, vous pouvez également ajouter des fichiers SCSS et les compiler avec Node. De plus, voici un tutoriel sur le style des éléments Gutenberg de CSS Tricks.

Résultats de votre premier tutoriel Gutenberg

Nous sommes enfin prêts à tester le bloc que nous avons créé. Si le plugin Gutenberg est activé, rendez-vous sur le + icône et vérifiez si le nouveau bloc y apparaît.

nouveau bloc Gutenberg

Ensuite, si vous cliquez sur le bloc, vous remarquerez que le message d’en haut est vu, avec une couleur d’arrière-plan et une bordure du fichier CSS:

bloc en action

Conclusion

Nous arrivons à la fin de votre premier tutoriel Gutenberg. J’espère que cela vous a été utile. Certes, ce que nous avons construit ici n’est pas super complexe, mais il devrait vous donner une idée des structures de base lorsque vous travaillez avec Gutenberg et comment planifier votre prochain plugin.

Tout d’abord, nous avons discuté des étapes de configuration de l’environnement de développement de Gutenberg. Ensuite, nous avons introduit un plugin passe-partout pour aider au développement ultérieur. Ensuite, le focus de la discussion s’est déplacé sur différentes étapes d’enregistrement et de style d’un nouveau bloc.

J’espère que ce tutoriel Gutenberg vous a aidé à créer votre tout premier plugin Gutenberg!

Si vous avez des questions, lancez-vous dans les commentaires ci-dessous.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map