Eine wesentliche Neuerung des Gutenberg-Editors von WordPress ist die flexible Block-Struktur der Beiträge. Mithilfe eines Plugins kannst Du solche Blöcke relativ einfach selbst entwerfen und ganz eigene Content-Elemente gestalten.
Zwar enthält Gutenberg bereits viele Standard-Blöcke und zahlreiche Plugins bieten Sammlungen mit weiteren, vorgefertigten Blöcken an. Doch oft will einfach nichts davon so richtig zu den eigenen Anforderungen passen. Wenn Du bisher schon eigene Shortcodes in WordPress verwendest, kannst Du übrigens auch diese ganz elegant in Blöcke umwandeln. Damit musst Du dann künftig keine Shortcodes mehr in Deine Beiträge einfügen, sondern kannst die nötigen Parameter in Deinen selbst entworfenen Block bequem per Eingabeformular eingeben.
Content-Blöcke für Gutenberg mit dem Plugin „Lazy Blocks“
Es gibt mehrere Plugins, mit denen Du eigene Blöcke erstellen kannst. Für diesen Workshop arbeiten wir mit „Lazy Blocks“. Wir erklären Dir die Funktionsweise des Plugins und zeigen anhand eines Beispiels, wie Du einen eigenen Block erstellst. Die grundlegenden Abläufe kannst Du dann äquivalent für jede beliebige Block-Idee anwenden.
Als Voraussetzung für das Erstellen eigener Gutenberg-Blöcke solltest Du zumindest ein Grundverständnis für HTML und CSS mitbringen. Für komplexere Blöcke sind Kenntnisse in PHP-Programmierung nützlich. Aber insgesamt ist das Vorgehen relativ einfach.
Funktionsweise von Lazy Blocks
Einen neuen Block legst Du an, indem Du im WordPress-Menü unter Lazy Blocks auf Erstellen klickst. Hier siehst Du drei Bereiche:
- Controls: Hier legst Du Formular-Felder an, die Du bei der späteren Nutzung im Editor mit jeweils individuellem Inhalt ausfüllst – also beispielsweise Text, Bilder oder auch Checkboxen oder Ähnliches.
- Code: Hier erstellst Du wahlweise HTML- oder PHP-Code, der die Inhalte aus den Controls verarbeitet und darstellt – also beispielsweise das Bild je nach gesetzter Checkbox links- oder rechtsbündig anordnet und Text herum fließen lässt. Hier ist natürlich auch umfangreiche Programmierung zur Verarbeitung der in den Controls eingegebenen Daten möglich.
- Block/Control: In der rechten Spalte definierst Du grundlegende Einstellungen zu Deinem Block wie Name und Beschreibung beziehungsweise die Optionen für das jeweils aktive Control.
Beispiel-Block: abgesetztes Zitat und Autorenzeile
Um die Funktionsweise des Plugins zu erkunden, erstellen wir einen Gutenberg-Blog in einfachem HTML, der ein Zitat in Anführungszeichen farbig und in größerer Schrift rechts in den Fließtext einklinkt und klein darunter angibt, von wem das Zitat stammt.
In einem zweiten Schritt ändern wir den Block mithilfe von ein paar Zeilen PHP insoweit ab, als die Nennung des Zitatgebers dann optional ist – also auch entfallen kann, beispielsweise in einem längeren Interview, wenn ohnehin klar ist, von wem das Zitat stammt.
Neuen Block konfigurieren
Zunächst gibst Du Deinem Block rechts im Feld Title einen beliebigen Namen. Dabei musst Du lediglich darauf achten, keinen bereits vom Plugin reservierten Namen zu benutzen, um Konflikte zu vermeiden – siehe Dokumentation.
Wenn Du möchtest, wählst Du ein passendes Icon aus, das später beim Einfügen des Blocks im Editor angezeigt wird. Unter Category legst Du fest, wo in der Liste der Blöcke im Editor Dein neuer Block erscheinen soll. Der Übersichtlichkeit halber bietet sich die Kategorie Lazy Blocks an. Eine Beschreibung im Feld Description ist optional.
Unter Supports kannst Du zahlreiche weiterführende Optionen wählen, deren Beschreibung hier aber den Rahmen sprengen würde. So kannst Du beispielsweise die Standardabstände an den Blockrändern verändern, den Block abhängig von der Bildschirmgröße des Users ein- und ausblenden und noch einiges mehr.
Dateneingabe für den Block: Controls anlegen
Die Controls sind nichts anders als Eingabefelder für den Block, die Du später beim Erstellen Deines Beitrags variabel mit Inhalten füllst. In unserem Beispiel benötigen wir zwei Controls: eines für den Zitat-Text und eines für den Namen des Zitatgebers.
Zum Anlegen eines neuen Controls klickst Du auf das Plus-Zeichen. In der rechten Spalte nimmst Du nun die Einstellungen für dieses neue Control vor.
- Label: die Bezeichnung des Controls – im Beispiel nennen wir es MeinZitat.
- Name: die Variable, mit der Du den eingegebenen Inhalt im Code verarbeiten kannst; Lazy Blocks füllt dieses Feld automatisch aus, hier: meinzitat.
- Type: In unserem Beispiel benötigen wir den Typ Text. Hier stehen Dir aber zahlreiche Möglichkeiten zur Verfügung, von URL und E-Mail-Adresse über Bilder, Auswahlboxen und Farbwähler bis hin zu eingebetteten anderen Blöcken. Je nach Typ erscheinen darunter nach der Auswahl jeweils passende Optionen.
- Text-Optionen: Bei den angezeigten, weitgehend selbst erklärenden Optionen behältst Du für unser Beispiel die Standardeinstellungen bei und setzt lediglich den Haken bei Required. Das stellt sicher, dass Du die Eingabe später nicht vergisst.
- Hide if block is not selected: Wähle diese Option, damit die Optik im Editor übersichtlich bleibt. So wird das Control später im Editor nur dann angezeigt, wenn der Block gerade aktiv zur Bearbeitung ausgewählt ist.
Für das zweite Control für den Zitatgeber verfährst Du nach dem gleichen Prinzip. Für das Beispiel nennen wir das Label Zitatgeber.
Daten verarbeiten und anzeigen
Damit Dein Block im Frontend angezeigt werden kann, definierst Du nun den Code, der die Daten verarbeitet und anzeigt, die über die Controls eingegebenen werden.
Der Einfachheit halber setzen wir im Bereich Code die Option Single output code for Frontend and Editor auf Yes. Das Plugin erlaubt aber auch eine unterschiedliche Anzeige des Blocks im Editor und im Frontend, wenn Du Dir den Aufwand machen möchtest, hierfür unterschiedlichen Code zu schreiben. Das kann zum Beispiel für die Vorschau sinnvoll sein, wenn Du CSS-Klassen aus dem Frontend (style.css) verwendest, die im Backend nicht geladen werden.
Als Output Method wählst Du HTML + Handlebars. Später werden wir das auf PHP ändern, um etwas Programmlogik hinzuzufügen. Aber vorerst genügt einfaches HTML.
Im großen Eingabefeld im Bereich Code fügst Du nun den HTML-Code für die Darstellung der Inhalte ein – also den Code, der nötig ist, um das Zitat sowie den Zitatgeber in der gewünschten Formatierung im Frontend anzuzeigen. Auf die HTML-Details soll hier nicht weiter eingegangen werden, denn die sind ja lediglich ein beliebiges Beispiel.
Entscheidend ist die Einbindung der variablen Inhalte aus den Controls. Diese Inhalte bindest Du mithilfe von Platzhaltern ein, nämlich mit dem jeweiligen Name des Controls, umschlossen von doppelten, geschwungenen Klammern, in unserem Beispiel also:
- {{meinzitat}}
- {{zitatgeber}}
Der HTML-Code für unser Beispiel lautet:
<div style="color: #df0098; float: right; margin: 18px 0 18px 20px;
width: 35%; text-align: right; font-style:italic;">
<span style="font-size:18px; font-weight:600;">«{{meinzitat}}»</span>
<br />
<span style="font-size:0.9em; font-weight:300; color: #750250;">{{zitatgeber}}</span>
</div>
Klicke rechts oben auf Veröffentlichen und schon kannst Du Deinen neuen Gutenberg-Block wie jeden anderen Block in Wordpress verwenden.
Hinweis: Der Einfachheit halber haben wir die CSS-Formatierungen für das Zitat im HTML direkt eingebunden. Das hat den Vorteil, dass die Vorschau optisch gleich angezeigt wird. Aber natürlich kannst Du die CSS-Anweisungen auch über CSS-Klassen und IDs in der style.css Deines (Child-)Themes einbinden. Oder Du definierst – wie zuvor schon einmal kurz angesprochen – separaten Code fürs Backend, indem Du die Formatierungen einfügst, die im Frontend bereits über die style.css definiert sind.
Deinen neuen Gutenberg-Block verwenden
In der Block-Auswahl findest Du Deinen neuen Content-Block in der zuvor gewählten Kategorie Lazy Blocks.
Füge einen neuen Block in Deinen Beitrag ein …
… fülle die Control-Felder aus …
… und schon während Du schreibst, siehst Du eine Vorschau.
Programmier-Logik: Block mit PHP
Nach dem gleichen Prinzip funktionieren Gutenberg-Blöcke, bei denen Du PHP-Code statt HTML zur Ausgabe im Frontend nutzt. Dazu sind vier Änderungen in Deinem eben angelegten Block nötig:
- Stelle die Output Method auf PHP um.
- Ersetze den HTML-Code im Code-Feld durch PHP.
- Binde die Inhalte der Controls als Array-Element und nicht mit doppelt geschwungenen Klammern in den Code ein, also $attributes[‚meinzitat‘] und $attributes[‚zitatgeber‘] statt {{meinzitat}} und {{zitatgeber}}.
- Entferne das Häkchen vor Required im Control Zitatgeber, damit dieses Feld bei der Eingabe nur noch optional ist.
Die Logik des PHP-Codes prüft, ob das jetzt optionale Feld Zitatgeber ausgefüllt ist, und zeigt den zugehörigen HTML-Code nicht an, wenn das Feld leer ist. Auch hier soll auf die Details des PHP-Codes nicht näher eingegangen werden, da es sich nur um ein beliebiges Beispiel handelt.
Der PHP-Code für das Beispiel sieht dann so aus:
<?php
$zitat = $attributes['meinzitat'];
$zitatgeber = $attributes['zitatgeber'];
if( $zitatgeber ) {
$zitatgeber = '<br /><span style="font-size:0.9em; font-weight:300; color: #750250;">' . $zitatgeber . '</span>';
}
$zitat = '<div style="color: #df0098; float: right; margin: 18px 0 18px 20px; width: 35%; text-align: right; font-style:italic;"><span style="font-size:18px; font-weight:600;">«' . $zitat . '»</span>' . $zitatgeber . '</div>';
echo $zitat;
?>Wie schon erwähnt, dient dieser Code nur als sehr einfaches Beispiel für die Funktionsweise des Plugins. Deiner Fantasie sind in Bezug auf die Funktionalität Deines Gutenberg-Blocks – ausreichend PHP-Kenntnisse vorausgesetzt – keine Grenzen gesetzt.
Shortcode in Gutenberg-Block umwandeln
Ein spannender Anwendungsfall für eigene Gutenberg-Blöcke ist dann gegeben, wenn Du bisher mit eigenen Shortcodes gearbeitet hast. Es lohnt sich nämlich, all diejenigen Shortcodes in Gutenberg-Blöcke umzuwandeln, bei denen Du bisher per Shortcode Parameter übergeben hast, also beispielsweise:
[meinshortcode text="beispieltext" bildurl="https://bloggertricks.de/beispielbild.jpg"]Denn wandelst Du das zugehörige PHP aus der functions.php mit Lazy Blocks in einen eigenen Gutenberg-Block um, musst Du Dir die Syntax des Shortcodes beziehungsweise die notwendigen Parameter nicht mehr merken. Wie wir gesehen haben, gibst Du mit den Controls entsprechende Eingabefelder vor. So wird das Einfügen dieser Elemente über den selbst erstellten Block wesentlich komfortabler.
Den alten Shortcode-Code in der functions.php solltest Du aber dennoch bestehen lassen, damit die in früheren Beiträgen eingebunden Shortcodes weiterhin funktionieren. Alternativ kannst Du natürlich all diese Shortcodes in den Beiträgen manuell durch Deinen neuen Block ersetzen und danach den zugehörigen Shortcode-Eintrag in der functions.php löschen.
The post WordPress: Eigene Blöcke für den Gutenberg-Editor erstellen appeared first on STRATO Blog.