Formation « Créer des blocs avec Gutenberg »

Gutenberg n’est pas (encore) un page builder

Lecture : 6 minutes • 13

On compare souvent Gutenberg aux Page Builders existant mais en réalité, leur but n’est pas du tout le même. Dans ce cours je vais vous expliquer les différences fondamentales qui existent entre les deux, et comment ils peuvent coexister.

Qu’est-ce qu’un page builder ?

Un Page Builder est un outil complet permettant de créer une mise en page poussée, à l’aide de sections, colonnes et composants personnalisables.

C’est un outil complexe, qui propose des milliers de possibilités et qui permet de modifier en profondeur le design d’un site.

Il en existe beaucoup aujourd’hui, dont Elementor et Divi parmi les plus en vogue.

Le Page Builder Elementor
Elementor en action, avec l’un des templates téléchargeable

Certains thèmes sont très minimalistes pour laisser justement la place aux pages builders. C’est notamment le cas de Hello, qui s’intègre très bien avec Elementor.

Aujourd’hui, la plupart des thèmes premium au top du classement (sur ThemeForest par exemple) intègrent un Page Builder, comme le visual composer pour Salient) ou proposent leur propre builder, comme c’est le cas chez Divi avec le Divi Builder.

Certains développeurs créent même leur thème sur mesure, et intègrent un page builder pour permettre des mises en page poussées rapidement, sans avoir besoin de toucher à du code.

Page Builder, une structure en sections, colonnes et blocs

Un page builder permet d’éditer 3 niveaux d’un site Web :

  1. La section :  une strate horizontale dont on peut personnaliser la couleur, l’image, ou la vidéo de fond
  2. Les colonnes : une seule, 2, 3… avec des ratios personnalisables (par exemple 2/3 + 1/3)
  3. Les blocs : des éléments qui s’empilent dans les colonnes : titres, textes, images, vidéo…

Si je schématise :

Schéma section / colonne / bloc

Et voici un exemple basé sur ce schéma :

La section est la zone grise, qui prend toute la largeur. Viennent ensuite les 2 colonnes, celle de gauche comprenant 2 blocs : un titre et un texte, et celle de droite affichant un bloc image.

Le succès des Page Builders vient de cette capacité à personnaliser chaque niveau dans les moindres détails de couleur, tailles, espacement, typographie et même les animations.

Qui utilise les Page Builders ?

Aujourd’hui plus de 60% des professionnels de WordPress ne sont pas développeurs : ils conçoivent des sites à base de Page Builder et d’extensions, et réussissent parfaitement à répondre à la plupart des besoins clients sans taper une seule ligne de code.

Répartition développeurs
Les développeurs WordPress sont aujourd’hui en minorité

J’aborde d’ailleurs ce sujet plus en détails dans la formation développeur de thème, dans le cours Thème sur mesure ou thème premium ?

Quel est le problème des Pages Builders ?

Le principal problème, c’est la complexité de ces outils. Il y a tellement de possibilités, d’options, qu’il est plus facile de faire du moche que de faire du beau.

En effet, sans aucune compétence de designer, il est très compliqué de réaliser un site cohérent, visuellement beau. Sans un minimum de talent de rédacteur web, il sera difficile d’allier le bon contenu au bon design et ainsi réaliser un site percutant.

Le design et l’expérience utilisateur, la rédaction web, restent des domaines complexes, et des métiers à part entière.

Les Page Builders permettent donc de faire des sites plus facilement, mais ne permettant pas de les faire plus jolis pour autant. Ils proposent un panel d’outils conséquent, destinés à un public large, tel qu’une agence, un freelance, ou encore un simple utilisateur.

Si vous êtes une agence, et que vous mettez en place cet outil à un client, il aura alors accès à toutes les fonctions. Dans ce cas il pourra très facilement faire des modifications en profondeur et défigurer le site.

Et si vous êtes une personne qui souhaite réaliser son propre site web, maitriser WordPress ainsi qu’un page builder prendra énormément de temps.

Cela dit je ne fais pas le procès des Page Builders. Ils existent pour une bonne raison : proposer des solutions évoluées aux besoins des utilisateurs de WordPress, que ce dernier a mis trop de temps à prendre en compte.

Ils apportent un grand pouvoir, mais également une grande responsabilité à son utilisateur.

Merci oncle Ben !

Ce n’est donc pas la solution à mettre dans toutes les mains.

Pourquoi Gutenberg n’en n’est pas (encore) un ?

De retour à Gutenberg, j’avoue entendre souvent : Gutenberg est un page builder peu évolué qui n’a donc aucun intérêt face à Elementor (ou autre).

Vu comme ça, en effet : Gutenberg ne permet pas de gérer des sections et tout juste des colonnes. Quel piètre Page Builder il fait !

Mais en réalité, Gutenberg n’est pas un Page Builder ! Pour le moment…

Il reste le successeur de TinyMCE : c’est-à-dire un éditeur visuel. Il est fait pour écrire du contenu, celui d’un article par exemple, mais pas pour faire de la mise en page avancée, qui est le rôle du thème et du personnaliseur de thème (le customizer, même si personne ne l’aime).

Son objectif est de remplacer TinyMCE qui, après 15 ans de bons et loyaux services, a bien mérité sa retraite (spoiler alerte : en réalité on retrouve encore TinyMCE, quelque peu maquillé, dans Gutenberg).

Alors à quoi sert Gutenberg ?

Le plus simple est de le comparer à Medium. Pour ceux qui ne connaissent pas, c’est une tribune où chacun peut écrire des articles sans pour autant pouvoir modifier la mise en page (exceptés l’en-tête pour les groupes).

Un article sur Medium.com
Medium : design minimaliste, 100% focus sur le contenu

Le focus est bien là : l’écriture. Et tout comme Medium, Gutenberg propose des blocs et styles assez sympathiques pour sublimer son contenu (notamment avec des emphases de texte, des citations…).

D’ailleurs, le nouveau thème twentynineteen inclus dans WordPress 5 ne laisse planer aucun doute : on dirait bien un medium-like !

Un petit air de Medium.com

Il vise donc à améliorer l’expérience d’écriture de contenu d’articles. Et ceci avec simplicité. Un utilisateur doit pouvoir s’en servir de manière intuitive et sans effort.

Bien entendu, pour les habitués de WordPress, le changement (comme tout changement) demandera quelques efforts d’adaptation.

Gutenberg est donc l’allié idéal de l’écriture d’articles, de contenus long, de cours (comme celui-ci), ou encore des pages simples, mais pas pour faire des mises en page complexes et designer son site.

C’est n’est pas son objectif, pour le moment du moins. Je pense qu’il évoluera (et WordPress aussi par ailleurs) afin de prendre de plus en plus d’importance dans le coeur du CMS.

J’imagine très bien une approche similaire pour le customizer de thème d’ici un avenir proche, et à terme une édition complètement front-end du contenu et du design.

Gutenberg et le Full site Editing (FSE)

L’équipe du core de WordPress travaille sur le projet de full site editing, où l’éditeur prendra un rôle plus important encore dans le coeur de WordPress, et deviendra à terme un constructeur de page. Il absorbera les widgets, l’outil de personnalisation de site…

Il faut donc se dire que WordPress va encore beaucoup changer, et en profondeur, dans les quelques années à venir.

Javascript et React continueront alors d’augmenter leur emprise sur la base code.

Conseil

Vous pouvez tester une beta du Full Site Editing en téléchargeant l’extension Gutenberg dans le répertoire des extensions.

Faire coexister les deux ? Comment tout cela va évoluer à l’avenir ?

Les créateurs des principaux Page Builders n’étaient pas sereins à l’annonce de Matt en décembre 2017, en voyant avec quelle vitesse Gutenberg allait arriver dans nos vies.

Mais après réflexion il n’y a aucun souci à se faire. Gutenberg ne remplacera pas les Pages Builders (du moins pas avant quelques temps).

Et rien ne vous empêchera d’utiliser les 2 en même temps, le page builder pour construire vos pages (par exemple la page d’accueil ou une page charnière de votre site) et conserver Gutenberg pour les pages plus simples et les articles.

Imaginez tous les sites qui demain, seront capables d’écrire de manière plus poussée sans effort : les mises en pages type medium seront alors à la portée de tous (et il était grand temps que cela soit possible).

Je pense surtout aux sites de la presse qui vont vraiment pouvoir sublimer leurs articles.


Selon moi Gutenberg va clairement aider WordPress à progresser encore plus, en apportant au grand public un outil agréable à utiliser au jour le jour.

13

