Block sitzt online anders als im Editor: Abstände, Breiten und Ausrichtung im Block-Editor verstehen

Ein Bild oder ein Spaltenblock wirkt im Editor genau richtig, auf der veröffentlichten Seite aber zu schmal, zu breit oder plötzlich nicht mehr zentriert. Dieses Problem lande regelmäßig in meinem Postfach, und die Ursache liegt fast nie an einem defekten Theme, sondern an einem Zusammenspiel aus drei Einstellungen, die der Block-Editor an unterschiedlichen Stellen versteckt: Ausrichtung, Layoutvorgaben aus dem Theme und die Gruppe, in der ein Block steckt.

Das Problem, wie Kunden es beschreiben

Typische Meldungen klingen so: „Das Bild war im Editor über die ganze Breite, jetzt ist es schmal wie Text.“ Oder umgekehrt: ein Zitat, das breiter wirkt als der restliche Absatztext, obwohl niemand bewusst etwas umgestellt hat. Manchmal verschiebt sich auch nur der Abstand zwischen zwei Blöcken sichtbar, sobald die Seite veröffentlicht statt nur im Entwurf betrachtet wird.

Woran es liegt

Ich prüfe bei einer solchen Meldung in dieser Reihenfolge:

• Die Ausrichtung des Blocks. Jeder Block kann in der Werkzeugleiste auf „Inhaltsbreite“, „Breit“ oder „Volle Breite“ stehen. Wird ein Block kopiert oder per Vorlage eingefügt, wandert diese Einstellung mit – und passt dann nicht mehr zur neuen Umgebung.
• Die Werte aus theme.json. Jedes Block-Theme legt unter settings.layout.contentSize und wideSize fest, wie breit „normal“ und „breit“ tatsächlich sind. Nach einem Theme-Wechsel oder -Update ändern sich diese Zahlen, ohne dass am Inhalt selbst etwas angefasst wurde.
• Eine umschließende Gruppe mit eigenem Layout. Steckt ein Block in einem Gruppenblock, der selbst auf „eingeschränktes Layout“ oder eine feste Breite gestellt ist, gilt dessen Breite zusätzlich zur eigenen Ausrichtung des Blocks. Zwei plausible Einstellungen addieren sich dann zu einem unerwarteten Ergebnis.
• Globale Abstände gegenüber Block-eigenen Werten. Unter „Design → Stile“ lassen sich Standardabstände für ganze Blockarten setzen. Ein einzelner Block, der im Editor einen eigenen Abstandswert trägt, überschreibt diesen globalen Wert nur dort – an anderer Stelle bleibt der globale Wert bestehen und sorgt für sichtbar ungleiche Abstände auf derselben Seite.

Schritt für Schritt zur Lösung

1. Den betroffenen Block anklicken und in der Werkzeugleiste die Ausrichtung prüfen. Steht sie auf „Breit“ oder „Voll“, obwohl „Inhaltsbreite“ gemeint war, einmal auf „Inhaltsbreite“ zurückstellen und neu entscheiden.
2. Mit den Pfeiltasten in der Listenansicht (Symbol oben links im Editor) eine Ebene nach oben gehen und prüfen, ob eine Gruppe den Block umschließt. Der Reiter „Layout“ in den Blockeinstellungen der Gruppe zeigt, ob dort „eingeschränkt“ oder „durchgängig“ gewählt ist.
3. Stimmen Ausrichtung und Gruppe, aber die Breite wirkt trotzdem falsch: in der Seitenleiste „Design → Editor → Stile → Layout“ die aktuell gültigen Werte für Inhalts- und breite Breite ansehen. Diese Werte kommen aus theme.json und lassen sich dort auch für die laufende Website anpassen, falls das Theme es zulässt.
4. Bei ungleichen Abständen: den Block markieren, in den Blockeinstellungen unter „Abstand“ nachsehen, ob dort ein eigener Wert gesetzt ist. Ist das Feld leer, gilt der globale Wert aus den Stilen – dann dort ansetzen statt am einzelnen Block.
5. Nach jeder Änderung die Seite als Entwurf im neuen Tab ansehen, nicht nur im Editor-Vorschaufenster. Der Editor rendert Layout-Container teils anders als die veröffentlichte Seite, besonders bei verschachtelten Gruppen.

Was danach zu prüfen ist

Einmal gelöst, lohnt ein zweiter Blick auf die Mobilansicht: Eine Breiten-Einstellung, die am Desktop passt, kann auf dem Smartphone wieder zu Rand an Rand springen, weil manche Themes „Breit“ und „Voll“ auf kleinen Bildschirmen gleich behandeln. Und wenn der Fehler auf mehreren Seiten gleichzeitig auftaucht, steckt die Ursache mit hoher Wahrscheinlichkeit in einem Vorlagen-Teil oder den globalen Stilen, nicht im einzelnen Beitrag.

Wie man es künftig vermeidet

Wer Inhalte aus einer Vorlage kopiert, sollte Ausrichtung und Abstand des neuen Blocks immer einmal bewusst bestätigen, statt sie einfach zu übernehmen. Bei WordPress-Projekten lege ich außerdem fest, wie viele Verschachtelungsebenen aus Gruppenblöcken eine Seite verträgt – mehr als zwei ineinandergesteckte Layout-Gruppen machen Breitenprobleme fast unvermeidlich und erschweren die Fehlersuche erheblich. Eine saubere, flache Blockstruktur ist am Ende schneller gepflegt als ein verschachteltes Konstrukt, das bei jeder Änderung neue Überraschungen liefert. Grundlegende Entscheidungen zu Aufbau und Technik einer Website bespreche ich dazu passend im Beitrag Webdesign aus einer Hand.

Kurz beantwortet

Warum sieht ein Block im Editor anders aus als live auf der Seite?

Meist, weil Ausrichtung, eine umschließende Gruppe und die Breitenwerte aus theme.json zusammenwirken und der Editor Layout-Container nicht immer identisch zur veröffentlichten Seite darstellt.

Wo stelle ich die Standardbreite für normale Blöcke ein?

Unter „Design → Editor → Stile → Layout“, sofern das Theme diese Einstellung freigibt – dahinter liegen die Werte contentSize und wideSize aus theme.json.

Wie viele Gruppenblöcke sollte ich ineinanderstecken?

So wenige wie möglich. Mehr als zwei verschachtelte Layout-Gruppen erschweren die Fehlersuche und führen regelmäßig zu unerwarteten Breiten und Abständen.

Sie möchten das Thema für Ihr Unternehmen umsetzen? Mehr zu unseren Leistungen: Webdesign, SEO, GEO & AEO.