Mit dem Abstandshalter-Block kann man einen Abstand zwischen zwei Blöcke setzen. Der Abstandshalter-Block ist aber leider nicht flexibel: Die Höhe ist bei allen Bildschirmbreiten gleich.

Ein Abstand von 100 Pixeln Höhe wirkt auf einem größeren Bildschirm vielleicht ganz harmonisch, auf dem Smartphone erzeugen die 100 Pixel aber ein Loch. Aus diesem Grund habe ich den Abstandshalter-Block lange Zeit nicht genutzt.

Beim Redesign unserer eigenen Website habe ich den Abstandshalter-Block dann doch mal eingesetzt. Ich brauchte eine Methode, um schnell verschiedene Abstände auszuprobieren. Sobald die Abstände feststehen, so dachte ich, würde ich sie als Margins ins Theme-CSS schreiben.

Abstände per CSS zu vergeben ist eigentlich nicht weiter schwer, aber ein bisschen umständlich ist es schon. Man muss sehr spezifisch werden (Element A hat auf der Startseite einen Abstand x, auf allen anderen Seite aber den Abstand y), man muss entscheiden, ob man mit einem Abstand unten oder oben arbeiten möchte und so weiter.

Eigentlich wäre es schon praktisch, wenn man Abstände über einen Block definieren könnte. Wichtig wäre nur, dass der Abstand keine starre Höhe hat, sondern dass sich die Höhe auf kleineren Bildschirmen anpasst.

Block-Styles für den Abstandshalter-Block

Ich habe mir über Block Styles drei Varianten für den Abstandshalter-Block gemacht. Die Varianten haben drei Größen: Small, Medium und Large. Je nachdem, wie viel „Luft“ ich im Layout brauche, wähle ich beim Bauen der Seite die passende Variante aus.

  .wp-block-spacer.is-style-large {
    height: 7vw !important;
    max-height: 7rem;
  }
  .wp-block-spacer.is-style-medium {
    height: 5vw !important;
    max-height: 5rem;
  }
  .wp-block-spacer.is-style-small {
    height: 3vw !important;
    max-height: 3rem;
  }Code-Sprache: CSS (css)

Ich habe die Höhe in vw (viewport width) definiert. 1vw entspricht 1% der Breite des Browserfensters. Je schmäler der Bildschirm wird, desto niedriger wird der Abstand. Ich habe den Elementen ausserdem noch eine max-height mitgegeben, so dass der Abstand ab einem bestimmten Punkt nicht mehr größer wird. Dafür habe ich die Einheit rem verwendet. Der maximale Abstand orientiert sich damit an der Schriftgröße. Auch eine min-height kann je nach Kontext sinnvoll sein.

Die Abstufung 7vw/5vw/3vw funktionierte gut bei meinem Projekt. Wenn du ein Design mit mehr oder weniger Weißraum hast, kann es sein, dass du andere Werte brauchst.

Nachteil: Die Controls sind weiter sichtbar

Einen Nachteil gibt es allerdings: Es ist bisher nicht möglich, die Controls für einen bestimmten Block zu deaktivieren. Das heißt, in der Editor-Ansicht kann man nach wie vor den Abstandhalter größer und kleiner ziehen bzw. die Höhe in der Sidebar verstellen.

Diese Einstellungen haben zwar keine Auswirkung auf die Darstellung, weil mein CSS aus den Block-Styles die Angaben überschreibt. Aber das ist eine unschöne und potenziell verwirrende Situation. Besser wäre es, die Einstellungen wären nicht zu sehen.

Fazit

Mit den Abstandshalter-Block-Styles lässt es sich gut arbeiten. Der Abstand passt sich bei kleineren Bildschirmbreiten an, es entstehen keine ungewollten Löcher mehr. Ein Vorteil ist auch, dass man auf diese Weise ein System von einheitlichen Abständen definieren kann.

Nachteil sind die weiterhin sichtbaren Controls. Ich hoffe, dass es irgendwann einen offiziellen Filter gibt, über den man die Controls ansprechen kann. Es gibt zwar eine Diskussion dazu, aber eine Lösung gibt es meines Wissens noch nicht.