Den Gutenberg-Editor mit einer Block-Bibliothek erweitern – Tutorial – Teil 4

Wem die Block-Typen, die der Gutenberg-Editor von Hause aus mitbringt, nicht ausreichen, der greift zu einer Block-Bibliothek. Block-Bibliotheken gibt es in großer Anzahl. Erstaunlich ist, wie schnell nach der Veröffentlichung des Gutenberg-Editors diese zu haben waren, und nach dem Erscheinen von WordPress 5 dürften es schnell noch mehr werden. Zahlreiche Programmierer haben sich offensichtlich darüber Gedanken gemacht, welche Arten von Block-Typen denn die Menschheit noch so brauchen könnte.

Dies ist der vierte und letzte Teil des Gutenberg Tutorials – die anderen Teile findest du hier:

Inhalt

Block-Bibliotheken

Zusammengefasst in Bibliotheken lassen sich neue Block-Typen sehr einfach in Form von Plugins installieren. Danach stehen dem WordPress-Benutzer diese neuen Block-Typen auf die gleiche Art zur Verfügung, wie die herkömmlichen Blöcke.

Beim Einfügen eines neuen Blocks, etwa über das Kontextmenü des Absatzes, taucht die frisch installierte Block-Bibliothek als neue Rubrik im Auswahl-Menü auf. Hier kannst du dann den gewünschten Block-Typ auswählen.

Das Bild zeigt eine Liste mit installierten Block-Bibliotheken. Diese werden in der Liste weiter unten noch einmal zusammen mit einem Link zur Plugin-Seite aufgeführt.
Eine große Anzahl von Block-Bibliotheken stehen dem Gutenberg-Nutzer zur Verfügung

In ihrem Umfang ähneln sich die Bibliotheken, obwohl es hier und da natürlich Unterschiede gibt. Vor allem aber im Design heben sie sich voneinander ab.

Design-Bibliothek: Neben den reinen Block-Bibliotheken, gibt es auch das Konzept der Design-Bibliothek. Anstatt einzelner Blöcke, die du in deine Beiträge einbauen kannst, stellt so eine Design-Bibliothek weitaus komplexere, aus Einzelblöcken zusammengesetzte, vorgefertigte Layout-Elemente zur Verfügung. Weiter unten gibt es ein Beispiel dafür.

Die Geschwindigkeit, mit der die Block-Bibliotheken entwickelt werden und in der Anpassungen und Updates erscheinen, lässt den Schluss zu, dass es nicht lange dauern wird, bis alle die gleiche Grundfunktionalität zur Verfügung stellen.

Wie die Block-Typen aus so einer Bibliothek auf deiner Webseite nachher aussehen, hängt dann natürlich wiederum von deinem Theme ab. Leider bleibt dir nicht viel anderes übrig, als die ein oder andere Bibliothek dahingehend auszuprobieren. Dabei wird dir schon recht schnell der Nachteil der Installation mehrerer Block-Bibliotheken ins Auge fallen: Dein System wird unübersichtlicher.

Deshalb zeige ich dir zum Schluss auch noch ein Tool, das es dir erlaubt die Block-Typen zu verwalten und zumindest diejenigen, von denen du weißt, dass du sie nicht brauchen wirst, auszublenden.

Wie schon erwähnt: Block-Bibliotheken gibt es recht viele. Welche davon die richtige für dich ist, oder ob du vielleicht mehrere davon installieren musst, um deine Bedürfnisse zu befriedigen, kann ich leider nicht vorhersagen. Deshalb beschränke ich mich auf zwei Beispiele solcher Bibliotheken, um dir so zu zeigen was mit den Block-Bibliotheken machbar ist.

Block-Bibliotheken aus dem WordPress Plugin-Verzeichnis

Block-Bibliotheken werden in Form eines Plugins installiert. Wenn du über die Menüpunkte „Plugins“ und „Installieren“ im Administrationsmenü das WordPress-Verzeichnis für Plugins aufrufst, dann liefert dir eine Suche nach dem Begriff „Block“ oder „Blocks“ eine große Anzahl solcher Plugins.

und noch etliche mehr.

Als erstes Beispiel habe ich die Advanced Gutenberg Blocks ausgewählt. Diese Block-Bibliothek ist zwar nicht so weit verbreitet wie die anderen, kann aber doch einige nette Features aufweisen, an denen sich die anderen dann messen lassen müssen. Außerdem ist es tatsächlich die Block-Bibliothek, die genau die Block-Typen mitgebracht hat, die ich gerade brauchte.

Advanced Gutenberg Blocks

