WordPress5

WordPress5
Mit der Version 5.0 wird WordPress zum CMS mit Pagebuilder
  • WordPress 5 = Revolution
  • Auslöser = Gutenberg, der nach dem Mainzer Buchdrucker benannte WordPress-Editor

Wer schon länger mit WordPress arbeitet oder in der Community aktiv ist, verfolgt auch die Diskussion um WordPress 5. Größte Neuerung ist der Gutenberg-Editor. Herzstück des Editors sind die sogenannten Blöcke (Gutenblocks).

Blöcke ersetzen zukünftig in WordPress alles, was bisher auf sehr verschiedene Weise abgedeckt wurde, also Shortcodes, Einbettungen, Widgets, Custom Post Types, Metaboxen und andere Formatierungselemente.

Blöcke revolutionieren den Umgang für Anwender – aber auch für Entwickler von Themes und Plugins.

 

Kaufmann und Kauffrau im E-Commerce
Eigenwerbung für das neue Buch zum neuen Beruf: Kaufmann und Kauffrau im E-Commerce von Bernd Schmitt.

 

Gutenberg vs TinyMCE

Mit WordPress 5 wandert der Gutenberg-Editor in den Core – und ersetzt den TinyMCE.

Alt: TinyMCE-Editor

WordPress-Editor
Der alte WordPress-Editor Tiny MCE wird aufs Abstellgleis geschoben

Ausgewechselt wird Editor, also das Tool zur Erstellung von Beiträgen und Seiten. Im Bild oben siehst du den Tiny MCE. Die Nachteile dieses Editors:

  • Für Tabellen, Buttons, Farbänderungen etc. braucht der User Kenntnisse in HTML und CSS
  • Der User muss wissen, wie Tags funktionieren
  • Der User muss verstehen, was sich hinter dem Register Text verbirgt (gemeint ist der HTML-Code)

WordPress-Profis können das, Anwender von Webbaukästen und Builder-Themes wollen nicht mit der Codeansicht belästigt werden 😉

Neu: Gutenberg-Editor

Der neue Gutenberg-Editor
Der neue Gutenberg-Editor splittet die Elemente eines Beitrags in Blöcke auf

Die Gutenblöcke hab das mal ein bisschen ausprobiert:

  1. Ein Zitat-Block
  2. Ein Text-Block
  3. Ein Überschriften Block, ausgewählt ist H2 (Heading 2), also eine Überschrift zweiter Ordnung.
  4. Ein Listen-Block
  5. Ein Bild-Block.

Der Bild-Block ist gerade aktiv, deshalb siehst du oben die Bearbeitungsmöglichkeiten:

  • Das Zahnrad führt zum Inspektor. Mit dem Inspektor können weiteren Einstellungen vorgenommen werden
  • Mit einem Klick auf die Mülltonne wird der Block gelöscht

Im Gutenberg-Editor bearbeitest du einen Beitrag nicht als Ganzes, sondern in Gutenblocks. Die Idee dahinter:

  • WordPress 5 = Weniger HTML und CSS
  • WordPress 5 = Page-Builder-Anwender kehren zu Themes zurück, die den Coding-Standard von WordPress einhalten
  • WordPress 5 = Annäherung an Jimdo, Wix und andere Baukastensysteme

Eng wird es mit dem Gutenberg-Release für die etablierten Pagebuilder. Wozu sollte man eine zusätzliche Technik einsetzen, wenn sie schon in WordPress selbst integriert ist?

Herzstück des Gutenberg-Editors sind die Gutenblocks.

Einen Block öffnen

Der Button-Block

Einen neuen Block öffnest du mit einem Klick auf das eingekreiste +, den Inserter.

  • Gutenberg blendet von dir häufig verwendete Blocks automatisch ein.
  • Einen Block, den du noch nie verwendet hast, kannst du mit dem Suchfeld öffnen.

Beispiel: Gib Button ein, um einen Call-to-Action-Button einzufügen. So ein Button ist ideal, um von einem Blogbeittrag auf einen Artikel im Shop zu verlinken.

Der Button-Block

Button beschriften

Button beschriftenIm Button-Block lässt sich der Call-to-Action-Button ausrichten, beschriften und verlinken

  1. Button ausrichten. Mit Hilfe der Werkzeugleiste kannst du den Button ausrichten oder die Schrift fett oder kursiv erscheinen lassen.
  2. Hier gibst du den Button-Text ein.
  3. Eingabefeld für die URL. Beispiel https://onlineshop-diy.de

Nach der Eingabe der URL klickst du rechts im URL-Feld auf das Enter-Häkchen.

Buttonfarbe ändern

Farbe des Buttons ändern

