Inhalte bearbeiten im vielseitigen WordPress-Editor «Gutenberg» – Unsere Einführung: Erste Schritte und die Geschichte von und Hassliebe zu «Gutenberg»

Inhalte einpflegen und bearbeiten in WordPress – Die Geschichte des aktuellen Editors «Gutenberg»

Jedes Jahr im Dezember findet seit vielen Jahren eine WordPress-Veranstaltung unter dem Namen «State of the Word» statt, in der Matt Mullenweg, einer der Mitbegründer des populärsten Website-Systems (aktuell über 43 % aller Websites weltweit laufen auf der Software) namens WordPress, das vergangene Jahr rekapituliert und die technische Richtung in die Zukunft erläutert.

Im Jahre 2016 kündigte Matt Mullenweg ein ganz neues Projekt an: das «Projekt Gutenberg». Der Name dahinter ist kein Zufall. Es soll das Publizieren von Webinhalten mit WordPress genauso revolutionieren wie im 15. Jahrhundert das Johannes Gutenberg (geboren ca. im Jahre 1400) das Publizieren auf Papier mit der Geburt des modernen Buchdrucks machte.

«TinyMCE», der alte WordPress-Editor, ist überholt und muss weg

Was die Ankündigung bedeutete, war sofort klar: dass der wirklich nicht mehr zeitgemässe – das betrifft Funktionalität und Styling – WordPress-Seiten- und Beitrags-Editor mit dem Namen «TinyMCE» endlich abgelöst wurde.

So sah TinyMCE ungefähr 2015 aus:

Den Editor gibt es immer noch. Wenn du Lust hast, versuch mal in diesem Demo-Spielplatz ein Design mit zwei Spalten zu erstellen, z.B. das Logo von «Tiny» links und den Text rechts: https://www.tiny.cloud/docs/tinymce/latest/full-featured-open-source-demo/

Geht nicht? TinyMCE war nie als Design-Tool gedacht, sondern ein reines Text-Tool, in das Bilder einfügen zwar möglich war, jedoch sie nicht wirklich im Sinne eines Layoutprogramms (wie man sie aus dem klassischen «Desktop-Publishing» kennt) anordnen konnte.

Selbstverständlich gab es Ansätze in WordPress, wie man das lösen konnte. Wir erinnern uns an Plugins, die es erlaubten, Spalten zu setzen mit Hilfe von «Shortcodes», das sind Codekürzel, die im Hintergrund Code auslösen, um Funktionalität oder Designelemente einer Website hinzuzufügen.

Der einzige Vorteil aus unserer Sicht war, dass der Editor für Anfänger in WordPress wegen der Ähnlichkeit mit klassischen Text-Editoren, z.B. Windows- oder Mac-basiert, leicht verständlich war.

Gutenberg will mehr sein als ein Text-Editor: Es ist ein Design-Tool

Gutenberg, wie heute der neue Editor allgemein genannt wird, ging nach der Ankündigung von Matt Mullenweg bewusst einen neuen Weg: Es soll ein Inhaltseditor sein, der nicht bloss für das Einpflegen von Texten da ist, sondern Webdesignern ermöglichen soll, die komplexesten Designs zu gestalten.

Wir vermuten, dass hier die «Krux» von Gutenberg liegt: der Durchschnitts-Nutzer, der keine Desktop-Publishing-, Grafikdesign- oder sogar Webdesignausbildung absolvierte, fühlt sich von den Möglichkeiten von Gutenberg schlicht überfordert.

Denn Gutenberg hat einen Paradigmenwechsel vollzogen: Weg ist der eindimensionale Text-Editor, neu eingezogen ist ein multidimensionaler umfassender Design-Editor.

Ein Editor nach dem Block- oder Bausteine-Prinzip

Aufgebaut ist er ähnlich wie Spiele mit Bauklötzen oder Bausteinen, sogenannten «Blocks»: Blocks kann man mit anderen frei zu komplexen Strukturen zusammensetzen. Wer schon mal was mit Lego zusammenfügte, kann sich das gut vorstellen.

Am 7. Dezember 2016 sprach Matt Mullenweg von drei Schwerpunkten, was die «Core», den zentralen Code und auch die WordPress-Erfahrung betraf:

«Der zweite Schwerpunkt: Der Editor … Wenn der Kern dessen, was WP tut, das Veröffentlichen und Schreiben ist, dann denke ich, dass wir dafür die beste Nutzeroberfläche der Welt haben sollten.»

Ungefähr ein halbes Jahr später Mitte 2017 gabs die erste Beta-Version von Gutenberg zum Testen.

Nach Weiterentwicklungen, Probleme beseitigen (Bugfixes) kam Ende 2018 Gutenberg in den Hauptcode (Core) von Version 5.0 «Bebo» von WordPress: https://de.wordpress.org/2018/12/wordpress-5-0-bebo/.

