Découverte de la version 5.3 de WordPress

La nouvelle version de WordPress va sortir le 12 novembre 2019. Dans cet article, nous allons passer en revue quelques nouveautés dans la version 5.3. Il s’agit avant tout d’une découverte, donc en aucun cas, je serai exhaustif.

WordPress_5.3

Twenty Twenty

L’apport le + évident dans cette nouvelle version de WordPress est le nouveau thème par défaut Twenty Twenty.

twentytwenty_theme_wordpress

Ce thème est très contemporain dans son look visuel. Il est épuré, la police est plutôt imposante, et un choix de couleur original. D’ailleurs les démos visuelles du thème font référence à un musée d’art contemporain. Le thème est clairement inspiré par le vrai site du MoMA ou peut-être l’inverse…

La police utilisée s’appelle Inter. C’est une police variable: elle contient les différentes graisses dans le même fichier. Ce qui est beaucoup + optimal au niveau des performances. Guide des polices variables.

Allons voir d’un peu plus près ce que ce nouveau thème propose…

Header

Le formulaire du moteur de recherche est très bien conçu dans ce thème. Quand on clique sur l’icon search, ça ouvre un large champ input qui occupe toute la largeur de l’écran, fixé tout en haut du site.

Quand on n’utilise pas le moteur de recherche, il n’occupe pas de l’espace inutilement dans le header, ce qui d’après moi très confortable. Quand il s’agit de concevoir des interfaces, je fais parti de celles et ceux qui ne savent pas où mettre les moteurs de recherche…

On peut enlever le moteur de recherche en décochant une checkbox dans le menu ‘personnaliser’ de l’admin:

Dans ce thème, il y a trois contenus de menus possibles par défaut:

menus_twentytwenty_themeDeux menus ordinaires et un menu pour les liens sociaux.

Et il y a cinq emplacements possibles:

5_emplacements_menu_twentytwenty‘Desktop Horizontal Menu’ est un menu qui affiche les items sur un pc de bureau et qui affiche un bouton pour les tablettes et les smartphones:

menu_twenttwenty_wordpress

Cela change du hamburger…quand on clique sur ce bouton le menu s’affiche avec un slide, une animation fait entrer le menu depuis la droite.

‘Desktop Expanded Menu’ est un menu qui affiche le bouton quelque soit le device.

‘Mobile menu’ permet de choisir ce qu’on veut afficher dans le slide. Si par exemple, nous décidons de ne rien mettre pour ‘Desktop Expanded Menu’, nous pouvons choisir n’importe quel contenu à mettre dans le slide, qui n’a pas besoin d’être semblable au contenu du ‘Desktop Horizontal Menu’.

‘Footer Menu’ et ‘Social Menu’ se trouvent dans le footer. Il est préférable de ne pas mettre autre chose que des liens vers des réseaux sociaux dans l’emplacement ‘Social Menu’.

Pour celles et ceux qui ne sont pas encore très à l’aise avec les menus dans WordPress, je vous renvoie à ce tutoriel:

Comment créer un Menu WordPress et bien l’utiliser ?

Templates de pages

Avec Twenty Twenty, nous avons trois templates intégrés pour nos pages.

Pour celles et ceux qui ne connaissent pas très bien les templates de pages, voici un tutoriel:

Comment créer une page personnalisée sous WordPress ?

Il y a bien sûr le template pour une page ordinaire: ‘Modèle par défaut’.

‘Full width template’ permet au contenu de la page d’occuper toute la largeur. Ce qui va permettre d’afficher des éléments en grille ou par colonne, nous verrons ça + loin dans ce tutoriel.

‘Cover Template’ permet d’avoir un header qui occupe tout l’écran avec l’image à l’une en fond sous le titre comme ceci:

cover_template_twentytwenty_wordpress

et dans ‘personnaliser’, on peut modifier le comportement de cover template:

personnaliser_theme_cover_template

  • On peut enlever l’effet de la parallaxe
  • On peut changer la couleur de fond
  • On peut changer la couleur du texte
  • On peut changer l’opacité de l’image de fond

 

L’éditeur

Quelques changements significatifs sont à noter dans l’éditeur de contenu des pages et des articles.

Premièrement, l’éditeur a déjà en fond la couleur utilisée pour le background. Cela permet de directement de tester comment réagissent les contenus en fonction de la couleur de fond. Cela commence plutôt bien !

En matière d’accessibilité et de confort utilisateur, il y a des petites retouches. Notamment, quand on clique sur l’icon ‘+’ en haut à gauche, la fenêtre modale s’ouvre et propose les différents blocs à dispositions. Dans la version 5.3, quand on passe la souris sur le titre de chaque bloc, une colonne affiche une petite description du bloc et une prévisualisation.

modal_window_gutenberg

Et quand on déplace les blocs, nous avons maintenant un effet d’animation plutôt sympa.

Quelques blocs ont été modifié et deux blocs ont été rajoutés.

