WordPress : passer des page builders à l’Éditeur de site, le petit guide pour les dev front

Si vous avez l’ha­bi­tude de tra­vailler avec des Page buil­ders (ou construc­teurs de pages), il se peut que vous hési­tiez à pas­ser à l’Édi­teur de site natif de Word­Press. On a cette idée pré­con­çue qu’on va avoir du mal à y pas­ser. En fait, ce qui est dif­fi­cile, c’est de quit­ter une habi­tude, de quit­ter sa rou­tine dans laquelle on est bien ins­tal­lé, on a peur de sor­tir de sa zone de confort.

Le FSE (ou Full Site Edi­ting) c’est l’évolution natu­relle du pro­jet Guten­berg : d’ailleurs, « FSE » n’est plus le terme mis en avant, on parle offi­ciel­le­ment de Site Edi­tor depuis 2022.

Cet article ne se veut pas exhaus­tif. Mais il pour­ra peut-être don­ner un coup de pouce aux per­sonnes qui hésitent à se lancer.

Qu’est ce que le projet Gutenberg ?

Guten­berg est le pro­jet plu­ri-annuel qui a trans­for­mé Word­Press autour des blocs. L’idée n’était pas seule­ment de moder­ni­ser l’éditeur d’articles d’o­ri­gine, le fameux TinyMCE, mais de faire des blocs le lan­gage com­mun de tout l’écosystème, du conte­nu à la mise en page des sites. Le pro­jet a démar­ré publi­que­ment en 2017, en tant qu’ex­ten­sion, puis le nou­vel édi­teur par blocs a été fusion­né dans Word­Press 5.0 (le 6 décembre 2018), mar­quant la bas­cule pour des cen­taines de mil­liers de sites.

Guten­berg avance par phases. La phase 1 a livré l’éditeur de blocs pour les conte­nus (ce qu’on uti­lise dans les articles et pages). La phase 2 a éten­du cette logique à tout le site, avec l’Édi­teur du site et les thèmes de blocs : ain­si on peut créer les en-têtes, pieds de page, modèles, styles glo­baux, le tout pilo­té depuis l’interface et un fichier theme.json. Les phases sui­vantes devraient appor­ter la col­la­bo­ra­tion et la co-édi­tion, et aus­si le le mul­ti­lingue natif.

FSE ou Éditeur de site, qu’est-ce que c’est ?

Ain­si l’Éditeur de site per­met de com­po­ser tout le site en blocs : en-têtes, pieds de pages, modèles d’articles et de pages, archives, page de recherche, page 404.

On part sur un thème Word­Press qui repose sur des blocs et dont le desi­gn est défi­ni dans le theme.json. Effec­ti­ve­ment, on y défi­nit des palettes de cou­leurs, les typos uti­li­sées, les styles par défaut. On peut conce­voir des modèles et des par­ties de modèle, on peut créer des blocs ou modèles réuti­li­sables (reu­sable blocks), très utiles quand on veut repro­duire une par­tie du site qu’on est en train de faire.

La ver­sion 6.8 de Word­Press (sor­tie en avril 2025) a affi­né l’expérience : le guide de style est plus clair, plus struc­tu­ré, on accède direc­te­ment au pan­neau styles, l’é­di­teur est amé­lio­ré et les vues de don­nées sont faci­le­ment visua­li­sables, la créa­tion de conte­nu est sim­pli­fiée, la per­for­mance est lar­ge­ment amé­lio­rée et plus de 100 cor­rec­tifs ont amé­lio­ré l’accessibilité. 

Pourquoi franchir le pas ?

Voi­ci quelques argu­ments qui vous convain­cront peut-être.

On garde le contrôle sur son desi­gn grâce au theme.json. Il per­met de cen­tra­li­ser la charte, mais rien n’empêche d’é­crire du CSS d’appoint quand c’est néces­saire, votre CSS ne va pas ren­trer en conflit avec un buil­der propriétaire. 