Questions, réponses et commentaires

  1. momo-fr

    Le 17 octobre 2018

    Le chaînon manquant : l’extension Elementor Blocks for Gutenberg permet de glisser les modèles Elementor dans Gutenberg.

    1. Maxime BJ

      Le 17 octobre 2018

      Bien vu ! Des outils de ce genre vont de plus en plus apparaitre je pense en attendant la phase 2 de Gutenberg.

  2. Fafat

    Le 31 octobre 2018

    Sans oublier ACF (version 5.8) qui permet de créer ses propres blocs Gutemberg avec toute la puissance d’ACF.

    1. Maxime BJ

      Le 8 novembre 2018

      Ouais carrément ! Il faut que j’ajoute un cours à ce sujet d’ailleurs.

  3. Patrick

    Le 9 décembre 2018

    Oups…j’avais installé PageBuilder par SiteOrigin et en passant à WordPress 5.0 c’est Gutenberg qui a pris la main. Y a-t-il un moyen de redéfinir mon ancien Pagebuilder comme interface par défaut ? Merci !

    1. Maxime BJ

      Le 12 décembre 2018

      Normalement oui ! Le Page Builder doit toujours proposer le bouton « passer en mode Page builder » s’il est bien compatible WordPress 5. Je sais pas comment ça se passe pour Pagebuilder, je t’avoue que j’ai cessé de l’utiliser il y a fort longtemps !

      D’après ce thread visiblement à ce jour ils ne sont pas prêt pour WP 5 : https://siteorigin.com/thread/wordpress-5-0-page-builder-gutenberg-migration/

      Ce que je peux comprendre d’ailleurs : WordPress n’a pas laissé le temps aux développeurs d’extension de se mettre à jour, et Gutenberg a évolué a un ryhtme fou ces derniers mois.

      Peut-être qu’une restauration en 4.9 serait plus judicieuse à ce niveau ?

  4. Dom

    Le 18 décembre 2018

    Une vraie catastrophe le passage à Gutenberg désactive les mises en forme d’elementor et plus rien ne. Fonctionne en responsive !!!

    1. Maxime BJ

      Le 21 décembre 2018

      Si tu as fait ta mise en page avec Elementor, alors il faut continuer d’utiliser Elementor pour les pages concernées. Celui-ci est compatible avec WordPress 5.0 donc tu trouveras toujours le bouton « éditer avec Elementor » : aucun souci à te faire !

  5. Eric

    Le 5 janvier 2019

    Merci Maxime pour cet superbe intro à Gutenberg. Donc avec Elementor et Elementor Blocks for Gutenberg il serait possible de faire des pages spécifiques (Elementor) et des pages d’articles « traditionnelles » mais possiblement agrémentées selon besoins (Gutenberg + Elementor Blocks for Gutenberg) ?

    1. Maxime BJ

      Le 7 janvier 2019

      Oui voilà, en fonction du cas tu choisis ton « builder ». Je dirais Elementor pour les pages, Gutenberg pour les articles (et faire appel à Elementor blocks si tu as besoin d’un bloc Elementor dans Gutenberg) et là tu arrives à un bon mix.

  6. Mary

    Le 22 septembre 2024

    Bonjour,
    Je me pose quelques questions auxquelles je n’arrive pas à trouver de réponse : Imaginons que je souhaite utiliser Gutenberg pour insérer le contenu de mon site, en l’occurrence, un texte et à coté une image. On va dire que la présentation de Gutenberg ne me convient pas. Est-ce que j’ai le « droit » de modifier la présentation avec un css personnalisé ? La deuxième questions est que pour rendre notre thème sur mesure compatible avec Gutenberg, il faut ajouter le fichier theme.json et le reste des fichiers excepté le function.php, sont en html… Est ce qu’on est vraiment obligés de mettre nos fichiers en html si on souhaite utiliser Gutenberg avec un thème fait sur-mesure ? Merci d’avance pour la réponse à la question qui j’espère est assez claire, et merci pour les cours qui sont faits avec beaucoup de pédagogie.

    1. Maxime BJ

      Le 22 septembre 2024

      Ça tombe bien, je commence à sortir les premiers cours de la formation Full Site Editing dès demain, tu auras toutes les réponses à tes questions au travers de cette nouvelle formation orientée sur le « Nouveau WordPress ». Au programme : theme.json, compositions, Gutenberg, Full Site Editing… Le lien vers la formation : https://capitainewp.io/formations/wordpress-full-site-editing/

      1. Mary

        Le 24 septembre 2024

        Bonjour, Merci beaucoup. D’après mes recherches on peut faire un mix. Coder en dur dans les fichiers pour le contenu statique et utiliser les blocs Gutenberg qu’on peut personnaliser via le css qu’on peut ajouter dans le back-office. On sait que techniquement tout est faisable, mais le but est de rester avec de bonnes pratiques, ma question était plutôt là-dessus pour ne pas faire une usine à gaz, et un code sale. Merci encore pour la réponse. Belle journée.

Laisser un commentaire