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.

Du hast es trotz Anleitung nicht hinbekommen, deine WordPress Website schimpft weiterhin mit dir und bereitet dir Probleme bei diesem Thema? Kontaktiere uns gern und wir helfen dir im 1:1 direkt mit deinen Fragen weiter. Telefonisch, per Bildschirmübertragung oder per Mail, du hast die Wahl.

Solltest du mal nicht weiterkommen und dein WordPress macht schlicht nicht was du möchtest? Hierfür kannst du neben den Infos aus unseren Beiträgen auch direkten Kontakt mit uns aufnehmen. Schreibe uns einfach dein Anliegen oder beschreibe Problem und wir schauen gemeinsam drüber und finden eine Lösung für dich. Sobald wir deine Angaben haben, schätzen wir vorher grob den Aufwand ab und vereinbaren dann einen Termin mit dir, in welchem wir telefonisch oder live mit Bildschirmübertragung auf deine Fragen eingehen werden. Support per Mail ist natürlich auch möglich.

Probiere es gerne aus, wir freuen uns auf deine Anfrage.



    Erkunde weitere Beiträge

    1 Gedanke zu „Gutenberg – Blöcke besser erkennen“

    1. Wow, genau danach habe ich gerade gesucht. Wirklich durchdacht ist das beim Gutenberg wohl noch nicht. Aber immer gut, wenn die Community Lösungen findet. 🙂 Wunderbar und vielen Dank!

      Antworten

    Schreibe einen Kommentar