Claudia Klinger am 19. Februar 2021 —

WordPress-Entwicklung: Gutenberg, Blocks, FSE – Lese- und Lernliste

Keinen Bock auf Vorrede? Dann geh‘ weiter zur Lese- und Lernliste.
Symbolbild "Alles wird Block"

Die Art und Weise, wie mit WordPress Webseiten gebaut werden, ändert sich grundstürzend. Das sogenannte „Projekt Gutenberg“ ist ein großer Plan, dessen Umsetzung mehrere Jahre benötigt, doch es geht mit großen Schritten voran. Die meisten von Euch werden den komplett neuen Editor mitbekommen haben, der nurmehr mit Blöcken / Blocks arbeitet und seit Version 5.0 in WordPress integriert ist.

Viele nutzen ihn nicht, sondern laden sich den Classic-Editor als Plugin herunter und machen weiter wie bisher. Verständlich, denn es ist wieder mal eine riesige Hürde, die mit der Zumutung „vergiss das meiste, was du kannst und fang neu an!“ daher kommt und ensprechend abschreckend wirkt. Wer schon lange dabei ist, wird sich vielleicht erinnern: der Umstieg vom „Tabellendesign“ auf CSS war mindestens ebenso krass – und am Ende doch supersinnvoll!

Alles wird eins

Mir ist es auch lange so gegangen, aber einerseits will ich meine WP-Geschichte nicht als Modernisierungsverweigerin abschließen, andrerseits habe ich ein bisschen experimentiert und finde die neue Herangehensweise toll! Denn es wird ja nicht beim Block-Editor für den Content-Bereich bleiben, sondern zum Gestalten der gesamten Website (= Full Page Editing / FSE) fortschreiten. Das bedeutet:

  • Keine extra Header-, Footer- und Sidebar-Dateien mehr, die anders zu bearbeiten sind als der Contentbereich,
  • Widgets und auch viele Plugins werden ebenso verschwinden.
  • Auch den „Theme-Customizer“ braucht es nicht mehr.
  • Alles wird zu Blocks, einzeln gestaltbar per WYSIWYG von derselben Oberfläche aus, dem Gutenberg-Full-Site-Editor.

Ein genialer Plan, der die Dinge für Neulinge krass vereinfachen wird.  „Pagebuilder“ anderer Hersteller braucht es dann nicht mehr, die ja immer eine gewisse Abhängigkeit mitbringen.

Dass eine so grundstürzende Umstellung auf viele Widerstände trifft, wundert nicht. Schließlich wird jede Menge KnowHow ziemlich überflüssig, Theme-Designer müssen komplett umdenken und vieles ganz neu lernen. Dafür haben Anwender/innen auf einmal wieder die Möglichkeit, selbst ein Design zu kreieren, nämlich auf Basis der immer größeren Auswahl an Blocks, die von Entwicklern bereit gestellt werden und selbst wiederum individuell gestaltbar sind.

Alsdenn, ich lese mich gerade ein und notiere hier mal die Fundsachen.

*

Lese- und Lernliste zum Gutenberg-Knowhow

