Block Themes: Abstand zwischen Header und Content

Abstand zwischen Header und Content bei Block Themes einstellen oder entfernen

Wenn der Abstand vom Inhalt (Content) zum Header bei einer WordPress-Website mit einem Block Theme verändert werden soll, gibt es verschiedene Optionen. In dem folgenden Beitrag erläutere ich entsprechende Änderungsmöglichkeiten. Änderungen sind entweder direkt beim Template (z. B. Seiten-Template) oder evtl. über die theme.json möglich.

Das Problem: Zwischen dem Header und dem Content gibt es einen Bereich, der beim Design einer Website evtl. verändert werden soll, weil der Abstand zu klein oder zu groß ist.

Info

Innenabstand (Padding) ist der freie Raum innerhalb eines HTML-Elements zwischen Inhalt und Rand – etwa wie die Wanddicke einer Kiste. Außenabstand (Margin) ist der freie Raum außerhalb des Elements, der es von benachbarten Elementen trennt – wie der Abstand zwischen zwei Kisten auf einem Regal. Padding beeinflusst die Elementgröße (z. B. bei einer Gruppe), Margin nicht.

Wenn man sich das über die developer console anschaut, sieht man die Einstellungen, die für den Innenabstand (padding) und Außenabstand (margin) bei einem Block Theme (hier im Beispiel bei Ollie) sorgen. In der developer console (Aufruf z. B. mit F12) wird padding in grün und margin in braun dargestellt:

Wie man erkennen kann, liegt das an den folgenden Einstellungen im Template:

:root :where(.wp-block-group-is-layout-flow) > * {
    margin-block-start: var(--wp--preset--spacing--50);
    margin-block-end: 0;
}

Wenn man in der developer console die Einstellung für margin-block-start auf 0 setzt, ist das Problem behoben.

Wenn man sich das im Template anschaut, kann man sehen, dass je nach Block Theme die Gruppen bei den jeweiligen Templates entsprechend beim Innen- und Außenabstand eingestellt sind. Insofern sollte man sich in dem Fall auf jeden Fall die Einstellungen bei allen Gruppen, die den Content-Block (Inhaltsblock) enthalten, ansehen.

Hier ein Beispiel für das Seiten-Template bei dem Theme Ollie:

Man könnte natürlich über zusätzliches CSS dafür sorgen, dass dieses Problem behoben ist. Aber das ist nicht besonders schön und auch nicht so gedacht.

Bessere Möglichkeiten bestehen über die Änderung des Templates (empfohlen) oder über theme.json

Änderung direkt im Template

Beim Template wird der Inhalt-Block gruppiert und dann beim Außenabstand „Keine“ eingetragen:

Diese Änderung muss in dem Fall bei allen Templates durchgeführt werden. Nachfolgend ein Beispiel für die Änderung der Abstände bei den Gruppen. Hier habe ich die Einstellungen beim Seiten-Template geändert. Links ein Screenshot mit den Einstellungen bei Twenty Twenty-Five und den voreingestellten Abständen, rechts ein Screenshot, nachdem ich alle Abstandseinstellungen in den Gruppen auf 0 gesetzt habe.

Je nach Block Theme kann es auch notwendig sein, die Innen- und Außenabstände bei dem Inhalts-Block (Content) zusätzlich zu überprüfen.

Änderung des Abstandes in der theme.json

Alternativ kann man zwar auch in der theme.json entsprechende Änderungen vornehmen, aber entscheidend sind letztendlich die Einstellungen bei den Blöcken.

Bei Block Themes hat die lokale Block-Einstellung immer absoluten Vorrang vor Einstellungen in der theme.json. Wenn man in einem Block die Abstände, Farben oder Typografie direkt im Editor anpasst, überschreibt diese Einstellung jede theme.json-Konfiguration – egal, ob man dort später padding: 0px oder andere Werte definiert.

theme.json unter styles → blocks → core/group wirkt also nur bei Blöcken ohne lokale Einstellungen. Eine Gruppe mit lokal gesetztem Padding von 40px behält diese 40px, auch wenn theme.json global 0px vorschreibt. Erst bei neuen, unbearbeiteten Gruppen greift dann der theme.json-Wert.

Um keinen Abstand zwischen Header und Content einzustellen, müsste man in der theme.json folgende Einstellungen z. B. für den Außenabstand (margin) vornehmen:

...
"styles":{
   "blocks":{
      "core/template-part":{
         "spacing":{
            "margin":{
               "bottom":"0"
            }
         }
      },
      "core/post-content":{
         "spacing":{
            "margin":{
               "top":"0"
            }
         }
      }
   }
}
...

Zusätzlich könnte es in dem Fall notwendig sein, den Außen- und ggf. den Innenabstand (padding) auf 0px zu setzen:

  ...
  "styles": {
    "blocks": {
      "core/group": {
        "spacing": {
          "margin": {
            "top": "0px"
          }
        }
      }
    }
  }
...

Aber wie bereits erwähnt, würden diese Einstellungen nur wirken, wenn man eine neue Gruppe einfügt und dort keine individuellen Anpassungen für Innen- und Außenabstand vornimmt.

Nachfolgend noch ein Video, in dem ich die Änderung von Einstellungen bei den Blöcken eines Templates in einem Beispiel bei dem Standard Theme Twenty Twenty-Five zeige:

Video zu den Einstellungen im Template

Fazit

Auch hier zeigt sich wieder die Flexibilität von Block Themes: Änderungen in dieser Hinsicht sind recht einfach über die jeweiligen Templates bei den Gruppen möglich.

Links, Quellen und aktuelle Infos

Spacing: https://developer.wordpress.org/themes/global-settings-and-styles/settings/spacing/
Dimensions: Padding, margin and block spacing: https://learn.wordpress.org/lesson/dimensions-padding-margin-and-block-spacing/
Block supports: margin/padding controls not showing in the Block Editor when enabled at theme.json settings block level. #34766: https://github.com/WordPress/gutenberg/issues/34766
https://haurand.com/stylebook-bei-block-themes/
The Style Book: a one-stop shop for styling block themes: https://developer.wordpress.org/news/2023/06/the-style-book-a-one-stop-shop-for-styling-block-themes/
https://haurand.com/block-themes-eine-einfuehrung/

Wir freuen uns über eine Kontaktaufnahme

02722-6577725

info@haurand.com

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.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden. Hier die bisher versendeten Newsletter

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.