Blöcke

Blöcke sind die grundlegenden Bausteine des modernen WordPress-Editors (Gutenberg). Jeder Block repräsentiert ein eigenständiges Inhaltselement – von Text und Bildern über Videos bis hin zu komplexen Layouts. Das Block-System ersetzt den klassischen Editor und ermöglicht eine modulare, visuelle Gestaltung von Inhalten ohne HTML-Kenntnisse.

Was sind Blöcke in WordPress?

Seit WordPress 5.0 (Dezember 2018) arbeitet das CMS standardmäßig mit dem Block-Editor, auch bekannt als Gutenberg. Im Gegensatz zum früheren Classic Editor, der mit einem einzigen großen Textfeld arbeitete, besteht eine WordPress-Seite oder ein Beitrag nun aus einzelnen, unabhängigen Blöcken.

Jeder Block hat eine spezifische Funktion:

• Absatz-Block: Für Fließtext mit Formatierungsoptionen
• Überschriften-Block: H2, H3, H4 etc. mit SEO-Relevanz
• Bild-Block: Für einzelne Bilder mit Alt-Text und Caption
• Galerie-Block: Für Bildsammlungen
• Einbettungs-Blöcke: YouTube, Vimeo, Twitter, Instagram etc.
• Layout-Blöcke: Spalten, Gruppen, Zeilen für komplexe Designs

Das Block-Prinzip bringt zwei zentrale Vorteile: Flexibilität (jeder Block kann unabhängig bewegt, kopiert oder gelöscht werden) und Konsistenz (Blöcke folgen Design-Vorgaben des Themes).

Block-Typen: Die wichtigsten Kategorien

WordPress unterscheidet verschiedene Block-Kategorien, die im Block-Inserter (das „+“-Symbol im Editor) organisiert sind:

Core Blocks (WordPress-Standardblöcke)

Diese Blöcke sind in jeder WordPress-Installation verfügbar:

Text-Blöcke:

• Absatz, Überschrift, Liste, Zitat, Code
• Pullquote (großes Zitat), Vorformatiert, Vers

Medien-Blöcke:

• Bild, Galerie, Audio, Video, Datei
• Cover-Block (Bild/Video mit Text-Overlay)

Design-Blöcke:

• Spalten, Gruppe, Zeile, Stack
• Buttons, Abstandhalter, Separator, More-Tag

Widgets:

• Archiv, Kalender, Kategorien, neueste Beiträge
• RSS, Schlagwort-Cloud, Suche, Social Icons

Theme-Blöcke:

• Header, Footer, Navigationsmenü (ab WordPress 5.9)
• Post-Template, Query Loop für dynamische Inhalte

Plugin-Blöcke

Viele Plugins erweitern WordPress um eigene Blöcke:

• WooCommerce: Produktblöcke, Warenkorb, Checkout
• Kadence Blocks: Erweiterte Design- und Layout-Blöcke
• GenerateBlocks: Leichtgewichtige Container-Blöcke
• Ultimate Addons for Gutenberg: 60+ Marketing-Blöcke
• Stackable: Page-Builder-ähnliche Blöcke für Gutenberg

Plugin-Blöcke sind meist an das Plugin gebunden – deaktivierst du das Plugin, verschwinden auch die Blöcke (der Inhalt bleibt, wird aber als „ungültiger Block“ angezeigt).

Wiederverwendbare Blöcke (Reusable Blocks)

Ein mächtiges Feature des Block-Editors: Du kannst jeden Block oder jede Block-Gruppe als „Wiederverwendbarer Block“ speichern. Änderungen an diesem Block wirken sich auf alle Stellen aus, wo er verwendet wird.

Typische Anwendungsfälle:

• Call-to-Action-Boxen, die auf mehreren Seiten erscheinen
• Autor-Biografien oder Team-Vorstellungen
• Standard-Disclaimer oder rechtliche Hinweise
• Produkt-Vergleichstabellen

Wiederverwendbare Blöcke funktionieren ähnlich wie Widgets, sind aber flexibler und können in beliebigen Beiträgen und Seiten eingebunden werden.

