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 die Layout-Features von Gutenberg einsetzt (Spalten, Titelbild und so weiter) dann stört einen ziemlich schnell die schmale Standard-Breite von Gutenberg im Backend.

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 1200px, dann sieht das CSS für Gutenberg so aus:

.edit-post-visual-editor .editor-block-list__block {
margin: 0 auto;
max-width: 1200px;
}

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 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' );

Ich verwende zum Einbetten solcher Funktionsschnipsel sehr gerne das Plugin Code Snippets. Damit kann man die functions.php schön sauber halten und man behält besser den Überblick.

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

Hat Dir der Artikel weitergeholfen?

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.