JetGuten for Gutenberg

JetGuten for Gutenberg: Ein Einblick in die Entwicklung eines revolutionären Plugins

Das Gutenberg-Editor-Erlebnis hat die Art und Weise, wie WordPress-Nutzer Inhalte erstellen, grundlegend verändert. Der Umstieg von traditionellen Editoren auf den blockbasierten Ansatz von Gutenberg erfordert nicht nur Anpassungen in der Arbeitsweise der Endbenutzer, sondern auch einen Paradigmenwechsel für Entwickler. In dieser Analyse möchten wir die reichhaltigen Möglichkeiten und Herausforderungen beleuchten, die sich aus der Entwicklung unseres ersten Plugins, JetGuten, für den Gutenberg-Editor ergeben haben.

Entwicklung von JetGuten: Ein Überblick über die Grundlagen

Mit der Einführung des Gutenberg-Editors in WordPress 5.0 war der Zeitpunkt für unsere Team von Zemez ideal, ein Plugin zu entwickeln, das den neuen Möglichkeiten dieses Editors Rechnung trägt. JetGuten ist unser erster Versuch, eine Brücke zwischen den bewährten Funktionen unserer beliebten JetElements-Plugin und dem neuen Gutenberg-System zu schlagen. Das Ziel war es, eine Sammlung von Block-Widgets zu schaffen, die die Inhaltserstellung im Gutenberg-Interface bereichern und vereinfachen.

Ein Schlüsselaspekt, den wir schnell bemerkten, war die entscheidende Rolle von JavaScript. Die Grundlage unserer Entwicklung für JetGuten basierte auf der Erkenntnis, dass moderne WordPress-Entwicklung tiefgreifende JavaScript-Kenntnisse erfordert. Diese Erkenntnis, die bereits 2015 von Matt Mullenweg ins Bewusstsein der Entwickler gerufen wurde, ist jetzt relevanter denn je.

In den ersten Versionen von JetGuten benutzten wir PHP hauptsächlich für die grundlegende Struktur des Plugins sowie für das Einbinden von CSS- und JS-Dateien. Der Großteil der Benutzeroberfläche und der Blockkonfiguration wurde jedoch in JavaScript umgesetzt.

Die Abkehr von klassischen Plugin-Standards

Traditionell haben wir bei der Entwicklung von WordPress-Plugins strikte Trennungen zwischen Logik und Präsentation verfolgt. Dies ermöglicht eine flexible und einheitliche Gestaltung, da die logische Struktur eines Plugins von der visuellen Darstellung getrennt wird.

Ein Beispiel dafür sind beliebte Plugins wie WooCommerce, in dem diese Trennung deutlich in den Verzeichnissen für „Templates“ und „Includes“ zu sehen ist. Die Templates enthalten die Präsentationsdateien, während die Includes vorwiegend logische Elemente enthalten. Diese Trennung erlaubt Entwicklern und Benutzern, die Darstellung von HTML-Layouts anzupassen, ohne dabei die zugrunde liegende Funktionalität zu beeinträchtigen.

Mit Gutenberg ist jedoch eine Einschränkung dieser Flexibilität verbunden. Der Logik- und Präsentationsaspekt sind enger miteinander verwoben, was bedeutet, dass ein einfaches Überschreiben von Design-Elementen durch das Theme nicht mehr ohne Weiteres möglich ist. Während CSS nach wie vor die Möglichkeit bietet, das Aussehen von Blöcken anzupassen, fehlt die Flexibilität, die HTML direkt zu verändern.

Entwicklung von Benutzeroberflächen mit Gutenberg

Trotz der Einschränkungen bietet Gutenberg Entwicklern zahlreiche Möglichkeiten zur Gestaltung von Schnittstellen. Insbesondere die Möglichkeit, benutzerdefinierte Elemente in zwei Hauptbereichen der Bearbeitung zu integrieren, stellt einen enormen Vorteil dar. Zum einen können Entwickler Steuerungselemente innerhalb des Blockkörpers hinzufügen, und zum anderen im Seitenpanel der Blockinspektion.

Zum Beispiel haben wir für den Animated Box-Block in JetGuten Steuerungen integriert, die zwischen Vorder- und Rückseite des Blocks umschalten, um die Bearbeitung zu erleichtern. Die Vielzahl von verfügbaren Steuerungselementen lässt Entwicklern viel Spielraum und eröffnet neue kreative Möglichkeiten zur Benutzeroberflächengestaltung.

