Die Hauptwebsite von ThemeIsle war schon lange fällig für ein Redesign – eine Gelegenheit, um herauszufinden, ob eine echte Unternehmenswebsite mit Gutenberg und den Out-of-the-Box-Tools von WordPress erstellt werden kann. Dies ist ihre Fallstudie.
Ja, du liest das richtig. Wir – ThemeIsle – sind wahrscheinlich eines der wenigen Teams, die sich entschieden haben, den WordPress-Block-Editor Gutenberg zu verwenden, um den Kern unserer Seiten während unseres großen Redesigns vor ein paar Monaten zu erstellen. Einiges hat gut funktioniert, anderes ging schief.
Aber wie du dir vorstellen kannst, ist es ein bisschen komplizierter als das, und wir glauben, dass du von unseren Erfahrungen profitieren kannst.
Aber zunächst möchte ich dir, falls du uns noch nicht kennst, erklären, wer wir sind und warum dich das interessieren sollte.
ThemeIsle ist das Unternehmen hinter einigen der beliebtesten Themes im WordPress-Verzeichnis. Und ja, ich habe Daten, die mich bestätigen! Wirf einfach einen Blick auf die Registerkarte Beliebt im WordPress-Verzeichnis. Lange Rede, kurzer Sinn: Ein Unternehmen, das seinen Lebensunterhalt mit der Erstellung von Themes verdient, sollte auch eine ziemlich ordentliche eigene Website haben. Und genau hier kommt die Gutenberg-Tortur ins Spiel.
Viele von uns wissen, worum es sich bei Gutenberg handelt, und unsere Erfahrungen damit waren mehr oder weniger erfolgreich. Das WordPress-Team hat es als das nächste große Ding im Website-Bau angepriesen, aber ist das wirklich der Fall? Was noch wichtiger ist: Glaubst du tatsächlich so sehr daran, dass du dein nächstes Projekt riskierst und möglicherweise Stunden deiner Zeit damit vergeudest, Dinge in Gutenberg zu bauen, anstatt sie in, sagen wir, Elementor zu tun?
Dieser Beitrag soll dir eine Antwort geben und dir einige Kopfschmerzen ersparen.
Die Vorgeschichte
Die Hauptwebsite unseres Unternehmens, ThemeIsle.com, war schon lange für eine Neugestaltung fällig. Die kürzliche Auffrischung des Erscheinungsbildes unseres Blogs trug nur dazu bei, dass unsere Hauptseite wie ein wunder Daumen hervorstach. Das war kein gutes Bild, vor allem, da wir die Leute davon überzeugen wollen, dass wir uns mit WordPress-Design auskennen – schließlich verkaufen wir Themes.
Eine Neugestaltung einer Website ist immer stressig, herausfordernd und bedeutet, ein Risiko einzugehen. Es bot uns aber auch die Gelegenheit, herauszufinden, ob sich mit Gutenberg und den Out-of-the-Box-Tools von WordPress eine echte, reale Unternehmenswebsite erstellen lässt. Das ist ein Glücksspiel.
Bauen mit Gutenberg in der Praxis
Ganz ehrlich: Gutenberg ist großartig.
Aber… Das gilt nur, wenn es sich bei dem, was du bauen willst, um eine halbwegs normale Webseite handelt, die nur eine Variation des Hauptdesigns deines Themes ist.
Wenn du Gutenberg tatsächlich als Design-Tool verwendest und versuchst, damit neue Seitenelemente zu erstellen – Elemente, die nicht in deinem Theme vorbereitet wurden -, dann beginnen die Probleme.
Zugegeben, wir haben es geschafft, unsere Homepage sowohl mit Gutenberg (siehe Beispiel a) als auch mit Elementor (siehe Beispiel b) zu erstellen, und beide sehen sehr ähnlich aus, aber die Erfahrung war bei weitem nicht dieselbe.
Die üblichen Schwierigkeiten bei der Verwendung von Gutenberg
Gutenberg ist ziemlich knifflig. Das Problem ist, dass es standardmäßig out-the-box Fähigkeiten, sind immer noch ziemlich einfach. Es ist großartig für einige Dinge, und leider, nicht so groß für alles andere.
Wenn du zum Beispiel nur einen gut aussehenden Blogbeitrag erstellen willst, wirst du das mit Gutenberg wahrscheinlich schneller schaffen als mit Elementor.
Selbst wenn du deinen Text aus einem anderen Schreibprogramm kopierst und einfügst, versteht Gutenberg jedes einzelne Element und wandelt es in den entsprechenden Block um. Absätze werden zu Absatzblöcken, Zwischenüberschriften zu Überschriftenblöcken und so weiter. Wenn du willst, kannst du einfach ein paar Dinge neu ausrichten, deine Bilder hervorheben und fertig. Perfekt!
Aber das war’s dann auch schon mit den Möglichkeiten, die Gutenberg effektiv bietet.
Es gibt zwar hochwertige integrierte Blöcke in Gutenberg und eine Vielzahl von Plugins von Drittanbietern, die Ihnen neue Blöcke zur Verfügung stellen, aber all das hilft nicht viel, wenn du Gutenberg als komplettes Website-Design-Tool nutzen möchtest.
Gutenberg vs. Original-Layouts
In unserem Fall stießen wir jedoch immer wieder auf eine Mauer, wenn wir etwas Originelleres mit dem Inhalt unserer Homepage machen wollten – etwas, wofür es keinen Block gab.
Um eine Website mit Gutenberg effektiv zu gestalten, musst du bereit sein, die vorhandenen Blöcke zu ändern und neue Blöcke manuell zu codieren, um sie deinen Bedürfnissen anzupassen. Das erfordert React-Kenntnisse und ein tiefes Verständnis von JavaScript (ja, Matt, du hast uns gewarnt, wir wissen).
Lass es mich anders ausdrücken. Wenn du nicht weißt, wie du neue Elemente für Gutenberg mit Hilfe von Code erstellen kannst, wirst du nicht in der Lage sein, die Mauer zu überwinden, wenn du überhaupt auf sie triffst.
Ich bin selbst kein großer Programmierer, und ich bin mir bewusst, dass viele von Ihnen schnell darauf hinweisen werden, dass ich weiß, dass das Erstellen eines Blocks“ für Gutenberg einfach ist. Einen Block zu erstellen ist jedoch komplexer als ein Absatz, vor allem, wenn man möchte, dass er überall gleich aussieht und sich gleich verhält, egal auf welchem Bildschirm/Gerät er angezeigt wird, ist alles andere als einfach.
Außerdem ist die Gutenberg-Benutzeroberfläche zwar für die Arbeit an Beiträgen in Ordnung, aber bei der Arbeit mit benutzerdefinierten Blöcken und Elementen stellt sich heraus, dass sie nicht wirklich WYSIWYG-freundlich ist (what you see is what you get).
Das sehe ich zum Beispiel, wenn ich in Gutenberg am ThemeIsle-Homepage-Design arbeite:
Während alle Inhaltselemente vorhanden zu sein scheinen, werden die Stile, Hintergründe und Farben des Frontends nicht in die Benutzeroberfläche des Editors übernommen.
Dies hat einen weiteren Nachteil bei der Arbeit am Entwurf. Du musst die Seite ständig speichern und aktualisieren. Technisch gesehen könnte man das gesamte Styling immer im Backend implementieren, aber das würde zusätzliche Arbeitsstunden in Anspruch nehmen, die man mit Dingen verbringt, die Nutzer*innen nicht einmal sehen.
Insgesamt ist Gutenberg hervorragend geeignet, wenn du nur ein paar vorgefertigte Blöcke auf einer Seite platzieren und alles innerhalb der von deinem Theme festgelegten Regeln anzeigen lassen willst. Aus dieser Perspektive ist Gutenberg ein besseres TinyMCE. Wenn du damit etwas Fortgeschritteneres bauen willst, solltest du jedoch darauf vorbereitet sein, worauf du dich einlässt.
Umstieg auf Elementor
Wie du gesehen hast, haben wir unsere Homepage sowohl in Gutenberg als auch in Elementor erstellt.
Aber warum?
Wir verdoppeln nicht gerne unsere Arbeitslast, wenn wir nicht unbedingt müssen, also musste es einen guten Grund geben. Die Gutenberg-Version der Seite entsprach nicht unseren Erwartungen, und wir konnten nur bis zu einem gewissen Grad kodieren und bestimmte Aspekte der Seite anpassen. Aber der letzte Strohhalm war, als wir versuchten, die Seiten auf dem Handy gut aussehen zu lassen.
Hinzu kommt, dass sich das Gutenberg-Ökosystem für unseren Geschmack etwas zu schnell verändert. Wir waren besorgt, dass unser In-Gutenberg-Design und alles, was wir selbst kodiert hatten, zukünftige Updates nicht überleben könnte.
Gutenberg No More
Deshalb haben wir beschlossen, die Homepage in Elementor neu zu gestalten, obwohl wir 80 % des Designs in Gutenberg fertiggestellt hatten. Wir haben das nicht getan, weil Elementor besser ist. Wir haben es getan, weil wir es vertrauter finden als Gutenberg.
Wir haben Elementor bereits für die Erstellung der Optimole-Homepage verwendet (wir haben hier in diesem Blog darüber geschrieben). Wir haben auch damit experimentiert, News-Aggregator-Seiten damit zu erstellen, die Standardvorlagen für einzelne Beiträge zu optimieren und viele andere Dinge, die ich hier nicht aufzählen werde.
Der Lernprozess
Die Sache ist die, dass neue Technologien wie Gutenberg immer mit einer Lernkurve einhergehen, selbst wenn das betreffende Tool als einfach zu bedienen dargestellt wird. Wenn das Projekt groß genug ist, erweisen sich selbst die einfachsten Tools als mühsam, vor allem, wenn man beginnt, sie an die eigenen Bedürfnisse anzupassen.
Die Arbeit an einem größeren Projekt ist an sich schon eine Herausforderung, aber wenn man sich dann auch noch entscheidet, ein völlig neues Werkzeug zu verwenden, dann wird die Herausforderung auf eine ganz neue Ebene gehoben. Die Lehre daraus ist, dass man immer einkalkulieren sollte, wie viel das Erlernen des neuen Tools an Ressourcen kosten wird.
Aus diesem Grund hat sich Elementor bei der Neugestaltung von ThemeIsle für uns als das Beste herausgestellt. Mit Elementor war alles besser vorhersehbar, und wir mussten uns keine Gedanken darüber machen, wie wir die Dinge im Quellcode optimieren. Jede Änderung am Erscheinungsbild der Seite war über die Benutzeroberfläche möglich.
Man muss sich nicht in React einarbeiten, und man muss sich auch keine Gedanken über die mobile Darstellung machen. Und, was am wichtigsten ist, du bekommst ein echtes WYSIWYG-Interface (What You See Is What You Get-Interface), wenn du an einer Seite arbeitest, egal wie komplex diese Seite sein mag.
Verwendung von Gutenberg auf Produktionsseiten
Letztendlich bin ich mir sicher, dass wir das Redesign auch in Gutenberg hätten durchführen können, aber der Zeitaufwand dafür wäre im Vergleich zur Verwendung von Elementor Pro zu groß gewesen. Gutenberg ist sicherlich in der Lage, großartige Dinge zu tun, aber es erfordert immer noch anspruchsvollere Fähigkeiten von der Person, die es bedient.
Es kann Spaß machen, den neuen Block-Editor zu verwenden, aber man sollte nicht erwarten, dass es eine stressfreie Erfahrung ist. Es sei denn, wie ich bereits sagte, geht es dir nur darum, einen Blogbeitrag cool aussehen zu lassen.
Das einzig Positive, das wir aus der ganzen Erfahrung mitnehmen konnten, war, dass wir Gutenberg wirklich genau unter die Lupe nehmen, versuchen, es zu verstehen, und sehen, wie es ist, es in einem realen Szenario zu verwenden. Was die Wirkung angeht, so war sie leider nicht großartig.
Das Fazit
Du solltest Gutenberg in der Tat verwenden, wenn du an WordPress-Websites arbeitest; du musst nur seine Grenzen kennenlernen (oder eher deine Grenzen mit ihm).
Gutenberg ist hier, um zu bleiben. Auch wenn du es jetzt hasst, kannst du es sicher nicht für immer vermeiden. Wir können genauso gut lernen, damit zu leben und es für Dinge zu nutzen, für die es gut ist.
Und wenn du Entwickler*in mit einem WordPress-Plugin bist, dann musst du dich wirklich damit beschäftigen, wie du es für Gutenberg anpassen kannst (hier ist ein Leitfaden, Teil 1 und Teil 2). Nimm ein Beispiel von Elementor – es gibt jetzt Elementor-Blöcke in Gutenberg verfügbar.
übersetzt von Lisa Kraus
von Website Freiburg.
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/gutenberg-vs-elementor
