Utiliser des plugins Gutenberg avec Oxygen

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.

Liste des plugins

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)

Injection dans une page ou un article avec Oxygen

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...

Avantages et inconvénients

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.

Notes supplémentaires

1. Lors du rajout du bloc vidéo Gutenberg récupéré dans Oxygen, la vidéo ne s'affiche pas ! Il suffira de rajouter dans un code bloc d’Oxygen ce CSS :

.ct-span.oxy-stock-content-styles {display: unset;}

2. Si vous utilisez Asset CleanUp, vous pouvez désactiver le CSS de Gutenberg. Attention de le laisser activé si vous l’utilisez ????