Anleitung: Wie verwende ich den WordPress Editor Gutenberg?

von | Aug 3, 2018 | Allgemein | 4 Kommentare

Schlagwörter: featured - Gutenberg - WordPress

Wie ich ja im letzten Beitrag bereits geschrieben habe, sind wir nun ein ganzes Stück näher an Gutenberg.

Gutenberg ist der Name des neuen Editors, der den jetzigen ersetzen wird.

Der alte WordPress Text Editor

Der alte WordPress Visual Editor

Mit diesen beiden Editoren konnte man bisher die Texte in WordPress schreiben und editieren. Wer mehr als nur Word Formatierung wollte, der musste zusätzliche Plugins installieren.

Aber mit Gutenberg ist das nun anders. In WordPress 4.9.8 kann man ihn freiwillig installieren und aktivieren, aber mit dem nächsten Update 5.x fliegt der alte Editor komplett raus und Gutenberg wird Standard. In meinem Test-WordPress habe ich Gutenberg bereits mal installiert. Der alte Editor genannt Classic Editor findet man nun im WordPress Plugin Archiv. Ich würd ihn immer installieren.

Zuerst muss ich sagen, ich war überrascht – die alten Texte wurden nicht zerstört – aber das heisst ja noch nichts – der Alte wie auch der Neue Editor sind ja jetzt aktiv…

Wenn man Gutenberg nun aktiviert, sieht man sofort das sich was geändert hat. Versucht man nämlich einen Beitrag oder eine Seite zu erstellen, sieht das ganze ziemlich modern aus.

Auf der rechten Seite sieht man, dass die Sidebar anders aussieht. Unter Dokumente sieht man eigentlich die gleichen Funktionen wie bisher – nur anders gestylt. Block ist hingegen neu und man kann da die einzelnen Blöcke, die man ausgewählt hat, designen oder speziell konfigurieren.

Gutenberg aufbau

Jetzt muss man zuerst wissen, dass Gutenberg mit einzelnen Zeilen arbeitet. Jede Zeile kann man also selbst zusammenklicken und erstellen. Somit ist es nachher sehr einfach einen Block zu nach oben oder unten zu verschieben.

Man kann nun ganz einfach mit der Maus über die Zeile fahren und anfangen den Text zu schreiben. Klickt man Rechts auf die 3 Symbole, sieht man die letzten Blöcke die man verwendet hat, klickt man Links aufs Plus, kann man andere Blöcke laden.

Gutenberg Blöcke sind

Hier zeig ich euch kurz was für verschiedene Blöcke Gutenberg für den Autor bereit stellt. Man kann einfach aufs Plus klicken, den Block anklicken und schon kann man ihn verwenden. Entweder direkt auf der Seite oder wenn man noch detailliertere Einstellungen haben möchte, auf der Sidebar.

Inline-Elemente

Ganz oben sieht man im PopUp dann das Suchfeld – wo man schnell nach den Blöcke suchen kann. Unten sind aber alle schön aufgelistet. Als erstes sieht man den Bilder Block. Damit kann man wie bisher die Bilder in die Zeile einfügen.

  • Inline-Bild

Meistgenutzte Blöcke

Als nächstes hat man alle Blöcke die wir jetzt schon vom alten Editor her kennen. Weil man diese Blöcke wohl am meisten braucht, hat man diesen Titel so gewählt.

  • Absatz
  • Überschrift
  • Button
  • Spalten
  • Vers
  • Bild
  • Galerie
  • Liste
  • Zitat

Vers ist wohl ne andere Möglichkeit für Zitate oder Codes zum einbauen.

Spalten ist wohl der speziellste Block. Jetzt muss man nicht mehr über die ganze Zeile schreiben, sondern kann auch einzelne Spalten haben. Früher musste man dafür CSS benützen oder ein zusätzliches Plugin installieren.

Allgemeine Blöcke

In diesem Block gibts eigentlich keine Überrschung für die User.

  • Absatz
  • Überschrift
  • Bild
  • Galerie
  • Liste
  • Zitat
  • Audio
  • Titelbild
  • Datei
  • Untertitel
  • Video

Formatierung Blöcke

Hier kann man wohl direkt in den Code eingreifen und so seine Texte – auf die altmodische Art und Weise mit CSS formatieren.

  • Vers
  • Code
  • Classic
  • Eigenes HTML
  • Vorformatiert
  • Quote
  • Tabelle

Layout Elemente

Hier kann man die Zeile noch speziell Layouten und verbessern

  • Button
  • Spalte
  • Mehr
  • Seitenumbruch
  • Trennzeichen
  • Abstandshalter

Mehr (weiterlesen) ist gut wenn man auf einen Blogbeitrag verlinken möchte.

Seitenumbruch erlaubt es dir, Unterbrechungspunkte auf deinen Beitrag zu setzen. Den Besuchern deines Blogs werden dann Inhalte präsentiert, die in mehrere Seiten aufgeteilt sind.

Cool ist die Buttonfunktion. Jetzt kann man sehr einfach einen Button für einen Text erstellen – eigentlich reichen 3 Klicks und 1 Links 🙂

Widgets

  • Button
  • Spalten
  • Mehr
  • Seitenumbruch
  • Trennzeichen
  • Abstandshalter

Embeds

