Gutenberg: Breite des Editors anpassen

Seit einiger Zeit arbeite ich – unter anderem hier im Blog – mit dem neuen Gutenberg-Editor. 

Wenn man nicht nur Texte schreibt, sondern auch Layouts mit Gutenberg bauen möchte (Spalten, Titelbild und so weiter) dann stört einen ziemlich schnell die schmale Standard-Breite von Gutenberg im Backend. Die Breite, die der Gutenberg-Editor vorgibt, sind 580px. Das ist schon sehr schmal.

Mit ein bisschen CSS kann man dem Layout im Backend dieselbe Breite geben wie im Frontend.
Angenommen, die Breite des Layouts im Frontend beträgt 1440px. Dann sieht das CSS für den Gutenberg-Editor so aus:

/* Breite Editor */
 .wp-block {
   margin: 0 auto;
   max-width: 1440px;
 }
 /* Blöcke mit class .wide */
 .wp-block[data-align="wide"] {
   margin: 0 auto;
   max-width: 1440px;
 }
 /* Blöcke mit class .full-width */
 .wp-block[data-align="full"] {
   margin: 0 auto;
   max-width: none;
 }

HINWEIS: Ich habe das CSS im November 2020 angepasst.
Damit diese Anweisungen greifen, müssen wir das CSS in einer Datei im Theme-Verzeichnis abspeichern (z. B. gutenberg.css). Abschließend müssen wir die Datei noch per Funktion in unser Theme einbinden: 

function ks_gutenberg_styles() {
wp_enqueue_style( 'gutenberg-css', get_theme_file_uri( '/gutenberg.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'ks_gutenberg_styles' );

Für das Gutenberg-CSS verwendet man einen anderen Hook als für das Einbinden von CSS im Frontend. Nur so kommt das CSS bei Gutenberg an.
Ich verwende zum Einbetten solcher Funktionsschnipsel ganz gerne das Plugin Code Snippets. Man kann die Funktion natürlich auch direkt in die functions.php schreiben.

Tipp

Wer es genauer wissen will, was man mit CSS und Gutenberg im Backend alles machen kann, Florian Brinkmann hat einen sehr ausführlichen Artikel zum Thema geschrieben: Theme-Editor-Styles für Gutenberg erstellen