blockGap in der theme.json: Abstände zwischen Blöcken

blockGap in der theme.json (FSE): Abstände z. B. zwischen Spalten verringern

Bei der Einarbeitung in Full Site Editing (FSE) wollte ich 2-spaltige Blöcke mit Bildern verwenden, die abwechselnd Spalten mit 1/3- und 2/3-Aufteilung haben sollten. Das ist grundsätzlich auch kein Problem. Das Problem bestand eher darin, dass der Abstand zwischen den Spalten sehr klein sein sollte (z. B. 3px). Das kann man mit dem blockGap-Stil in der theme.json ändern. Wie das funktioniert, erläutere ich nachfolgend.

Beim Galerieblock besteht bereits standardmäßig die Möglichkeit, den Abstand zwischen den hinzugefügten Bildern anzupassen.

In diesem Fall geht es aber um Bilder in Spalten und ein Layout, das wie folgt aussehen soll:

BlockGap passt den vertikalen Rand oder Abstand zwischen Blöcken (z. B. bei Spalten) an und kann in der theme.json (FSE) definiert werden.
Spalten mit Bildern

Über die folgende Ergänzung in der theme.json des Block Themes (in diesem Fall Twenty Twenty-Two) kann man den Abstand z. B. zwischen den Spalten einstellen. BlockGap passt den vertikalen Rand oder Abstand zwischen Blöcken an. Er wird auch für Ränder zwischen inneren Blöcken in Spalten, Schaltflächen und sozialen Symbolen verwendet:

"styles": {	
....	
    "spacing": {
      "blockGap": true,
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
...
}

Nachdem die theme.json wie oben beschrieben ergänzt wurde, kann der Abstand im Beispiel zwischen den Spalten eingestellt werden. Über „units“ können die Einheiten („%“, „px“, „em“, „rem“, „vh“, „vw“) definiert werden, die verwendet werden können.

Im Editor heißt das Steuerelement für BlockGap „Block-Abstände“ und befindet sich im Bedienfeld „Größe“. Der Wert verwendet eine CSS-Eigenschaft, ein Preset, namens --wp--style--block-gap. Der voreingestellte Wert bei dem Block-Theme Twenty Twenty-Two ist 1,5em.

blockGap in der theme.json (FSE): Abstände zwischen Blöcken

Quellen und Lesetipps:

Fazit

Mit diesem kleinen Beispiel wird deutlich, dass Anpassungen über die theme.json sehr viele Möglichkeiten bieten. Das ist m. E. auch eine wesentliche Stärke des Full Site Editing (FSE). Wenn dann noch die aktuellen Probleme ausgeräumt werden und die Benutzerfreundlichkeit verbessert wird, ist FSE im Zusammenhang mit Block Themes eine sehr interessante Perspektive für die Erstellung von Websites.

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

blockGap in der theme.json: Abstände zwischen Spalten verringern


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (102) Anleitung (64) Block-Editor (43) CSS (9) Full Site Editing (30) Keine Anzeige (1) Plugins (28) Short News (1) Theme (20) Tipps (67) Veranstaltungen (3) WordPress (109)

2 Gedanken zu „blockGap in der theme.json: Abstände zwischen Blöcken“

Schreibe einen Kommentar