Gutenberg – Blöcke als Grundlage für die Beiträge

In diesem Beitrag geht es um die Möglichkeiten der verschiedenen Blöcke die Gutenberg von Haus aus bereitstellt. Diese werden in verschiedene Kategorien aufgeteilt um eine bessere Übersicht zu schaffen.

Anbei findest du eine Liste der aktuell verfügbaren Blöcke, aufgeteilt nach Kategorie:

Inline-Elemente

Die „Inline-Elemente“ sind Elemente, die nicht allein die volle Breite einnehmen, sondern noch noch andere Elemente wie z.B. Text dazu lassen. Aktuell gibt es in diesem Bereich allerdings nur einen Block.

Inline-Bild

Der Block „Inline-Bild“ zeigt ein von Ihnen gewähltes Bild an, jedoch kann neben diesem noch Text platziert werden.

Allgemeine Blöcke

In den „Allgemeinen Blöcken“ sind die grundlegenden Blöcke zum Schreiben eines Beitrags enthalten.

Absatz

Der Absatz Block besteht aus normalen Text und erlaubt Modifikationen des Textes wie z.B. Verändern der Schriftgröße, farblicher Text & Hintergrund, fett, usw.

Liste

Mit dem Listen Block kann man, wie der Name bereits sagt eine Liste erzeugt. Dabei sind numerische als auch einfach mit Punkten angeordnete Listen möglich. Mithilfe des Einrücken Buttons ist es möglich Unterlisten zu erstellen. Diese werden unabhängig von der übergeordneten Liste behandelt und es daher auch möglich numerische als auch einfache Liste so zu kombinieren. Das erzeugen von Unterlisten ist mit der Tabtaste aktuell noch nicht möglich.

Die Anzahl an verschiedenen Gestaltungmöglichkeiten der Listenpunkte ist aktuell noch begrenzt. Diese werden in Zukunft vermutlich aber noch erweitert.

Bild

Der Bild Block fügt einfach ein Bild ein. Dabei hat er alle Funktionen vom alten Editor beibehalten und zugleich neue bekommen. Wie man es bereits aus der Medienverwaltung von WordPress kennt, ist es nun möglich Bilder vom PC einfach in den Editor zu ziehen. Dieses wird automatisch hochgeladen und als Bild Block eingefügt. Auch wenn ein Bild in der Zwischenablage liegt, z.B. wenn ein Screenshot gemacht wurde, kann dieses über Strg + V direkt eingefügt werden.

An Anpassungmöglichkeiten bietet der Bild Block nicht allzu viel. Die Darstellungsgröße lässt sich einstellen, als auch der Alternativtext falls das Bild aus irgendwelchen Gründen nicht geladen werden kann ,die Einstellung der Ausrichtung des Bildes und eine Verlinkung auf das Bild ist auch möglich. Die Anpassung der Bildgröße bietet umfangreiche Optionen als die anderen beiden Punkte sodass dies wiederrum ein eigener Punkt wäre.

Ein einfaches Bild 

Überschrift

Der Überschrift Block erzeugt eine Überschrift. Dabei lässt sich rechts in den Block Einstellungen die Größe festlegen. Der Überschrift Block hat ein Feature das auch in diesem Beitrag genutzt wurde. Die Option heißt in den Blockeinstellungen HTML Anker. Diese versteckt sich unter dem Reiter „Erweitert“.

Mit diesem ist es möglich, eine Markierung zusetzen, auf die man über einen Link verweisen kann und der Internetbrowser des Benutzer hinspringt, wenn der Link aufgerufen wird. Dazu reicht es, eine  Verlinkung auf der gleichen Seite als Ziel eine Raute, gefolgt von dem Namen des Ankers zu setzen.

Galerie

Die Galerie ist ein Block der mehrere Bilder umfasst. Die Aufgabe, die zuvor nur mit Erweiterungen möglich war wurde damit direkt in WordPress integriert. Es ist möglich die Anzahl der Spalten einzustellen, Beschreibungen hinzugefügt werden und auch die Bilder ohne großen Aufwand aus der Galerie zu entfernen:

Zitat

Der Zitatblock ist da um Zitate darzustellen wie es schon bei manchen Onlinezeitungen üblich ist.

 Darüber hinaus bietet der Block zwei verschiedene Designs. Diese sind über den Button zum Ändern  des Blocktyps auswählbar. Der Quote Block ist zwar Ähnlich aber nicht derselbe.

Audio

Mit dem Audioblock ist es möglich Audiodateien in den Beitrag oder auf die Seite einzubinden. Allerdings können die Webbrowser nicht alle Formate abspielen. Hier eine Liste der unterstützten Audioformate:

  • WAV
  • MP3
  • FLAC
  • OGG
  • AAC in MP4

