Les blocs du nouvel éditeur WordPress 5

Cela fait près d’un mois que la version 5 de WordPress a été publiée, et avec elle une petite révolution : le nouvel éditeur de publication par bloc aussi appelé éditeur Gutemberg. Une vive polémique a vu le jour : les pro-Gutemberg et les anti-Gutemberg. L’inventeur de l’imprimerie n’en demandait probablement pas tant… Mais rien n’arrête l’innovation, alors autant s’habituer et tirer profit de cet éditeur de texte 5.0 ! Dans cet article nous allons passer en revue toutes les possibilités offertes par le nouveau système de publication de WordPress.

Blocs communs

Les blocs communs sont les éléments dont nous avions déjà l’habitude d’utiliser avec l’éditeur classique de WordPress :

La majorité de ces blocs est connue de tous, donc je ne vais pas m’attarder dessus. Ce qu’il faut retenir c’est que désormais, au lieu de rédiger d’une traite comme dans un éditeur de texte classique, on « découpe » l’article en fonction de la mise en forme. Avant on insérait le texte puis on faisait la mise en page, maintenant on choisit d’abord le bloc du type de contenu puis on insère ce dernier. C’est déroutant mais on s’y fait rapidement.

Bannière

Ci-dessus vous voyez un bloc « bannière ». Ça c’est nouveau. Cette fonctionnalité permet d’insérer une image ou une vidéo et de placer par dessus un texte. C’est donc parfait pour les en-têtes par exemple.

On peut notamment régler la couleur et l’opacité du calque ou encore créer un effet parallaxe (image qui reste fixe quand la fenêtre défile, comme dans l’exemple).

Galerie

• 

• 

• 

• 

• 

• 

Alors les galeries existaient déjà dans les versions antérieures de WordPress. La différence maintenant c’est que les textes de légende sont placés sur les images elles-mêmes. C’est en effet beaucoup plus esthétique.

Fichiers

La nouveauté pour les fichiers est le bouton « Télécharger » (optionnel). Ce genre de petites optimisations rend le site web plus professionnel.

Blocs de mise en forme

Cet ensemble de blocs apportent bien plus de nouveautés, parmi elles des fonctionnalités qu’il est vrai sont finalement incontournables pour tout éditeur qui se respecte.

HTML personnalisé

Ceci est un bloc d’HTML personnalisé.

Des fois il est bien plus commode d’écrire soi-même le code HTML pour obtenir un rendu plus avancé, pour ceux qui connaissent les balises HTML bien sûr. Dans l’ancien éditeur, il fallait passer l’interface de saisie en mode « texte » pour pouvoir insérer du code HTML, puis revenir en mode « visuel » pour continuer la saisie classique. C’est donc un confort et un gain de temps considérable de pouvoir insérer un bloc et y mettre dedans de l’HTML directement.

Tableau

En-tête 1	En-tête 2	En-tête 3
Ligne 1	Contenu 1	Contenu 2
Ligne 2	Contenu 3	Contenu 4

Qu’il était laborieux de faire des tableaux dans WordPress auparavant… Soit vous mettiez les mains dans le cambouis en construisant vous-même votre tableau en « mode » texte avec les balises <table>, <th>, <tr>, <td>, etc. Soit vous deviez utiliser un plugin dédié à la création de tableau (et donc alourdir votre WordPress et son interface). L’arrivée de ce bloc tableau est donc un soulagement pour les blogueurs!

Couplet

Mon œil rêveur suit la barque lointaine
Qui vient à moi, faible jouet des flots ;
J'aime à la voir déposer sur l'arène
D'adroits pécheurs, de joyeux matelots.
Mais à ma voix, nulle voix qui réponde !

Ce bloc « Couplet » est tout à fait étonnant tellement il est rare de trouver de la poésie sur Internet (proportionnellement à l’ensemble des contenus bien sûr). Mais WordPress a pensé aux littéraires, et ce n’est pas pour nous déplaire!

Code

function is_single( $post = '' ) {
    global $wp_query;
 
    if ( ! isset( $wp_query ) ) {
        _doing_it_wrong( __FUNCTION__, __( 'Conditional query tags do not work before the query is run. Before then, they always return false.' ), '3.1.0' );
        return false;
    }
 
    return $wp_query->is_single( $post );
}

