Gutenberg – Blöcke besser erkennen

Wer kennt es nicht? Du möchtest entspannt mit Gutenberg -dem neuen Editor von WordPress- arbeiten, aber merkst immer wieder, dass es sich zu umständlich anfühlt. Wenn du z.B. die Blöcke, welche du anwählen und verschieben möchtest einfach nicht genau triffst? Oder weil dein Aufbau so komplex und in Zeilen und Spalten verschachtelt ist, dass du dich immer wieder über die Listenansicht orientieren musst um den gewünschten Block auszuwählen?

Hier kommt die einfache aber sichere Lösung für dich: Wir geben einfach jedem Block per CSS einen kleinen Rahmen. Sobald du dann mit der Maus darüber fährst, erscheint dieser Rahmen und so siehst du beim Bearbeiten genau wo du dich befindest und welchen Block du im Gutenberg anwählst. Keine umständliche Suche mehr, nach dem richtigen Element, durch mehr Sichtbarkeit des gewünschten Block.

Doch was ist dafür nötig? Das erfährst du nun!

Zu aller erst erstellen wir die Grundlage, damit wir unser eigenes CSS für das Backend im Gutenberg auch sehen. Dazu fügst du in deiner „functions.php“ des (Child-)Themes folgendem Code-Schnipsel hinzu.

/* Gutenberg Stylings im Backend */
function dwp_gutenberg_styles() {
	wp_enqueue_style( 'gutenberg-css', get_theme_file_uri( '/gutenberg.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'dwp_gutenberg_styles' );

Dieser Code lädt den Inhalt der Datei „gutenberg.css„, welche wir nutzen, um deinen Gutenberg-Editor um eigene Stylings zu erweitern. Nun erstellst du im Ordner deines Child-Themes eine weitere Datei und nennst diese „gutenberg.css„. Für die angesprochene Problematik fügst du nun folgenden Zeilen ein.

/* Rahmen für Gutenberg-Blöcke */
.wp-block:hover {
    box-shadow: 0 0 0 1.5px #d7d7d7;
}

Mit diesen Zeilen erhältst du beim hovern über deine Blöcke einen kleinen Rahmen, damit du besser siehst wo du dich befindest. Hier ein kleines Beispiel, wie es bei dir aussehen kann:

Von nun an kannst du mit der gutenberg.css auch weitere Anpassungen für dein Backend-Editor erstellen. Von der Breite des Editors selbst bis hin zu eigenen Klassen, die z.B. deine Schrift in der Darstellung anpassen, damit du diese schon beim bearbeiten im gleichen Stil, wie auch im Frontend siehst. Doch dazu später mehr.