Wer nicht happy mit Gutenberg ist, kann weiterhin den «Classic Editor» nutzen

Doch warum will jemand den tatsächlich veralteten Text-Editor weiternutzen?

Die Antwort gibt eine Rezension des Plugins, die sicher für viele Nutzer des «Classic Editors» spricht:

Da ich das Gutenberg-Layout nicht verstehe, funktioniert dieses Plugin für mich einwandfrei.

Quelle: https://wordpress.org/support/topic/must-have-718

Inhalte im Backend kuratieren bzw. einpflegen – Die drei Möglichkeiten: Gutenberg Blocks (eventuell mit Kuration), Classic Editor oder Metaboxen

In der Online-Marketingsprache gibt es den Begriff «Content Kuration». Dabei geht es um das Sammeln, Aufbereiten und Veröffentlichen von Inhalten. Das betrifft das «Frontend», also was deine Website-Besucherinnen und Besucher sehen und lesen.

Ein Form von Kuration sollte es auch im WordPress-Backend geben, um den Nutzern, die Inhalte erstellen und einpflegen, die Komplexität von Gutenberg, mit seiner Fülle von Möglichkeiten, auf ein überschaubares Mass zu reduzieren.

Wenn du nicht selbst Designs in Gutenberg erstellen möchtest oder für dich die Möglichkeiten, die Gutenberg bietet, ganz einfach zu viel, zu komplex sind, dann sollte ein Profi für dich als Autor oder Redaktor die Nutzererfahrung im Editor einrichten.

Konkret bedeutet das: Alle Blocks, die nicht für das Einpflegen von Inhalten benötigt werden, sollten z.B. für Editieren geschlossen oder gleich für gewisse Nutzerrollen, z.B. Autoren, Redakteure, ausgeblendet sein. Ja, das geht. Es ist nicht ganz ohne Aufwand jedoch und benötigt aktuell noch direkten Programmcode in WordPress.

Wenn du zufrieden bist mit einem einfachen Layout, z.B. Blog mit Abschnitt Text, Bereich mit Bild, wieder Abschnitt Text usw., dann schalte Gutenberg Blocks ganz einfach mit dem «Classic Editor»-Plugin aus. Niemand zwingt dich Gutenberg zu nutzen, wenn es für dich keinen Mehrwert bedeutet.

Metaboxen sind nutzerdefinierte Felder («custom fields») in abgetrennten Bereichen im Beitragsedior: Kästchen oder «boxes»

Unten siehst du ein Beispiel wie Metaboxen dank eingebautem Code in WordPress leicht erstellt werden können.

Nur das Styling, z.B. zweispaltig muss man mit CSS (Cascade Style Sheets) selbst anpassen. Es gibt jedoch Plugins, die das für dich abnehmen, z.B. das äusserst beliebte Plugin ACF oder Advanced Custom Fields, über das wir vor Kurzem geschrieben haben:

Gerade Plugins für SEO-Zwecke, z.B. Yoast und SEOPress und viele andere, verfügen über solche Metaboxen, um dort für individuelle Beiträge und Seiten SEO-Einstellungen verwalten zu können.

Oft nutzen wir bei Arteeo in Kundenprojekten den von WordPress direkt zur Verfügung gestellten Code, um mit Hilfe von Metaboxen eine geführte Eingabe und Verwaltung von Informationen zu ermöglichen. Das ist aber leider nicht ganz ohne Aufwand, obschon wir ganz gute Routine darin haben.

Ideal, geben wir gerne zu, wäre es wenn Kundinnen und Kunden direkt im immer noch sich neu anfühlenden Gutenberg-Editor Inhalte einpflegen und verwalten könnten. Wir überlegen uns eine einfachere Nutzererfahrung mit einer Kuration von Gutenberg-Blocks.

Ich will den Gutenberg-Editor nutzen: Was sind die ersten Schritte?

Wenn du das erste Mal überhaupt Gutenberg anwendest, erscheint ein Willkomens-Guide als Popup. Den kannst du einfach wegklicken.

Dein Editorfenster könnte in etwa wie unten im Bild aussehen:

Wir zitieren das Bild oben aus dem Buch «Der Einstieg in WordPress 6» von Peter Müller, der ein wirklich gutes Buch zu WordPress 6 geschrieben hat:

• Nummer eins ist die Leiste mit Werkzeugen am oberen Rand. Wenn ein Block aktiviert ist, siehst du die verfügbaren Werkzeuge für den betreffenden Block. Z.B. bei einem Abschnitts-Block Schrift fett setzen, Text ausrichten, Link setzen usw. Am rechten Rand findest du je nach installiertem Theme (oder Plugin für Gutenberg-Blocks) weitere Einstellungen;
• Nummer zwei ist eine Übersicht an verfügbaren Blöcken. Das Fenster öffnet sich, wenn du den Block-Inserter klickst. Das ist das Plus-Icon neben dem Website- oder WordPress-Logo oben links in der Werkzeugleiste;
• Nummer drei ist der Inhaltsbereich. Überall dort kann du Blöcke einfügen;
• Nummer vier ist sind die jeweligen Blockeinstellungen, die angezeigt werden, wenn du in einem Block arbeitest. In den Einstellungen gibt es oben im Titel Tabs, mit den du auch andere Einstellungen öffnen kannst, z.B. der Seite oder des Beitrags, in dem du arbeitest.

Jetzt wo wir die Theorie kennen, ist es an der Zeit, etwas Inhalte in diese Seite einzufügen. Wenn dir die folgenden Hinweise etwas zu abstrakt sind: Wir haben weiter unten ein kleines Bildvideo reingestellt.

Erster Schritt: Titel des Beitrags setzen

Im angezeigten Feld Hier Titel eingeben schreib den Titel deines ersten Beitrags.

Zweiter Schritt: Wähle den Block «Überschrift» aus und setze einen Untertiteltext

Anschliessend drück das Tastaturkürzel / auf deiner Computertastatur. In der SchweizdeutschenTastatur ist das / direkt über der Zahl 7.

Wenn du diese Übung mit einem Tablet machst (oder vielleicht funktioniert es auf dem Mac nicht), kannst du auch wie unten gezeigt den blauen Plus-Button, der auch Block-Inserter heisst, klicken:

Die Blöcke, die dir WordPress, das WordPress Theme (also der Code für das Design deiner Website) oder Plugins zur Verfügung stellen, öffnen sich einem möglicherweise langen Fenster. Die Blöcke sind in Abschnitte gegliedert. Unter Text findest du den Block Überschrift. MIt einem Klick wird er direkt im Editor eingefügt:

Egal welchen Weg du nimmst, du siehst unten im Bildvideo wie der Block Überschrift neu im Bereich des Gutenberg-Editors erscheint. Voreingestellt setzt sich diese Überschrift auf Heading H2.

Wichtig im Strukturieren deiner Dokumente im Sinne von guter SEO und auch Barrierefreiheit sind die sogenannten Headings, die sich auf die klassischen HTML-Tags <h1>, <h2> bis runter zu <h6> stützen.

Die Faustregel ist: der Titel eines Web-Dokuments ist immer ein <h1> HTML-Tag, der automatisch von WordPress selbst gesetzt wird. Dann beginnst du mit <h2> für die erste Ebene von Untertiteln, <h3> für die zweite Ebene usw. Das heisst du bringst keinen Untertitel <h2> innerhalb eines Bereichs mit Untertitel <h3> an. Du gehst nur runter in der Hierarchie: z.B. einen Untertitel <h4> innerhalb von <h3>.

Dritter Schritt: Wo immer kein Block ist oder «Tippen Sie /, um einen Block auszuwählen» steht, kannst du einen Abschnitt schreiben

Wenn du eine Zeile siehst, die dir sagt, du sollst tippen oder / drücken, und du dort beginnst zu schreiben, ist es automatich ein Textabschnitt. Du kannst überall im Inheitsbereich – siehe Nummer 3 im Bild oben – klicken und mit Schreiben beginnen. Natürlich kannst du auch über den blauen Plus-Button den Abschnitt-Block einfügen.

Du willst ein Wort fett machen? Kein Problem. Es auswählen und B für bold (auf Deutsch fett) klicken. Fertig.

Weitere erste Schritte: Bilder einfügen und Texte verlinken

Tippe / und wähle Bild.

Im Schritt unten kannst du entweder ein Bild von deinem Computer hochladen, aus der Mediathek nehmen, oder extern über eine URL einfügen:

Wenn der Block Bild aktiviert ist, kannst du rechts diverse Einstellungen vornehmen, z.B. Breite anpassen. Wir geben zu, die Einstellungsmöglichkeiten für diesen Block sind etwas limitiert. Falls du das Theme GeneratePress nutzt, kennst du vielleicht ihre eigenen Blocks, die GenerateBlocks. Jene Blocks verfügen über einen erweiteren Block für Bilder. Wir benützen ihn regelmässig für diesen Blog.

Ein Link anbringen ist genau so leicht wie beim alten Editor: Linktext auswählen, Link in das Linkfeld einfügen, allenfalls noch die erweiterten Möglichkeiten öffnen und das Kontrollkästchen In einem neuen Tab öffnen klicken, falls du möchtest, das das externe Link in einem neuen Browsertab geöffnet werden soll.

Mit dieser kurzen Einführung kommst du schon sehr weit. Hand aufs Herz: Benötigt es dafür den alten Editor? Du kannst uns gerne mehr darüber in den Kommentaren schreiben.