Depuis la sortie de WordPress 5, Gutenberg ne cesse d’évoluer et une quantité de développeurs ont créé des plugins proposant des blocs Gutenberg avancés. Dans certains cas, leur utilisation peut faciliter l’implémentation de blocs particuliers (vidéo, timeline, testimonials, carousels, cartes Google, etc.). Voici une liste de plugins (non exhaustive) pouvant être installés en complément d’Oxygen.
a) Gutenberg Blocks and Page Builder – Qubely
https://fr.wordpress.org/plugins/qubely/
Note : 27 blocs dont une timeline
b) Stackable – Gutenberg Blocks
https://fr.wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/
Note : 23 blocs + 50 layouts créés avec ces blocs
c) Kadence Blocks – Gutenberg Page Builder Toolkit
https://fr.wordpress.org/plugins/kadence-blocks/
Note : 12 blocs incluant une forme de contact
d) Gutentor : WordPress Page Builder with Unlimited Possibilities to Design
https://fr.wordpress.org/plugins/gutentor/
Note : propose 3 catégories. Éléments, modules et widgets (Heures d’ouverture, menu de restaurant, vidéo popup, …)
e) GutenBooster Addons
https://fr.wordpress.org/plugins/gutenbooster-addons/
Note : un addon à Kioken (en dessous)
f) Page Builder Gutenberg Blocks – Kioken Blocks
https://fr.wordpress.org/plugins/kioken-blocks/
Note : 15 blocs avancés avec animations
g) Page Builder Gutenberg Blocks – CoBlocks
https://fr.wordpress.org/plugins/coblocks/
Note : 31 blocs avec notamment un carousel d’article, carousel de gallerie, bloc d’évènements, etc.
h) Getwid – Gutenberg Blocks
https://fr.wordpress.org/plugins/getwid/
Note : 34 Gutenberg blocs - Les développeurs proposent un thème de base (non reconnu par Oxygen mais ça pourrait être une solution pour des sites simples OnePage)
Lors de la création d’une page ou d’un article en utilisant Oxygen il est possible de soit faire sa page avec Gutenberg (sans utilisation d’Oxygen) ou de créer avec Oxygen, qui va “prendre la main” sur le contenu Gutenberg qui, du coup, ne sera plus visible.
Il est cependant possible dans Oxygen de récupérer le contenu créé avec Gutenberg. La seule limitation étant que ce contenu ne peut être récupéré qu’en un seul bloc. Il n’est donc pas possible d’incruster deux blocs différents dans deux positions différentes sur votre page.
Dans Oxygen, vous aller insérer un élément texte et insérer dynamiquement le contenu de la page/article.
Dans la page/article Gutenberg...
Sur le site...
Sans rentrer dans une polémique, cette technique permet de faire très simplement et rapidement, par exemple, un carrousel de témoignages ou tout module un peu plus évolué. Certes, il est toujours possible de coder via ACF, ou d’autres techniques, ce genre de blocs mais ça prendra plus de temps et, étant donné que Gutenberg est disponible dans WordPress, vous ne surchargez pas beaucoup le site (suivant le plugin utilisé).
Pour vos clients cela permet aussi une édition plus simple qu’en leur donnant accès à Oxygen.
Ces plugins rajoutent quand même du CSS et/ou d’autres .js pour fonctionner. Il est donc conseillé de ne pas en installer trop, car ça pourrait ralentir votre site avec l’ajout de nombreuses dépendances.
.ct-span.oxy-stock-content-styles {display: unset;}
En cherchant des outils pour simuler ce que voient les utilisateurs de différents appareils lorsqu'ils naviguent sur un site, vision indispensable lorsqu'on crée des sites à l'heure actuelle, je suis tombée sur un outil très simple et vraiment pratique.
Il ne simule pas vraiment l'appareil y compris son système d'exploitation mais sa restitution du site au niveau largeur d'écran est assez fidèle et il permet de simuler l'écran tactile et aussi la rotation d'écran.
C'est outil c'est tout simplement Firefox.
Vous allez dans le menu puis Développement web > Vue adaptative :
(oui il faut que je mette Firefox à jour !)
Vous pouvez choisir parmi un nombre non négligeable d'appareils ou définir vos largeurs personnalisées, ce que j'ai fait à l'époque avec les largeurs "seuil" d'Oxygen :
Par exemple, notre super site, très bien adapté par Philippe à la navigation mobile donne ceci :
La zone 1 donne les informations concernant l'appareil, l'icône 2 permet de simuler la rotation de celui-ci et la zone 3 active la simulation tactile (pour être honnête je n'ai pas trop réussi à utiliser ce dernier point). Mais le reste est déjà très bien...
Et vous, qu'utilisez-vous pour vérifier vos responsive design lorsque vous créez un site ?
Nous savons qu'un des points les plus importants pour optimiser la vitesse de chargement des sites est d'utiliser des images avec le "bon" dimensionnement. Et par dimensionnement on parle à la fois de la taille (inutile de charger une image de 4000 x 3000 pixels pour l'afficher ensuite en 600 px) et du taux de compression de ces images.
Lorsque vous utilisez Photoshop (ou autre), vous pouvez enregistrer vos images "pour le web". Mais parfois vous avez trouvé des photos sur une banque d'images ou bien c'est votre client qui vous en a fourni et elles sont énormes et pas optimisées.
Bien sûr vous pouvez utiliser un plugin pour traiter le sujet une fois les images envoyées sur le site mais c'est encore mieux de les envoyer déjà optimisées.
Un jour où je m'intéressais au sujet, je suis tombée sur un article d'un enseignant qui m'a donné envie d'essayer l'outil dont il parlait (EDIT : j'ai supprimé le lien car son site a manifestement été piraté).
Je l'ai donc téléchargé et installé et c'est d'une telle simplicité qu'il n'y a pas grand-chose à en dire. Quelques images valent mieux que des milliers de mots alors allons-y.
J'ai cherché sur Pixabay une image pour illustrer un article sur le bac à sable d'Oxygen, pour l'exemple (en fait en cherchant une photo pour illustrer cet article je suis tombée sur celle que Philippe a utilisée pour l'article sur le bac à sable et j'ai trouvé ça amusant)... Pour la démonstration je l'ai téléchargée en grand format (5760 x 3840 px) La photo fait plus de 5 Mo.
Une fois RIOT installé sur votre ordinateur vous le lancez puis vous "tirez" tout simplement l'image que vous voulez traiter dans la fenêtre de gauche de l'outil : Déjà vous avez une alerte :
L'outil ayant détecté ces dimensions énormes vous propose de redimensionner votre photo. Là j'ai mis 1200 px en largeur pour pouvoir éventuellement l'utiliser en bandeau et déjà sans autre optimisation le poids de la photo est divisé par 5 :
Maintenant je me demande si en optimisant je peux encore gagner. En faisant varier le curseur "Quality" je me rends compte qu'en le descendant à 60 % je ne vois pas de différence perceptible à l’œil nu et le poids de ma photo a quasiment été divisé par 10 !
Comme beaucoup d'autres outils, RIOT vous propose aussi quelques outils de retouche photo (contraste etc.) :
Bien. Je suis satisfaite, je clique sur la disquette en haut à gauche pour enregistrer. Par défaut il propose d'écraser la photo existante :
Si vous cliquez sur No il ouvre une nouvelle boîte de dialogue qui vous permet de donner un autre nom à la photo optimisée.
Et voilà. Simple non ?
Mais le meilleur est à venir. Le traitement par batch est très simple lui aussi. Vous sélectionnez les n photos que vous voulez optimiser et vous les "tirez" dans la partie gauche de l'outil. Petite alerte :
Après avoir cliqué sur "Yes" l'outil charge les photos et vous propose 4 actions :
Il faut définir un répertoire de sortie. L'outil est malin et vous propose le dernier utilisé. Si vous l'avez supprimé après votre dernière séance de travail il le recrée donc ce n'est pas un souci.
Là j'ai choisi l'action redimensionner sur un lot de photos trop grandes (3072 x 4608 px):
Remarquez l'énorme gain... Pour télécharger RIOT c'est ici. (Par contre désolée mais il semblerait que ça ne fonctionne qu'avec Windows).
Voilà. Personnellement j'utilise cet outil pour tous mes projets depuis que je l'ai découvert et je n'utilise plus de plugin d'optimisation en ligne. Ces plugins sont néanmoins très intéressants lorsque vous donnez la main sur le site à votre client et que du coup vous ne maîtrisez plus la qualité des photos qu'(il va éventuellement y mettre...
D'ailleurs, quels sont vos outils préférés pour l'optimisation online (gratuits / payants) ?
