Modifier la largeur de l'éditeur Gutenberg • Formation WordPress Capitaine WP

Dans l’interface d’administration, la largeur de l’éditeur est fixée par défaut à 636px, mais il est tout à fait possible de modifier cette largeur pour coller aux besoins de votre thème, grâce au theme.json.

Grâce au theme.json qui se trouve à la racine de votre thème, la manipulation va être extrêmement simple !

Pour cela, il suffit de définir contentSize dans Settings > Layout :

JSON

theme.json

{
    "version": 2,
    "settings": {
        "layout": {
            "contentSize": "800px" // Largeur de l'éditeur
            "wideSize": "1280px" // Facultatif : grande largeur
        }
    }
}

Si vous n’avez pas encore de fichier theme.json dans votre thème, il suffit d’en ajouter un à la racine de celui-ci. Il sera ensuite pris en compte automatiquement par WordPress !

Pour découvrir d’autres paramètres intéressants de ce fichier, consultez le cours Configurer Gutenberg grâce au Theme.json.

Attention

Le fichier theme.json est pris en compte uniquement à partir de WordPress 5.8. Vérifiez donc que votre site est à jour avant de l’utiliser.

Ancienne méthode sans theme.json

Si vous n’avez pas l’intention d’utiliser de theme.json dans votre thème, il faudra ajouter à la place un peu de CSS dans la feuille de style de votre éditeur.

Et pour cela on va utiliser ce code, qui contient un nouveau add_theme_support() pour autoriser l’ajout d’une feuille de style dans l’éditeur, et add_editor_style() qu’on utilisait déjà auparavant pour TinyMCE :

PHP

functions.php

<?php 

function my_theme_setup() {
  	
  	// Nouveauté à ajouter
  	add_theme_support( 'editor-styles' );
  
	// Puis la même fonction qu'on utilisait auparavant pour Tiny MCE
	add_editor_style( 'style-editor.css' );
  
  	// Éventuellement pour prendre en compte les blocs larges
  	add_theme_support( 'align-wide' );
  
}
add_action( 'after_setup_theme', 'my_theme_setup' );

J’ajoute ensuite ce CSS, conformément à ce qui est dit dans la documentation Gutenberg :

CSS

style-editor.css

/* Main column width */
.wp-block {
    max-width: 720px;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

Vous pouvez utiliser des valeurs en pixels, em, vw ou pourcentage, au choix !

Si ça ne marche pas

Essayez d’utiliser width à la place de max-width, et ajouter !important après la valeur de la largeur.

Pensez également à prendre en compte les padding de l’éditeur qui sont de 30px au total. Sur Capitaine WP j’ai fixé cette largeur à 786px car j’affiche sur 756px en front.

Cette technique est très utile pour se calquer sur la même largeur qu’en front.

Questions, réponses et commentaires

Nathalie Grillot

Le 19 août 2019

Bonjour,
Un grand merci pour ce petit tuto.
Je l’utilise maintenant pour tous les sites dans les thèmes enfants et vraiment très simple et efficace.
C’est quand même dommage que dans l’interface WordPress il n’y ait pas un champs pour paramétrer cela directement… car tout le monde ne sait pas accéder par exemple par ftp pour mettre le fichier style-editor.css
Bien à vous
Nathalie

Répondre
1. Maxime BJ
  
  Le 19 août 2019
  
  Normalement ce serait au thème de proposer la largeur de contenu (certains le font mais ne l’appliquent pas à l’éditeur pour autant). Après WordPress cherche à rester simple en ne proposant pas trop d’options à l’utilisateur final, c’est pour ça que c’est un peu technique.
  
  Répondre
Enora

Le 24 septembre 2019

Bonjour et merci pour l’astuce ! Ça m’a bien aidée ! 🙂

Répondre

Laisser un commentaire Annuler la réponse