Es geht noch weiter. Gutenberg macht es dir einfach, die Farbe des Buttons zu ändern.

  1. Klicke rechts auf die drei Punkte, um den Inspektor von Gutenberg zu öffnen
  2. Wähle die passende Farbe aus
  3. Optional: Gib deine Wunschfarbe als Hexcode in das Eingabefeld

Der More-Block

Teaserblock im Gutenberg-Editor
Teaser im Gutenberg-Editor

Zwischen Teaser und Hauptteil eines WordPress-Beitrags trennst du mit dem More-Block:

  1. Klick auf das Pluszeichen
  2. Klick auf Blocks
  3. Klick auf das More-Icon

Der Tabellen-Block

Das Spalten- und Reihenwerkzeug
Sieht aus wie Excel: Der Tabellenblock von WordPress

Im Tabellenblock kannst du ohne CSS und HTML-Kenntnisse Tabellen anlegen, und auch ein Tabellen-Plugin ist überflüssig. So geht’s:

  1. Tabelle ausrichten
  2. Spaltenwerkzeug öffnen
  3. Reihen und Spalten hinzufügen und löschen

Der Lyrik-Block

Lyrik mit Gutenberg

Wurdest du von der Muse geküsst? Dann nutze den Lyrik-Block von Gutenberg und gib deine Verse ein. Der Effekt ist allerdings nicht sehr spektakulär. Die Verse erscheinen

  • etwas nach rechts eingerückt,
  • auf einem grauen Hintergrund
  • und in einer anderen Schriftart.

Aber der Look des Lyrik-Blocks erinnert eher an eine Infobox. Aber was nicht ist, kann ja noch werden. Ich freue mich auf weitere Möglichkeiten der Vers-Formatierungen in Gutenberg. Tandaradei!

Wiederverwendbare Blocks (Reusable Blocks)

Gutenberg-Blocks sind wiederverwendbar. Anwendungsbeispiel:

  • Konfiguriere einen Button-Block
  • Speichere den Button-Block unter einem von dir gewählten Namen ab
  • Du benötigst den Button noch einmal? Dann wähle den neuen Buttonblock aus

Mehrere Spalten mit dem Gutenberg-Editor

Spalten im Absatz-Block
Spalten in einem Absatz-Block
  • Mit Gutenberg können Texte in mehrere Spalten aufgeteilt werden.
  • Mehrere Blöcke in Spalten nebeneinander setzen? Dieses Feature steht als Beta zur Verfügung.

Pro und kontra Gutenberg-Editor

Gutenberg-Editor 0.5Die Ratings für den Gutenberg-Editor im Plugin-Verzeichnis von WordPress zeigen, welcher Sprengstoff sich für die Community hinter dem neuen Editor verbrigt.

Die durchschnittliche Bewertung liegt 2,5 Sternen, ist also ziemlich negativ. Sehr aufschlussreich ist ein Blick auf die Einzelbewertungen der WordPress-Community. Die meisten User entweder einen oder fünf Sterne. Der Editor wird also nicht von allen bejubelt. Deshalb meine pro & kontra Gutenberg-Liste:

Pro Gutenberg-Editor

  • Gutenberg macht Page-Builder überflüssig
  • Gutenberg ist für Anwender ohne HTML- und CSS-Kenntnisse einfacher zu bedienen
  • Gutenberg vehindert die Zerspitterung von WordPress in verschiedene Pagebuilder-Themes
  • Gutenberg ist kostenlos

Kontra Gutenberg-Editor

  • Gutenberg legt Code als HTML-Kommentare ab, bläht also den Code auf. Gut zu sehen ist das in der MySQL-Datenbank.
  • Gutenberg ist für eingefleischte HTML-Coder sehr gewöhnungsbedürftig.
  • Die Hersteller von Builder-Themes müssen ihr Geschäftsmodell neu ausrichten
  • Mit dem Release von Gutenberg werden ältere Themes nicht mehr unterstützt. Beispiel: Das WooTheme Canvas.

Als WordPress-Admin Gutenberg meistern

Finger weg von Pagebuilder-Themes, denn mit Gutenberg greift WordPress den Pagebuilder-Gedanken auf. Ich sehe hier ein Konfliktpotenzial zwischen den ohnehin schon überfrachteten Pagebuilder-Themes und den Gutenblocks.

So weit meine persönliche Einschätzung. Lange war ich unschlüssig, ob ich mich der 1-Stern- oder der 5-Sterne-Fraktion anschließen soll.Es sieht aber eher nach 5 Sternen aus. Die Entscheidung von Matt war richtig und notwendig, um die Einheit und die Coding-Standards von WordPress zu wahren.

Wenn du selbst etwas pro oder kontra Gutenberg-Editor loswerden möchtest, dann schreib es bitte als Kommentar. 😉