Gutenberg – Aktualisierung von Blöcken

Mit WordPress 5.0 wurde der neue Gutenberg-Editor zum Standard-Editor von WordPress. Der bisherige Editor TinyMCE war ein WYSIWYG-Editor für HTML-Code. Man konnte diesen über eigene CSS-Klassen, Shortcodes, etc. erweitern, der Umfang und insbesondere die Nutzung für weniger erfahrene Nutzer war eher umständlich – insbesondere, wenn kompliziertere Seiteninhalt gestaltet werden sollten.
So kam es zu Gutenberg, der einen modernen, block-basierten Ansatz verfolgt. Alles ist ein Block – eine Überschrift, ein Absatz, ein Bild, eine Liste. Diese Blöcke können von ihrer Reihenfolge beliebig verschoben und neu angeordnet werden und nach / vor jedem Block können weitere Blöcke eingefügt werden.

Wer fit im Umgang mit JavaScript, PHP, HTML und CSS ist, der kann auch mehr oder weniger einfach eigene Blöcke erstellen. Diese Blöcke sind für Nutzer einfach(er) nutzbar und können zur Gestaltung aufwändiger Websites genutzt werden. Eine Herausforderung dabei ist das Aktualisieren von Blöcken. Standardmäßig funktioniert Gutenberg wie folgt:

  • Man fügt dem Seiteninhalt den gewünschten Block hinzu und ergänzt den gewünschten Inhalt / die gewünschten Einstellungen im Block
  • Beim Speichern der Seite wird dann aus dem Block der entsprechende HTML-Code generiert und in der Datenbank gespeichert

WordPress lädt beim Betrachten der Seite den gespeicherten HTML-Code. Und genau hier entsteht die Herausforderung. Was, wenn der HTML-Code plötzlich eine neue Struktur oder CSS-Klasse erhalten soll? Was, wenn man beispielsweise eine Lightbox nutzt und der dafür erforderliche Code ändert sich? Gutenberg bietet dafür zwei verschiedene Ansätze an: Dynamische Blöcke und „veraltete“ Blöcke.

Dynamische Blöcke

Bei dynamischen Blöcken wird beim Laden des Blocks der entsprechende HTML-Code generiert. Das ist beispielsweise dann sinnvoll oder erforderlich, wenn man den letzten Post in einem Block anzeigen lassen möchte. Wird der Code statisch generiert, dann würde nicht der generell neuste, sondern der zum Zeitpunkt des Speicherns neuste Block angezeigt. Aus diesem Grund muss hier dynamisch – beim Laden der Seite – der entsprechende Inhalt generiert werden. Dieser Ansatz lässt sich auch “missbrauchen”, um Code einheitlich zu generieren, der sich zukünftig ändern könnte.

Mehr zu dynamischen Blöcken ist hier zu lesen.

Veraltete Blöcke (deprecated Blocks)

Bei dem Ansatz der veralteten Blöcke (deprecated Blocks) gibt man einem Block die vorhergehenden Varianten mit. Wird Gutenberg geladen und der Block-Editor stellt fest, dass der generierte Inhalt nicht dem erwarteten Inhalt entspricht, dann wird bei den deprecated Definitionen des Blocks „nachgeschaut“ Auf diese Weise kann man neuen Code hinterlegen ohne die Rückwärtskompatibilität zu verlieren.

Zu beachten ist dabei aber: Man muss zwingend eine Seite im Editor neu laden, die einen Block enthält, dessen Code aktualisiert werden soll. Nur durch das Anpassen des Block-Codes wird der Inhalt in der Datenbank nicht geändert!

Mehr zu den veralteten (deprecated) Blöcken ist hier zu finden.

Schreibe einen Kommentar