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

WordPress 5 Release

Matt Mullenweg hat den August 2018 genannt, aber nicht für das Final Release. Mein Tipp:

  • August 2018 erste Betaversion
  • Oktober 2018 Final Release

Warum das so lange gedauert hat? Zunächst musste WordPress and die EU-Datenschutzgrundverordnung (EU-DSGVO) angepasst werden. Deswegen gibt es vor WordPress 5.0 noch ein ursprünglich nicht geplantes WordPress 4.9.6.  Wie üblich wird WordPress in mehreren Stufen entwickelt:

Freunde, Fans und Follow
Eigenwerbung: Freunde, Fans und Follower
  • WordPress 5.0 Alpha-Versionen
  • WordPress 5.0 Beta-Version 1 – ab diesem Zeitpunkt werden keine neuen Features entwickelt. Release-Termin: Voraussichtlich August 2018
  • WordPress 5.0 Beta-Version 2
  • WordPress 5.0 Beta-Version 3
  • WordPress 5.0 Beta-Version 4
  • WordPress 5.0 Release Candidate
  • WordPress 5.0 Final Release Candidate – falls notwendig
  • Dry Run – 24 Stunden Code Freeze
  • 5.0 Release 😉

Du möchtest das WordPress der Zukunft selbst ausprobieren? Das geht mit einem kostenlosen Plugin.

WordPress 5 Beta testen

Das Plugin Beta Tester
Das Plugin Beta Tester

Du hast noch eine zweites, nicht mehr benötigtes WordPress herumgammeln? Dann installieren dir das kostenlose Plugin WordPress Beta Tester. Nach der Aktivierung erhältst du automatisch die zukünftigen WordPress-Versionen: Alphaversionen, Betaversionen und Release-Candidates.

Jetzt zur großen Neuerung: Der Gutenberg-Editor

Gutenberg vs TinyMCE

Gutenberg und WordPress
Gutenberg und WordPress

Mit WordPress 5 wandert der heute nur als Plugin verfügbare 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

Der neue Gutenberg-Editor arbeitet mit Blöcken, ich 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 Inspektorkönnen weiteren Einstellungen vorgenommen werden
  • Mit einem Klick auf die Mülltonne wird der Block gelöscht

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

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

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)

Seit Gutenberg 1.9 sind Blocks 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

Gutenberg vs Flatsome

Flatsome mit Pagebuilder
Flatsome mit Pagebuilder

Das obige Bild zeigt das Pagebuilder-Theme Flatsome im Einsatz. Über das Pluszeichen lassen sich verschiedene Blöcke in den UX-Pagebuilder einfügen. Wie man sieht: Gutenberg und die herkömlichen Pagebuilder sind sich ziemlich ähnlich.

Gutenberg-Editor testen

Das Plugin Gutenberg-Editor
Das Plugin Gutenberg-Editor

Falls du den Gutenberg-Editor selbst testen willst: Lade ihn dir aus dem offiziellen Plugin-Verzeichnis herunter. Voraussetzung ist WordPress 4.8 oder höher. Achtung: Gutenberg ist noch Beta, also verwende ihn nicht in einer Produktiv-Umgebung.

Mehrere Spalten mit dem Gutenberg-Editor

Spalten im Absatz-Block
Spalten in einem Absatz-Block
  • Aktuell ist es noch nicht möglich, mit dem Gutenberg-Editor mehrere Blöcke in Spalten nebeneinander zu setzen.
  • Was aber funktioniert, ist die Einrichtung von Spalten in einem Absatz-Block, also für ganz normalen Text.
  • Bleibt abzuwarten, ob Blöcke in mehreren Spalten mit einer Version Gutenberg 2 Einzug halten.

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, also ziemlich negativ. Sehr aufschlussreich ist ein Blick auf die Einzelbewertungen der WordPress-Community. 18 User vergeben fünf Sterne, 43 User nur einen. 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.

Die Weiterentwicklung von Gutenberg

In der jetzigen Form ist Gutenberg noch nicht einsatzreif. Doch auch, wenn der Editor „stand alone“ funktioniert, wird er noch nicht sofort in den WordPress-Core wandern. Dann sind nämlich die Plugin- und Themes Autoren mit Updates am Zug.

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 von WordPress zu wahren. Mit Einheit meine ich die Einhaltung des Coding-Standards.

Blöd ist nur, dass ich gerade WordPress-Projekte für Kunden aufsetze. Freuen die sich nun über das neue Handling oder nicht? Soll ich die frühzeitig mit dem Gutenberg-Editor vertraut machen? Wird es nach WordPress 5.0 noch möglich sein, weiter auf der Basis von TinyMCE zu arbeiten? Fragen über Fragen …

Wenn du selbst etwas pro oder kontra Gutenberg-Editor loswerden möchtest, dann schreib es bitte als Kommentar. 😉 Ich bin gespannt auf  Feedback …