Un autre argu­ment, non négli­geable, concerne la per­for­mance. Word­Press 6.8 intro­duit le char­ge­ment spé­cu­la­tif (spe­cu­la­tive loa­ding) pour une expé­rience plus fluide lorsque l’internaute s’apprête à cli­quer. On part donc avec un socle rapide par défaut, mais rien ne nous empêche d’en­core l’op­ti­mi­ser avec nos propres bonnes pra­tiques.

On peut défi­nir une charte gra­phique glo­bale uni­forme, la créa­tion est enca­drée, confi­gu­rée par défaut et l’é­vo­lu­tion du site est sim­pli­fiée. On parle de gou­ver­nance qui per­met de gar­der la main sur l’in­ter­face et de main­te­na­bi­li­té qui per­met de sim­pli­fier les évo­lu­tions.
Quant aux motifs syn­chro­ni­sés, ceux-ci per­mettent d’ef­fec­tuer un chan­ge­ment qui s’ap­plique par­tout en un seul enre­gis­tre­ment.

En com­bi­nant ces trois aspects, c’est-à-dire une charte expli­cite dans theme.json, des modèles ver­rouillés pour l’ossature, et des motifs syn­chro­ni­sés pour les élé­ments trans­verses, vous obte­nez un site gou­ver­né par des règles claires et facile à faire évo­luer. Les demandes qui, hier, récla­maient des retouches dis­per­sées deviennent des chan­ge­ments uniques, tra­çables et réver­sibles, appli­qués au bon endroit.

Quelques exemples concrets

Par exemple, si vous vou­lez refaire l’en-tête d’un site. Vous pou­vez uti­li­ser le bloc Navi­ga­tion, le logo du site, la recherche et deux menus contex­tuels. Vous pou­vez ensuite ver­rouiller le bloc pour empê­cher toute modi­fi­ca­tion, sup­pres­sion ou modi­fi­ca­tion de mise en page de manière accidentelle. 

En ver­rouillant les blocs, vous per­met­tez ain­si de main­te­nir la struc­ture glo­bale du site. Vous lais­sez à l’é­quipe édi­to­riale la liber­té sur le conte­nu, mais pas sur la struc­ture.

Le theme.json per­met de gérer et de res­pec­ter par défaut la charte géné­rale du site web.

Mon avis de développeuse front (qui n’engage que moi).

C’est vrai, j’étais scep­tique jusqu’à aujourd’hui. Ce qui me frei­nait, c’était l’impression d’un chan­tier per­ma­nent : des options qui bougent, des API qui évo­luent, cela me sem­blait dif­fi­cile à suivre en plus de mes pro­jets clients. Ce qui m’a convain­cue, c’est que l’Éditeur du site est désor­mais mature. Le cœur du sys­tème repo­sant sur theme.json per­met de créer un guide des styles lisible, le bloc Navi­ga­tion qui rem­place pro­pre­ment les vieux menus, le ver­rouillage des blocs pour enca­drer la struc­ture, et les motifs syn­chro­ni­sés qui trans­forment une mise à jour glo­bale en un geste unique. Sur­tout, d’a­près ce que j’ai com­pris, je peux ver­sion­ner mes modèles, mes motifs et ma charte, gar­der un CSS d’appoint mini­mal, et lais­ser l’éditeur appli­quer la cohé­rence à ma place. Autre­ment dit, je fixe mes règles dans le thème. Enfin, en termes de per­for­mance, j’ai consta­té, sur les quelques sites que j’ai réa­li­sés avec une base en FSE, qu’il il n’y a pas photo.

Je tiens aus­si à dire, que l’u­ti­li­sa­tion des construc­teurs de pages, m’a faci­li­té la com­pré­hen­sion et la prise en main du FSE.

La tech­nique évo­lue et c’est peut-être le bon moment pour pro­po­ser à vos clients, une refonte de leurs sites. Et pour vous lan­cer, n’ou­bliez pas que vous trou­ve­rez sur le web plé­thore de tuto­riels et de formations.