Beim Internet Explorer kann es sein, dass nicht alle Formate unterstützt werden, da dieser keine neuen Features mehr bekommt.

AAC in MP4 bedeutet, dass AAC zwar abgespielt werden kann allerdings nur wenn es Teil eines MP4 Videos ist. In diesem Fall muss die entsprechende MP4 Datei eingebunden werden.

Titelbild

Das Titelbild unterscheidet sich ein wenig vom normalen Bild. Dort gibt es keine Einstellungen bzgl. der Bildgröße da davon ausgegangen wird, dass ein Titelbild immer die volle Breite ausnutzt. Innerhalb des Bildes kann Text platziert werden und das Bild abgedunkelt werden. Dafür ist in den Einstellungen für den Block auf der rechten Seite ein Regler vorhanden.

Dies ist ein Titelbild

Datei

Der Dateiblock ist dafür da, um dem Seitenbesucher eine Datei zum Download anzubieten. Die Datei selber muss sich in der Medienbibliothek von WordPress befinden. Alternativ kann der Block auch dazu genutzt werden um auf die öffentliche Übersichtsseite der Datei zu verweisen. Die dafür zuständigen Einstellungen sind in den Block Einstellungen auf der rechten Seite zu finden.

Video

Der Video Block ist dafür da, um ein Video mit dem vom Browser vorhandenen HTML5 Player darzustellen. Dabei muss genauso wie beim Audio-Block auf das Format geachtet werden. Hier eine Liste der unterstützten Formate:

  • MP4 ( h264 + AAC )
  • MP4 ( h264 + MP3 )
  • WebM ( VP8 + OGG )
  • WebM ( VP9 + OGG )
  • OGG ( Theora + Vorbis )

Hier ist auch wieder darauf zu achten ob der Webbrowser das entsprechende Format unterstützt. Auch hier stehen wir für Nachfragen gerne zur Verfügung.

Formatierung

Die Formatierungsblöcke sind dazu da, um den Beitrag oder die Seite schöner zu machen bzw. Informationen strukturiert anzuzeigen.

Code

Der Code Block ist für die Designer und Programmierer interessant, denn in diesem Block, ist es möglich Code in die Seite zu schreiben. Es ist in dem Fall egal ob es sich um PHP, HTML, CSS oder Javascript handelt.

Classic

Dieser Block holt den klassischen TinyMCE Editor in Gutenberg. Wenn ein Beitrag mit dem alten Editor geschrieben wurde wird der Inhalt standardmäßig in einen Classic Block gepackt. Mit diesem habt ihr trotz dass dieser jetzt in Gutenberg ist die gleichen Bedienungsmöglichkeiten.

Eigenes HTML

Der Block „Eigenes HTML“  ist dafür da, falls ein Webdesigner mal einen Teil der Seite manuell mit HTML verfeinern möchte. Dazu ist auch mit dem Code Block möglich, jedoch kann bei diesem Block beispielsweise kein PHP Code ausgeführt werden.

Vorformatiert

Der Vorformatiert Block ist ähnlich zum zum Absatz Block jedoch wird innerhalb dieses Blocks vom Browser aus standardmäßig kein HTML Code verarbeitet und je nach Theme auch dieser mit einem Hintergrund versehen.

Pullquote

Dieser Block ist ähnlich wie der Zitat Block. Der Unterschied zwischen diesen beiden ist, dass der Zitatblock für Zitate von Büchern, Stücken oder Filmen gedacht ist und der Pullquote Block zum Zitieren aus dem Text den man selber schreibt.

Tabelle

Der Tabellen Block stellt eine normale Tabelle da wie man sie schon so oft von anderen Webseiten kennt. Am Anfang fragt Gutenberg, wie viele Spalten und Zeilen man haben will. Diese Angaben sind jedoch nicht endgültig. Es lassen sich im Nachhinein noch Zeilen und Spalten hinzufügen bzw. entfernen.

Die Tabelle kann allerdings nur mit Text befüllt werden. Für Blöcke die nebeneinander platziert werden sollen gibt es den „Spalten“ Block

Vers

Der Vers Block ist von der internen Funktionsweise ähnlich dem „Vorformatiert“ Block. Er ist allerdings dafür gedacht dass man Verse schreibt. Dazu muss der Designer des Themes das entsprechend ein Design für die Vers Blöcke erstellt haben.

Falls über das Design hier keine Anpassungen bisher gemacht wurden, ist es möglich über den Customizer über den Punkt „Zusätzliches CSS“ eigene Designs zu entwerfen oder zu modifizieren.

Layout

Button

