3.7 Gutenberg Editor Crash Kurs: Die Welt der Blöcke

Um Gutenberg zu verstehen (und zu schätzen), musst Du nur ein Konzept verstehen:

Die Blöcke.

Vor allem wenn Du Dir den alten „Classic Editor“ in WordPress gewohnt bist.

Also, was sind Blöcke?

Im Prinzip ist ein Block einfach ein Container/Behälter für Inhalt.

Block = Behälter für eine bestimmte Art von Inhalt.

Im ersten Moment scheint das etwas kompliziert und unnötig. Du hast einen simplen Text, und dieser Text ist jetzt in einem „Absatz“ Block.

Aber:

Wir haben heutzutage eben viele verschiedene Arten von Inhalt.

Dabei geht es nicht einmal nur um die grundsätzliche Unterscheidung von Text, Bild, Audio und Video.

Sondern eben auch um die Darstellung dieses Inhalts. Zum Beispiel: Spalten, aufklappbare Akkordeons, Buttons, Icons, Tabellen, Galerien, Slider, Zähler, Zitate, Info Boxen, Buttons, Call To Action, Abstandshalter, Team Mitglied, Preislisten, Popups, und und und.

Der alte Classic Editor ist im Prinzip nichts anderes als ein Block, der primär für Text gedacht war. Und der dann aus Notwendigkeit mit viel Aufwand dazu gebracht wurde, mit Bildern, Videos, Tabellen und Testimonials klar zu kommen.

Falls wir nur Text und Bilder hätten, hätte der alte Classic Editor also wunderbar ausgereicht.

Haben wir aber nicht.

Aber dafür haben wir jetzt zum Glück den Gutenberg Editor, in dem jede Art von Inhalt einen genau für sich passenden Block erhält.

Zuerst wählst Du also den Block, dann befüllst Du diesen mit Inhalt.

Hier kommen auch die Gutenberg Addon Plugins ins Spiel:

Die Standard Gutenberg Blöcke die WordPress mitliefert, decken die grundlegendsten und wichtigsten Blöcke ab.

Dir fehlt der passender Block für Deinen Inhalt?
Dann musst Du jetzt eben nicht mehr einen neuen Page Builder installieren, der den vorhandenen Standard Editor von WordPress komplett ersetzt.

Sondern Du kannst ganz einfach den vorhandenen Gutenberg Editor mit Addon Plugins genau um das erweitern, was Du brauchst.

Das ist übrigens ein weiterer Grund, warum sich der Gutenberg Editor meiner Meinung nach gegen all die anderen Page Builder durchsetzen wird:

Während all die Page Builder ihr eigenes Süppchen kochen, werden alle Plugin und Theme Entwickler immer mehr auf den Gutenberg Editor setzen und ihre Erweiterungen gezielt für diesen entwickeln. Weil natürlich jeder den offiziellen WordPress eigenen Page Builder unterstützen will.

Eigentlich ist das ganze Gutenberg Projekt also wirklich genial 🙂

Also, schauen wir uns an, wie das Ganze praktisch funktioniert:

#1: Block hinzufügen

Grundsätzlich kannst Du natürlich weiterhin einfach Text schreiben. Mit jedem „Enter“ wird automatisch ein neuer Absatz (= Absatz Block) erstellt.

Wenn Du einen anderen Block brauchst, kannst Du diesen einfach über die kleinen + Buttons auswählen (der Button erscheint automatisch, wenn Du mit der Maus über den Bereich zwischen 2 Blöcken fährst):

Wenn Du auf den Button klickst, erhältst Du die verschiedenen Kategorien von Blöcken zur Auswahl. Wie Du siehst, können Plugins hier eigene Kategorien/Blöcke hinzufügen. Hier ist speziell „Stackable“ zu erwähnen, das von mir empfohlene Gutenberg Addon Plugin, welches einige nützliche und tolle Blöcke hinzufügt:

Tipp: Du kannst auch einfach nach Blöcken suchen. Wobei gleich als Hinweis: Das Stackable Plugin ist aktuell nur auf Englisch. Wenn Du also z.B. nach „bild“ suchst, wird der „Image Box“ Block nicht gefunden:

Der „Image Box“ Block von Stackable:

Mit der Zeit wirst Du Dich aber hier mit den verschiedenen Blöcken schnell zurechtfinden. Ausserdem gibt es auch die nützliche „Meistgenutzt“ Kategorie:

#2: Block Aussehen anpassen

Wenn Du einen Block ausgewählt hast, werden seine Optionen automatisch direkt beim Block sowie auf der rechten Seite angezeigt. Damit kannst Du also weiterhin z.B. Texte fett oder kursiv machen, Farben ändern oder Links einfügen:

Tipp: Du kannst Blöcke auch in andere Blöcke umwandeln (da wo es Sinn macht). Z.B. einen normalen Absatz Text einfach in eine Überschrift ändern:

Die möglichen Optionen ändern sich automatisch. So kannst Du z.B. einfach den Überschrift Level anpassen:

Und bei Bildern kannst Du auswählen, ob das Bild links oder rechts vom Text stehen soll, etwas breiter als der Text („Weite Breite“) oder über die ganze Bildschirmbreite („Gesamte Breite“) gehen soll.

Wichtig dabei ist, dass Du auf der rechten Seite die passende Bildgrösse auswählst:

Die verschiedenen Bildgrössen und wann diese zum Einsatz kommen, habe ich bereits in dieser Lektion erklärt.

Falls Du die „Lightbox“ Funktion für das Bild aktivieren möchtest (also dass man das Bild anklicken kann und es grösser dargestellt werden soll), musst Du als Link einfach nur die „Mediendatei“ auswählen:

#3: Block verschieben

Du kannst einen Block auf 2 Arten verschieben. Entweder einfach über die Pfeile auf der linken Seite um eine Position nach oben/unten, wenn Du den Block ausgewählt hast:

Oder Du ziehst den Block einfach mit dem Icon zwischen den Pfeilen per Maus an die gewünschte Stelle. Das funktioniert auch ideal, um einen Block in einen Spalten Block zu ziehen:

#4: Tipp: Verschachtelte Blöcke auswählen

Zum Thema Spalten bzw. generell Blöcke, welche verschachtelt sind (also Blöcke in anderen Blöcken drin sind):

Hier kann es teilweise etwas schwierig werden, den gewünschten Block auszuwählen. Also z.B. wenn Du den Spalten Block auswählen möchtest, nicht den Absatz oder Überschrift Block.

Hier 2 Tipps:

Du kannst entweder einfach zwischen 2 Spalten klicken (wenn der Mauszeiger zu einem Pfeil wird):

Oder Du klickst einfach den ersten Block in der ersten Spalte an:

Dann kannst Du mit den Pfeiltasten auf Deiner Tastatur (Pfeil nach oben bzw. Pfeil nach unten) den vorherigen oder nächsten Block auswählen.

Einmal Pfeiltaste nach oben drücken wählt die Spalte aus:

Und noch einmal Pfeiltaste nach oben wählt den Spalten Block aus:

#5: Block löschen & duplizieren

Das geht beides ganz einfach über das Icon mit den 3 Punkten ganz rechts:

#6: Übersicht über die „wichtigsten“ Blöcke

Hier eine kurze Übersicht über die „wichtigsten“ bzw. meiner Meinung nach nützlichsten und am häufigst gebrauchten Blöcke. Einfach damit Du diese zumindest einmal gesehen/gehört hast:

Zuerst die Standard WordPress Blöcke:

Absatz: Für ganz normalen Text.

Abstandshalter: Damit Du mehr Abstand zwischen 2 Blöcken einfügen kannst.

Bild: Einfach ein Bild.

Buttons: Ein oder mehrere Buttons.

Cover: Das Cover ist ideal, wenn Du eine Überschrift, Text oder Buttons über einem Hintergrundbild einfügen willst. Auf der Startseite haben wir das für unsere Hero Sektion verwendet:

Galerie: Eine Galerie mit mehreren Bildern:

Liste: Eine simple Liste, nummeriert oder mit Bullet Points/Punkten.

Pull-Quote: Vom Prinzip her ähnlich wie ein Zitat, wird ein Pull-Quote dafür genutzt, um wichtige oder interessante Textstellen aus dem Text „herauszuziehen“ und damit den Besucher beim Überfliegen in den Text hineinzuziehen und den ganzen Text aufzulockern:

Spalten: Um Layouts mit mehreren Spalten umzusetzen. Z.B. um Text und Bild nebeneinander zu platzieren:

Oder z.B. Angebote übersichtlich darzustellen:

Trennzeichen: Eine simple Trennlinie:

Überschrift: Für Überschriften (verschiedene Stufen, also H1 bis H6).

Zitat: „Normale“ Zitate die zwar nur über die normale Inhalts-/Text-Breite gehen, dafür aber noch um ein Foto ergänzt werden können. Darum ideal für Kundenfeedbacks/Testimonials:

Und hier noch die Blöcke, die vom Addon Plugin Stackable kommen (es liefert noch einige Blöcke mehr, aber auch hier nur einmal diese, die vermutlich noch etwas häufiger gebraucht werden):

Accordion: Damit kannst Du solche Akkordeon-Boxen erstellen, die auf- und zugeklappt werden können (z.B. ideal für FAQ Seiten):

Count Up: Zähler, die automatisch auf die angegebene Zahl hochzahlen:

Icon List: Listen, die anstatt einfach einer Zahl oder dem Standard Bullet Point/Punkt ein Icon benutzen:

Pricing Box: Also eine Preistabelle:

Video Popup: Wenn das Bild angeklickt wird, wird das Video in einem Popup geöffnet (also wie die Lightbox Funktion für Bilder):

#7: Embeds (YouTube & Co)

Sobald Du auf einer neuen leeren Zeile einen YouTube Link (wie z.B. https://www.youtube.com/watch?v=0g7ARarFNnw) einfügst, wird das Video direkt in einen Block umgewandelt und eingebettet:

Hier eine Liste von Websites, von denen Du Inhalte einfügen kannst, welche dann eben so eingebettet und direkt angezeigt werden können (z.B. geht das auch für Instagram Bilder oder einzelne Tweets von Twitter): https://wordpress.org/support/article/embeds/#okay-so-what-sites-can-i-embed-from

Hinweis bzw. Erinnerung: Das Thema Datenschutz habe ich in der Lektion „DSGVO & Cookie Banner“ ausführlich behandelt. Ich kann Dir schlicht keine verbindliche Empfehlung zu den rechtlichen Konsequenzen beim Einbinden von YouTube Videos geben.

Aber wie ebenfalls schon in der Lektion „DSGVO & Cookie Banner“ erklärt, nutzt Du mit meinem WordPress Paket automatisch YouTube mit dem „erweiterten Datenschutzmodus aktiviert“, bei dem keine Cookies gesetzt werden.

Meiner persönlichen Meinung nach stellt das Einbinden von YouTube Videos in dieser „No Cookie“ Version kein grosses Risiko dar. Aber eben, ein Restrisiko bleibt. Und darauf will ich Dich zumindest hinweisen.

Weitere Lösungen zum Einbinden habe ich ja ebenfalls in der Lektion „DSGVO & Cookie Banner“ erwähnt.

Das wären einmal die wichtigsten Funktionen und Blöcke im Gutenberg Editor.

Es macht keinen Sinn, wenn ich hier jede einzelne Option für jeden einzelnen Block im Detail erkläre. Die meisten Optionen sind entweder selbsterklärend, oder ganz ehrlich, ist es schlicht einfacher, wenn Du es selber einmal ausprobierst.

Mit dieser Lektion solltest Du einen wirklich effizienten Einstieg in den neuen Gutenberg Editor haben.

In den nächsten paar Lektionen zeige ich Dir aber noch ein paar detailliertere Beispiele und Tipps für einige ausgewählte Blöcke.

Wenn Du mehr Infos zu den Standard Gutenberg Blöcke möchtest, schau einmal hier:

• Hier für die Standard WordPress Blöcke: https://gutenberg-fibel.de/
• Und hier für die Addon Blöcke von Stackable: https://docs.wpstackable.com/stackable-guides/beginner-guides/customizing-blocks

Und wie immer gilt:

Falls Du noch Fragen hast, einfach einen Kommentar hinterlassen und ich versuche gerne Deine Frage zu beantworten 🙂