Adapter la largeur de l’éditeur Gutember

Comment bénéficier de plus largeur dans votre Éditeur Gutenberg

Gutenberg l’éditeur de bloc de WordPress s’affiche sur une colonne étroite par défaut. Voici comment modifier cette valeur pour adapter l’éditeur à la largeur de votre thème.

Ainsi il peut être plus simple de visualiser la page que vous être en train d’éditer afin qu’elle correspondre mieux à votre front (la partie visibles par les internautes).

Commençons par ajouter la fonction suivante au fichier functions.php de votre thème enfant dans /wp-content/themes/

Si vous n’avez pas de thème enfant, c’est l’occasion de créer le votre. Cela vous permet de modifier votre thème sans risquer de le casser et de perdre vos modification lors des mises à jours du thème parent.

function my_theme_setup() {
  	
    // activer le support de style de l'éditeur
    add_theme_support('editor-styles');

  // nom du fichier de style de l'éditeur
  add_editor_style( 'style-editor.css' );

    // option pour prendre en charge les blocs larges
    add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Créez le fichier style-editor.css à la racine du thème enfant et ajouter y le code suivant :

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

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

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

Bien sur il faut adapter les valeurs max-width au besoin du thème. De plus il faudra ajouter 30px à cette valeur pour comprendre le padding de l’éditeur.

Allez plus loin avec la doc gutenberg