Commen\u00e7ons par les bases absolues. Quel(s) langage(s) de programmation et outils auriez-vous besoin d’utiliser ou d’apprendre pour d\u00e9velopper au mieux pour Gutenberg\u00a0?<\/p>\n
Le langage et les biblioth\u00e8ques que vous devez conna\u00eetre<\/h2>\n
La r\u00e9ponse courte au langage que vous devez utiliser pour d\u00e9velopper vers Gutenberg est: Javascript. Cependant, dans le monde de Javascript, il existe de nombreux concepts, extensions et outils que vous devez conna\u00eetre.<\/p>\n
Il y a d’abord et avant tout une question de version de Javascript. Il existe une normalisation officielle de Javascript\u00a0; ECMAScript. ECMAScript 5 (souvent abr\u00e9g\u00e9 en ES5<\/strong>) est sorti il \u200b\u200by a environ 10 ans et est la version Javascript que nous connaissons le mieux. Ensuite, nous avons ECMAScript 6 (souvent abr\u00e9g\u00e9 en ES6<\/strong>) qui est sorti en 2015. Certaines personnes appellent cette version ES2015. Et enfin, il y a ESNext<\/strong>, qui est un nom dynamique couvrant la prochaine version, contenant des propositions que nous esp\u00e9rons \u00eatre incluses dans la prochaine version standardis\u00e9e de Javascript.<\/p>\n Vous pensez peut-\u00eatre dans le sens de "donc tout va bien et tout, les nouvelles versions de Javascript signifient simplement plus de fonctionnalit\u00e9s. Je vais donc utiliser le plus r\u00e9cent." Mais il y a une chose tr\u00e8s importante que vous devez savoir concernant les versions de Javascript et c’est ceci\u00a0: la plupart des navigateurs actuels ne peuvent comprendre que ES5.<\/p>\n Cela signifie que si vous souhaitez \u00e9crire 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 \u00e0 penser \u00e0 ignorer compl\u00e8tement l’apprentissage de l’ES6 et de l’ESNext, rappelez-vous que l’ES5 a 10 ans. Et cela vous demandera d’\u00e9crire beaucoup plus de code. Il sera \u00e9galement beaucoup moins lisible et plus complexe que si vous l’\u00e9criviez dans ES6 ou ESNext.<\/p>\n De plus, pour les concepts de Gutenberg, vous souhaitez \u00e9galement utiliser JSX<\/strong> – une extension de syntaxe pour Javascript. JSX est \u00e9galement un langage que les navigateurs ne peuvent pas comprendre sans le transformer.<\/p>\n Si vous n’\u00eates toujours pas convaincu que ES6\/ESNext vaut l’\u00e9tape suppl\u00e9mentaire pour le transformer, laissez-moi vous montrer une comparaison de code. Avec ES6 et JSX, vous pouvez \u00e9crire ceci pour renvoyer un simple paragraphe\u00a0; avec une classe et une sortie dynamique \u00e0 partir d’une variable\u00a0;<\/p>\n Pour ceux d’entre vous qui sont nouveaux dans ce domaine et qui pensent que j’ai oubli\u00e9 des citations – non, ce n’est pas le cas. C’est la simplicit\u00e9 de JSX. Comparons ce qui pr\u00e9c\u00e8de avec la fa\u00e7on dont vous \u00e9cririez avec les biblioth\u00e8ques Javascript d’ES5 et de WordPress\u00a0:<\/p>\n Tout le code ci-dessus est requis pour afficher ce que ES6 et JSX peuvent faire dans une seule ligne tr\u00e8s facile \u00e0 lire\u00a0! Imaginez que vous construisiez une interface utilisateur plus complexe avec des \u00e9v\u00e9nements et des conditions, alors qu’un simple paragraphe n\u00e9cessite ce morceau de code encombrant.<\/p>\n Convaincu? Bien!<\/p>\n L’outil le plus courant, et celui que WordPress utilise, pour transformer ES6\/ESNext est Babel<\/a>. G\u00e9n\u00e9ralement, vous utiliserez Babel comme plugin pour Webpack<\/a>, qui est un outil qui regroupe et minimise vos fichiers Javascript. Les deux outils utilisent Node.js<\/a>, qui vous donne quelques outils pour ex\u00e9cuter des scripts pour Webpack et Babel dans la ligne de commande. Si tout cela semble d\u00e9routant, j’ai un article qui explique en profondeur comment configurer tous ces outils pour<\/a> le d\u00e9veloppement de Gutenberg.<\/p>\n La deuxi\u00e8me chose que vous devez savoir concernant les technologies est que Gutenberg est bas\u00e9 sur une couche d’abstraction au-dessus de React JS<\/strong>. React JS<\/a> est une biblioth\u00e8que Javascript open-source maintenue par Facebook, et a \u00e9t\u00e9 publi\u00e9e vers l’ann\u00e9e 2013. Parce que React existe depuis un certain temps, il existe de nombreux tutoriels, guides et documentation pour cette biblioth\u00e8que. Le site officiel de React propose un bon tutoriel<\/a> d\u00e9taill\u00e9 pour vous qui \u00eates nouveau sur React. Vous n’avez certainement pas besoin d’\u00eatre un expert en React pour d\u00e9velopper pour Gutenberg, mais les bases de son fonctionnement avec les composants et les \u00e9tats vous aideront beaucoup \u00e0 comprendre Gutenberg.<\/p>\n L’un des plus grands avantages de Gutenberg est de s’\u00e9loigner du HTML fixe dans le contenu des publications. WordPress, avant Gutenberg, et la plupart des contenus d’articles de magasin CMS bas\u00e9s sur le Web en HTML pur. Ce n’est g\u00e9n\u00e9ralement pas un probl\u00e8me avec un contenu simple (titres et paragraphes). Mais cela pourrait \u00eatre un probl\u00e8me plus important avec un contenu riche plus complexe et dynamique.<\/p>\n Tout CMS qui autorise le contenu dynamique dans le contenu de l’article rencontrera des probl\u00e8mes pour l’enregistrer en tant que code HTML valide. Il peut s’agir de n’importe quoi d’une image faisant r\u00e9f\u00e9rence \u00e0 son ID dans le syst\u00e8me au lieu de l’URL compl\u00e8te. Ou un widget qui affiche dynamiquement les derniers messages dans une cat\u00e9gorie donn\u00e9e. Normalement, cela sera r\u00e9solu en produisant du code HTML crypt\u00e9 personnalis\u00e9 qui n’a aucun sens d’\u00eatre produit normalement. Et laissez ensuite l’analyseur CMS g\u00e9rer la transformation de ces \u00e9l\u00e9ments HTML en quelque chose de significatif ou de dynamique. L’inconv\u00e9nient est que si vous transf\u00e9rez votre contenu dans un autre CMS, cela se traduira souvent par un code HTML laid. Le contenu serait rempli de code HTML non analys\u00e9 que vous devez nettoyer manuellement. C’est ce probl\u00e8me que Gutenberg vise \u00e0 r\u00e9soudre.<\/p>\n Avec Gutenberg, WordPress a choisi d’enregistrer des informations suppl\u00e9mentaires 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\u00e9 dans le bloc de commentaires. Un commentaire HTML commence par Je n’entrerai pas dans les d\u00e9tails sur la structure des blocs de commentaires – vous trouverez un guide d\u00e9taill\u00e9<\/a> \u00e0 ce sujet dans le manuel de l’\u00e9diteur WordPress. Mais \u00e0 titre d’exemple, un simple paragraphe dans le contenu de l’article de Gutenberg sera enregistr\u00e9 dans la base de donn\u00e9es sous le nom\u00a0:<\/p>\n En ce qui concerne le contenu dynamique, g\u00e9n\u00e9ralement aucun code HTML ne sera g\u00e9n\u00e9r\u00e9. 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":<\/p>\n \u00c9tant donn\u00e9 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\u00e9 n’est recrach\u00e9. Il sera simplement ignor\u00e9 et saut\u00e9.<\/p>\n Comme vous l’avez probablement d\u00e9j\u00e0 compris, les blocs de commentaires commencent par le nom du bloc, pr\u00e9fix\u00e9 par ‘ Bon \u00e0 savoir\u00a0:<\/strong> Vous avez plusieurs options pour personnaliser vos th\u00e8mes ou plugins pour Gutenberg. Vous trouverez ci-dessous les personnalisations les plus courantes que vous feriez probablement en tant que d\u00e9veloppeur.<\/p>\n WordPress Gutenberg est livr\u00e9 avec un grand nombre de types de blocs, et vous pouvez \u00e9tendre n’importe lequel d’entre eux. Vous pouvez \u00e9galement supprimer certains d’entre eux, ou d\u00e9cider pour certains cas d’autoriser ou de supprimer uniquement certains d’entre eux.<\/p>\n La m\u00e9thode la plus courante pour \u00e9tendre un bloc consiste \u00e0 ajouter des styles de bloc personnalis\u00e9s,<\/a> qui sont des variations de style d’un bloc. Les styles de blocs ne sont pas si courants dans WordPress par d\u00e9faut, mais il y en a. Jetez un \u0153il au bloc Citation. Dans l’\u00e9diteur Gutenberg, vous aurez une bo\u00eete dans la barre lat\u00e9rale droite appel\u00e9e "Styles".<\/p>\n Une autre fa\u00e7on de personnaliser les blocs existants consiste \u00e0 utiliser des filtres. Vous \u00eates probablement familier avec les filtres utilisant PHP dans WordPress, mais avec Gutenberg, il existe d\u00e9sormais des filtres bas\u00e9s sur Javascript sur les blocs<\/a>. Par exemple, vous pouvez ajouter vos propres attributs personnalis\u00e9s (param\u00e8tres) \u00e0 tous les types de blocs ou \u00e0 des types sp\u00e9cifiques ou filtrer la mani\u00e8re dont ils sont enregistr\u00e9s ou g\u00e9n\u00e9r\u00e9s.<\/p>\n Vous pouvez \u00e9galement manipuler les cat\u00e9gories 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\u00e9s pour un type de publication personnalis\u00e9.<\/p>\n La cr\u00e9ation de blocs personnalis\u00e9s est peut-\u00eatre la premi\u00e8re pens\u00e9e de la plupart des d\u00e9veloppeurs WordPress. Les blocs par d\u00e9faut de WordPress peuvent aller tr\u00e8s loin, mais si vous cr\u00e9ez un th\u00e8me ou un plugin plus complexe, vous avez probablement des besoins sp\u00e9cifiques. Par exemple, utiliser Gutenberg pour cr\u00e9er 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\u00e8rement convivial.<\/p>\n \u00c9crire vos propres blocs personnalis\u00e9s est probablement le plus difficile dans la personnalisation de votre th\u00e8me ou plugin pour Gutenberg. Mais cela peut aussi \u00eatre le plus gratifiant! Non seulement vous serez en mesure de cr\u00e9er des blocs qui ressemblent exactement \u00e0 ce que vous voulez, mais c’est aussi un excellent moyen d’apprendre rapidement la nouvelle technologie bas\u00e9e sur Javascript.<\/p>\n Si vous \u00eates un d\u00e9veloppeur de th\u00e8mes WordPress, vous devez savoir qu’il y a beaucoup de configuration dont votre th\u00e8me pourrait avoir besoin pour Gutenberg, en particulier sous la forme de fichiers Comme WordPress par d\u00e9faut g\u00e9rera lui-m\u00eame la plupart des styles des blocs par d\u00e9faut, vous ne devriez donc pas trop vous soucier de leur style dans votre th\u00e8me. Mais les d\u00e9veloppeurs de th\u00e8mes sont g\u00e9n\u00e9ralement 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’\u00e9diteur \u00e0 l’interface uniquement, \u00e0 l’\u00e9diteur uniquement ou aux deux. Le manuel WordPress Gutenberg fournit un aper\u00e7u des styles d’\u00e9diteur<\/a> et des styles de bloc par d\u00e9faut.<\/p>\nAlors pourquoi s’emb\u00eater avec ES6, ESNext ou JSX ?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nOutils de transformation et React JS<\/h3>\n
![\"Les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nDe conclure:<\/h3>\n
\n
La nouvelle fa\u00e7on de stocker le contenu des publications, et pourquoi<\/h2>\n
<!--<\/code>et se termine par --><\/code>, et Gutenberg stocke les donn\u00e9es dans une certaine structure au format JSON. Chaque bloc de Gutenberg est entour\u00e9 d’un commentaire HTML de d\u00e9part et d’un commentaire HTML de fermeture apr\u00e8s celui-ci.<\/p>\nLa nouvelle fa\u00e7on dont le contenu des publications est stock\u00e9<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>‘. S’il existe des param\u00e8tres personnalis\u00e9s, ils seront affich\u00e9s apr\u00e8s 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\u00e8s familier lorsque vous commencerez \u00e0 apprendre \u00e0 d\u00e9velopper pour Gutenberg.<\/p>\n
\nsi vous souhaitez approfondir la mani\u00e8re dont le nouveau contenu de publication est enregistr\u00e9, vous pouvez consulter votre wp_posts<\/code>tableau dans votre base de donn\u00e9es. Il existe une autre m\u00e9thode plus simple pour consulter la valeur compl\u00e8te de la base de donn\u00e9es, \u00e0 partir des mod\u00e8les WordPress. Dans votre mod\u00e8le unique dans la boucle, utilisez simplement " echo get_the_content()<\/code>". L’utilisation du " " normal the_content()<\/code>affichera le contenu de la publication analys\u00e9e, mais l’\u00e9cho de la valeur de contenu affichera exactement ce qui est stock\u00e9 dans la base de donn\u00e9es. Vous pouvez utiliser l’outil Inspecter ou afficher la source dans Chrome ou Firefox pour voir les blocs de commentaires.<\/p>\nCe que vous pouvez faire en tant que d\u00e9veloppeur dans Gutenberg<\/h2>\n
\u00c9tendez et personnalisez les blocs existants<\/h3>\n
Cr\u00e9ez vos propres blocs personnalis\u00e9s<\/h3>\n
Assurez-vous que votre th\u00e8me est pr\u00eat pour Gutenberg<\/h3>\n
add_theme_support()<\/code>. Le manuel de WordPress donne un bon aper\u00e7u<\/a> de tous les supports de th\u00e8me que vous devez prendre en compte pour rendre votre th\u00e8me pr\u00eat pour Gutenberg.<\/p>\n