Block-Patterns (Block-Muster)

Block-Patterns sind vordefinierte Block-Kombinationen – quasi „Vorlagen“ für häufige Layout-Anforderungen. WordPress bringt bereits Standard-Patterns mit, viele Themes und Plugins erweitern diese Sammlung.

Beispiele für Block-Patterns:

• Hero-Bereiche mit Hintergrundbild und CTA
• Dreispaltige Feature-Bereiche
• Testimonial-Slider
• Preistabellen
• Team-Member-Grids

Patterns sind keine wiederverwendbaren Blöcke – einmal eingefügt, sind sie eigenständige Blöcke, die unabhängig bearbeitet werden können.

Block-Editor vs. Classic Editor vs. Page Builder

Wenn du von älteren WordPress-Versionen oder Page Builders kommst, ist der Unterschied wichtig:

Classic Editor

• Ein großes Textfeld (ähnlich wie Microsoft Word)
• WYSIWYG-Editor mit Toolbar oben
• HTML-Kenntnisse für komplexe Layouts nötig
• Über Plugin weiterhin nutzbar, aber offiziell veraltet

Block-Editor (Gutenberg)

• Modularer Aufbau mit einzelnen Blöcken
• Jeder Block hat eigene Einstellungen (Sidebar rechts)
• Drag & Drop für Umordnen
• Native WordPress-Lösung, vollständig integriert

Page Builder (Elementor, Divi, Beaver Builder)

• Visuelles Frontend-Editing (du siehst sofort das Ergebnis)
• Proprietäre Shortcode-Strukturen
• Meist mehr Design-Freiheit, aber Theme-Wechsel problematisch
• Zusätzliche Performance-Last durch Plugin-Code

Empfehlung: Für neue Projekte ist der Block-Editor die beste Wahl. Er ist schneller, schlanker und erhält kontinuierliche Updates von WordPress. Page Builder sind sinnvoll, wenn du komplexe Marketing-Seiten ohne Code-Kenntnisse erstellen musst.

Blöcke in der Praxis: So arbeitest du effizient

Block hinzufügen

Es gibt drei Wege, einen neuen Block hinzuzufügen:

1. „+“-Symbol klicken (oben links oder zwischen Blöcken)
2. „/“ eingeben und Block-Namen tippen (z.B. /bild für Bild-Block)
3. Enter-Taste am Ende eines Blocks → automatisch neuer Absatz-Block

Block-Einstellungen anpassen

Jeder Block hat zwei Einstellungsebenen:

Block-Toolbar (direkt über dem Block):

• Schnellzugriff auf häufige Funktionen
• Block-Typ ändern (Absatz → Überschrift)
• Ausrichtung, Verlinkung, Formatierung

Block-Inspector (Sidebar rechts):

• Erweiterte Einstellungen
• Farben, Typografie, Abstände
• Individuelle CSS-Klassen
• Anker-Links für Navigation

Block duplizieren, verschieben, löschen

• Duplizieren: Drei-Punkte-Menü → „Duplizieren“
• Verschieben: Pfeiltasten oder Drag & Drop (Block-Handle links)
• Löschen: Drei-Punkte-Menü → „Block entfernen“ oder Shift + Alt + Z

Block-Navigation für komplexe Seiten

Bei längeren Seiten mit vielen verschachtelten Blöcken wird die List View (Listenansicht) zum wichtigsten Werkzeug:

• Öffnen mit: Shift + Alt + O (Windows) oder Ctrl + Option + O (Mac)
• Zeigt hierarchische Struktur aller Blöcke
• Ermöglicht schnelles Springen zwischen Blöcken
• Drag & Drop zum Umstrukturieren

Full Site Editing (FSE): Blöcke für das gesamte Theme

Seit WordPress 5.9 gibt es Full Site Editing – die Erweiterung des Block-Editors auf das gesamte Theme-Design. Mit FSE-kompatiblen Themes (z.B. Twenty Twenty-Four) kannst du:

• Header und Footer mit Blöcken gestalten
• Template-Teile erstellen (z.B. für Blogpost-Layouts)
• Navigation als Block verwalten
• Global Styles zentral definieren

