Gutenberg ist eine Weiterentwicklung des klassischen Editors und bietet ein Erlebnis beim Erstellen von Seiten. Entdecken Sie drei Möglichkeiten, benutzerdefinierte Gutenberg-Blöcke zu erstellen, einschließlich responsiver Alternativen.
Einleitung: Gutenberg als Ersatz des klassischen Herausgebers
Gutenberg ist seit der Ende 2018 erschienenen Version 5.0 der WordPress-Content-Editor. Obwohl seit der Integration mehrere Jahre vergangen sind, bevorzugen viele Entwickler immer noch den klassischen Editor der alten Schule, während einige sich für Alternativen wie ACF Flexible Content entschieden haben.
Das Classic Editor-Plugin bleibt mit über 5 Millionen aktiven Installationen eines der beliebtesten WordPress-Plugins. Für diese Präferenz gibt es mehrere Gründe.
Einer davon ist die Änderung des Ansatzes, der aus der reinen Editor-Erfahrung einen Seitenersteller gemacht hat, wodurch reine Editoren weniger effektiv werden. Ein weiterer Grund ist die Komplexität des Hinzufügens benutzerdefinierter Blöcke zu Gutenberg.
WordPress wurde als PHP-CMS entwickelt, während Gutenberg React-basiert ist und React-Kenntnisse erfordert, um benutzerdefinierte Blöcke hinzuzufügen. Aber unabhängig von unserer Einstellung ist Gutenberg der Standard-WordPress-Editor und es ist klar, dass er irgendwann den klassischen Editor ersetzen wird.
Darüber hinaus geht das Konzept hinter Gutenberg-Blöcken über herkömmliche thematische PHP-Vorlagen hinaus und bietet einen modularen und wiederverwendbaren Ansatz. Dieser Artikel hilft Ihnen, sich mit Gutenberg vertraut zu machen, indem er alle Möglichkeiten zum Erstellen benutzerdefinierter Gutenberg-Blöcke untersucht, einschließlich Methoden, die keine React-Kenntnisse erfordern.
1. Antwortbasierte benutzerdefinierte Gutenberg-Blöcke
Die erste und Standardmethode zum Erstellen von Gutenberg-Blöcken ist die Verwendung von React. Die Hauptidee besteht darin, einen neuen Block in WordPress mithilfe eines zu registrieren block.json Fügen Sie Ihrem Theme eine Datei hinzu und definieren Sie JavaScript-Code, der mithilfe von React und der WordPress JS-API HTML erzeugt.
Zu Ihrer Information: React ist eine von Facebook entwickelte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Dadurch können Entwickler wiederverwendbare UI-Komponenten erstellen, die bei Datenänderungen effizient aktualisiert und gerendert werden. React nutzt ein virtuelles DOM zur Leistungsoptimierung und stellt eine deklarative Syntax zur Beschreibung von UI-Elementen bereit.
Es stehen offizielle Tutorials zur Verfügung oder Sie können einen umfassenden Kurs von fullstackdigital erkunden. Obwohl dieser Ansatz einfach ist, weist er einige erhebliche Nachteile auf, darunter die Notwendigkeit von React-Kenntnissen und begrenzte Möglichkeiten zum Hinzufügen von Blockeinstellungen.
Letzteres bietet zwar eine Reihe von Einstellungen wie einfache Texteingaben oder Kontrollkästchen, die Beherrschung komplexerer Elemente oder das Hinzufügen von bedingter Logik erfordert jedoch zusätzlichen Aufwand.
Gutenberg entwickelt sich immer noch aktiv weiter und vielleicht wird der Prozess in Zukunft einfacher und reibungsloser. Wenn Sie mit React nicht vertraut sind oder nach schnelleren Lösungen suchen, sollten Sie alternative Methoden in Betracht ziehen.
2. Erstellen benutzerdefinierter Gutenberg-Blöcke mit Meta-Plugins
Eine alternative Lösung besteht darin, Gutenberg-Blöcke mithilfe von Metafeld-Plugins wie Advanced Custom Fields, Meta Box oder Pods zu erstellen. Diese Plugins sind für ihre Metafeldkapazität, benutzerdefinierten Beitragstypen (CPT) und Taxonomieverwaltungsfunktionen bekannt.
Zusätzlich zu diesen Funktionen bieten sie auch Funktionen zum Erstellen benutzerdefinierter Gutenberg-Blöcke. Die Grundidee ist einfach: Da jedes dieser Plugins bereits eine große Vielfalt an Feldtypen bietet, warum nicht den Benutzern erlauben, benutzerdefinierte Blöcke zu erstellen und ihnen beliebige Felder zuzuweisen?
Dieser Ansatz abstrahiert von der Verwaltung von React- und Blockeinstellungen und erleichtert das Erstellen von Blöcken, das Zuweisen beliebiger Felder als Einstellungen und das Rendern dieser mithilfe vertrauter PHP-Vorlagen.
Es vereinfacht die Blockerstellung, macht React-Kenntnisse überflüssig und ermöglicht eine einfachere Verwaltung der Blockeinstellungen. Allerdings gibt es einen Nachteil: Wenn Sie diese Plugins nicht bereits nutzen, müssen Sie wahrscheinlich dafür bezahlen.
ACF Blocks ist eine Funktion der ACF Pro-Version, während das MB Blocks-Add-on separat erhältlich ist. Die Verwendung von Pods-Blöcken ist völlig kostenlos, sie sind jedoch nur auf grundlegende Feldtypen beschränkt.
Positiv zu vermerken ist, dass der Kauf dieser Plugins nicht nur Zugriff auf die Blockfunktion, sondern auch auf das gesamte Framework, einschließlich Metafeldern, benutzerdefinierten Beitragstypen und Taxonomieverwaltung, gewährt. Darüber hinaus verfügen diese beliebten Plugins über zahlreiche Integrationen mit verschiedenen Tools und Seitenerstellern.
Das Advanced Views-Framework bietet beispielsweise intelligente Vorlagen mit Post-Abfragen und automatischer Vorlagengenerierung. Es unterstützt die Blockfunktionen der genannten Plugins und macht es so sehr einfach, benutzerdefinierte Gutenberg-Blöcke zu beherrschen.
Während das Hauptschema für den Gutenberg-Blockerstellungsprozess dasselbe ist, unterscheidet sich die endgültige Implementierung in jedem der Meta-Plugins geringfügig. Daher ist es ratsam, die herstellerbezogenen Informationen auf detaillierte Anleitungen zu ACF-Blöcken, MB-Blöcken und Pods-Blöcken zu prüfen.
Wenn Sie diese Plugins noch nie verwendet haben und sich bei Ihrer Wahl nicht sicher sind, empfehlen wir Ihnen, unseren ausführlichen Vergleich der besten Metafeld-Plugins zu lesen.
3. Spezielle Plugins für die Erstellung benutzerdefinierter Gutenberg-Blöcke
Um tiefer in das Thema einzutauchen, ist es erwähnenswert, dass es Plugins gibt, die eine PHP-API zum Erstellen von Gutenberg-Blöcken bereitstellen.
Im Wesentlichen ist dieser Ansatz den oben genannten Meta-Plugins sehr ähnlich, mit dem Hauptunterschied, dass diese Plugins ausschließlich auf Gutenberg-Blöcke ausgerichtet sind und keine Verwaltung benutzerdefinierter Felder oder benutzerdefinierter Beitragstypen ermöglichen.
Die bekanntesten Lösungen in dieser Kategorie sind Lazy Blocks und BlockStudio. Lazy Blocks bietet eine kostenlose Lite-Version an, während BlockStudio ausschließlich als Pro-Version erhältlich ist.
Obwohl es wie ein präziseres Tool erscheint, das im Vergleich zu den oben genannten Plugins eine bessere und kostengünstigere Funktionalität bietet, kosten die Pro-Versionen solcher Plugins überraschenderweise genauso viel oder sogar mehr als die Meta-Plugins.
Daher ist es sinnvoll, die Pro-Version dieser Plugins zu verwenden, wenn Sie sich nur auf Gutenberg-Blöcke konzentrieren und keine der zusätzlichen Funktionen benötigen, die die Meta-Plugins bieten.
Nachworte
Gutenberg ist ein integraler Bestandteil von WordPress und die Beherrschung benutzerdefinierter Gutenberg-Blöcke ist für jeden WordPress-Entwickler unerlässlich. Jede der drei Methoden, die wir gerade besprochen haben, hat ihre eigenen Vor- und Nachteile. Es liegt also an Ihnen, diejenige zu wählen, die für Ihren Fall am besten geeignet ist.