Vorab: den „Gutenberg-Editor“ gibt es als Plugin, das einen fortgeschrittenen Stand der Dinge mitbringt. Vieles davon ist jedoch seit WP 5.0 als Standard in die aktuellle WordPress-Version integriert, mit jedem Update mehr. Offiziell heißt der Editor dort nur „Block-Editor„, während der Name „Gutenberg-Editor“ dem Plugin (aktuell Version 9.6, im März dann 9.7) vorbehalten bleiben soll. Klar, dass sich da nicht alle so trennscharf dran halten!

  • Die Gutenberg-Fibel: Lerne den Block-Editor in WordPress kennen.
    Die Inhalte und Screenshots der Gutenberg-Fibel sind aktuell zur WordPress-Version 5.5 (Stand: 05. September 2020). Für die Screenshots wurde WordPress zusammen mit dem Standard-Theme Twenty Twenty verwendet. Jessica Lyschik ist Frontend-Entwicklerin & WordPress-Profi, sowie aktives Mitglied der deutschen WordPress Community.
  • Der Gutenberg-Editor: neuer Editor
    viele praktische Tips von Angelika Reisiger (Web-Designerin) rund um die Arbeit mit dem Block-Editor / Gutenberg-Editor – wie schön, dass es einen Classic Block gibt, in dem man „auf die alte Art“ einen Inhalt erstellen kann! Auf der Seite finden sich auch noch viele weitere nützlíche Artikel, sehr Einsteiger-freundlich.
  • Der Block-Editor (Gutenberg) für Einsteiger und Umsteiger
    mit Video zur Beitragsgestaltung im Block-Editor – von Hans-Gerd Gerhards (Webdesigner/WP-Entwickler) – am Praxis-Beispiel.
  • WordPress Gutenberg Tutorial für Anwender:innen
    Umfangreiches und doch übersichtlich kurzes Tutorial von Maddy Osman (SEO Content Strategist) vom Dezember 2020. Von den Grundlagen über Block Patterns und wiederverwendbare Blöcke bis zu FSE und ihrem Fazit.
  • Tipps & Tricks um mit Gutenberg-Editor effektiver zu arbeiten
    Eltern.- und Kindblöcke auswählen, Button-Beschriftungen anzeigen lassen, Spotlight-Modus und mehr – sehr hilfreiche Tipps!
  • Full site editing for theme developers
    Ein umfangreicher Kurs von Carolina Nymark, eine WP-Entwicklerin aus Stockholm, die an der offiziellen Doku von WP mitarbeitet. Alles drin, von den Basics über Blocks, Blockpatterns und vielem mehr bis hin zur Erstellung eines Block-orientierten Themes.
  • What Is Full Site Editing and What Does It Mean for the Future of WordPress?
    Justin Tradlock (Entwickler, Designer, Autor) beschreibt den „großen Plan“ des Gutenberg-Projekts in seinen einzelnen Phasen, wobei wir uns derzeit in Phase 2 befinden. (Dieses Jahr sind VIER Releases des Gutenberg-Editors geplant!).
  • Gutenberg 9.3 Provides Indicator of Where Full-Site Editing Is Going, a Future Without Widgets and Customizer Screens
    Der Gutenberg-Editor ist zwar mittlerweile im Core integriert, doch gibt es weiterhin fortgeschrittenere Versionen als Plugin. Der Artikel von Justin Tadlock handelt von der Version 9.3 und gibt einen Ausblick auf die kommende Entwicklung: ohne Widgets und Customizer Screen.
  • Getting Started with Block Themes: Patterns
    Patterns sind Blocks aus mehreren Blocks, deren Bauweise in diesem Artikel des Automattic-Teams erläutert wird. Weiter geht es dann mit Global Styles. Block Templates,und weiteren Themen rund um die neue Herangehensweise.
  • WordPress: Full Site Editing -Templates erstellen- so geht’s
    Ein Überblick von Ursula Baliko (mediendesign-quer), zwar vom Ende 2019 und somit nicht der neueste Stand. Für Leute, die sich jetzt erst einlesen, dennoch sehr informativ und lehrreich! Auf der Seite befinden sich auch Beschreibungen sämtlicher Entwicklungsstadien des Gutenberg-Editors (Plugin) bis heute. Aktuell ist der Beitrag WordPress 5.7 – mit Gutenberg 9.3 ,9.4, 9.5, 9.6 und 9.7 – also das, was im März 2021 über uns kommt!
  • How to Test FSE
    Die offizielle Anleitung zum Testen des FullSiteEditing (FSE) mit Tipps für die ersten Schritte, unterschieden in einfache für Anwender und schwierigere für Entwickler.  Was genau dazu gebraucht wird (Theme, Gutenberg-Plugin, WP-Version) ist angegeben, man kann sofort loslegen.
  • Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme
    Eine detaillierte Beschreibung des block-basierten Standardthemes bis hin zum Bau eines Child-Themes. Stammt von Kinsta, einem bekannten Hoster.
  • WordPress Gutenberg Editor mit Blocks erweitern
    Gute Erläuterung als Kurzüberblick für Einsteiger aus dem Webgo-Blog mit Beispielen.
  • Die 10+ besten Gutenberg Block Plugins
    Für fast alles gibt es mittlerweile schon Blocks, die im Bundle als Plugin importiert werden können. Mir fehlen hier die GenerateBlocks, die ich für den Anfang meiner Experimente nutze („Eine kleine Sammlung von leichtgewichtigen WordPress-Blöcken, die fast alles erreichen können.“).
  • WordPress: Deaktivieren von Gutenberg-Blöcken
    Häufig bieten einzelne Blöcke jedoch ungewünschte redaktionelle Freiheiten, weshalb sie deaktiviert werden sollen. Mit Hilfe einer sog. Whitelist könnt ihr nur bestimmte Gutenberg-Blöcke zulassen und mit einer Blacklist gezielt Blöcke entfernen.“ Der Rat stammt vom Agenturblog „Kulturbanause“ und ist sicher hilfreich, vor allem wenn FSE mal voll entwickelt ist! Dann kann die Veränderung wichtiger Site-Teile auf diese Weise unterbunden werden. Wer nicht in der funktion.php selbst schreiben will, kann auch auf Block-Plugins wie PublishPress zurück greifen, die den Zugang zu Blocks nach Rollen regeln können.
  • Phoenix, a Block-Based WordPress Theme With a Sidebar
    Alle bisher erschienenen Gutenberg-Themes haben keine Sidebar (weil es die in der klassischen Form nicht mehr geben wird, aber das FullSiteEditing (FSE) ja auch noch nicht ganz fertig ist. Das (experimentelle!) Phoenix-Theme zeigt, was geht.

 

Meinung / Kritik

  • Das Theme-Desaster von WordPress
    Thosten Landsiedel beschreibt das Chaos der Umbruchzeit im Blick auf die Themes im offiziellen Theme Directory auf WordPress.org. Die Schwierigkeiten der Themeentwickler, der Umfang des neu zu erwerbenden KnowHows, wenn man in die Block-Entwicklung einsteigen will, das Problem mit dem JQUery-Update usw. Auch die Kommentare sind interessant und informativ, aber auch widersprüchlich: Die einen beklagen, die WP-Entwickler hätten die Blogger vergessen, während Webagenturen die vergrößerte Gestaltungsmacht der Anwender fürchten. Lest selbst, es ist spannend!
  • Should Full-Site Editing be in WordPress 5.8?
    Fränk  Klein, Entwickler und Anbieter von WP-Kursen,  hat es ausprobiert, ein block-basiertes Theme mit dem ziemlich unfertigen FSE gebaut und seine Erfahrungen im Detail beschrieben.  und meint: das ist alles noch viel zu unfertig!
  • FSE und WordPress-Themes: Wie sieht das MVP aus?
    Das Minimum Viable Product (MVP) wäre eine Architektur, die es möglich macht, eine Version des Twenty Twenty-One-Themes zu erstellen, die nur Blöcke verwendet, ohne jegliche Programmierkenntnisse. Dafür muss der FSE sieben „Meilensteine“ erreicht haben, die im Artikel kritisch beleuchtet werden. Der Artikel von Gabi Beckenbauer (Template Entwicklerin) zeigt, dass das Ganze doch etwas chaotisch voran schreitet – man darf gespannt sein, ob wirklich alles in 2021 umgesetzt wird!

Zur neurlichen bzw. erstmalig intensiveren Befassung mit dem Projekt Gutenberg in all seinen Aspekten hat mich Horst Schulte motiviert, der meint: Die Nutzung des Gutenberg-Editors hat für mich ein Niveau erreicht, gegen das Kritiker nicht mehr ohne Weiteres erfolgreich argumentieren können.

Die Liste darf gerne in den Kommentaren ergänzt werden!

Diskussion

Kommentare abonnieren (RSS)
8 Kommentare zu „WordPress-Entwicklung: Gutenberg, Blocks, FSE – Lese- und Lernliste“.

  1. Schön zusammengefasst. Auch die relevanten Zusatzinformationen zum Diskussionsprozess fehlen nicht.

  2. […] WordPress-Entwicklung: Gutenberg, Blocks, FSE – Lese- und Lernliste […]

  3. Alles wird eins, ja, ein Riesenchaos.

    Beispielaufgabe:

    „Ergänze doch mal kurz bei den Rezepten (eigener Post Type) rechts am Rand noch diesen Amazon affiliate Link.“

    Bisher:

    Design > Widgets > Rezepte Sidebar > Neues HTML Widget > Copy & Paste zugelieferter Code.

    Kann jeder ohne technisches Wissen machen.

    FSE:

    ???

  4. Hi Gabi, du hast ja recht, im Moment ist das alles noch ein Übergangschaos, wobei FSE ja so noch gar nicht wirklich in Betrieb, sondern nur in experimentellen ‚Themes zu besichtigen ist. Erst mit WP 5.8 soll es dann soweit sein – und sicher auch dann noch nicht „fertig“.

    Momentan kann so etwas wie eine „Sidebar“ mit Blöcken auf diese Art realisiert werden, wie das Test-Theme PHOENIX zeigt.

    Zu deiner Frage: soweit ich mich bisher eingelesen habe, geht das dann so: Man steuert den entsprechenden Block an, der ein „wiederverwendbarer“ ist und setzt den Link, speichern und fertig.

    Siehe dazu auf Kulturbanause:

    „Ändert sich allerdings ein Wiederverwendbarer Block, aktualisieren sich auch alle Verknüpfungen. Er kann an globaler Stelle angepasst werden und ändert sich auf allen Unterseiten, auf denen der Wiederverwendbare Block eingefügt wurde und die Verknüpfung noch besteht.“

  5. Und wie bekommt der unbedarfte Benutzer jetzt einen neuen „wiederverwendbaren“ HTML Block in jedes der 1.458 Rezepte?

  6. […] WordPress-Entwicklung: Gutenberg, Blocks, FSE – Lese- und Lernliste […]

  7. Ich bin mir nicht sicher, ob das eine gute Entwicklung ist. Manches ist richtig gut und absolut sinnvoll. Anderes erscheint mir nicht wirklich brauchbar und es macht voraussichtlich einige WordPress-Designer und -Entwickler überflüssig.

  8. Mir wäre schon gedient, wenn man die Breite des angezeigten Textes im Gutenberg Editor einstellen könnte. Wenn man zum Beispiel 4 Spalten nebeneinander setzt, werden diese so schmal, dass jedes Bearbeiten scheitert. Und eine Möglichkeit, die Breite einzustellen, habe ich nicht gefunden. Deshalb bin ich auf Elementor umgestiegen.
    Solange der Gutenberg Editor noch nicht mal solche Basics im Griff hat, muss man gar nicht erst versuchen, sich als „Full Page Editor“ zu positionieren.