FSE macht Theme-Anpassungen ohne Code möglich und ersetzt das klassische functions.php-Editing für viele Anwendungsfälle.

Block-Entwicklung: Eigene Blöcke erstellen

Für Entwickler bietet WordPress zwei Ansätze zur Block-Entwicklung:

Statische Blöcke (JavaScript + React)

Die moderne Methode verwendet React und das @wordpress/create-block-Paket:

npx @wordpress/create-block mein-block

Dieser Befehl erstellt ein vollständiges Block-Plugin mit:

• JavaScript-Dateien für Editor und Frontend
• block.json für Block-Metadaten
• Build-Prozess mit webpack

Vorteile: Schneller, moderner Code; vollständige Editor-Integration; Best Practices von WordPress.

Dynamische Blöcke (PHP-gerendert)

Für Blöcke mit serverseitigen Daten (z.B. neueste Beiträge mit spezifischen Taxonomien) nutzt du dynamische Blöcke:

register_block_type('mein-plugin/dynamischer-block', [
    'render_callback' => 'mein_block_render'
]);

function mein_block_render($attributes) {
    $query = new WP_Query([
        'post_type' => 'post',
        'posts_per_page' => $attributes['anzahl']
    ]);
    // Output-HTML generieren
    return $html;
}

Anwendungsfälle: Post-Queries, Formulare, Warenkorb-Logik, API-Integrationen.

Block-Patterns registrieren

Du kannst eigene Patterns programmatisch registrieren:

register_block_pattern('mein-theme/hero-section', [
    'title' => 'Hero Section mit CTA',
    'categories' => ['featured'],
    'content' => '<!-- wp:cover ... -->'
]);

Patterns sind eine hervorragende Möglichkeit, deinen Kunden wiederverwendbare Layouts zur Verfügung zu stellen, ohne ein separates Plugin zu entwickeln.

Block-Styles erweitern

WordPress erlaubt dir, alternative Stile für bestehende Blöcke zu registrieren:

register_block_style('core/button', [
    'name' => 'outline',
    'label' => 'Outlined Button',
]);

Der User kann dann im Editor zwischen verschiedenen Button-Styles wählen (z.B. „Filled“, „Outlined“, „Ghost“). Die CSS-Klasse .is-style-outline wird automatisch hinzugefügt.

Performance-Optimierung für den Block-Editor

Der Block-Editor lädt JavaScript im WordPress-Backend. Bei vielen Plugins mit eigenen Blöcken kann das Editor-Laden langsam werden:

Nur benötigte Block-Plugins aktivieren

Deaktiviere Block-Plugins, die du nicht nutzt. Tools wie Disable Gutenberg Blocks helfen, einzelne Blöcke zu deaktivieren, ohne das gesamte Plugin zu entfernen.

Asset Loading optimieren

Viele Block-Plugins laden CSS und JavaScript auch im Frontend. Prüfe mit Developer Tools, welche Dateien geladen werden, und nutze Plugins wie Asset CleanUp zur selektiven Deaktivierung.

Server-Side Rendering für dynamische Blöcke

Wenn du dynamische Blöcke entwickelst, rendere sie serverseitig statt per JavaScript. Das reduziert Frontend-Performance-Probleme.

Barrierefreiheit im Block-Editor

Der Block-Editor wurde mit WCAG-Standards entwickelt, aber deine Inhalte müssen trotzdem barrierefrei sein:

Checkliste für barrierefreie Blöcke:

• Bilder: Immer aussagekräftige Alt-Texte verwenden
• Überschriften: Hierarchie einhalten (H2 → H3 → H4, kein Springen)
• Links: Beschreibende Linktexte („Mehr erfahren über WordPress“ statt „Hier klicken“)
• Farben: Kontrastverhältnis mindestens 4.5:1 (prüfe mit Contrast Checker)
• Videos: Untertitel und Transkripte bereitstellen

WordPress bietet eine Barrierefreiheits-Überprüfung im Editor (Sidebar → Dokument → Barrierefreiheit). Nutze diese Funktion vor dem Veröffentlichen.

