Formation « Créer un site WordPress avec le Full Site Editing »

WordPress : Gutenberg, FSE, Qu’est-ce que c’est ?

Lecture : 6 minutes • 0

À partir de 2018, WordPress a entamé de gros chantiers pour faire évoluer son éditeur de contenu. Aujourd’hui, la façon de créer des sites avec notre CMS préféré a totalement changé. Le but de cette formation est de vous dévoiler les rouages de cette nouvelle approche !

Bonjour à toutes et à tous et bienvenue dans cette formation dédiée au Full Site Editing ! Mon objectif est de vous apprendre à créer des thèmes modernes grâce à l’éditeur de sites afin de faire des sites de qualité plus rapidement et surtout en écrivant moins de code.

Je commence par un petit cours d’histoire très rapide (promis) pour comprendre d’où on vient et pourquoi on en est là aujourd’hui.

WordPress avant 2018

Si vous faites des sites avec WordPress depuis longtemps, vous vous souvenez probablement de l’ancienne interface d’édition des contenus :

L'interface de WordPress avant la révolution Gutenberg. L'éditeur de contenu est simpliste.
L’éditeur classique de WordPress avant la V5.0

Ça, c’était WordPress avant 2018, avec pour éditeur de contenu une librairie JavaScript qui s’appelle TinyMCE.

On pouvait mettre en gras, italique, souligné, insérer des images et des titres et… c’est tout ! Pas tellement visuel vous me direz.

De plus, pour intégrer des éléments interactifs comme des formulaires par exemple, il fallait faire appel à ce que l’on appelle des codes-courts, ou shortcodes en anglais.

On devait donc ajouter manuellement un code comme [form id=1] à l’endroit où l’on voulait intégrer notre formulaire de contact.

WordPress était donc nativement très vite limité, ce qui n’a pas aidé lors de l’arrivée des technologies web modernes (HTML 5 et CSS 3) et la révolution du webdesign. Il a donc bien fallu à un moment trouver des solutions !

Bien heureux ceux qui n’ont pas connu cette époque !

Comment faisait-on des sites avant ?

Très vite, 2 solutions se sont imposées à nous :

  • Soit on utilisait des constructeurs de pages tiers ;
  • Soit on développait son thème sur-mesure à l’aide d’outils supplémentaires.

Soit 2 approches très différentes pour des publics très différents.

Les constructeurs de page

L’approche des constructeurs de pages a créé une communauté de no-coders, puisqu’il n’était pas nécessaire de savoir coder pour créer son site. Une vraie révolution en soi.

Parmi les page builders les plus connus, on retrouve Elementor, Divi, Beaver Builder… Ce sont des extensions (plugins) gratuites ou payantes, que l’on ajoute à notre site.

L'interface du constructeur de pages Elementor.
L’interface d’Elementor

Le succès des constructeurs de page n’est plus à prouver. Aujourd’hui Elementor est installé sur plusieurs dizaines de millions de sites à travers le monde.

Le sur-mesure avec ACF

À l’époque, les constructeurs de page avaient leurs limites, alors les agences ont préféré l’approche « code sur-mesure » afin de garder le contrôle et aller plus loin.

L’un des reproches que l’on fait souvent à Elementor est son interface trop chargée, qui propose bien trop d’options à l’utilisateur final du site. On en reparlera d’ailleurs dans un prochain cours visant à comparer le FSE aux pages builders.

Et afin de palier les limites de WordPress, un outil très pratique et encore très utilisé de nos jours s’est lui aussi imposé à nous. C’est l’extension ACF (Advanced Custom Fields) aujourd’hui détenu par le groupe WP Engine.

Cet outil, utilisé par la majorité des agences web dans le monde, permet d’ajouter des champs administrables à vos pages. Voici un exemple :

L'interface d'édition d'une page avec un groupe de champs ACF.
L’interface d’édition d’une page avec un groupe de champs ACF.

Grâce à ACF, il est possible de rendre administrable n’importe quel design, du plus modeste au plus complexe. Le seul souci, c’est que l’interface d’administration est un gros formulaire contenant une quantité de champs, et il n’y a pas d’aperçu de votre page en temps réel.

Si vous voulez jetez un oeil à ma formation de thèmes dite « classique », voici le lien. Il y a mine de rien pas mal de concepts qui restent encore d’actualité :

Formation développeur de thèmes classique

Je propose également sur Capitaine WP une formation dédiée spécialement à ACF. Vous verrez d’ailleurs que malgré le FSE, on va toujours avoir besoin d’ACF dans certains cas spécifiques.

Formation Advanced Custom Fields (ACF)


Si vous êtes intéressés d’en savoir plus sur toutes les façons de faire un site avec WordPress, j’ai écrit il y a quelques temps un article sur le sujet sur mon blog :

Quelles sont les différentes façons de faire un site WordPress

2018 : L’arrivée (tumultueuse) de Gutenberg

En 2017, Matt Mullenweg, l’un des créateurs de WordPress, annonce l’arrivée d’un nouvel éditeur, plus moderne et plus visuel, et invite tous les développeurs à apprendre le JavaScript en profondeur.

L’objectif était bien évidemment de proposer une solution moderne et native dans WordPress pour éviter à terme le morcellement de la communauté sur des constructeurs de page tiers.

Matt Mullenweg, le créateur de WordPress, en pleine conférence.
Matt Mullenweg lors d’un WordCamp

