Gutenberg-Plugin: Standardblöcke erweitern – Praxisnahe Ansätze für Wordpress

1. Gutenberg und Standardblöcke – Kurze Einführung

Der Gutenberg-Editor nutzt das sogenannte Block-Prinzip: Jeder Inhaltselement ist ein eigenständiger Block, zum Beispiel Überschrift, Absatz, Bild, Galerie oder Button. WordPress liefert eine Vielzahl an Standardblöcken mit – doch Unternehmen mit individuellen Anforderungen stoßen hier schnell an Grenzen. Glücklicherweise ist das System offen für Erweiterungen.

2. Warum Standardblöcke erweitern?

Der größte Vorteil individuell erweiterter Blöcke: Der Redaktionsprozess wird vereinfacht und vereinheitlicht. Einige übliche Szenarien:

• Wiederkehrende Gestaltungsvorgaben (z. B. CTA-Boxen)
• Individueller Aufbau von Team-, Portfolio- oder Referenz-Abschnitten
• Dynamische Daten wie Referenzen, News oder Produktinfos einbinden

Die Erweiterung bestehender Standardblöcke ist oft schneller und wartungsärmer als das Erstellen komplett neuer Blöcke. Sie gewährleistet Konsistenz, spart Zeit und sorgt für eine intuitive Nutzung.

3. Möglichkeiten zur Erweiterung von Gutenberg-Blöcken

3.1 Mit Block-Filtern bestehende Blöcke modifizieren

WordPress stellt Entwicklern sogenannte Block-Filters zur Verfügung. Sie erlauben es, Standardblöcke gezielt zu verändern, ohne sie komplett nachzubauen. So können zum Beispiel Felder hinzugefügt oder das Rendering angepasst werden.

Die gebräuchlichsten Filter sind:

• blocks.registerBlockType – Ermöglicht das Hinzufügen zusätzlicher Einstellungen oder Attribute zu vorhandenen Blöcken.
• blocks.getSaveContent.extraProps – Erweitert das Markup eines Blocks beim Rendern.

Diese Filter werden in JavaScript eingebunden und nehmen gezielt Einfluss auf den gewünschten Block.

3.2 Eigene Blöcke entwickeln – auf Basis der Standardblöcke

Viele Agenturen und Entwickler:innen greifen das Grundkonzept eines Standardblocks auf und modifizieren es nach eigenen Anforderungen. Als Basis dienen oft die offiziellen Gutenberg-Beispielprojekte, die Best Practices dokumentieren.

Oft genügt es, bestehende Komponenten zu importieren und gezielt zu ergänzen. Durch das Verwenden der @wordpress/blocks API bleiben neue Features kompatibel mit den WordPress-Standards.

3.3 Einsatz offizieller Block-Varianten

Seit Gutenberg 11.6 (September 2021) gibt es das Konzept der Block Variants: Entwickler können Varianten für einen bestehenden Block definieren, beispielsweise verschiedene Layout-Ausprägungen des Buttons oder der Galerie. Das bietet eine elegante Möglichkeit, Standardblöcke schnell und konsistent unternehmensspezifisch anzupassen.

4. Praktische Beispiele aus der Entwicklung

Praxisrelevante Beispiele zeigen, wie Block-Erweiterungen im Entwicklungsalltag implementiert werden:

4.1 Erweiterung des Absatz-Blocks um eigenes CSS

Ein häufiger Wunsch: Redakteur:innen sollen Highlights, Hinweise oder spezielle Stile auf Absätze anwenden. Durch einen kleinen Eingriff im blocks.registerBlockType-Filter wird ein weiteres Einstellungsfeld (Custom ClassName) hinzugefügt. Im Frontend erscheint der Absatz dann mit der gewünschten Klasse – etwa .highlight –, die per CSS hervorgehoben wird.

4.2 Motion-Animation für Bildblöcke

Mit einem Filter lässt sich der Standard-Bildblock so anpassen, dass Redakteur:innen Animationen (z. B. Fade-in) über ein Dropdown auswählen können. Das verbessert die visuelle Wirkung von Bildern – ohne den Redakteuren JavaScript-Kenntnisse abzuverlangen.

4.3 Dynamische Daten für den Latest Posts Block

Gerade bei News- oder Referenzmodulen ist Flexibilität gefragt. Für den Latest Posts Block lassen sich per Filter weitere Felder oder Darstellungsoptionen ergänzen – etwa einstellbare Teaserlänge oder zusätzliche Tags. Die Anpassung erfolgt serverseitig wie empfohlen im offiziellen WordPress-Block-Filter-Tutorial.

5. Typische Stolpersteine bei der Block-Erweiterung

• Kompatibilität: Updates können die Funktionsweise eigener Erweiterungen beeinflussen. Block Filter sollten sauber dokumentiert und bei neuen WordPress-Versionen getestet werden.
• Zugänglichkeit: Zusätzliche Felder und Einstellungen müssen für alle Nutzer:innen verständlich sein. Weniger ist oft mehr!
• Kollidierende CSS-Regeln: Individuelle Klassen müssen mit Sorgfalt vergeben werden, um Darstellungsprobleme in verschiedenen Themes zu vermeiden.

Tipp: Wer die Erweiterung dokumentiert und sauber kapselt, legt den Grundstein für nachhaltige Wartbarkeit.

6. Fazit: Sinnvolle Erweiterungen statt „Block-Chaos“

Mit den richtigen Techniken kannst du WordPress-Gutenberg-Blöcke gezielt anpassen und so den Redaktionsalltag für dich oder dein Team erheblich vereinfachen. Die Erweiterung von Standardblöcken ist meistens ressourcenschonender als komplett neue Blöcke zu entwickeln und sorgt für ein konsistentes Erscheinungsbild. Bleibe bei Block-Filtern bevorzugt nah am System, dokumentiere deine Anpassungen und überprüfe sie bei jedem WordPress-Update.

Einheitliche und intuitive Inhaltsblöcke sind ein Qualitätsmerkmal moderner Websites – sowohl für Nutzer:innen, als auch für Teams, die regelmäßig Content pflegen.

Noch Fragen zur Entwicklung eigener Gutenberg-Blöcke oder Interesse an einem professionellen Webseiten-Check? Sieh dir unseren Performance-Check an!