Durch die Installation des Plugins „Advanced Gutenberg Blocks“ erhältst du 16 einfach gestaltete, zusätzliche Block-Typen. Vier davon habe ich hier in diesem Artikel verarbeitet.

Zum einen das Inhaltsverzeichnis am Anfang dieses Beitrags und den Plugin-Block hier am Ende dieses Abschnitts. Desweiteren siehst du in diesem Abschnitt ein Beispiel für einen Tweet-This-Block und eines, das dir einen Code-Block mit Syntax-Hervorhebung vorstellt.
Die Handhabung dieser Block-Typen ist denkbar einfach.

Beispiele von Block-Typen der Block-Bibliothek

Das Inhaltsverzeichnis oben in diesem Beitrag wird automatisch aus den Überschriften, die sich im Dokument finden, generiert und in Form einer klickbaren Liste angezeigt. Diese Liste ist dynamisch, das heißt, dass sie sich automatisch anpasst, wenn du weitere Überschriften in deinen Text einfügst.

Für den Plugin-Block musste ich lediglich den Namen des Plugins in eine Suchmaske eingeben, woraufhin mir eine Auswahlliste verschiedener Plugins mit gleichem oder ähnlichem Namen im WordPress Repository angezeigt wurden.

Daneben gibt es noch weitere nützliche Block-Typen, wobei die „Nützlichkeit“ natürlich vor allem von deinen Bedürfnissen abhängt.

Ein „Tweet-This“- Block etwa, den du verwenden kannst, um deinen Besuchern einen Twitter-Button nebst Inhalt zur Verfügung zu stellen, etwa so:

Prima Artikel über Block-Bibliotheken für den Gutenberg-Editor! Sehr zu empfehlen!

Die optionalen Hashtags für den Tweet kannst du im Seitenmenü einstellen. Ein Link zu deiner Artikelseite wird automatisch in den Tweet eingefügt. Wenn du auch deinen Twitternamen in der Form „via @DeinTwitterName“ in den Tweet einfügen willst, dann geht das über die Konfigurationsseite des Plugins.

Für Leute, die in ihre Texte Programmier-Code einbauen wollen/müssen, bietet das Plugin einen Block an, der es erlaubt den Code mit Synatxhervorhebung zu formatieren. Dabei kann man zwischen zahlreichen unterschiedlichen Designvarianten auswählen. Auch die Programmiersprache kann man festlegen.

Code-Block mit Syntaxhervorhebung
Code-Block mit Syntaxhervorhebung aus der Block-Bibliothek

Block-Typen verwalten

Neben der Block-Bibliothek selbst, bietet das Plugin auch ein Verwaltungsmöglichkeit für die Blöcke an. Nach der Installation findest du im Administrationsmenü von WordPress, auf der linken Seite deines Bildschirms, einen neuen Eintrag: Blocks.

Dort kannst du die einzelnen Blöcke des Plugins deaktivieren. Sie stehen dann nicht mehr zur Auswahl. Bei manchen Blöcken kannst du an dieser Stelle auch die Konfiguration ändern, so etwa das Farbschema der Syntaxhervorhebung beim Code-Block. Oder falls einer der Blöcke einen API-Key benötigt, etwa der Block für Google-Maps, dann kannst du ihn hier eintragen.

Blöcke aktivieren oder deaktivieren
Blöcke aktivieren oder deaktivieren

Außerdem kannst du über den Menüpunkt „Disable WP Blocks“ einzelne Standardblöcke ein- oder ausschalten.

Gutenberg-Editor anpassen

Eine weitere Option steht unter dem Menüpunkt „Tweak Editor zur Verfügung. Falls dein Theme den Gutenberg-Editor nicht voll unterstützt, kannst du hier verschiedene Dinge, wie die Schriftgröße, Farbpaletten oder die breite des Editors einstellen. Ob das an dieser Stelle sinnvoll ist, sei mal dahin gestellt. Besser wäre es auf jeden Fall, wenn das Theme selber sich dieser Dinge annehmen oder der Gutenberg-Editor so eine Option anbieten würde.

Das Plugin kannst du dir hier mal anschauen:

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks bring awesome blocks for the new WordPress editor, for a real WYSIWYG…

maximebj

Der Block, der hier das Plugin präsentiert, ist, wie gesagt, ebenfalls einer der Block-Typen aus der vorgestellten Block-Bibliothek.

Design-Bibliotheken

Auch die Design-Bibliothek ist eine Block-Bibliothek. Allerdings handelt es sich dabei nicht um einzelne Blöcke, sondern um zusammengesetzte und weitgehend vorkonfigurierte Layout-Elemente, die es dir ermöglichen schnell optisch ansprechende Element in dein Dokument zu integrieren.

