Wordpress 5.0.0 intègre Gutenberg basé sur javascript ReactJS
Développer des applications informatiques c'est bien. Mais les présenter aux clients sur un article/book pour leur donner un aperçu des fonctionnalités, c'est mieux!
Imathi.eu notre expert en création d'extensions Wordpress nous sponsorise ce workshop Gutenberg exceptionnel!
Vous souhaitez aussi sponsoriser le transcript d'un evenement? C'est par ici
Une question? Posez-la ici
Aide au développement d'applications
Gutenberg est le nom du projet qui vise à révolutionner la manière de rédiger nos contenus dans WordPress. Il prévoit de se déployer progressivement selon 3 étapes. La première est planifiée pour la prochaine version majeure de WordPress. Concrètement l’éditeur « classique » de WordPress sera alors remplacé par un nouvel éditeur propulsé par Javascript et ReactJS. imathieu nous propose de prendre quelques minutes pour vous le faire découvrir et vous donner envie de l’adopter !
Wordpress 5 prochaine version majeure
Ca fait 10 ans, depuis que la version 2.7 de wordpress, que l'édition des articles n'a pas changé.
C'est la prochaine version de Wordpress qui va révolutionner notre façon d'écrire des articles. Tout se joue dans le frontend, en SPA. Certains regrettent que ça ne soit pas Angular 6 qui ait été choisi. Il y a pas mal de projets en Angular, mais visiblement davantage en ReactJS.
Dans le champ unique d'édition de Wordpress, on met plein de choses, des multi-lignes, mais on ne peut pas bouger les choses à l'interieur. C'est un champ unique multi ligne, mais avec un seul bloc.
On est limité dans ce champ. On peut mettre en gras, en italique, mais dès qu'on veut faire du HTML pour faire du responsive designe, on est limité avec cet éditeur.
Quand on veut mettre des contenus dynamiques, on n'a pas beaucoup de solutions. On peut utiliser des marqueurs
des shortdcodes: quand Wordpress arrive sur ce code, Wordpress va reconnaitre le type d'extension. On laisse des traces qui vont rester dans le contenu. Meme si on désactive l'extension, le marqueur shortcode restera.
Ce n'est pas très intuitif tout ca. Quand on veut faire des choses élaborées, on va vouloir fragmenter le contenu.
PArce qu'on veut pouvoir modifier le changement d'ordre des contenus. On veut que ca soit plus simple pour les utilisateurs. On souhaite manipuler des unités plus fines.
Il y a des extensions, constructeurs de pages qui peuvent faire gagner du temps.
Une question? Posez-la ici
Aide au développement d'applications
Mais l'organisation du contenu dans Wordpress?
Les champs personnalisés sont-ils une extension du contenu?
On a un éparpillement du contenu dans la base de donnée.
Il faut une multiplication des requêtes pour reconstituer l'intégralité du contenu.
Si on a mi du contenu dans des post_content, on va utiliser des meta_keys spécifiques: cela va etre compliqué de retrouver telle ou telle meta_key.
une seule clé unique
standardiser la manière de stocker les fragments de contenus dont on a besoin pour organiser les pages
Ca améliore l'interface utilisateur
On peut manipuler notre contenu en fragments.
Ce nouvel éditeur de bloc est basé sur un javascript moderne.
Dans Wordpress Gutenberg, quelle est la librairie utilisée? React JS
La persistence du contenu dans la base de donnée avec Gutenberg.
Les blocs vont etre encadrés par des balises html
En frontend, ces commentaires ne s'affichent pas.
C'est ce qui permet à Gutenberg d'organiser ce contenu et de personnaliser le frontend en plus fin.
ReactJS avec son virtual DOM rend la page en continu.
Quand on développe des blocs pour Gutenberg, on n'a pas besoin de toucher à React. On a des fonctions d'encapsulations en javascript pour interroger React "de loin".sans modifier son code
C'est pour éviter les petites aventures qu'il y a eu comme les magouilles soucis de licenses soit disant GPL ou pas...
La Rest API est utilisée pour communiquer avec la base de donnée.
La prochaine version de Wordpress 5.0.0, version majeure, arrive en avril-mai. Comme c'est un changement majeur, les extensions vont devoir se mettre à jour.
par defaut, on aura l'éditeur moderne, mais grace à l'extension "editeur classique", on pourra revenir sur l'ancien éditeur.
Des questions vont ainsi se poser:
Comment convertir mes anciens contenus?
Une question? Posez-la ici
Aide au développement d'applications
L'interface de Gutenberg sous Wordpress, l'inspecteur
Avec Gutenberg, lorsque l'on regarde les articles, on peut les éditer d'un clic
Je peux cliquer sur "modifier" et mon article s'affiche. Si je regarde mon interface, l'éditeur moderne traite le contenu comme un bloc rich text.
Maintenant on peut convertir l'article en bloc:
grace à la barre de menu à droite, on clique sur "convert to blocks" et notre article est converti pour Gutenberg. J'ai des titres, des paragraphes, et je peux réorganiser facilement les blocs.
voir imathi.eu
Sous le nouvel éditeur, on peut basculer entre l'interface visuelle et le code HTML
On peut régler l'interface en mettant la barre d'outil du bloc sur la barre supérieure
Ce qui a évolué c'est que Gutenberg va intégrer un inspecteur pour le bloc. Ca a des intérets sur d'autres types de blocs
La barre d'outil de bloc permet de metttre en forme le bloc, exemple, gras.
On peut ajouter nos fameux shortcodes
On peut intégrer des url imbricables, avec les blocs "embeds"
J'ajoute et je retire des blocs facilement grace au menu d'options.
Je rajoute un bloc "paragraphe".
Tous les blovs sont transformables: dans le bouton des menu d'options, on peut facilement transformer un bloc paragraphe en bloc titre.
Le SEO avec Wordpress 5 et Gutenberg
Gutenberg nous guide si notre document est mal formé. Idéal pour orienter un article SEO, il nous conseille les meilleures balises, en fonction de notre contenu, pour respecter le SEO et ainsi obtenir le meilleur classement sur les moteurs de recherches, le graal, apparaitre sur la 1ere page de Google.
Et on peut intégrer nos éléments Markdown
L'autocomplétion des blocs, comme sur slack, permet d'aller chercher le bloc de notre choix
Gutenberg Wordpress et l'API des blocs
Avant j'utilisais les méta box pour enfermer le client ou simplifier sa vie
On peut utiliser la fonction add_theme_support pour imposer des couleurs aux éditeurs de contenu.
On peut utiliser toute la largeur de la page, ce sont les 2 nouveaux modes d'alignement "wide" et "full"
Création des combinaisons de blocs pour les types de contenus
On peut maitriser les droits au niveau des rédacteurs.
Certains rédacteurs ont le droit de modifier des blocs, d'autres, non.
Certains peuvent éditer les posts privés, d'autres peuvent rajouter des blocs ou sont obligés de remplir leur contenu dans les blocs existants.
Si on se met en contributeur, on se log sur le frontend de wordpress, on ajoute un article
l'api des blocks, c'est wp-blocks pour encapsuler les fonctions de ReactJS
La propriété render callback
On va indiquer comme un shorcode, le contenu à afficher
On peut utiliser WP-CLI, c'est un outil qui permet de faire des opérations compliquées sur le wordpress en ligne de commande :installer wordpress, des plugins.
voir https://wp-cli.org
Gutenberg Wordpress et la modification des blocs de manière dynamique
Tout se joue dans le block.js
wp plugin scaffold plugin
Ce transcript reflète exclusivement l'opinion de ses auteurs et n’engage en aucune façon Consultingit
Allez, c'est à, vous: vous pouvez voter et mettre 5 étoiles!
Voilà, j'espère que ça vous a plu. Vos commentaires/remarques sont les bienvenus
Commentaires
S’abonner au flux RSS pour les commentaires de cet article.