Doku – Unterstüzte Gutenbergblöcke

Allgemein

Gundsätzlich können alle zur Verfügung stehenden Gutenbergblöcke verwendet werden. Im Zweifelsfall passt die Formatierung der Gutenbergblöcke in der Desktop oder Mobil Ansicht nicht oder die Funktion wird generell nicht umgesetzt.
Sollten Blöcke oder Funktionen benötigt werden, welche fehlerhaft oder garnicht umgesetzt sind, können diese an development@grafschaft-sauerland.de gesendet werden. Es wird dann geprüft ob die Funktion für das nächste Release umgesetzt wird.

Wording

Um Verwirrung in diesem Dokument zu vermeiden, wird die Bedeutung einzelner Begriffe für dieses Dokument gesondert festgehalten.

Desktop und Mobil Version

Das Theme ist so aufgebaut, dass die Webseite sowohl für Desktop-Geräte wie auch Mobilgeräte geeignet ist. Der Haupt Unterschied liegt dabei im Bildschirmformat. Desktop-Geräte haben meistens einen Bildschirm im Querformat (Landscape). Mobilgeräte haben meist einen Bildschirm im Hochformat (Portrait).
Die Webseite verwendet zwei Maßnahmen um sich an Mobilgeräte anzupassen.

  1. Fällt die Bildschrimbreite unter die eingestellte Webseitenbreite wird für die Breitenberechnung nicht mehr die eingestellte Bildschrimbreite verwendet, sondern 95vw. Das sind 95% der maximalen Fensterbreite (Viewport Width).
  2. Fällt die Bildschirmbreite unter 768px wird neben der Breitenberechnung auch das Menü im Header der Webseite angepasst. Zudem werden Mehrspaltige Blöcke angepasst. Details dazu werden bei den betroffenen Blöcken erwähnt.

Unterstüzte Blöcke

Absatz

Ein Absatz ist der Standardblock für Fließtext. Der Fließtext wird automatisch in der eingestellte Textfarbe sowie der Webseitenbreite angezeigt. In der Mobil Ansicht verringert sich auf 95vw.

Überschrift

Mit dem Block können Überschriften verschiedener Stufen erstellt werden. Das Theme unterstützt alle sechs Überschriftsstufen, die es im HTML Standard gibt:

Liste

Mit dem Block kann eine sortierte und eine unsortierte Liste erstellt werden. Das Theme unterstüzt sowohl sortierte als auch unsortierte Listen. An sonsten verhält sich die Liste wie der Absatz.

Pullquote

Der Block kann verwendet werden um ein Zitat besonders zu kennzeichnen. Er ist zeitgleich der Ersatz für das normale Zitat, welches nicht gesondert umgesetzt ist.
Das Pullquote besteht dabei aus zwei Elementen. Dem Zitat selbst und der Quellenangabe. Beide Elemente werden zentriert und losgelöst vom Text dargestellt. Das Zitat wird dabei in der normalen Textfarbe und Schriftart dargestellt. Die Quelle wird kursiv dargestellt:

Tabelle

Mit diesem Block könnnen Tabellen erstellt werden. Die Tabellen werden in diesem Theme grundsätzlich mit einfachem Tabellengitter dargestellt. Jede Tabellenzelle hat dabei einen Innenabstand von 10px rundrum. Die Tabellengröße wird automatisch angepasst.
Die Tabellenbeschreibung wird unterhalb der Tabelle angezeigt.

Vers

Dieser Block nutzt den Pre-Tag aus HTML. Dabei wird der Text exakt so dargestellt wie er eingegeben wurde. Alle Leerzeichen und Absätze werden übernommen. Als Schriftart wird standardmäßig „monospace“ verwendet. Dadurch hebt sich der Vers vom Fließtext ab.

Bild

Mit diesem Block können Bilder hinzugefügt werden. Übergroße Bilder werden auf die Seitenbreite automatisch reduziert. Auch wenn im Gutenbergeditor die maximale Bildgröße ausgewählt wurde.
Bildbeschriftungen werden unterhalb des Bildes abgebildet.
Der ALT-Text (Alternativer Text) sollte aus Gründen der Barrierefreiheit eine Beschreibung des Bildes beinhalten. Die Beschreibung ist wichtig für Menschen mit eingeschränkem Sehen.

Galerie

Mit diesem Block können Galerien von Bildern erstellt werden.

Achtung! Die Galerien haben verschiedene Funktionen die im folgenden genau Beschrieben werden.

Die Galerien weichen ein wenig von den Gutenbergeinstellungen ab. Ins besondere werden nicht alle Einstellungen wie erwartet unterstützt.
Die Einstellung Spalten wird gar nicht unterstützt. Ein verändern der Einstellung bewirkt nichts.
Auch die Option Bilder zuschneiden bewirk nichts.