Ein bedeutsamer Vorteil der Blockentwicklung im Gutenberg-Editor ist die Möglichkeit, das Erscheinungsbild und die Funktionalität im Backend und Frontend voneinander zu trennen. Die Editoren- und Speicherlogik wird durch die Methoden edit() und save() gesteuert, was eine präzise Kontrolle über die Darstellung der Blöcke ermöglicht. Diese Trennung ist für die Flexibilität und Anpassungsfähigkeit der Blöcke von zentraler Bedeutung.

Herausforderungen bei der Aktualisierung und Sensibilität gegenüber Änderungen

Wie jedes dynamische System ist auch Gutenberg einem ständigen Wandel unterworfen. Updates können potenzielle Störungen in der Funktionalität eines Plugins verursachen. In den drei Wochen unserer Entwicklungszeit für JetGuten haben wir regelmäßig mit neuen Versionen des Gutenberg-Editors gearbeitet, was uns häufig vor die Herausforderung stellte, Komplikationen aufgrund von Änderungen in der API zu beheben.

Das bedeutet jedoch nicht, dass diese Art von Sensibilität für Änderungen im Code problematisch ist. Im Gegenteil, Gutenberg-Entwickler geben hilfreiche Vorankündigungen über geplante Änderungen, die es ermöglichen, potenzielle Probleme rechtzeitig zu erkennen und zu beheben. Dennoch erfordert die vorhersehbare Natur der Updates von Entwicklern eine höhere Wachsamkeit gegenüber den eigenen Plugins, um die Integrität der Funktionalität sicherzustellen.

Praktische Ansätze und der Mangel an Best Practices

Ein bemerkenswerter Aspekt der Plugin-Entwicklung für Gutenberg ist der Mangel an klaren „Best Practices“ für die Blockentwicklung. Während wir hilfreiche Ressourcen und Beispiele finden konnten, blieben viele Bereiche unklar. Dies führte dazu, dass wir in einigen Situationen im Dunkeln tappten und improvisieren mussten, was uns oft vor Herausforderungen stellte.

Wir sind jedoch optimistisch, dass die wachsende Beliebtheit von Gutenberg und das Engagement der Community dazu führen werden, dass bald umfassende Leitfäden und Best Practices entwickelt werden. In der Zwischenzeit bleibt es wichtig, sich ständig über die neuesten Entwicklungen innerhalb der Gutenberg-Community auf dem Laufenden zu halten und bereit zu sein, Lösungen aus anderen Bereichen der Webentwicklung zu adaptieren.

Der Aufstieg von automatisierten Build-Tools wie Gulp oder Webpack ist heute unverzichtbar für die Entwicklung von WordPress-Plugins, insbesondere für solche, die auf Gutenberg abzielen. Diese Tools ermöglichen eine effiziente Handhabung von JavaScript- und CSS-Assets und sind besonders wichtig, wenn ein Plugin zahlreiche Blöcke enthält, die ein konsistentes und modernes Benutzererlebnis bieten sollen. Sie vereinfachen den Entwicklungsprozess erheblich und helfen dabei, die Codebasis zu optimieren und Fehler zu minimieren.

Fazit

Die Entwicklung von JetGuten für Gutenberg hat uns nicht nur neue Erkenntnisse über die Integration von JavaScript in die WordPress-Umgebung gebracht, sondern auch die Möglichkeiten und Herausforderungen deutlich gemacht, die mit dem neuen Blockeditor verbunden sind. Während die Flexibilität von Gutenberg neue kreative Ansätze und Ideen fördert, erfordert das Verständnis und die Beherrschung dieser neuen Plattform eine ständige Weiterentwicklung der Fähigkeiten und Kenntnisse der Entwickler.

Insgesamt ist Gutenberg nicht nur eine Änderung für Endbenutzer, sondern hat das Potenzial, die Arbeitsweise von WordPress-Entwicklern grundlegend zu transformieren. Mit einer fortlaufenden Entwicklung und dem Engagement der Community wird sicherlich eine Vielzahl effektiver Ansätze und bewährter Praktiken entstehen, die zukünftige Entwicklungen unterstützen und bereichern werden. Gemeinsam können wir die Vorteile von JetGuten für Gutenberg nutzen und die Grenzen des Möglichen innerhalb der WordPress-Entwicklung erweitern.