8 tutoriels Gutenberg pour les développeurs

Gutenberg est le nouvel éditeur de WordPress, introduit dans WP 5.0. Bien que cette inclusion change certainement les choses pour les utilisateurs quotidiens et ouvre de nombreuses possibilités de création de contenu, elle ouvre également de nombreuses opportunités aux développeurs. L'éditeur est conçu pour être aussi extensible que possible, et vous pouvez ajouter tout ce que vous pouvez imaginer au constructeur. Nous avons rassemblé certains des meilleurs tutoriels Gutenberg pour les développeurs que nous avons pu trouver afin que vous puissiez commencer à ajouter vos propres fioritures à la nouvelle expérience WordPress.

Une note rapide

Quelques choses avant de plonger : Gutenberg est écrit avec une bibliothèque JavaScript appelée React. C'est la même bibliothèque dans laquelle Instagram est écrit, ainsi que notre propre Divi Builder bien-aimé. Nous pouvons donc garantir que ce sont de bonnes choses que vous voulez apprendre.

Parce que si vous voulez vraiment vous plonger dans le développement de Gutenberg, vous allez également vous lancer dans JavaScript. Comme Matt Mullenweg l'a dit il y a quelques années, vous allez « apprendre JavaScript. Profondément." Nous avons quelques bons articles que vous pouvez parcourir pour voir quel genre de choses fonctionnera pour vous.

Prenez un peu de temps, parcourez-les et voyez à quoi ça ressemble. Et lorsque vous les avez mis en signet ou enregistrés dans Pocket, installez-vous et jetez un œil à certains des meilleurs didacticiels Gutenberg sur le Web.

1. La page officielle de Gutenberg

Vous devez commencer par le site officiel WordPress Gutenberg. Je veux dire, si vous ne connaissez pas la documentation de base, rien de ce qui précède n'aura de sens. Ils ont récemment fait de la page d'accueil une démo entièrement interactive du constructeur, ainsi que des liens vers leur manuel FAQ et un didacticiel appelé The Language of Gutenberg, qui est à peu près obligatoire à lire avant de poursuivre le développement.

2. Gutenberg.Actualités

Bien qu'il ne s'agisse pas techniquement d'un didacticiel, Gutenberg.news regroupe en un seul endroit certains des tuts les plus en vue/de qualité du Web. Je passe par là de temps en temps pour voir les nouveautés et je finis par tomber dans le trou du clic à chaque fois. Ils ont un mélange de didacticiels pour développeurs et utilisateurs, mais vous trouverez des tutoriels tels que Création de blocs Guten personnalisés avec le composant de texte enrichi et des tweets avec des liens vers les dépôts Github qui peuvent vous apprendre à convertir vos codes courts existants en blocs Gutenberg.

3. Le guide de développement de Gutenberg

Je suppose que c'est juste là dans le nom, hein ? Le Guide de développement Gutenberg est une série de tutoriels qui vont des développeurs débutants aux vétérans expérimentés de WP. Le Hub Gutenberg ressemble beaucoup à Gutenberg.news, mais le contenu ne se chevauche pas toujours (parfois c'est le cas). Encore une fois, c'est un déclic si vous recherchez des tutoriels Gutenberg pour les développeurs (ou n'importe qui, vraiment). Considérez-vous averti.

4. Cours de développement Gutenberg de Zac Gordon

Toutes les meilleures choses de la vie ne sont pas gratuites, et l'incroyable cours de développement Gutenberg de Zac Gordon en est la preuve. L'un des premiers cours majeurs (sinon le premier) AZ sur la nouvelle expérience d'édition WP. Le cours est mis à jour avec de nouvelles informations au fur et à mesure que Gutenberg est mis à jour, alors n'ayez pas peur de payer les 79 $ pour quelque chose qui sera obsolète. Zac est bien connu dans la communauté WordPress, et ce cours vous montrera absolument pourquoi. Il existe même des exemples de tutoriels vidéo que vous pouvez utiliser. De cette façon, vous saurez à l'avance dans quoi vous vous engagez.

5. Le blog de Zac Gordon

Vous comprenez probablement que Zac Gordon est un gourou de Gutenberg. Mais vous n'êtes pas limité à son cours payant. Sur son blog, il a un tas de tutoriels Gutenberg pour les développeurs que vous voudrez également consulter.

6. Comment préparer vos plugins pour Gutenberg

TutsPlus a une procédure pas à pas vraiment solide de toutes les différentes manières que vous devez savoir pour vous assurer que vos plugins ne se cassent pas lorsqu'un utilisateur a Gutenberg actif. Du fonctionnement actuel des métabox à l'API REST et à l'enregistrement de différents types de blocs, c'est votre guichet unique pour voir toutes les façons dont vous pouvez intégrer vos plugins avec le nouvel éditeur Gutenberg pour WordPress.

7. Réagissez à Fullstack

Tout développeur Gutenberg devrait être familier avec React, comme je l'ai déjà mentionné. Fullstack React est l'un de mes programmes préférés pour vous familiariser avec la bibliothèque. C'est un programme de 30 jours, et vous passez en revue les différents principes fondamentaux dont vous aurez besoin pour utiliser la bibliothèque. Bien qu'il soit probablement préférable d'être familiarisé avec JavaScript, je suis entré sans pouvoir écrire une fonction et j'ai compris ce qui se passait. Bien qu'un cours payant soit impliqué, vous pouvez télécharger gratuitement l'intégralité du livre au format PDF (plus de 300 pages), afin de voir si c'est ce que vous souhaitez utiliser pour plonger dans l'environnement Gutenberg.

8. Réagir moderne avec Redux

Gutenberg utilise également le conteneur JavaScript Redux. Chez Udemy, Stephen Grider propose un cours qui vous apprendra à utiliser le conteneur préféré de Gutenberg avec sa bibliothèque préférée. Certes, le prix standard de 179,99 $ est un peu rebutant; cependant, Udemy propose régulièrement des remises importantes sur les cours (au moment où j'écris ceci, il y a une vente folle pour 10,99 $ par exemple). Si le prix est plus élevé que ce que vous voulez payer maintenant, si vous êtes capable d'attendre un peu, vous obtiendrez probablement un accord là-dessus. Cela dit, j'ai personnellement suivi le cours React et React Native de Grider, donc je peux garantir à quel point celui-ci devrait être bon.

Allons « Gut »

C'est un Gutenpun, tu vois ? Sérieusement, Gutenberg est l'avenir de WordPress. Que vous aimiez la nouvelle façon de créer du contenu ou que vous ayez installé le plugin Classic Editor pour le garder à l'ancienne, c'est ici. Et si vous êtes un développeur WordPress, vous devrez vous en occuper. Ce n'est vraiment pas si difficile de poursuivre vos études et de voir la direction que prend Gutenberg. N'importe lequel des didacticiels ci-dessus devrait vraiment vous aider (ou vous vider ) sur la bonne voie pour saisir pleinement la puissance et l'extensibilité de l'éditeur.

Quels tutoriels ou ressources Gutenberg avez-vous utilisés pour vous préparer à la nouvelle ère du développement WordPress ?

Article présenté en image par 32 Pixels / shutterstock.com