Die Bilder einer Galerie werden automatisch gemäß ihrer Größe und der Verfügbaren Bildschirm Breite angeordnet. Dabei werden die Bilder immer im Masonry Layout angeordnet. Damit die Bilder in mehrern Spalten nebeneinander angezeigt werden, müssen diese eine deutlich kleinere Breite als die verfügbare Bildschirmbreite haben. Wir empfehlen die Bildgröße in den Galerieeinstelungen auf Mittel einzustellen. Die Bilder werden dann automatisch im Masonry Layout angezeigt. Es werden dabei so viele Bilder nebeneinander angezeigt, wie nebeneinander auf den Bildschirm passen. Unabhängig von der Bildschirmbreite. Passt nur ein Bild auf den Bildschrim, werden die Bilder in einer Liste angezeigt.

Die Bilder können auch eine Lightbox-Funktion bekommen. Die Lightbox-Funktion ermöglicht das maximieren der Bilder:

DIe Lightbox bringt automatisch die Funktionen zum verlassen des maximierten Modus sowie zum durchblättern der Bilder. Es werden immer alle Bilder der Webseite durchgeblättert. Auch wenn diese Teil einer anderen Galerie auf der gleichen Seite sind.
Damit die Lightbox aktiviert wird, muss die Link-Funktion aktiviert werden. Dazu muss in den Einstellungen der Galerie die Option Link zu auf Mediendatei gestellt werden. Der Schalte In einem neuen Tab öffnen ist dabei funktionslos.

Wir empfehlen für Galerien grundsätzlich die Bildgröße auf Mittel und die Option Link zu auf Mediendatei zu stellen.

Cover

Mit dem Block Cover kann ein Coverbild erstellt werden. Das Bild ist dabei sobreit wie der gesamte Bildschirm. Es ist eines der wenigen Elemente, welches die Webseitenbreite in der Desktop Ansicht ignorieren. In der Mobil Ansicht verwendet es ebenfalls die gesamte Breite.
Zudem kann dem Cover ein Overlay hinzugefügt werden. Da Overlay wird immer Mittig im Cover angezeigt. Zudem hat es einen weißen Hintergund, der zu 75% Transparent ist. Das Cover hat die Textfarbe des übergeordneten Elements. Die Position und Größe des Overlays kann nicht verändert werden.

Medien und Text

Mit diesem Block wird ein Bild neben einen Text gestellt. Beide Elemente nehmen dabei 50% ein. Im Standard werden die beiden Elemente auch auf Mobilgeräten nebeneinander angezeigt. Dies führt aufgrund der schmalen Bildschrime zu Problemen. Ändern kann man das mit der Option Auf Mobilgerät stapeln. Wir empfehlen diese Option immer zu aktivieren.

Spalten

Dieser Block verhält sich wie der Block Medien und Text. Der Inhalt der beiden Spalten kann frei gewählt werden. Es kann prinzipiell jeder beliebiger Block wieder verwendet werden. Beide Spalten haben dabei 50%.
Auch hier tritt das Problem mit den Mobilgeräten wieder auf. Wir empfehlen auch hier die Option Auf Mobilgerät stapeln zu aktivieren.

Gruppe

Dieser Block ermöglicht es weitere Blöcke zu gruppieren und bestimmte Einstellungen auf diese anzuwenden. Selbstverständlich kann man dazu eigene CSS Klassen verwenden. Das Theme bring aber schon drei CSS Klassen für verschiedene Akzente mit. Die Option um die Akzente auszuwählen findet man in den Erweiterten Einstellungen. Dort trägt man den Namen der Zusätzlichen CSS-Klasse ein.

Das Theme stell die Klassen akzent1, akzent2 und akzent3 zur Verfügung.

Akzent1 verwendet als Textfarbe die Textfarbe1 und als Hintergrundfarbe die Hauptfarbe.
Akzent2 verwendet als Textfarbe die Textfarbe2 und als Hintergrundfarbe die Zweitfarbe.
Akzent3 verwendet als Textfabre die Textfabre3 und als Hintergunddarbe die Drittfarbe.

Alle Fabren können in den Webseiteneinstellungen des Customizers eingestellt werden.

Neuste Beiträge

Mit diesem Block werden die neusten Beiträge angezeigt. Beiträge sind dabei WordPress Posts. Einige Optionen dieses Blocks sind wieder funktionslos.
Grundsätzlich werden die Beiträge ein zwei Spalten im Masonry Layout angezeigt. In der Mobil Ansicht werden die Beiträg nur in einer Spalte angezeigt. Zudem werden die Beiträge in Design der Akzent3 Klasse dargestellt. Das heißt, der Hintergrund hat die Drittfarbe und die Schrift hat die dritte Textfarbe. Jeder Beitrag hat einen Außen- sowie einen Innenabstand von 10px. Die Ecken sind abgerundet. Der Titel eines jeden Beitrags wird in der Hauptfarbe des Themes dargestellt. Diese Einstellungen können nicht verändert werden.
Damit die Beitragsvorschau einen Vorgeschmack des Beiträgs gibt, empfehlen wir folgende Einstellungen:

Video

Mit diesem Block werden Videos in der Breite des Fließtexts eingebettet. Die Videos werden über integrierte HTML5 Steuerelemente gesteuert.