C’est confirmé, l’éditeur Gutenberg sera bel et bien l’éditeur d’article par défaut de WordPress. J’ai pu tester ce dernier et je me suis rapidement rendu compte que beaucoup d’utilisateurs seront perdu avec ce nouvel éditeur, d’où la raison de ce tutoriel. Nous allons donc ensemble parcourir les bases de l’éditeur Gutenberg et couvrir quelques points avancés.

Avant de commencer

Si vous n’avez pas la possibilité d’installer la version 5.0 de WordPress  (qui est toujours en cours de développement), vous pouvez d’ores et déjà télécharger Gutenberg et le tester sur votre version de WordPress (je recommence un environnement expérimentale). J’avoue cependant être unpeu surpris lorsqu’en regardant les notes attribuées à ce nouvel éditeur, plus de ma moitié des utilisateurs on donné une note de 1/5.

apercu gutenberg note wordpress.jpeg

Je ne vais pas m’arrêté sur ça et tester pour me faire une idée.

Présentation de l’interface

Pour utiliser Gutenberg, vous devez rédiger un article (évidemment), comme vous l’avez fait dans le passé, c’est à dire « Articles > Ajouter« .

gutenberg presentation.jpeg

Ce que je remarque d’entré de jeu, c’est que l’éditeur à beaucoup misé sur l’absence de distraction et à exploité toute la largeur de la page.

ancienne version wordpress.jpeg

Même s’il faut reconnaitre qu’il y a des marges en trop sur Gutenberg, le fond blanc je pense, est une couleur qui entraîne moins de distraction. Vous remarquerez que Gutenberg ressemble beaucoup à l’éditeur d’article sur Calypso (WordPress.com).

calypso editeur wordpress.jpeg

Emplacement des éléments

Section de sauvegarde

La mise à page à énormément changé. La zone de sauvegarde des articles se trouve désormais tout en haut. Il s’agit plutôt d’une section d’accès rapide au bouton de sauvegarde.

section de sauvegarde gutenberg.jpeg

Le bouton avec l’icône de réglage vous permet de fermer le volet situé en dessous. Les boutons qui nous permettaient de basculer entre l’éditeur visuel et l’éditeur de texte est désormais situé sur le même volet à l’extrémité droite. Pour prévisualiser l’article, vous devez cliquer sur l’œil situé avant le bouton « Publish… ».

control avancé gutenberg.jpeg

La section de sélection de l’image à la une des catégories et de la visibilité de l’article se trouve sur la droite comme d’habitude. Vous devez-vous assurer que l’onglet « Document » est sélectionné.

gutenberg section categorie et image a la une.jpeg

Section des blocs

C’est l’innovation qu’apporte Gutenberg. Vous devez savoir que désormais, tout paragraphe sur Gutenberg doit être considéré comme un bloc. Les blocs ont cette possibilité d’être ajustable singulièrement, mais également ils peuvent être déplacé facilement sur tout le document.

Lorsque vous avez mis le curseur sur votre paragraphe, pour accéder aux fonctionnalités du bloc sélectionné, vous devez cliquer sur l’onglet bloc situé à droite.

bloc gutenberg wordpress.jpeg

Avec ces réglages, vous pourrez par exemple définir une couleur d’arrière-plan qui s’applique uniquement au bloc ainsi que modifier la taille de la police du bloc. Je trouve cela plutôt pratique.

Options de mises en forme

La mise en forme apparaîtra au-dessus de chaque bloc.

option mise en forme.jpeg

Vous allez également afficher les options de mise en page tout en haut en cliquant sur l’Option de l’éditeur ensuite en cliquant sur « Fixer la barre d’outil tout en haut ».

afficher les options de mise en forme tout en haut.jpeg

Comment ajouter des blocs personnalisés

Vous n’êtes pas limité à l’utilisation du bloc paragraphe. Pour ajouter d’autres blocs, vous devez cliquer sur l’icône + situé tout en haut à gauche.

différent bloc gutenberg.jpeg

Cela vous permet d’accéder aux différents blocs disponibles. C’est d’ailleurs à cet emplacement que vous pourrez accéder aux différents blocs que proposeront les thèmes et les plugins. Vous aurez même la possibilité de sauvegarder vos propres blocs personnalisés. Je pense que cela facilitera la tâche d’édition d’articles similaires.

C’est tout pour ce tutoriel, nous allons continuer dans un prochain en mettant en pratique tout ce que l’on à observé dans ce tutoriel.