Tout savoir sur
l’éditeur de site
WordPress
Alexandre Buffet 40 min Nantes WordPress Meetup 15 Déc. 2022

C’est quoi
l’éditeur de site ?

Full Site Editing ?
FSE ?
???
Site Editor ?
Éditeur de site ?

Full Site Editing ?
FSE ?
Gutenberg
Site Editor ?
Éditeur de site ?

ÉDITEUR DE SITE n.
1. Fonctionnalité native de WordPress qui permet à
quiconque, même à ceux qui n'ont aucune
expérience du codage, de créer et de
personnaliser entièrement leur site avec les blocs.
➤ Gutenberg

De Gutenberg, l’éditeur de contenu…
Capture d’écran du thème Twenty Nineteen,
disponible lors de la sortie de WordPress 5.0.
WordPress 5.0 “Bebo”
06 décembre 2018

…à Gutenberg, l’éditeur de site
Capture d’écran de la vidéo de présentation de WordPress 5.9.
Éditeur beta
WordPress 5.9 “Josephine”
25 janvier 2022
Aa

Comment ça marche
l’éditeur de site ?

Un thème basé sur les blocs

Bienvenue dans l’éditeur de site

Plutôt “no code” ou “code” ?
CODE
NO CODE

1. Les modèles et éléments de modèles
2. Les blocs et compositions de blocs
3. Les réglages et styles globaux

La hiérarchie de modèles

Un modèle “Page”

Un modèle “Archive”

Modèles dans le thème en .html

Les éléments de modèles

Un élément de modèle “En-tête”

Éléments de modèles en .html

Surcharges sauvegardées en base
←

1. Les modèles et éléments de modèles
2. Les blocs et compositions de blocs
3. Les réglages et styles globaux

Il y a un bloc pour ça

3 blocs indispensables
Navigation Boucle de requête
Une collection de blocs qui
permettent de créer des
menus.
Un bloc qui permet
l’affichage de types de
publications avec divers
paramètres de requête et
configurations visuelles.
Élément de modèle
Un bloc qui permet
d’importer ou de créer une
zone de blocs indépendante
du reste du modèle.

Le bloc Navigation

Le bloc Boucle de requête

Le bloc élément de modèle

Compositions en .php
CODE

Les compositions de blocs

1. Les modèles et éléments de modèles
2. Les blocs et compositions de blocs
3. Les réglages et styles globaux

Les réglages et styles globaux

Réglages et styles du thème et des blocs

Le fichier theme.json

Hiérarchie des réglages
Thème(s) Site
Réglages du site
via le fichier de configuration
Réglages du site
via l’interface de l’éditeur
Bloc
Réglages du bloc
via l’interface de l’éditeur
theme.json ←
←

Et même des variations de style

Et même des variations de style

Et même des variations de style

Et même des variations de style

Et même des variations de style

Exporter la configuration du site

Pourquoi utiliser
l’éditeur de site ?

L’avenir de WordPress est déjà là
EXPÉRIENCE UNIFIÉE
Fini les menus, les widgets, le customizer, les
réglages… l’expérience d’édition dans WordPress
est unifiée et simplifiée.
NATIF, PERFORMANT, EXTENSIBLE
Rien à ajouter, on peut tout imaginer.
PARADIGME ÉTENDU
Gutenberg est là. Il faut apprendre à l’intégrer au
design, au développement et les usages.

L’éditeur de site, deuxième phase
du projet Gutenberg
Édition Personnalisation Collaboration I18n
Introduction de Gutenberg
comme nouvel
éditeur de contenu
Implémentation des outils
pour personnaliser un site
entier avec Gutenberg
Implémentation du système
d’édition collaborative
Support natif de
l'internationalisation
✏ 🖌 󰱢 🌍

Des exemples

Infinity
par BSA Web

Mugistore
par ElmaStudio

Des références

Joffrey Jochum
@bter_design
󰏃
Jeremy Desvaux
@jdmweb
󰏃
Deux conférences à revoir

À suivre sur les réseaux
Rich Tabor
@richard_tabor
󰑔
Nick Diego
@nickmdiego
󰑔
Ellen Bauer
@ellenbauer
@AinoBlocks
󰎲 󰐜 󰑔
Ryan Welcher
@ryanwelcher
󰑔
Benjamin Grolleau
@benj_grolleau
󰏃
Anders Norén
@andersnoren
󰐴 󰑔
Florian Truchot
@floriantruchot
󰏃

Merci !

Des questions ?
J’y réponds