Share
Le nouvel éditeur WordPress (nom de code Gutenberg) doit sortir dans la version 5.0. C’est le moment idéal pour le maîtriser avant d’atteindre le noyau WordPress.
Je vais vous montrer comment utiliser l'API de blocs et créer vos propres blocs de contenu que vous pourrez utiliser pour créer vos publications et vos pages..
Il n'y a pas encore de date précise pour la sortie de WordPress 5.0, mais cela devrait être dans les prochains mois. Jusque-là, Gutenberg est disponible en tant que plugin autonome.
Je vous recommande fortement d'essayer le nouvel éditeur Gutenberg si ce n'est déjà fait. Il est très facile d'installer directement à partir de votre administrateur WordPress. Toutefois, comme il s'agit toujours d'une version bêta du nouvel éditeur, il n'est pas recommandé de l'utiliser pour le moment sur les sites de production. Conservez-le uniquement pour les sites de développement locaux.
Il est également essentiel d’avoir installé Gutenberg si vous souhaitez suivre ce didacticiel. De cette façon, vous pouvez expérimenter avec la création de vos propres blocs personnalisés. Le développement du nouvel éditeur s'est rapidement accéléré au cours des derniers mois. Plusieurs versions ont déjà été publiées en 2018. La dernière version de Gutenberg est actuellement à la version 2.7.0..
De nouvelles fonctionnalités sont ajoutées à chaque version et l'interface de l'éditeur est constamment améliorée en fonction des commentaires des utilisateurs. Il commence à avoir l'air beaucoup plus lisse que les versions précédentes. De plus, de nombreux bugs ont été corrigés, ce qui rend l'éditeur plus robuste.
Gutenberg fournit un nouveau moyen de créer du contenu de publication sous forme de "blocs", qui peuvent être empilés les uns sur les autres pour former une page complète. Chaque bloc individuel existe indépendamment des autres blocs et peut contenir presque tous les balises, styles et JavaScript de votre choix..
Tout au long de ce didacticiel, nous couvrirons tout ce que vous devez savoir sur l'API de bloc pour que vous puissiez commencer à créer vos propres blocs personnalisés. Une fois que vous maîtrisez les principes fondamentaux, créer des blocs plus complexes est plus facile que vous ne le pensez!
Le projet Gutenberg est une grande nouvelle pour WordPress pour une autre raison importante. Il est construit sur React. C'est vrai, pour la première fois dans WordPress, React sera inclus dans le noyau! C’est une excellente nouvelle pour les développeurs de thèmes et de plugins, car React peut facilement être ajouté à n’importe quelle page en exploitant les bibliothèques React et ReactDOM incluses dans WordPress..
Bientôt, vous pourrez créer des composants d'interface utilisateur pour tous vos projets WordPress directement dans React. Auparavant, si vous vouliez utiliser les bibliothèques React et ReactDOM, vous deviez les inclure manuellement. Les avoir dans le noyau le rend beaucoup plus pratique.
Imaginez à quel point il serait génial de créer un écran d’options de plug-in entièrement dans React! Ou que diriez-vous de certains contrôles avancés de personnalisation avancés? Ces nouveaux outils donneront aux développeurs beaucoup de liberté et de flexibilité pour créer de superbes interfaces utilisateur interactives..
Je prévois que le développement de WordPress au cours des deux prochaines années sera très intéressant et très amusant aussi!
Le concept de blocs dans le nouvel éditeur est un changement radical par rapport à l'éditeur actuel basé sur TinyMCE. Voyons donc de plus près ce qu'est un bloc avant de plonger dans l'API de bloc. Considérez les blocs comme des boîtes noires, chacune contenant une série de balises, de styles et de JavaScript, le tout encerclé dans une entité pratique appelée "bloc"..
Lorsqu'un bloc est ajouté à l'éditeur, il affiche un aperçu de son apparence sur le front-end. Presque tous les blocs ont des paramètres pour personnaliser davantage leur apparence et / ou leur comportement.
Certains des blocs disponibles par défaut dans le nouvel éditeur sont:
Cela vous donne une idée du type de contenu que vous pouvez ajouter à l'éditeur à l'aide des blocs inclus dans le nouvel éditeur. Tous ces types de blocs sont utiles mais assez basiques, alors attendez-vous à ce que de nombreux plugins apparaissent avec des blocs beaucoup plus complets pour ajouter presque tous les types de contenu auxquels vous pouvez penser..
Vous avez peut-être déjà pensé à certains blocs de contenu dont vous avez besoin pour vos propres projets. Si aucun de ceux-ci n'est disponible à Gutenberg, ils sont probablement de bons candidats pour créer votre propre bloc personnalisé..
Je vous recommande d'essayer le code présenté dans cette série de didacticiels, car il s'agit du meilleur moyen d'apprendre à créer vos propres blocs à l'aide de l'API de bloc. Bien sûr, lisez d'abord le didacticiel pour comprendre le fonctionnement de l'API de bloc, mais revenez et essayez vous-même une partie du code et commencez à créer des blocs.!
Il s'agit d'une série de didacticiels de niveau moyen à avancé. Il est donc présumé que vous n'êtes pas nouveau dans le développement WordPress. Pour tirer le meilleur parti de cette série, vous devez au moins avoir une connaissance pratique des éléments suivants:
Si vous avez besoin de mettre à jour n'importe lequel de ces sujets, il peut être judicieux de le faire avant de poursuivre. J'expliquerai les concepts au fur et à mesure, mais l'explication de chaque détail dépasse le cadre du tutoriel..
Il est courant de créer des blocs personnalisés dans WordPress avec JSX, mais cela n’est nullement requis. Si vous êtes habitué à développer des composants React en JavaScript vanille, vous pouvez également le faire dans WordPress. Le choix est entièrement à vous. Cependant, la plupart du code de bloc que vous rencontrerez sera écrit en JSX (y compris ce tutoriel). Vous aurez donc plus de facilité à comprendre les concepts si vous utilisez également JSX..
Le projet Gutenberg est encore en pleine évolution, il est donc possible que certaines choses changent même à la lecture de ce tutoriel. Cela pourrait inclure des modifications de l'interface de l'éditeur, de nouveaux composants principaux, etc..
Cependant, le nouvel éditeur est à présent assez stable et les fonctionnalités récemment ajoutées, telles que les blocs imbriqués et la réorganisation par glisser / déposer, sont passionnantes. Même si certains des détails mineurs de Comment vous implémentez des blocs peuvent changer, la chose importante à retenir est le concept général des blocs et comment vous pouvez les utiliser pour créer tout type de contenu.
Si vous êtes bloqué, je vous conseillerais de consulter le manuel officiel de Gutenberg, qui est mis à jour avec les dernières modifications. Consultez également le projet Gutenberg sur GitHub pour inspecter le code source et consigner tous les problèmes que vous pourriez rencontrer..
Cela ne fera que renforcer le projet à mesure que plus de personnes le testeront. C'est une autre bonne raison de commencer à développer des blocs maintenant, avant qu'ils ne fassent officiellement partie de WordPress!
Pour suivre le code de ce tutoriel, vous aurez besoin des éléments suivants:
Si vous ne disposez pas déjà d'un environnement de développement local, vous pouvez utiliser quelque chose comme Local by Flywheel ou DesktopServer, car ils disposent tous deux de versions gratuites et prennent en charge plusieurs systèmes d'exploitation..
Assurez-vous que vous utilisez les dernières versions de WordPress et du plugin Gutenberg pour vous assurer que vous utilisez les dernières fonctionnalités. En outre, il existe d'excellents éditeurs de code. Si vous n'en avez pas encore installé, jetez un coup d'œil aux éditeurs gratuits tels que Visual Studio Code ou Atom, qui devraient être plus que suffisants..
Pour créer facilement de nouveaux blocs, nous utiliserons une boîte à outils relativement nouvelle appelée créer-guten-block. Il vous permet de créer rapidement un nouveau plug-in contenant tout le code d'installation et de démarrage requis pour créer des blocs. C’est aussi une boîte à outils à configuration zéro, de sorte qu’elle fonctionne immédiatement de la même manière que le créer-réagir-app Boîte à outils pour échafauder de nouvelles applications React avec un effort minimal. Donc si vous avez déjà utilisé créer-réagir-app, vous saurez à quoi vous attendre.
Voyons maintenant comment utiliser cet outil pour créer des blocs de Gutenberg. Ouvrez une fenêtre de terminal dans votre dossier de plugin (/ wp-content / plugins /) pour votre site de développement local et entrez les informations suivantes:
npx create-guten-block mon-custom-block cd mon-custom-block npm start
(Remarque: npm v5.2 + est requis pour utiliser le npx commander.)
Après quelques minutes, un nouveau plugin sera créé dans un dossier nommé mon bloc personnalisé contenant tous les fichiers et outils nécessaires à la création de blocs avec React! Pas mal, hein?
Le nom du plugin dans l’administrateur de WordPress sera my-custom-block - CGB Gutenberg Block Plugin. Allez-y et activez-le.
Le plugin crée un nouveau bloc que nous pouvons utiliser dans l'éditeur Gutenberg. Pour tester notre nouveau bloc, accédez à l'éditeur de publication et cliquez sur le texte de substitution intitulé Ecrivez votre histoire.
Ensuite, appuyez sur le / clé pour afficher une fenêtre contextuelle que nous pouvons utiliser pour rechercher tous les blocs disponibles.
Remarque: il existe d'autres moyens de rechercher un bloc, mais j'aime bien utiliser / pour afficher la fenêtre du bloc de recherche assez rapidement et facilement. Mais utilisez la méthode avec laquelle vous vous sentez le plus à l'aise.
Avec le champ de recherche ouvert, commencez à taper mon bloc personnalisé et sélectionnez mon-custom-block - Bloc CGB. Ceci affichera notre bloc personnalisé dans la fenêtre de l'éditeur.
Pour le moment, il ne s'agit que d'un bloc standard, qui ne fait rien d'autre que d'afficher du texte de substitution dans une zone colorée. Cependant, il met en évidence un aspect intéressant de la création de blocs.
Cliquez sur Voir l'article pour voir à quoi le message ressemblera aux visiteurs du site.
Comme vous pouvez le constater, le contenu et les styles du bloc rendu sont différents à l’avant et à l’arrière. Ceci s'applique également au code JavaScript, qui peut être différent pour le front-end.
La raison de la différence de rendu est que, lors de la création de blocs, vous devez déclarer spécifiquement des fonctions de rendu front-end et back-end distinctes..
En effet, de nombreux blocs nécessitent le rendu d’éléments d’interface utilisateur supplémentaires dans l’éditeur de publication pour permettre la configuration des paramètres de bloc. Comme cela ne concerne que l'éditeur de publication, il est complètement redondant lors du rendu du bloc au premier plan. Par conséquent, vous spécifiez la sortie à afficher au serveur dans une fonction de rendu distincte..
Bien que cette approche soit logique et fonctionne bien, elle soulève des problèmes de duplication de code. Si vous ne faites pas attention, vous pourriez vous retrouver avec beaucoup de définitions de contenu en double.
Dans la mesure du possible, il est judicieux de séparer le contenu commun aux fonctions de rendu front-end et back-end afin de réduire les doublons. Nous suivrons cette approche tout au long de cette série de tutoriels.
Dans ce didacticiel, j'ai présenté le concept de ce qu'est un bloc et pourquoi le nouvel éditeur Gutenberg sera une grande nouvelle lorsqu'il sera livré avec WordPress 5.0. C'est un véritable changement par rapport à l'éditeur actuel basé sur TinyMCE.
Pour aider à créer rapidement des blocs, créer-guten-block est un outil très utile qui vous permet de créer un plugin complet contenant un bloc de démarrage fonctionnel prêt à être personnalisé.
Nous avons terminé en voyant comment utiliser notre bloc personnalisé dans le nouvel éditeur de publication, et nous avons découvert que le rendu au recto et au verso peut être très différent. À Gutenberg, vous n'êtes pas obligé de faire correspondre le résultat!
Dans la partie 2, nous allons entrer dans les détails de l'API de bloc et comment vous pouvez en tirer parti pour créer vos propres blocs personnalisés..
En attendant, consultez certains de nos autres articles sur WordPress Gutenberg.!
Accentsconagua