Die Gutenberg Blocks Design Library von WP Design Hub soll an dieser Stelle als Beispiel dienen. Diese Bibliothek verwendet nur Standard-Blöcke, setzt diese zu ansehnlichen Strukturen zusammen und hinterlegt sie vorab mit Platzhalter-Texten und ansprechenden Grafiken.

Das Plugin gibt es in einer kostenlosen und einer kostenpflichtigen Variante. Ich behandle hier nur die kostenlose Variante.

Gutenberg Block Design Library

Nach der Installation des Plugins zeigt sich der etwas andere Ansatz gleich sehr deutlich. Im Kontextmenü eines neuen Blocks sucht du vergeblich nach den Designelementen. Stattdessen findet sich ein neues Symbol im Menü des Gutenberg-Editors oben rechts: Eine Möhre.

Eine Möhre als Symbol für die Design-Bibliothek
Eine Möhre als Symbol für die Design-Bibliothek

Klickst du da drauf, dann erscheint rechts, anstelle der üblichen Tabs „Dokument“ und „Block“ eine neues Seitenmenü mit den Optionen „Designs“, „Styles“ und „Einstellungen“.

50 vorgefertigte Designs bringt die kostenlose Variante des Plugins mit sich. Diese muss man zu Beginn allerdings noch über den an dieser Stelle erscheinenden Link importieren. Darüberhinaus kann man, dann allerdings kostenpflichtig, weitere Designs importieren. Die kostenlosen Designs sind schon sehr umfangreich und dürften in den meisten Fällen ausreichen.

Auswahl von Designs aus der 
Gutenberg Block Design Library
Auswahl von Designs aus der
Gutenberg Block Design Library

Die verschiedenen Designs sind in Rubriken wie Headings, Columns, Features, Lists und etliches mehr eingeteilt. Als erstes schauen wir uns ein Beispiel aus dem Bereich Features an:

Ein Block mit
Ein Block mit „Features“

Eingerahmt von zwei Abstandhaltern oben und unten, wird ein verschachtelter Spaltenblock mit 2 Spalten und 5 Zeilen
in das Dokument eingefügt. Unterteilt sind die Spalten dieser Konstruktion in ein Bild, eine Überschrift, einen Absatz, einen Button und noch einen weiteren Absatz. Die einzelnen Blöcke, die hier zusammengefasst wurden, sind bereits mit Inhalten vorbelegt, so dass du es recht einfach hast dieses Design an deine eigenen Bedürfnisse anzupassen.

Das zweite Beispiel stammt aus der Rubrik „Stats“ , also Statistik.

Ein Block, der verschiedene Zahlwerte optisch aufbereitet präsentiert
Ein Block, der verschiedene Zahlwerte optisch aufbereitet präsentiert

Da es sich bei den in diesen Designvorlagen verwendeten Block-Typen um die ganz gewöhnlichen Gutenberg-Blöcke handelt, kannst du jeden einzelnen davon problemlos über das Blockmenü editieren, wie du das auch sonst bei Einzelblöcken tun würdest.

Die beiden anderen Menüpunkte „Styles“ und „Einstellungen“ sind eigentlich nur relevant, wenn du die kostenpflichtige Variante des Plugins verwendest. Deshalb übergehe ich sie an dieser Stelle.

Das Plugin findest du hier:

Gutenberg Blocks Templates – 50+ Free Gutenberg Block Designs

Gutenberg Blocks Templates – 50+ Free Gutenberg Block Designs

🐰 Default Gutenberg Blocks beautifully arranged in ready-to-use design sections. ✅ One-click import. ✅ 50+…

wpdesignhub

oder hier: WP Design Hub

Block-Bibliotheken verwalten

Die Installation von Block-Bibliotheken führt naturgemäß dazu, dass sich immer mehr Block-Typen in deinem System breit machen. Wenn du dann irgendwann nach einem bestimmten davon suchen solltest, dann kann das schon eine zeitraubende Angelegenheit werden. Die meisten Block-Bibliotheken bieten dir deshalb auch die Möglichkeit, gezielt einzelne Blöcke ein- oder auszuschalten.

Noch eleganter läßt sich das Problem der Unübersichtlichkeit mit dem Plugin Disable Gutenberg Blocks – Block Manager lösen.

Disable Gutenberg Blocks – Block Manager

Nachdem du es installiert hast, erreichst du dieses Plugin über „Einstellungen“ im Administrations-Menü. Dort taucht nach der Installation ein neuer Menü-Punkt namens „Disable Blocks“ auf.

