Je nachdem, wie verbunden Sie mit der WordPress-Community sind, kennen Sie WordPress Gutenberg, den neuen Editor des international am häufigsten verwendeten CMS.

Heute befindet sich Gutenberg in der Beta-Phase und kann als Plugin heruntergeladen werden. Es wird später in ein umfangreiches WordPress-Update aufgenommen und steht allen WordPress-Anwendern zur Verfügung.

Was ist WordPress Gutenberg?

Einfach ausgedrückt, Gutenberg ist der Ersatz für den aktuellen WordPress-Editor: TinyMCE.

Der WordPress-Editor wird von dort aus weitergehen:

So wie hier:

Es ist mehr als nur ein ästhetisches Update. Gutenberg wird das Bearbeitungserlebnis komplett verändern, indem er zu einem blockbasierten Content-Ansatz übergeht (wie er heute von bestimmten WordPress-Vorlagen wie Divi angeboten wird).

WordPress ist sich bewusst, dass sein CMS längst nicht mehr nur für das Bloggen verwendet wird. Ein großer Prozentsatz der Menschen verwendet dieses Tool, um ihre Websites zu erstellen, und ein Blocksystem wird die Designarbeit erheblich beschleunigen.

Wann werden sie Gutenberg offiziell starten?

Gutenberg wird erst mit dem nächsten großen Update: WordPress 5.0 offiziell Teil des WordPress-Kerns sein.

Wir kennen das genaue Erscheinungsdatum dieses Updates noch nicht, aber es wird irgendwann 2018 sein.

Bis dahin können wir den Gutenberg-Editor von WordPress über ein Plugin installieren und verwenden, aber Vorsicht! Dieser Editor befindet sich noch in der Beta-Phase, daher empfehlen wir Ihnen nicht, ihn wahllos auf einer veröffentlichten Website zu verwenden. Wenn du Tests durchführen willst, sollte es besser ein Entwurf sein.

So funktioniert der WordPress-Editor Gutenberg

Vor ein paar Abschnitten haben wir Ihnen gesagt, dass Gutenberg blockweise arbeitet. Nur für den Fall, dass das nicht ganz klar ist, lassen Sie es uns besser erklären:

Gutenberg ersetzt das einzigartige Bearbeitungsfeld des aktuellen WordPress TinyMCE-Editors durch viele einzelne “Blöcke”.

Diese Blöcke ermöglichen es Ihnen, viel komplexere Designs zu erstellen, als Sie es derzeit tun könnten.

Also, was ist ein Block?

Nun, ein Block kann fast alles sein. Beispielsweise können Sie Blöcke für:

  • Text
  • Bilder
  • Eingebettetes Video
  • CTAs
  • Widgets (ja, die gleichen Widgets, die Sie in Ihrer Sidebar verwenden)
  • Tische
  • Etc.

Und die gute Nachricht ist, dass Entwickler in der Lage sein werden, ihre eigenen externen Blöcke zu erstellen, auf die Sie über Plugins zugreifen können.

Jeder Block arbeitet einzeln und Sie können ihn unabhängig bearbeiten. Dieser Eintrag enthält beispielsweise zwei Blöcke, einen Textblock und einen Bildblock. Sehen Sie, wie einfach es ist, sie durch einfaches Anklicken einer Schaltfläche neu anzuordnen.

Und da jeder Block “unabhängig” ist, können Sie einem bestimmten Block Elemente – wie beispielsweise benutzerdefinierte Hintergründe – hinzufügen.

Gutenberg ist also ein Seitenersteller, richtig?

Nicht ganz. Zumindest nicht in seiner jetzigen Form.

Gutenberg wird es viel einfacher machen, Inhalte wie Blog-Einträge oder Standardseiten zu erstellen, aber es ist kein Ersatz für aktuelle Seitenersteller.

An der Oberfläche fehlen Gutenberg bereits zwei wesentliche Elemente:

  • Flexible Spalten (es gibt jetzt einen experimentellen Spaltenblock, aber er ist ganz einfach)
  • Drag and Drop (obwohl Sie nun die Reihenfolge der Blöcke mit Drag and Drop reorganisieren können)

Allerdings ist Gutenberg dabei, die Notwendigkeit von Page Buildern für Basisseiten zu eliminieren.

Aber, wenn wir komplexere Seiten erstellen wollen, wie z.B. eine Landing Page, bevorzugen wir wahrscheinlich fortgeschrittenere Page Builder (wie Divi).

Wie installiert man Gutenberg in seiner WordPress?

Sind Sie bereit zu sehen, wie Gutenberg funktioniert?

Wie bereits erwähnt, wird Gutenberg den Standard WordPress Editor in WordPress 5.0 ersetzen. Aber im Moment ist die einzige Möglichkeit, damit zu spielen, die Installation des Gutenberg-Plugins.

Hier ist, wie man das Gutenberg-Plugin installiert….. (es ist ein ziemlich normaler Prozess):

  • Gehen Sie zu Plugins > Neue hinzufügen
  • Schauen Sie nach “Gutenberg”.
  • Klicken Sie auf Jetzt installieren
  • Warten Sie, bis sich die Schaltfläche Install ändert, um sie zu aktivieren.
  • Klicken Sie auf Aktivieren.

Sobald Sie das Plugin aktiviert haben, verwendet Ihre Website automatisch den Gutenberg-Editor, wenn Sie auf Einträge > Neu hinzufügen gehen.

Verwenden Sie ein Gutenberg kompatibles Design für beste Ergebnisse.

