Les bases du développement pour WordPress Gutenberg pour les débutants

Cet article vise à vous aider à comprendre les concepts clés du développement pour le nouvel éditeur de WordPress ; Gutenberg. Gutenberg est encore assez nouveau au moment d’écrire ces lignes. Et comme pour toutes les nouvelles technologies en phase de naissance, la documentation et les normes manquent malheureusement un peu.

Le site de documentation de WordPress a une grande section dédiée à Gutenberg pour les développeurs ; appelé le manuel de l’éditeur de Gutenberg. Il contient déjà pas mal d’informations. Mais cela peut être un peu déroutant ou intimidant pour quelqu’un qui est tout nouveau dans les technologies basées sur Javascript. Pour les développeurs axés sur PHP qui n’ont peut-être que des connaissances de base en Javascript/jQuery, les nouvelles technologies de WordPress peuvent sembler intimidantes. Mais croyez-moi, une fois que vous aurez appris les concepts clés, vous verrez quelles nouvelles possibilités vous avez maintenant en tant que développeur WordPress.

Commençons par les bases absolues. Quel(s) langage(s) de programmation et outils auriez-vous besoin d’utiliser ou d’apprendre pour développer au mieux pour Gutenberg ?

Le langage et les bibliothèques que vous devez connaître

La réponse courte au langage que vous devez utiliser pour développer vers Gutenberg est: Javascript. Cependant, dans le monde de Javascript, il existe de nombreux concepts, extensions et outils que vous devez connaître.

Il y a d’abord et avant tout une question de version de Javascript. Il existe une normalisation officielle de Javascript ; ECMAScript. ECMAScript 5 (souvent abrégé en ES5) est sorti il ​​y a environ 10 ans et est la version Javascript que nous connaissons le mieux. Ensuite, nous avons ECMAScript 6 (souvent abrégé en ES6) qui est sorti en 2015. Certaines personnes appellent cette version ES2015. Et enfin, il y a ESNext, qui est un nom dynamique couvrant la prochaine version, contenant des propositions que nous espérons être incluses dans la prochaine version standardisée de Javascript.

Vous pensez peut-être dans le sens de "donc tout va bien et tout, les nouvelles versions de Javascript signifient simplement plus de fonctionnalités. Je vais donc utiliser le plus récent." Mais il y a une chose très importante que vous devez savoir concernant les versions de Javascript et c’est ceci : la plupart des navigateurs actuels ne peuvent comprendre que ES5.

Cela signifie que si vous souhaitez écrire du Javascript dans ES6 ou ESNext, vous devez configurer des outils qui transforment votre code en ES5 afin que les navigateurs puissent le comprendre. Mais avant de commencer à penser à ignorer complètement l’apprentissage de l’ES6 et de l’ESNext, rappelez-vous que l’ES5 a 10 ans. Et cela vous demandera d’écrire beaucoup plus de code. Il sera également beaucoup moins lisible et plus complexe que si vous l’écriviez dans ES6 ou ESNext.

De plus, pour les concepts de Gutenberg, vous souhaitez également utiliser JSX – une extension de syntaxe pour Javascript. JSX est également un langage que les navigateurs ne peuvent pas comprendre sans le transformer.

Alors pourquoi s’embêter avec ES6, ESNext ou JSX ?

Si vous n’êtes toujours pas convaincu que ES6/ESNext vaut l’étape supplémentaire pour le transformer, laissez-moi vous montrer une comparaison de code. Avec ES6 et JSX, vous pouvez écrire ceci pour renvoyer un simple paragraphe ; avec une classe et une sortie dynamique à partir d’une variable ;

Pour ceux d’entre vous qui sont nouveaux dans ce domaine et qui pensent que j’ai oublié des citations – non, ce n’est pas le cas. C’est la simplicité de JSX. Comparons ce qui précède avec la façon dont vous écririez avec les bibliothèques Javascript d’ES5 et de WordPress :

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

Tout le code ci-dessus est requis pour afficher ce que ES6 et JSX peuvent faire dans une seule ligne très facile à lire ! Imaginez que vous construisiez une interface utilisateur plus complexe avec des événements et des conditions, alors qu’un simple paragraphe nécessite ce morceau de code encombrant.

Convaincu? Bien!

Outils de transformation et React JS

L’outil le plus courant, et celui que WordPress utilise, pour transformer ES6/ESNext est Babel. Généralement, vous utiliserez Babel comme plugin pour Webpack, qui est un outil qui regroupe et minimise vos fichiers Javascript. Les deux outils utilisent Node.js, qui vous donne quelques outils pour exécuter des scripts pour Webpack et Babel dans la ligne de commande. Si tout cela semble déroutant, j’ai un article qui explique en profondeur comment configurer tous ces outils pour le développement de Gutenberg.

La deuxième chose que vous devez savoir concernant les technologies est que Gutenberg est basé sur une couche d’abstraction au-dessus de React JS. React JS est une bibliothèque Javascript open-source maintenue par Facebook, et a été publiée vers l’année 2013. Parce que React existe depuis un certain temps, il existe de nombreux tutoriels, guides et documentation pour cette bibliothèque. Le site officiel de React propose un bon tutoriel détaillé pour vous qui êtes nouveau sur React. Vous n’avez certainement pas besoin d’être un expert en React pour développer pour Gutenberg, mais les bases de son fonctionnement avec les composants et les états vous aideront beaucoup à comprendre Gutenberg.

De conclure:

• Apprendre React JS contribuera grandement à comprendre comment développer pour Gutenberg. Surtout si vous souhaitez créer vos propres blocs personnalisés ou personnaliser ceux qui existent déjà.
• Vous pouvez le faire en utilisant uniquement Javascript ES5, mais il est définitivement recommandé d’apprendre ES6, ESNext et JSX.
• Familiarisez-vous avec les outils nécessaires pour transformer votre code ES6 / ESNext / JSX. Ces outils sont npm, Webpack et Babel.

La nouvelle façon de stocker le contenu des publications, et pourquoi

L’un des plus grands avantages de Gutenberg est de s’éloigner du HTML fixe dans le contenu des publications. WordPress, avant Gutenberg, et la plupart des contenus d’articles de magasin CMS basés sur le Web en HTML pur. Ce n’est généralement pas un problème avec un contenu simple (titres et paragraphes). Mais cela pourrait être un problème plus important avec un contenu riche plus complexe et dynamique.

Tout CMS qui autorise le contenu dynamique dans le contenu de l’article rencontrera des problèmes pour l’enregistrer en tant que code HTML valide. Il peut s’agir de n’importe quoi d’une image faisant référence à son ID dans le système au lieu de l’URL complète. Ou un widget qui affiche dynamiquement les derniers messages dans une catégorie donnée. Normalement, cela sera résolu en produisant du code HTML crypté personnalisé qui n’a aucun sens d’être produit normalement. Et laissez ensuite l’analyseur CMS gérer la transformation de ces éléments HTML en quelque chose de significatif ou de dynamique. L’inconvénient est que si vous transférez votre contenu dans un autre CMS, cela se traduira souvent par un code HTML laid. Le contenu serait rempli de code HTML non analysé que vous devez nettoyer manuellement. C’est ce problème que Gutenberg vise à résoudre.

Avec Gutenberg, WordPress a choisi d’enregistrer des informations supplémentaires et dynamiques sous forme de commentaires HTML. Les commentaires HTML ne sont jamais visibles pour les utilisateurs sur le site Web et, fondamentalement, tout est autorisé dans le bloc de commentaires. Un commentaire HTML commence par <!--et se termine par -->, et Gutenberg stocke les données dans une certaine structure au format JSON. Chaque bloc de Gutenberg est entouré d’un commentaire HTML de départ et d’un commentaire HTML de fermeture après celui-ci.

La nouvelle façon dont le contenu des publications est stocké

Je n’entrerai pas dans les détails sur la structure des blocs de commentaires – vous trouverez un guide détaillé à ce sujet dans le manuel de l’éditeur WordPress. Mais à titre d’exemple, un simple paragraphe dans le contenu de l’article de Gutenberg sera enregistré dans la base de données sous le nom :

En ce qui concerne le contenu dynamique, généralement aucun code HTML ne sera généré. Toutes les informations dont WordPress a besoin pour comprendre ce que fait ce bloc se trouvent dans les commentaires HTML. Voici comment Gutenberg stocke un bloc de "Derniers messages":

Étant donné que tout est un commentaire HTML, le transfert de vos publications dans un autre WordPress sans Gutenberg ou un autre CMS garantira qu’aucun HTML laid non analysé n’est recraché. Il sera simplement ignoré et sauté.

Comme vous l’avez probablement déjà compris, les blocs de commentaires commencent par le nom du bloc, préfixé par ‘ wp‘. S’il existe des paramètres personnalisés, ils seront affichés après le nom dans JSON, comme vous pouvez le voir dans l’exemple du dernier bloc de messages. Gutenberg les appelle des attributs, et ce concept vous sera très familier lorsque vous commencerez à apprendre à développer pour Gutenberg.

Bon à savoir :
si vous souhaitez approfondir la manière dont le nouveau contenu de publication est enregistré, vous pouvez consulter votre wp_poststableau dans votre base de données. Il existe une autre méthode plus simple pour consulter la valeur complète de la base de données, à partir des modèles WordPress. Dans votre modèle unique dans la boucle, utilisez simplement " echo get_the_content()". L’utilisation du " " normal the_content()affichera le contenu de la publication analysée, mais l’écho de la valeur de contenu affichera exactement ce qui est stocké dans la base de données. Vous pouvez utiliser l’outil Inspecter ou afficher la source dans Chrome ou Firefox pour voir les blocs de commentaires.

Ce que vous pouvez faire en tant que développeur dans Gutenberg

Vous avez plusieurs options pour personnaliser vos thèmes ou plugins pour Gutenberg. Vous trouverez ci-dessous les personnalisations les plus courantes que vous feriez probablement en tant que développeur.

Étendez et personnalisez les blocs existants

