WordPress Gutenberg: Der Block-Editor im Portrait

WordPress ist das weltweit meist­ge­nutz­te Content-Ma­nage­ment-System und wird kon­ti­nu­ier­lich wei­ter­ent­wi­ckelt. Eine der größten Ver­än­de­run­gen in der Ge­schich­te von WordPress war die Ein­füh­rung des Block-Editors als Teil des Gutenberg-Projekts (daher teilweise auch Gutenberg-Editor genannt). Der Block-Editor ersetzte den klas­si­schen TinyMCE-Editor und brachte eine neue Art der In­halts­er­stel­lung mit sich.

Was ist WordPress Gutenberg?

Das Gutenberg-Projekt ist eine In­itia­ti­ve zur Mo­der­ni­sie­rung von WordPress. Es umfasst mehrere Phasen und hat das Ziel, die gesamte WordPress-Erfahrung zu ver­bes­sern – an­ge­fan­gen bei der Bei­trags­er­stel­lung bis hin zur voll­stän­di­gen Website-Ge­stal­tung. Der Block-Editor ist der erste große Mei­len­stein dieses Projekts. Er wurde mit WordPress 5.0 im Dezember 2018 ein­ge­führt und ersetzte den bis­he­ri­gen klas­si­schen Editor. Im Gegensatz zur alten Text­ver­ar­bei­tung, bei der HTML und Short­codes genutzt wurden, basiert der neue Editor auf einem modularen System aus Blöcken. Jeder In­halts­typ – sei es ein Absatz, ein Bild oder eine Tabelle – ist ein eigener Block, der sich in­di­vi­du­ell anpassen lässt. Dies er­leich­tert nicht nur die Ge­stal­tung von Beiträgen und Seiten, sondern macht auch komplexe Layouts ohne zu­sätz­li­ches CSS oder Page-Builder-Plugins möglich.

Ge­schich­te des WordPress-Block-Editors

Die Ent­wick­lung des WYSIWYG-Editors begann mit dem Ziel, WordPress be­nut­zer­freund­li­cher zu machen und es mit modernen Website-Baukästen kon­kur­renz­fä­hig zu halten. 2017 wurden die ersten An­kün­di­gun­gen zum Gutenberg-Projekt ver­öf­fent­licht. Ent­wi­ckeln­de und Nutzende re­agier­ten gemischt; einige lobten die In­no­va­ti­on, andere fürch­te­ten Kom­pa­ti­bi­li­täts­pro­ble­me. 2018 wurde der Block-Editor dann schon als Beta-Version in Form eines Plugins be­reit­ge­stellt. Ende desselben Jahres erschien WordPress 5.0 mit dem Gutenberg-Block-Editor als Standard-Editor.

Seither ver­bes­ser­ten zahl­rei­che Updates die Funk­tio­na­li­tät und Be­nut­zer­freund­lich­keit, nen­nens­wert ist bei­spiels­wei­se die Ein­füh­rung von Full Site Editing in WordPress 5.8 und 5.9. In der aktuellen WordPress-Version 6.1 ist der Block-Editor ein fester Be­stand­teil, der dank neuer Funk­tio­nen wie Block Patterns, Reusable Blocks und Theme Blocks immer mehr Ge­stal­tungs­mög­lich­kei­ten bietet.

Wie funk­tio­niert der WordPress-Gutenberg-Block-Editor?

Der WordPress-Block-Editor basiert auf einem modularen System. Jeder Beitrag und jede Seite bestehen hierbei aus Blöcken, die diverse Inhalte enthalten können. Er verfügt über ver­schie­de­ne Merkmale, die ihn vom vor­he­ri­gen Editor TinyMCE abheben:

1. Blöcke als Basis der In­halts­er­stel­lung: Es gibt Blöcke für Texte, Bilder, Videos, Listen, Tabellen und vieles mehr. Jeder Block kann einzeln be­ar­bei­tet, ver­scho­ben oder angepasst werden.
2. Vor­ge­fer­tig­te Block-Vorlagen: WordPress bietet Block Patterns, mit denen Nut­ze­rin­nen und Nutzer schnell pro­fes­sio­nel­le Layouts erstellen können. Dieses WordPress-Gutenberg-Feature trägt ent­schei­dend zur Be­nut­zer­freund­lich­keit bei, da selbst komplexe Layouts auf diese Weise ohne tief­ge­hen­des tech­ni­sches Know-how rea­li­siert werden können.
3. In­di­vi­du­el­le Stile und Layouts: Farben, Schrift­ar­ten und Abstände können für jeden Block angepasst werden, ohne dass CSS-Kennt­nis­se nötig sind.
4. Wie­der­ver­wend­ba­re Blöcke: Nutzende können eigene Blöcke speichern und in mehreren Beiträgen wie­der­ver­wen­den.
5. Full Site Editing: Seit WordPress 5.8 er­mög­licht der Block-Editor auch die Be­ar­bei­tung von Headern, Footern und anderen Template-Teilen direkt im Editor.

Vor- und Nachteile des Block-Editors

Wie jede große Ver­än­de­rung bringt auch der Block-Editor sowohl positive als auch negative Aspekte mit sich. Ein zentraler Vorteil des Gutenberg-Editors ist seine einfache Bedienung. Dank der Drag-and-Drop-Funk­tio­na­li­tät ist die Er­stel­lung von Inhalten intuitiv. Auch flexible Ge­stal­tungs­mög­lich­kei­ten und in­di­vi­du­el­le Layouts ohne zu­sätz­li­che Page-Builder können durch die block­ar­ti­ge Struktur des Editors rea­li­siert werden. Nut­ze­rin­nen und Nutzer sind außerdem weniger abhängig von Short­codes, denn viele Funk­tio­nen, die früher über Short­codes eingefügt wurden, sind nun als Blöcke verfügbar. Mit dem Full Site Editing können außerdem ganze Webpages direkt im Editor angepasst werden.

Obwohl der Block-Editor viele Funk­tio­nen bietet, sind spe­zia­li­sier­te Page-Builder in manchen Bereichen noch überlegen. Ein weiterer Nachteil des Gutenberg-Editors ist die geringe Kom­pa­ti­bi­li­tät mit älteren WordPress-Versionen und -Plugins.

Plugins zur Er­wei­te­rung des Block-Editors

Auch der Block-Editor lässt sich wie bei dem CMS üblich durch zahl­rei­che Plugins erweitern, die zu­sätz­li­che Blöcke, Design-Optionen und Funk­tio­na­li­tä­ten hin­zu­fü­gen. Einige der besten WordPress-Plugins zur Er­wei­te­rung des Gutenberg-Editors finden Sie hier:

• Spectra: Fügt zahl­rei­che zu­sätz­li­che Blöcke hinzu, darunter er­wei­ter­te Call-to-Action-Buttons, Infoboxen und Tes­ti­mo­ni­als.
• Kadence Blocks: Bietet an­pass­ba­re Grid-Systeme, fort­schritt­li­che Formulare und in­ter­ak­ti­ve Elemente mit KI-Un­ter­stüt­zung.
• Stackable: Enthält mehr als 40 Blöcke und Layouts, ideal für pro­fes­sio­nel­le Designs.
• CoBlocks: Fo­kus­siert auf Layout- und Design-Elemente mit zu­sätz­li­chen Spalten-, Galerie- und Hero-Header-Blöcken.