Petit tour d’horizon:

Bloc Articles récents

Avec ce bloc, on peut maintenant choisir d’afficher le texte de l’article (extrait ou entier) et la date de publication. Il suffit de cocher une select box:

block_widget_recent_postsEn front end, ça donne ceci:

recent_postset c’est responsive !

On pourrait dire qu’il manque l’affichage de l’image à la une de chaque article et on pourrait très rapidement afficher des cards pour les articles de notre blog.

Bloc Image

On peut maintenant ajouter un style aux images: on peut décider que l’image ajoutée sera circulaire

bloc_image_style_cercle

Bloc bannière

Dans cette version de l’éditeur, on peut maintenant choisir un fond de couleur et insérer des blocs à l’intérieur de la bannière.

Vous aurez remarqué qu’on peut dorénavant mettre un bloc image sur toute la largeur de la page.

 

Bloc galerie

Pour le bloc galerie, on peut maintenant déplacer les images très facilement après le téléchargement.

 

Bloc groupe

Voici un nouveau arrivé dans l’éditeur, le bloc groupe ! et vous verrez qu’il est très pratique car il permet d’insérer plusieurs blocs à l’intérieur. L’avantage est qu’on peut avoir le même fond de couleur pour tout le bloc et il est très simple à dupliquer.

Pour la démonstration, on va créer un appel à l’action.

 

Bloc colonnes

Le bloc a été revu et corrigé ! C’est trop bien !

Le bloc colonnes associé au bloc groupe, ça élargit beaucoup les possibilités et notamment la possibilité de créer des cards.

 

Si on continue le travail, on obtient ceci:

front_end_cardset pour ajouter de nouvelles cards, on va dupliquer le bloc colonnes.

 

et obtient ceci:

cards

et on peut changer le pourcentage des colonnes ici:

bloc_colonnes_pourcentage

C’est tout pour les blocs. J’ai sûrement oublier des choses. Je compte sur vous pour me le signaler dans les commentaires…

Interface de l’admin

Les  autres gros changements dans cette version de WordPress sont liés à l’interface de l’administration.

Les champs input par exemple sont “mieux dessinés”

brouillon_wordpress

Les select box, les check box et les boutons ont été retravaillés

admin_wordpress_posts_list

Dans l’ensemble, les choses sont + facilement lisibles, c’est + confortable, bref ça fait plaisir !

et sinon c’est le formulaire de connexion qui a pris un coup de jeune: on peut maintenant afficher le mot de passe !

Cela peut être utile quand on se connecte tout le temps à travers les sauvegardes du navigateur et qu’on a oublié le mot de passe. Cela évite de faire un changement de mot de passe…

fenetre_connexion_wordpress

et de manière générale, il y a plusieurs petites choses qui améliorent le confort d’utilisation. Je n’ai sûrement pas tout vu, mais il y a notamment une fenêtre modale qui s’affiche quand on fait la mise à jour d’une publication.

publication_mise_a_jourC’est très intuitif, une fois qu’on a modifié notre publication, on clique directement sur le lien pour l’affichage.

Gestion des grandes images

Parfois, on importe directement des fichiers images depuis l’appareil photo sans passer par un logiciel intermédiaire de traitement d’image. Si on importe directement des images à partir d’un appareil photo reflex par exemple, les images peuvent être très très grandes. Dans cette version de WordPress, un filtre limite par défaut la taille des images à 2560 pixels selon l’orientation de l’image (portrait ou paysage). Ce dispositif permet d’optimiser rapidement et sans rien faire les images importées.

Pour désactiver ce comportement, il suffira d’entrer cette ligne dans le fichier functions.php

add_filter('big_image_size_threshold', '__return_false');

Conclusion

Encore une fois, dans cet article, je n’ai pas tout abordé: beaucoup de choses ont été implémenté pour favoriser l’accessibilité (des attributs html par exemple), l’API REST a été améliorée, la prise en charge de la dernière version de PHP et beaucoup d’autres choses.

Si vous voulez creuser la question, je vous envoie à cet très bon article de Jb Audras qui énumère les différents changements, en renvoyant à chaque fois vers de la documentation détaillée.

Les changements à venir dans WordPress 5.3

Si vous ne voulez pas attendre le 12 novembre, vous pouvez installer la version 5.3 en cours de développement avec l’extension WordPress Beta Tester

WordPress Beta Tester

Vous cochez la case Bleeding Edge (version de développement) puis vous mettez à jour comme à l’ordinaire.

Et je vous laisse partager vos futures découvertes en commentaires…

A propos de l'auteur...

Cyril BRON

Formateur média-vidéo dans une Haute Ecole à Genève et développeur web indépendant, j'utilise WordPress au quotidien. Je pratique beaucoup la veille technologique; j'aime découvrir, expérimenter et partager. Je me déplace souvent en Europe avec mon ordinateur, j'occupe mon temps entre exploration, prises de vue, traitement d’images et lignes de code...

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !