WordPress FSE (Full Site Editing)

Le Full Site Editing (FSE) est un ensemble de nouvelle fonctionnalités qui permettent de construire et de modifier toutes les parties d'un site Web à l'aide de blocs.

Le Full Site Editing a été ajouté à partir de WordPress 5.9 en janvier 2022, et il évolue dans chaque nouvelle version de WordPress.

Le Full Site Editing change considérablement la manière de concevoir des sites WordPress. FSE rapproche le fonctionnement de WordPress de l'expérience offerte par les Page Builder et transforme l'écosystème de WordPress.

FSE est la direction vers laquelle évolue WordPress. La plupart des nouvelles fonctionnalités en cours de développement sont créées spécifiquement - et certaines exclusivement - pour les thèmes de blocs et FSE. Par exemple, le nouveau gestionnaire de typographie de WordPress prévu pour mi-2024 ne fonctionnera qu'avec un thème de blocs FSE et non avec un thème classique.

L'éditeur de site, appelé Site Editor, permet de créer et de gérer les pages, les modèles, les menus, les patterns et les parties de modèles de votre site Web. Vous pouvez également y mettre à jour votre page 404, vos archives et vos pages de résultats de recherche.

L'éditeur classique, le personnalisateur de thème, n'apparaît plus dans le menu des thèmes FSE (c'est fait exprès, il n'a plus lieu d'être). Si on veut vraiment l'utiliser, il faut aller manuellement dans /wp-admin/customize.php.

Modifiez les couleurs du site web et mettez à jour les paramètres typographiques (famille de polices, taille des polices) depuis la barre latérale Styles de l'éditeur de site. Vous pouvez choisir des couleurs de blocs par défaut et créer des palettes de couleurs personnalisées. À partir de la version 6.2 de WordPress, vous pouvez ajouter des CSS personnalisés à votre site web grâce à deux nouvelles options.

Dans un thème FSE, l'éditeur CSS se trouve dans Editor, les 3 points en haut à droite, Additional CSS.

Dans l'éditeur FSE, en cliquant sur l'oeil, il y a un stylebook qui permet d'éditer les styles de chaque composant Gutenberg.

C'est ce que je créé à la main avec Divi en galérant - c'est énorme, une super fonctionnalité.

Certains plugins de blocs mettent leurs blocs dans ce stylebook FSE, d'autres ne le font pas (par exemple GenerateBlocks et Spectra ne le font pas).

Avec les Blocks Themes, vous utilisez des blocs et des blocks patterns pour créer des pages et des sites Web entiers. Tout ce que vous voyez sur une page est un bloc. Vous pouvez personnaliser vos pages en utilisant de nouveaux blocs de site, notamment le titre du site, le logo, la navigation, le titre de l'article, le formulaire de commentaire, l'image vedette, la date, les catégories et les étiquettes.

Tous les thèmes en blocs (Blocks Themes) ne sont pas FSE.

Voici un générateur de block theme.

Un nouveau fichier de configuration de thème pour les développeurs.
Les développeurs de thèmes peuvent utiliser ce nouveau fichier de configuration avec les thèmes de blocs et les thèmes classiques basés sur PHP. Avec theme.json, vous pouvez définir les paramètres de bloc par défaut, la largeur du contenu, la typographie, les couleurs et l'espacement, réduisant ainsi considérablement la quantité de CSS nécessaire pour créer des thèmes.

L'utilisation des thèmes WordPress dits "classiques" est encore beaucoup trop répandue pour qu'on les voit disparaître. Cependant, tout le développement futur de WordPress se concentrera sur le Full Site Editing (FSE).

En 2024, nous sommes dans une transition inarrêtable vers le FSE, mais ce FSE n'est pas pratique du tout à utiliser, donc les thèmes classiques et hybrides dominent encore.

Divi, Elementor et autres page builder ont encore de beaux jours devant eux, il faudra du temps que le le FSE ne les rattrape.

Pourquoi la transition vers le FSE est-elle si longue ?

La raison qu'on peut trouver est que WordPress est fait par des volontaires, et avance donc lentement, comparé à des solutions privé qui ont de l'argent.

Aussi, le rythme de développement d'un outil aussi largement utilisé que WordPress est incomparable à celui de n'importe quel autre plugin ou thème. Distribuer du code à un si grand nombre d'utilisateurs implique une responsabilité immense. Chaque ligne de code doit être rigoureusement examinée, vérifiée et testée pour garantir son accessibilité et sa fiabilité.

Les équipes de développement prennent du temps pour faire en sorte que Gutenberg ne soit pas lent, ou ne casse pas des millions de sites Web, ou soit sécurisé.

Il y a eu une mise à jour WordPress en mars 2024, la suivante est prévue 3 mois après ...

La différence entre ces différents types de thèmes WordPress n'est pas évidente à comprendre.

Dans les thèmes WordPress classiques et hybrides, il y a le CSS par défaut de WordPress, le CSS du thème, et le CSS de chaque plugin qui s'accumulent et peuvent impacter les performances.

Les thèmes classiques sont construits avec des modèles PHP et un fichier functions.php. Ils utilisent les outils historiques de WordPress : le personnalisateur (Apparence > Personnaliser), les widgets et l'écran Menus. Ils ne fonctionnent pas avec l'éditeur de site.

Les thèmes FSE (Full-Site-Editing) ont une autre approche. Par défaut, vous pouvez éditer les modèles via "Gutenberg", également appelé l'éditeur de site (ou encore l'éditeur de blocs). Les thèmes FSE reposent sur le nouveau fonctionnement standard de WordPress, les blocs.

