Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

Wordpress 5.0.0 intègre Gutenberg basé sur javascript ReactJS

react js framework javascript 

 

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   

Caro
0 #4 Caro 15-02-2018 08:49
Pour le SEO sur Worpress cet aspect incontournable pour apporter de la frequentation a votre site web, je vous conseille YOAST fr.wordpress.org/plugins/wordpress-seo/
Citer | Signaler à l’administrateur
gutentag
0 #3 gutentag 13-02-2018 15:49
faudrait ptere faire + lisible
Citer | Signaler à l’administrateur
Danield
0 #2 Danield 09-02-2018 09:14
Très interessant merci beaucoup pour ces infos
Citer | Signaler à l’administrateur
Imath
0 #1 Imath 08-02-2018 21:54
Merci! :-) Imathi.eu
Citer | Signaler à l’administrateur

Ajouter un Commentaire

Ces commentaires reflète exclusivement l'opinion de leurs auteurs et n’engage en aucune façon Consultingit. L'icone à gauche du commentaire apparait si votre adresse email utilisée pour poster est la même que celle de votre compte gravatar: https://fr.gravatar.com Pour insérer une balise youtube: [youtube]IDENTIFIER[/youtube]

Code de sécurité
Rafraîchir