Wir kennen das ja bereits, wenn man ein Youtube Link einbaut, wird direkt der Player aktiviert und so auch mit Soundcloud usw. Aber oft wissen die User gar nicht welche Dienste unterstützt werden. Mit Gutenberg bekommt man eine grosse Auswahl an Dienste präsentiert, die man direkt in WordPress einbauen kann.

Ich muss sogar zugeben, es gibt Dienste die ich nicht kenne oder nur gehört habe 🙂 Da gibts also viele Dienste die ich (und evtl ihr auch) nun ausprobieren dürfen.

  • Twitter
  • Youtube
  • Facebook
  • Instagram
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • CollegeHumor
  • Dailymotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv

Block Editieren

Wenn man einen Block nun löschen möchte, fährt man einfach mit der Maus darüber und sieht dann auf der rechten oberen Ecke 3 Punkte.

Mit einem Klick, kann man den Block löschen oder dublizieren. Man kann aber auch direkt in den Code eingreifen (Für Entwickler praktisch). Man kann aber auch einen Block speichern und ihn immer wieder verwenden – zum Beispiel kann man Autor-Biografien oder Conversions-Buttons anlegen und immer weiter verwenden.

Code Editor

Ich persönlich schreibe ja am liebsten mit dem Codeeditor, so kann ich direkt mit HTML und CSS Classen den Beitrag formatieren und kann auch so sicher stellen, dass zb kein WordPress Formatierungscode in den Beitrag rein kommt. Gott sei dank hat auch Gutenberg einen Codeeditor eingebaut – ist nur ein wenig versteckt.

Wenn ihr ganz rechts oben im Fenster sieht, dann seht ihr verschiedene Symbole.

Wenn ihr aufs Zahnrad klickt, dann verschwindet (oder erscheint) die Sidebar. Wenn ihr auf den Button mit den 3 Punkten klickt, dann könnt ihr auf den Code-Editor oder Visual Editor umschalten. Ebenfalls könnt ihr euch Tipps anzeigen lassen oder die Werkzeugleiste oben fixieren.

Und wenn ihr den Code-Editor einschaltet, dann sieht eure Seite so aus.

Gutenberg und WooCommerce

Es gibt bereits ein Plugin mit der man Gutenberg mit WooCommerce Funktionen erweitern könnt. (Gutenberg und WooCommerce)

Kann man Gutenberg brauchen?

Nun das ist jetzt die Mutter aller Fragen – braucht es wirklich Gutenberg? Ist es eine Verbesserung oder einen Rückschritt?

Ich denke es ist beides, eine gute Sache aber auch eine dumme Sache. Mit diesem “Klicki-Bunti” System (so nenn ich diese Drag and Drop Systeme gerne) kann man sehr einfach Texte gestalten und erweitern – es ist also vorallem für den normalen User eine wirkliche verbesserung. Man muss keine zusätzlichen Plugins installieren, sondern kann sicher sein, dass alles so läuft wie es sollte. Als Entwickler ists wieder ne andere Sache. Ich arbeite lieber direkt im Code, so kann ich nämlich kontrollieren ob der HTML Code sauber ist – oder ob es so WordFormatierungsmüll drin hat. Das konnte ich mit 1 Klick auf der ganzen Seite kontrollieren, jetzt muss ich Zeile für Zeile vorgehen. Auch weiss ich nicht, wie sauber Gutenberg zb mit Import oder Export Funktionen zusammenarbeitet. Wenn es natürlich keine Probleme gibt – bin ich ein Fan von Gutenberg – aber ich trau der Sache noch nicht so ganz 🙂

Ich hoffe jetzt euch hat diese kurze Übersicht gefallen. Ich werde diese Seite natürlich regelmässig verbessern und erweitern, so das ihr hier für alle Gutenberg Fragen eine Antwort findet.

Changelog:

  • 03.08.2018 um 11:10
  • 03.08.2018 um 13:30

4 Kommentare

  1. Peter Müller

    Hallo Eric-Oliver,
    du kannst auch in Gutenberg den ganzen Beitrag in der Code-Ansicht bearbeiten:
    – Rechts oben auf das Drei-Punkte-Menü
    – Umschalten von “Visueller Editor” auf “Code-Editor
    Voila. Schon siehst du den Code aller Blöcke im Code-Editor untereinander.

    Antworten
    • Eric-Oliver Mächler

      danke für die info 🙂 – hab ich in der zwischenzeit auch gefunden und ich werde den beitrag gleich noch erweitern 🙂 – zb mit der woocommercer erweiterung

      Antworten
  2. Andreas Paul

    Ich muss sagen, der neue Editor gefällt mir gar nicht. Weiß denn wer ob ich den alten Editor noch nutzen kann?

    Antworten
    • Eric-Oliver Mächler

      Hi, klar gibts da möglichkeiten 1. du installierst https://wordpress.org/plugins/classic-editor/ das bringt den klassischen editor bis 2022 zurück oder du wechselst auf classicpress — das ist ein fork von wp

      Antworten

Trackbacks/Pingbacks

  1. WordPress 4.9.8 veröffentlicht - Gutenberg ist da - […] Ich habe übrigens bereits eine kleine Anleitung zu Gutenberg geschrieben: Anleitung: Wie verwende ich den WordPress Editor Gutenberg? […]
  2. Anleitung: Gutenberg und WooCommerce - […] ich vorhin Gutenberg auf meinem Test WordPress installiert habe (Anleitung: Wie verwende ich den WordPress Editor Gutenberg?), da hat…

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert