WordPress est avant tout un outil de no-code. Il est donc normal de s’attendre à pouvoir créer des sites entiers sans une seule ligne de code grâce à l’éditeur de blocs. Mais à l’heure actuelle, certaines options du FSE ne sont disponibles qu’après avoir touché au thème. L’objectif de ce cours est de voir quelles sont ses limites en no-code par rapport à Elementor.
Sommaire du cours
On peut faire énormément de choses avec l’éditeur du FSE, mais pas tout ! On va donc voir quelles sont les limites du FSE, et décider si un no-coder peut facilement se l’approprier.
Comme on l’a vu précédemment, l’éditeur de thème permet aujourd’hui de gérer beaucoup d’aspects de votre thème, comme les typographies, les couleurs, la largeur du site…
On a presque le contrôle absolu du design system en no-code. Mais vous allez voir qu’il nous manque quelques petites choses.
Bien entendu, si modifier quelques lignes de JSON ne vous font pas peur, alors vous n’aurez pas de souci, et cette formation est là pour vous ! Mais pour ce cours je vais partir du principe que vous allez vouloir éditer votre site avec le défi de ne pas toucher à une seule ligne de code.
Alors voyons ce qu’il manque actuellement au FSE.
Ce qu’il manque au FSE aujourd’hui
Eh bien en réalité il ne manque pas grand chose pour tout faire visuellement, sans toucher à du code. Malheureusement, les quelques petites bricoles qui manquent peuvent être assez handicapantes. On va les passer en détails :
La configuration des espacements
Dans Gutenberg, quand vous voulez définir un espacement pour le bloc groupe par exemple, vous aurez des champs de type glissière avec des crans :
C’est super intéressant, car avec cette configuration vous pouvez uniquement choisir votre espacement au travers de valeurs prédéfinies dans le theme.json. Vous ne pouvez donc pas choisir votre espacement au pixel près, à part si vous le permettez là aussi dans le theme.json.
Mais il est impossible aujourd’hui de configurer ces espacements directement depuis l’éditeur de site, au même titre que les couleurs de notre charte graphique ainsi que les typographies des titres, textes…
Et ça c’est bien dommage !
Voici la configuration à ajouter dans le theme.json de votre thème pour définir des espacements. Vous pouvez ajouter autant de valeurs que vous le désirez :
Chaque valeur listée ici ajoutera un cran sur notre champ glissière.
Malgré tout, dans le menu Mise en page, on va pouvoir configurer quelques éléments.
On va pouvoir définir la largeur principale du site, ainsi que la largeur plus large. On pourra définir également les marges internes (ou padding) des blocs groupes ainsi que l’espacement par défaut des blocs :
Et justement, les champs marges / espacement des blocs utiliseront les valeurs de votre theme.json.
La configuration des fonctionnalités de l’éditeur
Le principe phare de Gutenberg est de proposer un éditeur le plus minimaliste possible. Et donc par défault, il n’y a pas grand chose comme fonctionnalités.
Cela dit, et toujours grâce au theme.json, il est possible d’ajouter des options pour chaque bloc. Toujours moins qu’Elementor cela dit (le but étant de dépendre au maximum du design system).
Et pour la typographie, on peut passer d’un champ tout simple à quelque chose de bien plus complexe :
Mais voilà, il faudra là aussi configurer le theme.json pour activer ou désactiver les champs de l’éditeur.
À l’heure actuelle, il n’y a aucun moyen de le faire directement depuis l’interface du Full Site Editing.
Mais au final, c’est mieux ainsi car c’est le rôle de l’agence de définir quel degré de liberté et quelles contraintes imposer à ses clients.
L’ajout des variations de styles
Un autre point fort de Gutenberg, c’est la possibilité d’ajouter des variations de styles pour chaque bloc de l’éditeur.
Ces variations permettent, d’un seul clic, d’appliquer un style à votre bloc. Voici par exemple 4 variations de styles différentes pour des boutons :
Mais là encore, malheureusement, on ne peut pas ajouter de nouvelles variations de styles depuis l’éditeur de thème de WordPress. On peut cela dit modifier les existantes, sans pour autant modifier leur nom.
Là encore, on devra aller configurer les variations dans les fichiers du thème en ajoutant un fichier JSON à notre thème :
Le responsive web design
L’un des gros points noirs pour le no-coder, c’est l’impossibilité de gérer le responsive web design, c’est-à-dire conditionner l’affichage d’éléments du site en fonction de l’appareil qui consulte le site.
Elementor est un très bon élève de son côté car il propose une petite icône sur la plupart des réglages afin de proposer de changer le réglage selon l’appareil.
Du côté FSE, il n’y a pas d’autre solution que d’ajouter du CSS personnalisé pour traiter les cas spécifiques.
Les animations, formes de séparation et pop-ups
Elementor propose souvent beaucoup trop d’options par blocs. Cela dit, c’est parfois utile pour les no-coders. Par exemple, les formes de séparation des sections, qui permettent de créer des frontières non droites entre les blocs.
On a le choix entre une bonne dizaine de formes et on va pouvoir personnaliser la hauteur. Cela permet d’ajouter un peu plus de dynamisme et d’originalité à une page.
Il n’y a pas du tout ce genre d’options avec Gutenberg. Le seul moyen d’en avoir sera donc de les créer en CSS et de les appliquer via les variations de styles de blocs.
Ce n’est pas plus mal après tout, ça contraint l’utilisateur à n’utiliser que les formes de séparation définies par le créateur du site.
C’est la même chose côté animations CSS. Elementor possède une interface pour ça mais pas Gutenberg. Elementor possède également un éditeur de pop-ups.
Donc si vous faites du no-code et que vous voulez facilement configurer ces aspects sur votre site, c’est vraiment plus facile sur Elementor.
Ce que vous pouvez faire avec l’éditeur aujourd’hui
Toutefois, Il est déjà possible de faire plein de choses directement dans l’éditeur du FSE, ce qui en fait un très bel outil pour le no-code.
Définir le design system : couleurs, typographies…
Comme on a déjà pu le voir dans les cours précédents, l’éditeur de thème disponible dans Apparence > Éditeur nous permet de définir les couleurs de la charte graphique, les dégradés, duotones mais aussi les typographies, graisses…
On peut également définir les styles par défaut des éléments de base comme les textes, le fond du site, les liens et les boutons.
Ou encore définir, pour chaque bloc de l’éditeur, leur apparence par défaut et afficher le tout via un guide de styles complet :
Créer de nouvelles compositions
L’autre fonctionnalité intéressante de Gutenberg qui est accessible en no-code, c’est la gestion des compositions.
Les compositions sont des groupements de blocs que vous allez pouvoir réutiliser sur votre site et sur les prochains.
Et depuis l’éditeur de site, vous allez pouvoir créer, modifier et supprimer les compositions.
Vous n’avez pas besoin d’intervenir au niveau du code du thème pour faire tout cela, même si c’est mieux d’exporter les compositions en HTML et les déclarer depuis le dossier de votre thème, afin de versionner le tout avec Git.
Vous pouvez utiliser l’éditeur de site pour créer des compositions des plus simples aux plus complexes :
Le Full Site Editing en pur « no-code »
Du coup, la solution pour palier ces manques est d’utiliser un thème prêt pour le FSE dont les réglages « non modifiables » comme les espacements et variations vous correspondent.
Au début de la formation, je vous ai montré le thème Ollie qui est plutôt bien conçu, mais il en existe plein d’autres.
Celui-ci apporte notamment plus de 60 compositions pré-conçues et prêtes à l’emploi.
D’ailleurs le thème par défaut livré avec WordPress est aussi une très bonne base si vous ne souhaitez pas vous prendre la tête.
Bien entendu, vous aurez pleinement le contrôle sur les couleurs, typographies et les autres réglages classiques du FSE.
Mais si vous êtes un fan absolu d’Elementor Pro, qui propose toutes les options nativement, alors il se peut que vous ne soyez pas convaincus par le passage au FSE pour le moment, et à juste titre.
Par contre, si vous voulez vous lancer dans le code, modifier le theme.json ou déclarer une nouvelle variation de styles de blocs sont totalement à la portée d’un débutant car la documentation à ce sujet est hyper complète, ou tout simplement en continuant cette formation.
Dans ce cours, on a vu qu’on ne pouvait pas encore tout configurer directement à partir du FSE, et qu’il fallait forcément passer par un thème adéquat ou modifier le theme.json.
Dans le prochain chapitre, on va manipuler le FSE afin de bien comprendre son fonctionnement : je vais vous donner quelques astuces et bases solides concernant l’éditeur de blocs, avant de nous lancer dans la création de la base de notre thème.
0
Questions, réponses et commentaires