Aligner l’éditeur Gutenberg sur un thème classique : editor-styles et palettes

Depuis l’arrivée de l’éditeur de blocs avec WordPress 5.0, un reproche revient sans cesse côté clients : « ce que je vois en écrivant ne ressemble pas du tout à ce qui s’affiche sur le site ». Sur un thème classique qui n’utilise ni theme.json — qui n’existe pas encore — ni templates blocs, la solution tient en deux ingrédients bien documentés : une feuille de style dédiée à l’éditeur, et une déclaration de palette limitée dans add_theme_support().

Ce tutoriel part d’un thème classique fonctionnel et montre comment faire correspondre le canevas de l’éditeur au rendu réel du site, puis comment restreindre les choix de couleur et de taille de texte pour que les rédacteurs ne s’éloignent jamais de la charte graphique.

Charger une feuille de style propre à l’éditeur

La fonction add_editor_style() indique à WordPress d’injecter une feuille CSS supplémentaire dans l’iframe de l’éditeur de blocs, en plus de la feuille de style principale du thème :

function agence_setup_editor_style() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'assets/css/editor-style.css' );
}
add_action( 'after_setup_theme', 'agence_setup_editor_style' );

Le fichier editor-style.css reprend les mêmes règles typographiques que le thème (polices, tailles, couleurs de texte, largeur maximale de colonne) sans dupliquer tout le CSS du site : seuls les éléments visibles dans l’éditeur comptent, pas l’en-tête ni le pied de page. Pour un thème qui affiche son contenu dans une colonne de 720 pixels, reproduire cette largeur dans l’éditeur change immédiatement la façon dont un rédacteur juge la longueur de ses paragraphes.

Restreindre la palette de couleurs à celle du thème

Sans intervention, l’éditeur propose sa palette de couleurs par défaut, sans rapport avec l’identité visuelle du site. La déclaration editor-color-palette remplace entièrement cette liste par les couleurs réellement disponibles dans le thème :

function agence_setup_color_palette() {
	add_theme_support( 'editor-color-palette', array(
		array(
			'name'  => __( 'Bleu nuit', 'agence' ),
			'slug'  => 'bleu-nuit',
			'color' => '#1c2b3a',
		),
		array(
			'name'  => __( 'Corail', 'agence' ),
			'slug'  => 'corail',
			'color' => '#e8603c',
		),
		array(
			'name'  => __( 'Blanc cassé', 'agence' ),
			'slug'  => 'blanc-casse',
			'color' => '#f7f4ef',
		),
	) );
}
add_action( 'after_setup_theme', 'agence_setup_color_palette' );

Chaque couleur ajoutée ici génère automatiquement une classe CSS correspondante, du type .has-corail-color ou .has-bleu-nuit-background-color, qu’il faut définir dans la feuille de style du thème pour que la couleur s’applique aussi côté front. WordPress ne le fait pas à la place du thème : déclarer la palette sans écrire le CSS associé produit des classes sans effet visible.

Fixer des tailles de police plutôt que des valeurs libres

De la même façon, editor-font-sizes remplace la liste de tailles proposée par défaut (petit, normal, grand, très grand) par des valeurs cohérentes avec la grille typographique du thème :

• Une taille « Texte courant » alignée sur le corps de texte du site.
• Une taille « Intertitre » qui correspond visuellement aux h3 du thème.
• Une taille « Grande citation » réservée aux mises en avant, sans dizaines de variantes inutiles.

add_theme_support( 'editor-font-sizes', array(
	array(
		'name' => __( 'Texte courant', 'agence' ),
		'size' => 18,
		'slug' => 'normal',
	),
	array(
		'name' => __( 'Grande citation', 'agence' ),
		'size' => 28,
		'slug' => 'grande-citation',
	),
) );

Pourquoi limiter plutôt que tout ouvrir

Un rédacteur laissé libre de choisir n’importe quelle couleur ou taille finit, avec le temps, par produire des pages visuellement incohérentes : un violet oublié ici, une taille de texte disproportionnée là. En limitant les options disponibles dans l’éditeur aux seules valeurs prévues par la charte graphique, on transforme une source d’erreurs en garde-fou automatique, sans avoir à repasser derrière chaque publication.

Un éditeur fidèle au rendu final n’est pas un luxe esthétique : c’est ce qui évite au rédacteur de publier à l’aveugle et de découvrir la mise en page réelle après coup.

Notre verdict

Sur un thème classique de mars 2020, sans theme.json, la combinaison add_editor_style(), editor-color-palette et editor-font-sizes couvre l’essentiel des besoins d’alignement entre l’éditeur et le site. C’est peu de code, deux fichiers CSS suffisent généralement, pour un gain de confort immédiat côté rédaction — et beaucoup moins d’allers-retours de correction une fois l’article publié.