WordPress Gutenberg est livré avec un grand nombre de types de blocs, et vous pouvez étendre n’importe lequel d’entre eux. Vous pouvez également supprimer certains d’entre eux, ou décider pour certains cas d’autoriser ou de supprimer uniquement certains d’entre eux.

La méthode la plus courante pour étendre un bloc consiste à ajouter des styles de bloc personnalisés, qui sont des variations de style d’un bloc. Les styles de blocs ne sont pas si courants dans WordPress par défaut, mais il y en a. Jetez un œil au bloc Citation. Dans l’éditeur Gutenberg, vous aurez une boîte dans la barre latérale droite appelée "Styles".

Une autre façon de personnaliser les blocs existants consiste à utiliser des filtres. Vous êtes probablement familier avec les filtres utilisant PHP dans WordPress, mais avec Gutenberg, il existe désormais des filtres basés sur Javascript sur les blocs. Par exemple, vous pouvez ajouter vos propres attributs personnalisés (paramètres) à tous les types de blocs ou à des types spécifiques ou filtrer la manière dont ils sont enregistrés ou générés.

Vous pouvez également manipuler les catégories de blocs, ainsi que supprimer ou autoriser certains blocs dans certaines situations. Ou vous pouvez par exemple vous assurer que seuls quelques types de blocs sont autorisés pour un type de publication personnalisé.

Créez vos propres blocs personnalisés

La création de blocs personnalisés est peut-être la première pensée de la plupart des développeurs WordPress. Les blocs par défaut de WordPress peuvent aller très loin, mais si vous créez un thème ou un plugin plus complexe, vous avez probablement des besoins spécifiques. Par exemple, utiliser Gutenberg pour créer une belle page d’accueil avec des raccourcis vers le contenu et le contenu dynamique. Il est possible d’obtenir la plupart des personnalisations en utilisant l’option de classe CSS qui existe pour tous les blocs. Mais ce n’est pas particulièrement convivial.

Écrire vos propres blocs personnalisés est probablement le plus difficile dans la personnalisation de votre thème ou plugin pour Gutenberg. Mais cela peut aussi être le plus gratifiant! Non seulement vous serez en mesure de créer des blocs qui ressemblent exactement à ce que vous voulez, mais c’est aussi un excellent moyen d’apprendre rapidement la nouvelle technologie basée sur Javascript.

Assurez-vous que votre thème est prêt pour Gutenberg

Si vous êtes un développeur de thèmes WordPress, vous devez savoir qu’il y a beaucoup de configuration dont votre thème pourrait avoir besoin pour Gutenberg, en particulier sous la forme de fichiers add_theme_support(). Le manuel de WordPress donne un bon aperçu de tous les supports de thème que vous devez prendre en compte pour rendre votre thème prêt pour Gutenberg.

Comme WordPress par défaut gérera lui-même la plupart des styles des blocs par défaut, vous ne devriez donc pas trop vous soucier de leur style dans votre thème. Mais les développeurs de thèmes sont généralement plus pointilleux sur leur conception et leur style. Vous devrez donc probablement ajuster ou ajouter au style de bloc. Vous pouvez ajouter des styles d’éditeur à l’interface uniquement, à l’éditeur uniquement ou aux deux. Le manuel WordPress Gutenberg fournit un aperçu des styles d’éditeur et des styles de bloc par défaut.

Il existe également un concept de modèles de blocs dans lequel vous pouvez prédéfinir les blocs qui doivent apparaître dans les publications. Les modèles de bloc peuvent être utilisés comme espace réservé pour aider l’éditeur à remplir les blocs. Mais il peut également être utilisé pour définir un ensemble fixe de blocs et de positions.

Et enfin, il existe des fonctions disponibles pour travailler avec l’analyseur Gutenberg et comment extraire les blocs des publications. Étant donné que tout le contenu est enregistré avec des informations complètes sur le type de contenu, vous pouvez facilement extraire des parties spécifiques du contenu de la publication. Un bon exemple consiste à extraire le premier paragraphe des messages à afficher comme extrait. Une fonction PHP très utile pour ce concept est [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), qui utilise l’analyseur de Gutenberg sur le contenu de l’article fourni et en retour, vous obtiendrez un tableau PHP avec toutes les informations et le contenu du bloc.

Conclusion

J’espère que cet article ne vous a pas seulement appris quelque chose sur le développement pour Gutenberg, mais vous a également rendu curieux et intéressé à en savoir plus ! En tant que développeur WordPress axé sur PHP qui a d’abord résisté à l’idée de passer à la technologie basée sur Javascript, je peux vous dire qu’une fois que vous aurez franchi le pas pour en savoir plus sur la « nouvelle méthode », vous serez heureux de l’avoir fait. Gutenberg ouvre de nouvelles façons de personnaliser, concevoir et afficher le contenu WordPress sans avoir besoin de constructeurs de pages ou de thèmes avec des bibliothèques lourdes pour permettre un contenu de publication flexible et beau. Nous avons juste besoin d’apprendre à travailler avec de manière optimale!