WordPress: Ausrichtung von Blöcken und Gruppen im Editor
Von: Jonas Mit den Layout-Optionen im WordPress-Editor kann Blöcken eine zuvor im Theme festgelegte Breite bzw. Ausrichtungen zugewiesen werden. Gruppen wiederum können die Breiten der verschachtelten Blöcke steuern.
Der Block-Editor von WordPress (auch Gutenberg-Editor) bietet zahlreiche Gestaltungsmöglichkeiten. Eine dieser Möglichkeiten ergibt sich durch die Ausrichtung von Blöcken bzw. durch die Festlegung bestimmter Breitenangaben. Besonders erwähnenswert ist in diesem Zusammenhang der Gruppen-Block, der als Container-Element auch das Layout der enthaltenen Blöcke beeinflussen kann.
Ausrichtungs-Optionen im Block Editor
Im Block-Editor gibt es verschiedene Ausrichtungsoptionen. Welche Optionen zur Verfügung stehen und welchen Breitenangaben sie entsprechen, wird im Theme festgelegt. Darauf gehen wir weiter unten ein.
Keine
In diesem Fall nimmt der Block die sog. »Inhaltsbreite« (contentSize) an. Diese Einstellung ist die Standardoption, sofern nichts anderes festgelegt wird.
Weite Breite
Diese Option sorgt dafür, dass sich ein Block über die »Weite Breite« (wideSize) erstreckt. Häufig wird diese Option für Bilder oder Call-to-Action-Bereiche genutzte, die mehr Platz benötigen als der klassische Textinhalt.
Volle Breite
Wenn die volle Breite ausgewählt wird, nehmen die Blöcke die gesamte Breite des Viewports ein.
Linksbündig
Mit dieser Option wird ein Block am linken Rand des Containers ausgerichtet. Der restliche Inhalt fließt um den Block herum.
Rechtsbündig
Diese Form der Ausrichtung funktioniert nach demselben Prinzip wie die vorangegangene, nur dass der Block rechts ausgerichtet wird.
Zentrieren
Zentrierte Blöcke werden, wie der Name schon sagt, in der Mitte des Containers platziert.
Ausrichtung über Gruppen steuern
Es gibt außerdem die Möglichkeit, dass »die inneren Blöcke die Breite des Inhalts verwenden«. Diese Funktion bezieht sich in erster Linie auf Gruppen.
Wenn die Funktion für die Gruppe aktiviert ist, können alle Blöcke innerhalb der Gruppe eigene Breitenangaben erhalten (Inhaltsbreite, weite Breite, volle Breite). Diese Optionen zur Steuerung der individuellen Breite steht nicht zur Verfügung, wenn die Gruppe die Funktion deaktiviert hat, denn dann sind alle inneren Blöcke immer so breite wie die äußere Gruppe.
Standard-Breiten über theme.json festlegen
Die zur Verfügung stehenden Breitenangaben (»Keine Breite« sowie »Weite Breite«) werden durch Parameter festgelegt, die in der theme.json des Themes definiert sind.
Wenn beispielsweise festgelegt werden soll, dass die standardmäßige Inhaltsbreite 40rem (640px) beträgt, während die breite Ausrichtung auf 80rem (1280px) definiert wird, können diese Werte wie folgt angepasst werden:
"layout": {
"contentSize": "40rem",
"wideSize": "80rem"
},contentSize
Dieser Wert definiert die Standardbreite für Blöcke, die weder eine spezielle Breite noch eine zentrierte Ausrichtung haben. Der Wert sollte so gewählt werden, dass Fließtexte in der Standardbreite nicht zu weit laufen und gut lesbar sind.
wideSize
Dieser Wert definiert, wie breit ein Block bei der »weiten Breite « wird. Er gibt euch die Möglichkeit, bestimmte Inhalte breiter zu gestalten und ihnen mehr Raum zu geben.
Standard-Breiten über Site-Editor festlegen
Zum Anpassen der Breite muss allerdings nicht zwingend die theme.json angepasst werden. Die Breite kann auch direkt in der Benutzeroberfläche unter »Design → Website-Editor → Stile → Layout« angepasst werden – Admin-Berechtigungen vorausgesetzt. Diese Anpassungen über den sog. Site-Editor ermöglichen es, die Standardwerte zu überschreiben, ohne den Code des Themes bearbeiten zu müssen.