Ces thèmes de blocs disposent d'un framework standardisé pour implémenter des systèmes de design grâce à theme.json. Ce dernier génère et rationalise essentiellement tout le CSS d'un thème. C'est une collection de designs que vous pouvez également configurer via l'onglet Styles globaux de l'éditeur de blocs.

Vous avez probablement déjà utilisé quelque chose de similaire dans d'autres constructeurs, où vous définissez les couleurs, les polices, etc., et pouvez ensuite accéder à ces paramètres pendant la conception. Cela améliore également les performances car aucun CSS supplémentaire ne doit être chargé. Les blocs de base (core blocks, fournis par défaut avec les thèmes) et les blocs créés spécifiquement pour les thèmes de blocs peuvent ensuite réutiliser les valeurs de theme.json via l'interface de l'éditeur.

Dans un thème FSE, il n'y a plus de personnaliseur de theme (theme customizer) : tout est dans la config FSE. Il n'y a donc plus les options des thèmes classiques auxquelles nous étions habitué, qui permettent par exemple de changer la largeur des colonnes pour tout le site (dans un thème FSE, on travaille cela dans l'éditeur de templates FSE).

Les thèmes FSE règlent enfin le problème d'avoir deux builders différents dans un site Web, comme Divi pour les pages et les blocs pour les articles, puisqu'ils utilisent les blocs pour les pages et même pour les templates.

Tous les thèmes FSE utilisent les mêmes outils core, le thème installé ne change pas grand chose. Ce qui différencie les thèmes FSE est les patterns qu'ils proposent, styles par défaut et variations.

Les blocs se chargent beaucoup plus rapidement que les Page Builder, mais sont loin d'offrir la même productivité et le même contrôle sur le design que ces derniers.

Les thèmes hybrides utilisent les blocs pour le contenu, mais pas pour les templates (à l'exception de Blocksy qui permet de créer des templates avec des blocs).

Les thèmes hybrides utilisent le personnalisateur de thème pour le styling, et ajoutent souvent leur propre interface pour éditer les templates PHP et le personnalisateur de thème (customizer). Ils intègrent leur propre design system CSS dans leur version du personnalisateur. Les versions pro des thèmes hybrides proposent ensuite plus d'options d'édition et de style des templates.

Les thèmes FSE n'utilisent que des blocs. Les thèmes hybrides utilisent des blocs, et un personnaliseur de thème classique. Les thèmes classiques utilisent un personnaliseur de thème classique, et souvent un Page Builder pour les pages, et des blocs ou un Page Builder pour les articles.

On commence donc à avoir des blocs partout.

Il y a les blocs WordPress de base, et il est possible d'en créer d'autres, ou d'installer des plugins qui ajoutent des blocs. Exemples de plugins de blocs : Greenshift, Stackable, Spectra blocks.

Les plugins tiers de collections de blocs conçus pour les thèmes hybrides intègrent leur propre CSS car il n'y avait pas d'architecture incluse à laquelle ils pouvaient se rattacher à l'époque.

Ces plugins ont également des interfaces et des options de mise en page différentes, ce qui rend plus difficile le passage entre ces plugins et les thèmes.

Dans WordPress 6.6, c'est la révolution qui arrive dans WordPress, avec les Partially Synced Patterns (ou Synced Pattern Overrides - tout change de nom sans arrêt).

Les patterns (compositions) WordPress sont des groupes de blocs prêts à l'emploi : on les insère en un clic dans une page ou un modèle, puis on modifie librement leur contenu.

Voici le générateur de pattern officiel de WordPress.

Les patterns synchronisés sont l'évolution des blocs réutilisables (reusable blocks).

Lorsque vous utilisez actuellement un synced pattern sur votre site Web, toute modification que vous lui apportez se répercute partout où pattern est utilisé.

Il s'agit d'avoir des groupes de blocs (contenu + design) qui peuvent être réutilisés dans un site, comme les éléments globaux de Divi, mais on peut changer du contenu.

Les partially sync patterns permettent de pouvoir conserver le design et la mise en page identiques partout où ils sont utilisés, tout en modifiant le contenu (comme le texte) de chaque occurence séparément.

Par exemple, avec un motif "Recette", vous pourriez utiliser la même mise en page dans plusieurs articles, mais modifier les ingrédients et les étapes dans chaque article. Si vous mettez ensuite à jour la conception de votre pattern de recette, cela n'affectera pas les ingrédients et les étapes que vous avez déjà saisis.

Cette nouvelle fonctionnalité vous permet d'utiliser un modèle de conception (design template) comme un pattern qui affiche un témoignage à plusieurs endroits, en conservant l'aspect général tout en vous permettant de modifier des détails spécifiques (comme les noms, les images et les rôles du témoignage) à chaque endroit où vous l'utilisez.

Cette fonctionnalité va propulser le block editor et accélérer l'adoption des blocs.

Voici des thèmes FSE.

Selon eux, c'est un thème expérimental, destiné à ceux qui sont prêts à se lancer dans le FSE. C'est un thème moderne et minimaliste entièrement compatible avec le Full Site Editing. Il propose une gamme de modèles pré-définis et des variations de styles.

Ollie s'intègre parfaitement à toutes les nouvelles fonctionnalités puissantes de l'éditeur WordPress, vous offrant ainsi un constructeur de sites Web léger et performant.

• Astra : thème classique/hybride

• Spectra & Spectra Pro: plugin de blocs (qu'on appelle parfois Spectra Blocks) et autres extensions

• Spectra One : leur thème FSE

Le thème FSE Spectra One est gratuit, et selon eux le restera. Vous pouvez dès maintenant découvrir la documentation de Spectra One.

L'éditeur de Spectra One affirme vouloir faire de ce thème le thème FSE & blocs le plus performant du marché, en ajoutant seulement des fonctionnalités à valeur ajoutée, sans choses inutiles.

Dans l'éditeur FSE de WordPress, Spectra One ajoute une quick action bar à gauche, avec des raccourcis vers les blocs de notre choix (on peut désactiver cette barre si on veut).

GreenShift est aussi un thème FSE gratuit, publié dans l'annuaire wordpress.org par wpsoul, l'éditeur du plugin de blocs Greenshift. Il est présenté comme le thème compagnon de ce plugin, mais l'annuaire n'indique pas que le plugin est obligatoire. Comme les autres thèmes FSE, il sert surtout de base légère : la mise en page se fait ensuite dans l'éditeur de site, avec des blocs.

Twenty Twenty-Four propose également des variations de style et des mises en page complètes pour accélérer le processus de création de votre site. Entièrement compatible avec l'éditeur de site de WordPress, il tire parti des nouveaux outils de design introduits dans WordPress 6.4.

Ci-dessus, les thèmes le plus cités lorsqu'on parle de FSE. Comme il existe déjà des dizaines de milliers de thèmes classiques WordPress, il en fleurit également d'autres de type FSE. Exemples :

• Catch FSE

• Aino

• Wabi

• Bricksy

• Inspiro Blocks

• Tove

• Poe

• et vous pouvez en voir d'autres ici

Voici une formation gratuite Full Site Editing pour les développeurs.

Et une présentation du FSE en vidéo, en anglais.

Vous n'êtes pas tout seul. Déjà, lorsque les blocs Gutenberg sont apparus, cette nouveauté avait subit un rejet clair pendant très longtemps de la part de la majorité des professionnels et des utilisateurs de WordPress.

C'est la même chose pour FSE. Dans le cas du FSE, ce n'est pas vraiment l'idée qui est rejetée, c'est juste que ça ne marche pas bien. Ce n'est pas prêt.

Toutefois, WordPress est en constante évolution depuis sa création, et le FSE fait partie de cette évolution. Vous pouvez soit l'adopter, soit construire votre propre solution sur WordPress, ou utiliser des solutions alternatives, comme continuer d'utiliser des thèmes classiques.

Pour référence, le gouvernement des États-Unis, qui utilise WordPress, se sert déjà des dernières versions de Gutenberg et du FSE.

Cependant, le FSE est encore très nouveau. La plupart des gens choisissent des thèmes parmi les 80 à 90% créés avant son existence. Pendant ce temps, le FSE s'améliorera à mesure que son utilisation se généralisera.

Actuellement, les thèmes de blocs ne sont pas populaires car le FSE est loin d'être stable, bien qu'il s'améliore constamment.

Qu'on le veuille ou non, l'éditeur de blocs sera l'avenir de WordPress et les entreprises qui l'adopteront tôt seront gagnantes.

Les blocs vont remplacer tous les Page Builder, et les thèmes FSE vont probablement remplacer les thèmes classiques, ou créer des écosystèmes parallèles encore plus marqués que les écosystèmes WordPress actuels.

Les thèmes hybrides sont une bonne transition vers le FSE, pour s'habituer aux blocs, en attendant que le FSE soit un peu plus opérationnel.

Avec FSE, le choix du thème n'est pas aussi important qu'il l'était auparavant. Avec l'avènement de l'édition de site FSE et des blocs, vous avez beaucoup plus de contrôle sur la conception et la mise en page de votre site Web, quel que soit le thème que vous utilisez. Vous pouvez désormais créer un site web unique et personnalisé sans avoir à vous soucier de trouver le thème parfait. Vous pouvez utiliser un thème simple comme base, puis le personnaliser à l'aide de blocs et du Full Site Editing.

Avec FSE, c'est le core de WordPress qui fait tout. Pour le moment, le thème FSE n'apporte pas grand chose à part des patterns. Le choix n'est donc pas très important, Frost, Greenshift, Ollie ...

Le contenu membres de cette page aborde :

• Devriez-vous utiliser un thème FSE ? Mon expérience en détails avec les thèmes FSE

• Une information sur Spectra One