Voilà un bloc pour les geeks :D Vous pourrez ainsi publier facilement vos scripts en respectant les espacements et les tabulations (pour les indentations) de votre code.

Dans le même genre vous avez le bloc « pré-formatté » qui permet de publier du code mais également de le mettre en forme.

Citation en exergue

Le cœur a ses raisons que la raison ne connait point.

Blaise Pascal

Sympa ce bloc pour mettre en avant vos citations. On peut aussi mettre du texte en citation avec l’ancien éditeur WordPress (quote) ou même avec le bloc « Citation » du nouvel éditeur, à vous de juger quel est le meilleur:

Le coeur a ses raisons que la raison ne connait point.

Blaise Pascal

Blocs de mise en page

Dans cet ensemble de blocs vous retrouverez de grands classiques comme la balise « more », le saut de page ou encore le séparateur, mais également des nouveautés qui encore une fois sont plus que bienvenues!

Média & texte

En voilà un bloc bien pratique qui vous permet de placer côte à côte une image et un paragraphe. Les usages sont nombreux et la facilité d’utilisation est parfaite. Comment faisions-nous avant ? (Et bien nous ne faisions pas…)

Colonnes

Un bloc novateur et parfaitement dans l’air du temps des designs responsives (qui s’adaptent à la taille de l’écran – PC / tablette / smartphone). Pour pouvoir créer des colonnes avant il était impératif de passer par un plugin. Cependant ce bloc WordPress reste basique et n’offre pas de mises en page plus avancées, mais c’est rapide, simple et léger à mettre en place.

Bouton

Vous pouvez désormais créer facilement des boutons ! C’est idéal notamment pour vos « call to action », c’est-à-dire pour inciter vos lecteurs à effectuer une action comme un téléchargement, une inscription à une newsletter, etc. À utiliser sans modération :)

Widgets

Une grande innovation apportée par le nouvel éditeur bloc de WordPress est la possibilité d’insérer directement dans les articles des éléments avant réservés aux barres latérales. Vous pouvez maintenant par exemple afficher les derniers commentaires de votre site web ou encore des produits de votre boutique Woocommerce directement dans votre contenu sans faire de programmation complexe!

De plus, sachez que la communauté peut proposer de nouveaux blocs, donc la liste de possibilités d’ajout de ce type de contenu est amené à considérablement se développer.

Derniers commentaires

1. 

   Personnellement j’utilisais Odoo il y a 6 ans (2015), et vu que leur prix n’ont pas cessé d’augmenter, je me…

2. 

   Bonjour à tous, je suis client chez Verisure depuis 2 ans environ. Au départ tout est beau, puis lorsque nous…

3. 

   Bonjour à tous, Après lecture de tous vos commentaires qui sont très enrichissants pour moi, plusieurs questions me sont venues…

Derniers articles

• Les différents types de pages dans WordPress [Vidéo]
• Tutoriel vidéo Trello : utilisation de base
• Installer WordPress en moins de 15 min [Tuto Vidéo]
• Domiciliation de sociétés à Madagascar : les meilleurs prestataires
• Openflex avis et test 2022 : note finale 9.4/10 très bien

Contenus embarqués

Terminons notre tour du nouvel éditeur de WordPress 5 par les contenus embarqués (embed en anglais). Vous savez il s’agit des vidéos Youtube ou autre contenu provenant d’un site tiers que l’on souhaite intégrer directement dans l’article.

La grande nouveauté ici est le très large choix de site tiers que l’on peut facilement choisir : Youtube, Vimeo, Twitter, Spotify, Facebook, SoundCloud, etc.

Cependant, après quelques essais, il s’avère que tous les blocs ne fonctionnent pas comme prévu. Par exemple le bloc « Facebook » ne donne aucun rendu… À suivre donc.

En conclusion

Que l’on aime ou pas, il est normal pour WordPress de faire évoluer son outil de publication qui est resté quasiment inchanger pendant des décennies. Lors de sa sortie, WordPress 5 comportait certes des bugs, et nous devons encore aujourd’hui utiliser conjointement l’ancien et le nouvel éditeur en fonction de l’article que nous rédigeons. Mais certains problèmes ont déjà été réglés et gageons que ceux qui subsistent seront réglés prochainement. En tout cas, le nouvel éditeur bloc de WordPress ouvre indéniablement de nouvelles possibilités et l’on se dira d’ici quelques mois : « Mais comment faisions-nous avant ? » ;)