Die Funktionalität ist einfach gehalten. Du bekommst eine Liste aller im System installierten Blöcke angezeigt, die du einzeln oder in Gruppen markieren und danach aktivieren oder deaktivieren kannst. Einfacher geht es kaum und es würde mich nicht wundern, wenn diese Funktionalität schon bald auch in WordPress selber auftauchen wird.

Aktivieren und Deaktivieren von Gutenberg-Blöcken

Wenn du es selber ausprobieren willst, dann findest du das Plugin hier:

Übrigens, der Block-Typ, den ich für die Präsentation dieses Plugins verwendet habe, ist ein Standard-Block, der mit dem Gutenberg-Editor zusammen installiert wurde. Er findet sich unter Einbettungen und heißt schlicht „WordPress“.

Fazit

Block-Bibliotheken können einem das Leben erleichtern. Ob sie immer Sinn machen oder ob man nicht auch mit der Gutenberg-Standardausstattung das gleiche hinbekommt, hängt vom konkreten Einzelfall ab. Der Einsatz einer Block-Bibliothek macht vor allem dann Sinn, wenn die Standardfunktionalität zu stark eingeschränkt ist.

Die oben aufgeführten Beispiele „Inhaltsverzeichnis“ und „Tweet-This-Button“ wären mit Gutenberg alleine nicht so ohne weiteres umzusetzen bzw. würden einiges an zusätzlicher Arbeitszeit verlangen, die man auch sinnvoller verwenden kann. Schlussendlich wirst du nicht darum herum kommen, dir verschiedene Block-Bibliotheken anzuschauen. Denn obwohl die Funktionen sich stark ähneln, gibt es dann beim Design doch erhebliche Unterschiede.

Eine interessante Weiterentwicklung sind dann die Design-Bibliotheken, die dir nicht nur funktionale Blöcke, sondern gleich vorformatierte Layoutblöcke zur Verfügung stellen.

Klar, auch hier gilt, dass du das im Grunde genommen selber machen kannst, indem du dir einen Block entwirfst und diesen dann unter den wiederverwendbaren Blöcken abspeicherst. Im Endeffekt ist das alles eine Frage des Aufwandes und es bleibt dir überlassen, ob diesen Aufwand auf dich nehmen willst oder lieber zu einer vorgefertigten Bibliothek greifst.


Ok, mein Gutenberg-Tutorial endet hier. Falls es dir gefallen hat, dann hinterlasse doch einen Kommentar unter diesem Beitrag. Vielleicht hast du ja auch Anregungen oder Verbesserungsvorschläge. Ich bin da offen dafür.


4 Antworten

  1. Heinrich sagt:

    Hallo,
    Sehr informative Tutorials, die bei meinen Überlegungen zum Gutenberg-Editor sehr hilfreich sind.
    Tutorial 4 Erweiterungen mit Block-Bibliotheken – hier generelle Frage zu den verlinkten Plugins:
    hinterlassen die vorgestellten WP5 Gutenberg Plugins der Block- (z.B. Advanced GB oder Kadence PB) und Design-Bibliotheken kryptische Sohortcodes, wie etliche „namhaften“ Pagebuilder für WP-Themes, wenn man diese Plugins wieder deinstalliert (erstelltes Design/Theme kann nicht benutzt oder muß mit großem Aufwand an Formatierungen im Code nachbearbeitet werden)?
    Ich habe es so verstanden, dass diese Plugins (im Gegensatz zu den „namhaften“ Pagebuildern) den Umfang des Gutenberg-Editors lediglich erweitern, der dabei erzeugte Code aber dem des Gutenberg-Editors auch nach Deinstallation weiter verwendbar bestehen bleibt.
    Ist dem so?

    Beste Grüße
    Heinrich

    • Hallo Heinrich! Zunächst mal danke für dein Lob und sorry für die verspätete Antwort. Beim Deinstallieren eines Block-Plugins gehen tatsächlich die Formatierungen verloren. Das ist natürlich unangenehm, vor allem, wenn Blockbibliotheken von ihren Entwicklern nicht weiter gepflegt werden. Eine Lösung sehe ich da im Moment nicht, hoffe aber, dass WordPress selber in einem der kommenden Releases die Möglichkeit bietet einzelne Blocktypen ähnlich wie ein Plugin aus einem Online-Repository heraus zu installieren. Noch besser wäre es, wenn die bei WordPress mitgelieferte Blockbibliothek allmählich so erweitert wird, dass man auf externe Bibliotheken verzichten kann.

  1. 2019-02-16

    […] Den Gutenberg-Editor mit einer Block-Bibliothek erweitern – Tutorial – Teil 4 […]

  2. 2019-02-16

    […] Den Gutenberg-Editor mit einer Block-Bibliothek erweitern – Tutorial – Teil 4 […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.