Der WordPress Block-Editor – Einführung & Überblick

Der Block Editor von WordPress (ehem. Gutenberg) bietet eine moderne und flexible Möglichkeit, Inhalte zu verfassen. Er ermöglicht es Seiten oder Beiträge mithilfe sog. Blöcke, den modularen Bausteinen des Editors, aufzubauen. Es existieren Blöcke für textliche Anforderungen wie Überschriften, Listen, Zitate usw. Darüber hinaus gibt es Blöcke zum Gruppieren und Layouten von Inhalten wie den Spalten- oder Raster-Block. Zuletzt wären da noch funktionale Blöcke, die beispielsweise externe Inhalte wie Videos einbetten.

Sowohl für die allgemeine Bedienung des Editors, als auch für einzelne Blöcke oder Gruppen stehen zahlreiche Optionen zur Verfügung.

Aufbau und Funktionen des Block Editors

Der WordPress-Editor ist in verschiedene Bereiche unterteilt, die eine Vielzahl von Funktionen und Werkzeugen bereitstellen.

Screenshot des Block-Editors, der die Dokumentübersicht auf der linken Seite, die Werkzeugleiste oben und die Einstellungen für die Seite und den ausgewählten Block auf der rechten Seite markiert.
Aufbau des Block Editors mit verschiedenen funktionalen Bereichen

Top-Bar

Die obere Leiste des Editors ermöglicht einen schnellen Zugriff auf wesentliche Werkzeuge und Optionen. Hier können die folgenden Einstellungen vorgenommen werden:

Screenshot der Top-Bar mit Markierungen der einzelnen Optionen und Werkzeuge.
Aufbau der Top-Bar im Block Editor von WordPress

Block-Inserter

Blöcke ermöglichen eine flexible, visuelle und modulare Arbeitsweise. Sie können im Code oder redaktionell zu größeren Einheiten zusammengesetzt werden, den. sog. Vorlagen (Pattern). Das macht immer dann Sinn, wenn eine Zusammenstellung von einzelnen Blöcken häufiger gebraucht wird.

Über das Plus-Symbol können neue Blöcke und Medien eingefügt werden. Die Blöcke sind in Kategorien wie Text, Medien, Design, Widgets, Theme und Einbettungen unterteilt.

Übersicht der Blöcke und Kategorien im Block Editor

Dokumentübersicht

Die linke Seitenleiste des Block Editors bietet eine umfassende Übersicht und ermöglicht eine effiziente Navigation durch das gesamte Dokument. Hier können Benutzer zwischen einer Listenansicht (1) mit den verschiedenen HTML-Elementen (Blöcken), und einer Übersicht (2) wählen, die die Informationen zum Dokument sowie die Überschriften-Struktur abbildet.

Screenshot des Kopfbereiches der Dokumentübersicht, mit Markierungen der Listenansicht und Übersicht.
Aufteilung der Ansichten der Dokumentübersicht im Block Editor
Verschiedene Ansichten der Dokumentübersicht im Block-Editor von WordPress. Die gezeigten Ausschnitte demonstrieren die Benutzeroberfläche, die Möglichkeiten zur Verwaltung von Blöcken und die verschiedenen Funktionen, die im Block-Editor verfügbar sind, um Inhalte auszuwählen, zu bearbeiten und zu organisieren.

Einstellungen

Die rechte Seitenleiste gliedert sich in zwei Auswahlmöglichkeiten: Seite und Block.

Screenshot mit Markierungen der Seiten- und Blockeinstellungen in den Einstellungen des Block Editors.
Einstellungen für Seite und Block in der rechten Seitenleiste

Die Block-Einstellungen teilen sich erneut in zwei Hauptbereiche:

Das Video zeigt die Einstellungen in der rechten Seitenleiste des Block Editors, sowohl für die Seite als auch für den ausgewählten Block.

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Sophie Tausch

Benutzerbild

Sophie beschäftigt sich mit allen Themen rund um UX/UI Design. Ihre Hauptaufgaben beinhalten Produkt- und Nutzerforschung, das Strukturieren von Informationen und Inhalten und die Erstellung von visuellen Konzepten und Prototypen. Hierbei legt sie besonders Wert auf die Balance zwischen Ästhetik und Benutzerfreundlichkeit, sowie auf eine enge Zusammenarbeit mit dem Development.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung