Ressources pour maîtriser la technologie derrière Gutenberg WordPress

L’un des plus grands défis pour les développeurs WordPress est de récupérer nos connaissances pour s’adapter au nouveau paradigme de programmation derrière le nouvel éditeur de blocs. Le principal changement à Gutenberg a été l’utilisation d’une série de nouvelles technologies. En général, les développeurs WordPress utilisent principalement PHP pour créer des plug – ins, et les plus petits sont écrits en javascript. Maintenant, l’outil clé est Javascript, et PHP n’est utilisé que comme base pour créer des plug – ins et des structures de thème. Vous pourriez penser que ce n’est pas le cas et que PHP a encore un long chemin à parcourir dans WordPress. Je ne vous en veux pas, car le changement est toujours difficile à accepter. Cependant, je pense que vous avez tort. JavaScript n’est plus l’avenir de WordPress, mais le présent. Si vous voulez garder votre position, vous devez vous rattraper immédiatement.
Apprenez le javascript à fond, comme Matt l’a dit… Heureusement, même s’ils insistent pour que nous apprenions le javascript à fond, je ne pense pas que ce soit le cas. Il suffit de connaître les exigences minimales que tout tutoriel peut vous enseigner. Grâce aux ressources que je vais vous présenter dans cet article, vous pouvez apprendre tout ce dont vous avez besoin pour développer rapidement Gutenberg. Apprendre le javascript lorsque vous apprenez un nouveau langage de programmation, vous devez d’abord comprendre sa syntaxe. C’est la seule façon de commencer à programmer avec. Une fois que vous l’avez fait, vous êtes prêt à commencer la création.
Lorsque vous voulez apprendre le javascript, vous n’avez pas besoin de lire plus de 1000 pages de manuel… Il y a beaucoup d’options simples et intéressantes, mais elles sont aussi assez complètes. Si vous n’avez jamais utilisé JavaScript auparavant, voici quelques tutoriels dans différents formats pour vous aider à démarrer: Javascript Language foundations: un cours vidéo gratuit de ZAC Gordon. JavaScript 30: apprenez avec Wes Bos dans ce cours de gra en posant des défis pendant 30 jours par jour
Tuito. Une nouvelle introduction au javascript: une brève introduction au JavaScript par Mozilla guys. JavaScript pour chat: une autre introduction au Javascript, avec un peu d’humour pour chat. Sports Me: un réseau gratuit où vous pouvez pratiquer avec Javascript et télécharger votre solution pour que votre tuteur l’évalue. Jsbooks: Si vous êtes l’une des personnes qui aiment apprendre à travers les livres, beaucoup sont gratuits ici. Au lieu de cela, si vous avez déjà une certaine expérience avec Javascript, vous pouvez étendre vos connaissances en apprenant des concepts avancés sur les fonctions, l’exécution asynchrone engagée et asynchrone \/ attente, en bref, tout ce que vous savez sur esnext.
Une journée de formation en javascript devrait suffire pour acquérir les connaissances de base et une maîtrise facile de tout ce dont vous avez besoin pour développer sur WordPress Block editor. Apprenez REACT et Redux en plus de Javascript, vous aurez besoin d’une certaine connaissance de REACT et Redux pour développer sur l’éditeur de blocs WordPress. C’est ce que tout le monde vous dira, mais ce n’est pas le cas. Vous pouvez le développer pour Gutenberg sans avoir besoin de concepts React ou Redux. Bien sûr, ce serait mieux si vous saviez comment ils fonctionnent et à quoi ils servent.
Ce que vous ne pouvez pas éviter, c’est de comprendre comment la syntaxe jsx crée des éléments dans React que nous utiliserons pour définir les interfaces des composants (qu’il s’agisse de blocs Gutenberg ou de vues dans l’éditeur). Supposons que vous définissiez l’interface entre le produit et le composant shoppinglist et que vous les utilisiez dans le bloc Gutenberg. En utilisant le symbole standard, vous pouvez le faire en utilisant la fonction WP comme suit. Éléments Createelement () fourni par Gutenberg: d’autre part, si vous utilisez jsx dans la méthode render (), ce n’est qu’un symbole HTML, alors vous avez ce qui suit:
L’utilisation de jsx simplifie l’écriture et la réutilisation des composants parce que le Code
Le livre est facile à lire. Comme vous pouvez le voir, dans l’exemple précédent, nous avons créé le composant React sans aucun concept de React, nous savions seulement comment traiter jsx et l’utiliser comme un HTML super fonctionnel. En outre, vous pouvez utiliser les composants existants dans Gutenberg. Vous pouvez les voir dans le visionneur, qui est également lié aux documents officiels. Juste une question. Vous devez utiliser Babel pour transposer le Code afin que les symboles jsx finissent par devenir du Code normal que n’importe quel navigateur peut interpréter. Cependant, ce n’est pas une farce parce que vous pouvez l’automatiser en utilisant webpack.
Redux est utilisé pour maintenir l’état de l’application. D’autre part, vous avez probablement entendu parler de Redux. C’est un outil pour enregistrer et gérer l’état dans une application JavaScript. Encore une fois, si vous êtes intéressé à apprendre à l’utiliser, je recommande ces vidéos Wes Bos, mais ce n’est même pas nécessaire. Si vous devez créer votre propre archive de données, vous n’utiliserez pas Redux, mais vous pouvez utiliser le paquet @ WordPress \/ data inclus dans Gutenberg. Ce paquet utilise Redux en interne, mais ce n’est pas important. De plus, nous discutons d’un cas d’utilisation complexe dont vous n’avez peut – être pas besoin, du moins à un stade précoce. Alors n’y pense pas maintenant.
NPM, webpack, Babel, postss et eslint en plus des bases de JavaScript et REACT et jsx, pour la nouvelle ère qui existe déjà dans WordPress, vous devez comprendre les technologies suivantes afin que vos tâches de développeur soient plus simples et hautement automatisées: NPM: le gestionnaire de dépendances pour JavaScript. Il suffit de définir les dépendances requises et de les installer en exécutant NPM install. Paquet Web: paquet JavaScript. La mise en place n’est pas facile au départ, mais une fois que vous l’avez, vous pouvez facilement gérer les fichiers javascript: transpirer, minimiser… Babel: Le compilateur JavaScript qui utilise la syntaxe aujourd’hui
Est la prochaine version de cette langue. Postcss: identique à Babel, mais utilisé pour les feuilles de style css. Eslint: détecte les erreurs d’utilisation et de style Javascript pour les éviter lors de l’écriture du Code. J’ai déjà parlé de la plupart de ces technologies. Cependant, je vais bientôt écrire un autre article où je vais expliquer comment les intégrer dans un projet de développement WordPress afin que vous puissiez les utiliser dans des cas réels.
Comment créer de nouveaux blocs pour Gutenberg passons maintenant à la partie la plus importante: ce dont nous avons besoin pour commencer à créer de nouveaux blocs pour l’éditeur WordPress. La première chose à faire pour créer un bloc est de maîtriser la fonction WP. Bloc. Registerblocktype (). Vous trouverez la documentation la plus complète sur cette fonctionnalité dans le Guide officiel de Gutenberg. Les paramètres de cette fonction sont la chaîne avec le nom du bloc (qui doit être unique) et l’objet avec la configuration du bloc, dont la partie la plus importante est la fonction d’enregistrement et d’édition du bloc. Je l’ai expliqué brièvement dans cet article.
Si cela semble trop compliqué, vous pouvez commencer à utiliser le kit Ahmad awais appelé create Guten block. Ceci crée une structure de dossier qui contient toutes les dépendances nécessaires pour créer le premier bloc. Vous pouvez voir un tutoriel sur la façon de l’utiliser dans la vidéo suivante: Enfin, si cela semble encore trop compliqué, vous pouvez utiliser la dernière option. Vous connaissez certainement le plug – in de champ personnalisé avancé (ACF). Ce plug – in vous permettra de créer des blocs pour Gutenberg sans avoir besoin d’un peu de connaissance du JavaScript. Mais je ne vais pas t’expliquer, je vais laisser Mauricio Guelfes le faire. Allez voir son discours sur ce thème au wordpcamp Saragosse 2019, que vous avez déjà vu sur WordPress. TV (espagnol):
Comment en plus de créer un nouveau
Je te bloque. Par exemple, vous pouvez créer un plug – in dans Gutenberg et ajouter un panneau d’options à droite de l’éditeur qui contient tout ce que vous voulez. Mieux encore, la documentation officielle WordPress contient ce tutoriel complet avec des exemples concrets de ce que vous pouvez y faire. En plus de cela, vous pouvez étendre l’éditeur WordPress en ajoutant de nouveaux styles aux blocs existants, en ajoutant plus de personnalisations aux blocs, en supprimant ou en cachant des blocs, ou en filtrant les catégories de blocs dans l’éditeur. Je vous suggère de consulter votre documentation officielle dans le Guide des développeurs et designers de Gutenberg, que vous trouverez ici. Ne vous inquiétez pas, parce qu’il y a beaucoup d’informations, c’est l’une des meilleures ressources que vous avez. Une image caractéristique de Christian fregnan dans unsplash.