À 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 !
Sommaire du cours
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 :

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

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 :

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

Un plan de plusieurs années en 4 phases est alors dévoilé au public :
- En 2018 : Intégration du nouvel éditeur de contenu au nom de code « Gutenberg » dans WordPress
- En 2023 : Extension de l’éditeur de contenu à tout le thème : le « Full Site Editing »
- En 2025 : Ajout de fonctionnalités collaboratives sur les publications, à la Google Docs
- 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.

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

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

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 :

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