Häufige Probleme & Lösungen

„Dieser Block enthält unerwarteten oder ungültigen Inhalt“

Ursache: Meist nach Plugin-Updates oder Theme-Wechsel. Der gespeicherte Block-Code stimmt nicht mit der aktuellen Block-Definition überein.

Lösung:

• Auf „Als HTML bearbeiten“ klicken und manuell korrigieren
• Block löschen und neu erstellen
• Bei Plugin-Blöcken: Plugin-Entwickler kontaktieren

Classic Editor-Inhalte migrieren

Wenn du alte Seiten mit Classic Editor hast, wandelt WordPress diese automatisch in einen Classic Block um. Du kannst diesen Block in einzelne Blöcke konvertieren:

1. Classic Block auswählen
2. Drei-Punkte-Menü → „In Blöcke umwandeln“
3. WordPress versucht automatische Konvertierung

Achtung: Komplexe Shortcodes und HTML-Strukturen können dabei Probleme bereiten. Erstelle vorher ein Backup!

Custom CSS für Blöcke

Du kannst jedem Block individuelle CSS-Klassen zuweisen:

1. Block auswählen
2. Sidebar → Erweitert → Zusätzliche CSS-Klasse(n)
3. Eigene Klasse eingeben (z.B. mein-highlight)

Das CSS definierst du dann in style.css deines Child-Themes oder im Customizer unter „Zusätzliches CSS“.

Block-Editor deaktivieren (Classic Editor wiederherstellen)

Falls du den Classic Editor bevorzugst oder Legacy-Websites betreust:

1. Plugin installieren: „Classic Editor“ von WordPress.org
2. Aktivieren: Einstellungen → Schreiben → Standard-Editor auswählen
3. Pro Beitragstyp: Du kannst für Posts den Classic Editor, für Seiten den Block-Editor aktivieren

Beachte: Der Classic Editor erhält nur noch Sicherheitsupdates. Langfristig solltest du auf den Block-Editor umsteigen.

Zukunft der Blöcke: Was kommt?

WordPress entwickelt den Block-Editor kontinuierlich weiter. Wichtige Entwicklungen:

Phase 3: Collaboration (Zusammenarbeit)

Geplant sind Echtzeit-Kollaboration (mehrere User bearbeiten gleichzeitig), Versionierung und Workflow-Management direkt im Editor.

Block Locking (Sperren)

Du kannst Blöcke für Redakteure sperren, um Template-Struktur zu schützen:

{
  "lock": {
    "move": true,
    "remove": true
  }
}

Nützlich für Agenturen, die Kunden einen Editor mit festen Layouts übergeben möchten.

Design-Tools im Editor

WordPress integriert zunehmend Design-Funktionen direkt in den Block-Editor: Typografie-Steuerung, Farbpaletten, Layout-Presets. Das reduziert die Abhängigkeit von Plugins wie Elementor.

Wann du Blöcke nutzen solltest

Blöcke sind ideal für:

• Standard-Content-Seiten (Über uns, Leistungen, Blog)
• Websites mit konsistentem Design
• Projekte, bei denen Kunden selbst Inhalte pflegen
• Performance-kritische Websites (schlanker als Page Builder)

Alternativen erwägen bei:

• Hochkomplexen Landing Pages mit vielen Animations
• Legacy-Projekten mit etabliertem Page Builder (Umstellung aufwendig)
• Teams, die ausschließlich mit Classic Editor vertraut sind

Fazit: Blöcke sind die Zukunft von WordPress

Der Block-Editor ist kein Trend, sondern die Grundlage für die WordPress-Entwicklung der nächsten Jahre. Mit Full Site Editing, Block Patterns und Custom Blocks ermöglicht WordPress eine Flexibilität, die früher nur mit Page Builders möglich war – aber mit besserer Performance und nativer Integration.

Ob du Content-Autor, Theme-Entwickler oder Agentur-Dienstleister bist: Die Investition in Block-Editor-Know-how zahlt sich aus. Das System ist lernbar, erweiterbar und wird von der gesamten WordPress-Community getragen.