Un plan de plusieurs années en 4 phases est alors dévoilé au public :

  1. En 2018 : Intégration du nouvel éditeur de contenu au nom de code « Gutenberg » dans WordPress
  2. En 2023 : Extension de l’éditeur de contenu à tout le thème : le « Full Site Editing »
  3. En 2025 : Ajout de fonctionnalités collaboratives sur les publications, à la Google Docs
  4. en 2027 : Arrivée du multilangue natif dans WordPress

Gutenberg, la révolution WordPress, ou pas ?

Malheureusement, Gutenberg n’est pas très bien accueilli par la communauté pour plusieurs raisons.

La première est probablement l’énorme changement que cela implique dans le quotidien de notre site. Les extensions ont mis du temps à se rendre compatible à ce nouvel éditeur.

L'interface d'édition de contenus de WordPress avec l'éditeur Gutenberg et ses blocs
L’éditeur de blocs Gutenberg

La seconde c’est que les attentes des utilisateurs étaient énormes : il fallait que la solution soit au moins aussi bonne qu’Elementor.

Mais Gutenberg n’était pas (encore) un page builder. C’était en premier lieu un éditeur de contenu pour le blog. Pour écrire par exemple des articles ou des cours comme celui que vous êtes en train de lire : avec une disposition verticale.

On parle alors de texte riche : plus que des titres, textes et images, l’éditeur propose pleins de blocs permettant de mettre en avant vos contenus.

Le saviez-vous ?

Il existe une extension officielle « Classic Editor » pour retirer Gutenberg de votre site, dans le cas où celui-ci ne serait pas compatible avec le nouvel éditeur. Aujourd’hui, plus de 10 Millions de sites l’utilisent encore.

2023 : Le Full Site Editing

Il aura fallu attendre 5 ans pour que Gutenberg s’étende à tout votre site, et vous permette de le designer de A à Z visuellement, à la façon des constructeurs de page concurrents.

Full Site Editing

Définition

Le Full Site Editing désigne la méthode de créer un site WordPress directement à partir de l’éditeur de blocs (Gutenberg). Il permet de personnaliser l’intégralité des pages du site visuellement, sans faire appel à du HTML et CSS.

Traduction : Éditeur de site

Abréviation : FSE

Nous voici en 2023 et le FSE est annoncé comme « complet ». Mais voilà, certains restent sceptiques : on n’a pas autant d’options que sur Elementor, ça semble limité.

Une approche volontairement différente et épurée

Mais c’est tout à fait normal ! En fait, les équipes et contributeurs de WordPress ont réfléchi longuement à l’approche à avoir. Et au lieu de copier les constructeurs actuels, ils se sont plutôt concentrés sur les standards et besoins du marché.

En effet, le but était de créer une façon de faire des sites compatible avec les autres cœurs de métier, notamment les designers.

Ces derniers créent non plus seulement des chartes graphiques, mais désormais des Design System complets, contenant tous les composants et leurs variations de styles :

Les variations de boutons du Design System de l'état Français, à titre d'exemple.
Exemple de Design System de l’état Français

Le web moderne utilise désormais une approche par composants, à la façon de l’atomic design décrit par Brad Frost en 2013. Cette image vous parle peut-être :

Le but pour WordPress était donc de trouver un fonctionnement compatible avec ces concepts. Et pour cela il fallait absolument intégrer ces notions de Design System et d’Atomic design au cœur de WordPress.

Conseil

Design System, Atomic Design… sont des concepts que nous allons bien évidemment aborder en détail au cours de cette formation.

L’objectif du Full Site Editing

L’éditeur de thème du FSE va donc nous permettre de concevoir visuellement notre site. Il est actuellement accessible dans Apparence > Editeur d’un thème compatible FSE.

L'interface de l'éditeur de thème dans un site WordPress moderne.
L’éditeur de thème (FSE) dans WordPress

Sans pour l’instant rentrer dans les détails, on peut gérer la navigation, les styles, les pages, les modèles de pages (les templates du fameux template hierarchy) et les compositions (groupements de blocs réutilisables).

Et voici à quoi ressemble par exemple l’éditeur de styles :

L'interface de l'éditeur de styles du thème dans WordPress
L’interface d’édition des styles du thème

Ici vous pouvez définir visuellement les différents éléments de votre Design System : couleurs, polices et styles par défaut pour chaque bloc.

Et comme vous vous en doutez, on pourra également faire ces réglages dans le code de notre thème à travers un fichier de configuration que l’on appelle le theme.json. Et on aura même droit à des options supplémentaires !

Le but du FSE n’est pas de fournir une interface lourde en options aux rédacteurs du site (comme Elementor). Au contraire, son objectif est de pré-configurer au maximum les styles à l’avance, afin que les options proposées à l’utilisateur dans Gutenberg soient minimalistes, un peu à la façon du less is more.

Information

Gardez donc à l’esprit que la façon de faire un site avec le FSE sera dans bien des aspects différente de ce que proposent les constructeurs de pages actuels, dans une approche beaucoup plus épurée.

Pour autant, on pourra faire au moins autant que les constructeurs de pages existants.


J’espère que ce premier cours vous a permis d’y voir plus clair dans WordPress, son histoire, et pourquoi il existe aujourd’hui autant d’approches différentes pour créer son site.

Dans le prochain cours, on va découvrir en détail Gutenberg et le Full Site Editing, afin de comprendre les fonctionnalités proposées et les interfaces.

0

Questions, réponses et commentaires

Laisser un commentaire