Formation « Créer des blocs avec Gutenberg »

Modifier la largeur de l’éditeur Gutenberg

Lecture : 1 minutes • 3

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 à quelques lignes de CSS.

La formation en vidéo

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

Contrairement à ce qu’on pourrait le croire, il n’y a pas de fonction PHP pour définir cette taille, à la place il faudra ajouter 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

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

CSS
style-editor.css

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

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.

3

Questions, réponses et commentaires

  1. Enora

    Le 24 septembre 2019

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

  2. 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

    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.

Laisser un commentaire