Obwohl Gutenberg so konzipiert ist, dass es mit jedem WordPress-Thema funktioniert (genau wie der WordPress-Editor), bietet die Wahl eines Themas, das speziell mit Gutenberg kompatibel ist, mehr Vorteile.

Erstens können die Themen einen bestimmten Stil für Gutenberg-Blöcke bieten. Und noch besser: Themes können diese Styles in den Editor selbst laden. Das bedeutet, dass Sie beim Erstellen Ihrer Inhalte den tatsächlichen Stil Ihrer Blöcke sehen können.

Gutenberg-Themen können auch vorgefertigte Vorlagen anbieten, die aus mehreren Blöcken bestehen, so dass Sie lediglich Ihre Inhalte mit bestehenden Blöcken verbinden und auf Veröffentlichen klicken müssen.

So erstellen Sie Ihren ersten Entwurf mit Gutenberg von WordPress

Bevor wir anfangen, Blöcke hinzuzufügen, lassen Sie uns kurz die Elemente von Gutenbergs Hauptschnittstelle zusammenfassen:

(A) – ermöglicht das Hinzufügen neuer Blöcke.
(B) – Taste Rückgängig/Wiederherstellen
(C) – gibt Ihnen Zugriff auf die Konfiguration des Dokuments, wo Sie Elemente wie Kategorien, Tags, Featured Image…. sehen können. Es ist ähnlich wie die Seitenleiste, die WordPress gerade beinhaltet.
(D) – wenn Sie einen einzelnen Block ausgewählt haben, erhalten Sie Zugriff auf die spezifischen Einstellungen für diesen Block.
(E) – ermöglicht es Ihnen, Ihre Seite in der Vorschau anzuzeigen oder zu veröffentlichen/aktualisieren.
(F) – sobald du einige Blöcke hinzugefügt hast, kannst du hier deine Nachricht hinzufügen und bearbeiten.

Blöcke zu Gutenberg hinzufügen

Wie wir bereits in der Einleitung erwähnt haben, müssen Sie unabhängige “Blöcke” verwenden, um Ihre Konstruktionen mit Gutenberg zu erstellen.

Um einen neuen Block hinzuzufügen, klicken Sie einfach auf das Symbol + und wählen Sie die Art des Inhalts, den Sie hinzufügen möchten:

Im obigen Beispiel sehen Sie, wie Sie einen Block von Absätzen hinzufügen können. Aber Gutenberg enthält noch viel mehr Arten von Blöcken:

Die Abschnitte “Empfohlen” und “Freigegeben” sind für Sie angepasst und helfen Ihnen, schneller auf relevante Blöcke für Ihre Website zuzugreifen. “Empfohlen” zeigt die Blöcke, die Sie normalerweise verwenden, und “Geteilt” ermöglicht es Ihnen, Blöcke für eine spätere Wiederverwendung zu speichern.

Um auf alle Blöcke zuzugreifen, verwenden Sie die Registerkarten “Blöcke” und “Einbetten”:

Unter der Registerkarte Blocks finden Sie:

  • Grundbausteine: enthält Grundbausteine wie Bilder, Absätze, Überschriften, Anführungszeichen, etc.
  • Formatierung: Ermöglicht es Ihnen, weitere formatierte Inhalte wie Anführungszeichen, Tabellen oder den klassischen WordPress-Texteditor hinzuzufügen.
  • Layoutblöcke: Ermöglicht es Ihnen, den Text in zwei Spalten aufzuteilen, einschließlich Schaltflächen, Trennzeichen oder der Bezeichnung “Mehr”.
  • Widgets: ermöglicht es Ihnen, Verknüpfungen, letzte Einträge oder Kategorien hinzuzufügen. Es ist sogar möglich, Sidebar-Widgets in Gutenberg anzuzeigen.
  • Auf der Registerkarte Einfügen können Sie Inhalte aus vielen externen Quellen einbetten, wie z.B:
    • YouTube
    • Facebook
    • Twitter
    • Instagram

Erstellen Sie ein Grundlayout mit Gutenberg aus WordPress.

Beginnen wir mit etwas Einfaches. Lassen Sie uns einfach sagen, dass Sie ein grundlegendes Design für einen Blog-Eintrag erstellen möchten, das Folgendes beinhaltet:

  • Text
  • Ein Bild
  • Ein Termin
  • Ein eingebettetes YouTube-Video

So würde man es mit Gutenberg machen:

Zuerst würden Sie  Ihren ganzen Beitrag in den Editor schreiben. Sie können es auch auf Drive schreiben, in den Gutenberg-Editor einfügen und WordPress konvertiert es automatisch in Blöcke.

Hinzufügen von nicht-textuellen Blöcken

Jetzt, da der Textinhalt in Blöcke unterteilt ist, können Sie mit dem Mauszeiger über die Stelle fahren, an der Sie Ihr erstes Bild einfügen möchten, und auf das Symbol mehr klicken:

Dies ermöglicht es Ihnen, einen Block von Bildern einzufügen, aus dem Sie Bilder hochladen oder auswählen können, ähnlich wie im aktuellen WordPress-Editor:

Sobald Sie Ihr Bild ausgewählt haben, sollten Sie es direkt dort in Ihrem Seitenlayout sehen.

Bewegen Sie dann den Mauszeiger über den Punkt, an dem Sie das Zitat einfügen möchten, und fügen Sie einen weiteren Block ein.

Sie sehen den Angebotsblock im Editor. Klicken Sie darauf und schreiben Sie den gewünschten Text.

Um ein YouTube-Video einzufügen, können Sie einen neuen YouTube-Block hinzufügen. Um ein Video einzufügen, müssen Sie nur die URL eingeben und auf Einfügen klicken: