Darum habe ich meine Meinung über FSE-Themes geändert

Lange war ich skeptisch, gegenüber den FSE-Themes (Full Site Editing) und dem neuen Block Editor von WordPress. Warum ich meine Meinung geändert habe und was die Vor- und Nachteile von FSE-Themes sind schreibe ich in diesem Blog-Artikel.

| Autor Oliver Schmid
  1. Was ist der Block Editor?
  2. Was sind FSE-Themes (Full Site Editing)?
  3. Warum mich FSE-Themes und der Block Editor jetzt begeistern
    1. CSS und JS werden nur dann geladen, wenn der Block auf der Seite vorhanden ist, und zwar Inline
    2. Schulungsvideos von WordPress, gute Dokumentation und Podcast
    3. Der Block Editor wird erwachsen – letzte WordPress Updates und Ausblick an der State of the Word 2023
    4. Aus der Praxis: Gute Erfahrungen mit dem Block Editor
    5. Aus der Praxis: Maximaler PageSpeed Score mit einem FSE-Theme
  4. Die Vorteile von FSE-Themes und dem Block Editor
  5. Die Nachteile von FSE-Themes und dem Block Editor
  6. Schlussfolgerung

1. Was ist der Block Editor?

Zunächst müssen wir kurz auf den Block Editor eingehen, welcher seit 2018 standardmässig bei WordPress vorinstalliert ist und den klassischen TinyMCE Editor ersetzt.

Der TinyMCE ist ein Rich-Text Editor, mit welchem man ähnlich wie in Word, einfache Text Formatierungen vornehmen konnte. Er wird auch bei anderen CMS wie zum Beispiel Joomla! eingesetzt. Leider führte intensives Arbeiten mit solchen WYSIWYG Editoren oft zu chaotischem und fehlerhaftem HTML Code. Zudem sind die Gestaltungsmöglichkeiten sehr beschränkt. Diese Editoren stammen noch aus der Zeit, als man im Webdesign das rund um den Inhalt gestaltetet hat. Während der eigentliche Inhalt einfach ein langer Fliesstext mit Titeln war.

Der neue Block Editor, welcher unter dem Projektnamen Gutenberg von WordPress entwickelt wurde, bietet hingegen die volle Kontrolle über die visuelle Gestaltung an. Wie der Name sagt, wird ausschliesslich mit Blöcken gearbeitet, welche verschiedene Funktionen und Darstellungsvorlagen beinhalten können. Das Interface des neuen Editors erinnert an moderne Grafikprogramme wie zum Beispiel Figma oder Sketch.

Screenshot vom WordPress Block Editor Gutenberg

Der Block Editor ist technisch ein eigenständiges Projekt, unabhängig von WordPress. Somit kann er künftig auch in anderen CMS Lösungen zum Einsatz kommen. Der neue Editor hatte Anfangs einige Bugs und Unzulänglichkeiten, welche aber mittlerweile grösstenteils behoben wurden. Momentan entdecke ich nach fast jedem WordPress Update Verbesserungen im Block Editor. Der Erfolg dieses Editors wird wohl auch über den künftigen Erfolg von WordPress entscheiden.

2. Was sind FSE-Themes (Full Site Editing)?

FSE steht für Full Site Editing. Und wie es der Name schon sagt, wird mit den FSE-Themes nicht mehr nur der Inhaltsbereich mit dem Block Editor bearbeitet, sondern die ganze Website mit Header und Footer. Navigation, Suchfeld, Footerlinks, Logo, alles wird in Form von Blöcken gebaut.

Für Entwickler bedeutet das eine ganz andere Vorgehensweise und ein gewisser Verlust an Kontrolle über den Code. Es gibt aktuell noch Dinge, die mit FSE-Themes nicht oder nur mit mehr Aufwand machbar sind. Während bei Classic Themes fast alles in PHP Files direkt programmiert werden konnte, wird bei den Blöcken viel mehr mit einer vorgegebenen Entwicklungsstruktur gearbeitet. Beim Build Prozess helfen dabei allerdings Tools von WordPress wie wp-scripts. Mit der entsprechenden Entwicklungsumgebung geht es eigentlich ganz einfach.

FSE-Themes machen auch den zahlreich vorhandenen Page Builder Plugins Konkurrenz, welche eine ähnliche Funktionalität anbieten und jetzt ihre Daseinsberechtigung verlieren.

3. Warum mich FSE-Themes und der Block Editor jetzt begeistern

Meine Skepsis war nicht gegen ein Block System an und für sich gerichtet, ich kannte bereits TemplaVoila, eine Extension, welche das CMS TYPO3 zu einem der ersten Block Editoren umgewandelt hat. Dieses Block System hat in den 10er Jahren massgeblich zum Erfolg von TYPO3 beigetragen.

Mehr Bedenken hatte ich wegen des Verlusts an Kontrolle über den Code. Oft hatte ich mit PHP schnell eine spontane Idee vom Kunden programmiert. Dies sollte nun nicht mehr so einfach möglich sein. Zudem gab es viele Funktionen noch gar nicht. Bis heute fehlen zum Beispiel editierbare Blöcke für diverse Menu Typen.

Gewisse Bedenken habe ich nach wie vor gegenüber dem CSS Code, welcher per Default mit den Blöcken ausgeliefert wird. Man muss ihn mit !important Zusatz überschreiben oder komplett deaktivieren, was einen erheblichen Aufwand verursacht. Hier ist mir auch nicht klar, ob das künftig wirklich updatefähig bleibt. Der Default CSS Code ist teilweise bereits veraltet.

Trotz dieser Bedenken habe ich meine Meinung über FSE-Themes und den Block Editor geändert, und zwar aus folgenden Gründen:

3.1. CSS und JS werden nur dann geladen, wenn der Block auf der Seite vorhanden ist, und zwar Inline

Dies ist für mich, als PageSpeed Advocate, das schlagende Argument für den Block Editor und FSE-Themes. Ich kenne kein anderes System, welches nach diesem Prinzip funktioniert. Meist wird der gesamte CSS und JS Code auf allen Seiten geladen, auch wenn er nicht benötigt wird. Bei WordPress lässt sich nun der CSS Code Block bezogen integrieren. Und dieser wird, wenn der Block vorhanden ist, Inline im Quellcode ausgegeben. Dadurch wird die Flaschenhalsproblematik und das Verwenden von unnötigem Code vermieden. Nur so kann eine sehr gute Website-Performance und ein guter Score bei Google PageSpeed erzielt werden. Warum das so wichtig ist, habe ich hier beschrieben.

3.2. Schulungsvideos von WordPress, gute Dokumentation und Podcast

Auf dem YouTube Kanal von WordPress werden sehr gute Schulungsvideos veröffentlicht. Dank den Videos von Nick Diego konnte ich mir nicht nur schnell das nötige technische Know How für die Arbeit aneignen, sondern auch die Idee hinter dem Konzept von Block Editor und FSE-Themes besser verstehen. Auch die gute Dokumentation hat dabei geholfen. Daneben gibt es auch noch einen offiziellen WordPress Podcast bei Apple Podcasts und Spotify.

3.3. Der Block Editor wird erwachsen – letzte WordPress Updates und Ausblick an der State of the Word 2023

Die letzten WordPress Updates auf 6.3 und 6.4 haben einige kleine, aber für den Anwender nützliche Verbesserungen gebracht. So können jetzt in der Listendarstellung Elemente umbenannt werden, was die Sache viel Übersichtlicher macht. Auch bei den Vorlagen (Pattern) wurde aufgeräumt und die Benennung klarer strukturiert. Zudem lassen sich die Modifikationen nun direkt in den Theme-Code speichern.

An der State of the Word 2023 in Madrid hat Matt Mullenweg zudem einen interessanten Ausblick auf die künftige Entwicklung gegeben. Besonders spannend fand ich auch den Ausblick von Matias Ventura auf das neue Admin-Design von WordPress. Im Moment sind nämlich die neuen Funktionalitäten noch nicht so sauber ins alte UI integriert.

3.4. Aus der Praxis: Gute Erfahrungen mit dem Block Editor

Die Schulung der Kunden ist mit dem Block Editor deutlich aufwändiger, als mit dem TinyMCE Editor. Dafür haben die Kunden auch viel mehr Möglichkeiten. Mit kurzen Bildschirmvideos, welche die Kunden jederzeit erneut anschauen können, habe ich aber gute Erfahrungen gemacht. Von einigen Kunden, welche täglich viele inhaltliche Änderungen vornehmen, konnte auch ich einige neue Block Editor Tricks lernen.

Besonders erfreulich war, dass der Quellcode auch nach intensivem Bearbeiten von mehreren Personen immer noch korrekt und fehlerfrei war. Keine unnötigen Tags wurden eingefügt, wie dies oft bei den früheren Editoren der Fall war.

3.5. Aus der Praxis: Maximaler PageSpeed Score mit einem FSE-Theme

Nachdem ich das erstes kleines WordPress Projekt mit einem eigenen FSE-Theme erstellt hatte, lag der PageSpeed Score bei 97. Das ist ein sehr guter Wert, welcher dank einfachem Layout und der Inline Integration von CSS erzielt werden konnte. Mit dem Einsatz eines Plugins für die Umwandlung der Bilder in moderne Bildformate (AVIF oder WEBP) konnte sogar der maximale PageSpeed Score von 100 realisiert werden.

4. Die Vorteile von FSE-Themes und dem Block Editor

5. Die Nachteile von FSE-Themes und dem Block Editor

Schlussfolgerung

Mit der Entwicklung vom Block Editor und Full Site Editing Themes hat WordPress im Jahr 2017 einen grossen Schritt gewagt und ist ein grosses Risiko eingegangen. Der Editor ist mittlerweile erwachsen geworden und die Umstellung zahlt sich aus.

Wie er von den Nutzern aufgenommen wird und ob er all die vielen Page Builder Plugins verdrängen kann, wird sich zeigen. Ich bin zuversichtlich und freue mich auf weitere Projekte mit FSE-Theme und Block Editor.

Kommentiere diesen Artikel

Weitere Inhalte zu «WordPress»

dark mode dark mode arrow upward arrow upward facebook facebook linkedin linkedin navigate next navigate next east east next call call star_rate star_rate