Tout savoir sur WordPress

Les nouveautés de Gutenberg 6.1 : le mouvement

Cette version est une 1ère étape dans la recherche de micro-interactions. L’idée derrière tout ça est d’améliorer la compréhension de l’utilisateur. De plus, un gros effort a été fait par les contributeurs pour améliorer la performance d’écriture. On peut noter ±30% de gain de temps sur des articles assez conséquent.

Le mouvement pour décrire le changement

C’est Matias Ventura qui a initié le pas dans son article “Using Motion to Express Change” en expliquant que les transitions entre blocs servent à saisir le sens de l’interaction qui vient de se passer.

Sans animation, l’éditeur de blocs peut désorienter certains. Il suffit de bougez un groupe de blocs vers le haut ou le bas pour changer l’environnement autour du bloc. Si ces blocs environnants n’étaient pas présents dans l’écran ça devient difficile de s’y repérer.

L’animation vient apporter de la compréhension dans la réorganisation des blocs. L’oeil a le temps de s’adapter : il voit l’environnement se modifier. L’éditeur donne alors une meilleure impression de fluidité.

Pour répondre à ce besoin, Riad Benguella a proposé une première mouture de transitions lors de la création, modification, suppression ou réorganisation des blocs.

Gutenberg apporte de la consistance

Primo, les boutons sélectionnés au clavier avaient des bordures bleues quelle que soit le thème choisi dans WordPress. C’est déjà de l’ancien temps, regarde par toi même :

Deuxio, l’équipe derrière Gutenberg a rationaliser les paramètres de lien du bloc “Image”. Tu retrouveras la même interface que lorsque t’ajoutes un lien dans un paragraphe.

Tertio, est-ce que tu savais que tu pouvais copier tout le contenu de ta page d’un seul clic ?

Non ? Alors, rendez-vous dans la barre d’outils et d’options en haut à droite de l’éditeur. Il te reste plus qu’à cliquer sur “Copier tout le contenu”.

Cette nouvelle version de Gutenberg affiche une notification en bas à gauche de l’écran lorsque tout est bon.

Corrections de bugs

Bien entendu chaque version apporte aussi son lot de résolution de bugs. En voici quelques unes que nous avons retenue :

  • Afficher le panneau de pré-publication pour les contributeurs ;
  • Gutenberg est désormais disponible sur https://wordpress.github.io/gutenberg/ et mis à jour à chaque nouvelle version ;
  • Amélioration de l’accessibilité sur des niveaux de zoom important ;
  • Correction d’un bug d’affichage le template des colonnes à s’afficher sur de petits écrans.

Gutenberg dans les widgets ?

En téléchargeant le plugin Gutenberg vous pouvez tester par vous même les expérimentations des contributeurs.

Tu retrouveras depuis le menu Gutenberg > Widgets (bêta) toutes les zones de widgets que le thème déclare et pour chacune une version simplifiée de Gutenberg.

Cette version ajoute la barre latérale “Zones de blocs” sur la droite de l’écran. Tu connais sans doute déjà ses fonctionnalités pour modifier les options de chaque bloc, sinon je t’invite à lire la série d’articles de Mathieu Viet pour découvrir l’interface de Gutenberg.

Si tu es plus a l’aise avec le Customizer via le menu Apparence > Personnaliser tu retrouveras une expérience d’édition similaire, bonne nouvelle non ?

Cet article a été mis à jour il y a 1698 jours - Il n'est peut être plus à jour !

Article écrit par Florian

Formateur & Creative Developer et associé de l’agence WordPress créative Fantassin

6 Commentaires

  1. Est-ce que les agences sont passées massivement sur Gutenberg ou est-ce qu’elles utilisent encore ACF en mode contenu flexible ?

    De notre côté on commence à clairement basculer sur Gutenberg. Cela a des avantages, notamment avec l’utilisation de Yoast, ou encore de AMP.

    ACF reste indispensable pour tout ce qui est champs personnalisés

    • Chaque outil va répondre à des besoins différents, ils sont donc utilisés tous les deux en fonction des cas. Il y a beaucoup de cas où ACF restera bien plus adapté : par exemple dans une page où on veut que le client puisse modifier le contenu, mais pas la mise en page. Il y a des agences qui sont passés en mode full Gutenberg, mais ce n’est pas forcément très facile. Du coup il n’y a aucun mal à rester en mode ACF et flexible. J’ai formé une agence récemment et on a fait le point : au final ce sera plus pratique pour eux de rester sur ACF. Quant à moi, sur mes cours CapitaineWP, j’ai préféré opter pour une approche Gutenberg (car c’est de la rédactions d’articles, pas de la mise en page poussée).

  2. Bonjour,

    Je dois avouer que la transition de l’éditeur classique à Gutenberg a été difficile. Au début j’ai perdu mes repères, certaines fonctionnalités m’ont parues difficiles à retrouver. Un peu contre-intuitif au début.

    Mais avec un peu de pratique (et des tutos comme celui-ci ^^), j’ai pris mes marques et maintenant je dois avouer que j’adore utiliser cet éditeur ! Je l’utilise pour taper plus rapidement et mettre en forme directement mes articles. Idem pour les descriptions Amazon que je dois mettre en HTML. Grâce à Gutenberg, la mise en forme me donne directement du HTML propre. J’adore ! Je gagne beaucoup de temps quand je fais du copywriting de fiches produit.

    Bref, merci à vous de partager des infos pour aider les rédacteurs à mieux utiliser WordPress :)

    A bientôt,
    Karine

  3. Faut vraiment faire le pas. Ca peut être long à prendre en main mais ca évite souvent d’utiliser des thèmes builder pour des besoins simples.