Dieser Block erzeugt einen Knopf, der die Benutzer auf eine andere Seite weiterleitet. Die Farbe und der Inhalt des Buttons ist durch das rechte Einstellungsmenü bestimmbar. Das Feld zum Eingeben des Links ist direkt neben dem Feld für den Text des Buttons.

Spalten

Der Spalten Block bietet die Möglichkeit Inhalt nebeneinander zu platzieren. Anders als beim Tabellenblock, ist es bei diesem Möglich andere Blöcke innerhalb der Spalten zu platzieren. Auch weitere Spaltenblöcke. Es  sind bis zu 10 Spalten pro Block möglich.

Mehr

Mit diesem Block kann man nachfolgende Inhalte verbergen und es erscheint ein Weiterlesen Button. Der Text muss nicht weiterlesen sein sondern ist anpassbar.

Trennzeichen

Der Block „Trennzeichen“ fügt einen Trennstrich hinzu. Dabei ist es auswählbar ob es ein kurzer Strich sein soll oder langer. Auch Punkte als Trennzeichen sind auswählbar. Diese Optionen sind über das Umwandlunsmenü des Blocks verfügbar.

Abstandshalter

Der Abstandshalter Block erzeugt einen vertikalen Abstand zwischen dem vorigen Block und dem darauf folgenden. Die Höhe des Abstandes lässt sich frei einstellen.

Ein Beispiel für einen Abstandshalter

Seitenumbruch

Der Seitenumbruch Block brauchen Sie wenn Sie den Inhalt auf mehrere Seiten aufteilen wollen. Alle Blöcke nach dem Seitenumbruch werden auf die nächste Seite verschoben. Es erscheint dann am Ende der Seite ein Navigationsmenü

Widgets

Shortcode

Der Shortcode Block ist ein Textblock um die Shortcodes der Plugins und Themes einzubinden. Es ist auch möglich mehrere Shortcodes in einen Block zu packen. Einstellungs oder Umwandlungsmöglichkeiten bietet der Block keine.

Erklärung Shortcode: Ein Shortcode ist ein Befehl an ein Plugin oder Theme spezielle Inhalte an einer Stelle auszugeben. Dort wo der Shortcode steht wird der Inhalt ausgegeben. Der Shortcode an sich ist auf der Seite dann nicht mehr zu sehen.

Archive

Dieser Block erzeugt eine Übersicht aller Beiträge die bisher auf der Seite veröffentlicht wurden. Der Block bietet die Möglichkeit zusätzlich die Anzahl der bisherigen Beiträge zusätzlich noch anzuzeigen und das ganze als Dropdown Menü anzuzeigen.

Kategorien

Der Kategorien Block erzeugt eine Liste mit den Kategorien des Blogs auflistet. Zusätzlich sind dann noch Verlinkungen zu den Übersichtsseiten der Kategorien dabei, auf denen alle Beiträge der Kategorie zu sehen sind.

Die Einstellungsmöglichkeiten sind diesselben wie beim Archive Block mit der zusätzlichen Möglichkeit, die Hirarchie der Kategorien noch mit anzeigen zu lassen.

Neueste Kommentare

Dieser Block erlaubt es die neuesten Kommentare anzeigen zu lassen dabei wird der Beitrags- / Seitentitel und der Name des Kommentarautors angezeigt.

Bei den Einstellungen gibt es die Möglichkeit zusätzlich den Avatar des Autors, den Zeitpunkt und einen Textauszug anzeigen zu lassen. Außerdem kann festgelegt werden wie viele Kommentare dort angezeigt werden. Der Standardwert ist bei fünf Kommentaren.

Neueste Beiträge

Dieser Block ist ähnlich wie der neueste Kommentare. Dieser stellt aber wie der Name sagt, die neusten Beiträge dar. Über die Einstellungen können diese aber nach Kategorie gefiltert werden, die Reihenfolge verändert werden, die Anzahl der angezeigten Beiträge beschränkt und zusätzlich das Beitragsdatum angezeigt werden.

Embeds

Die Kategorie „Embeds“ enthält Blöcke zum Einbinden von Inhalten von anderen Seiten. Diese bieten keine besonderen Einstellungmöglichkeiten. Diese Blöcke benötigen nur den Link von der anderen Webseite um den Beitrag / das Bild oder Video einzubinden.

Weitere Blöcke

„Ich sehe da aber Block-Kategorien und Blöcke die in diesem Beitrag nicht erwähnt sind“. Es gibt bereits Plugins die neben Ihren Hauptfunktionen auch neue Blöcke in Gutenberg integrieren. Es gibt auch Plugins die nichts anderes machen, als neue Blöcke hinzuzufügen. Es daher schon eine große Auswahl an Blöcken die bereits zur Verfügung stehen.