Block Editor: „Text um Bild“ in WordPress 7.1
Im Blockeditor von WordPress (Gutenberg) lässt sich der klassische Effekt, dass Text ein Bild umfließt, weiterhin sehr einfach umsetzen. Statt ein Bild „in den Text einzufügen“ wie im alten Classic Editor, arbeitet man nun mit einzelnen Blöcken: einem Bild‑Block und einem Absatz‑Block, die gemeinsam denselben Effekt erzeugen und diese Lösung kann man noch weiter optimieren.
Bei dem Online-WordPress Meetup Bonn, Köln und dem Südsauerland am 2.9.2026 wurde das Problem angesprochen, wie man ein Verhalten aus dem Classic Editor (Text um Bild) mit dem Blockeditor nachbauen kann. Ich kann mich an eine entsprechende Anfrage im Support-Forum erinnern. Es gibt eine Lösung, die mit WordPress 7.x schon ziemlich optimal erstellt werden kann.
Im Classic Editor kann man ein Bild in den Text einfügen, der links oder rechts ausgerichtet wird und bei dem der Text automatisch um das Bild fließt. Dieses Layout ist auch im Blockeditor möglich – nur entsteht es nicht mehr innerhalb eines einzigen Editorfelds, sondern durch das Zusammenspiel einzelner Blöcke.
Text und Bild als getrennte Blöcke anlegen
Der erste Schritt besteht darin, den Beitrag ganz normal im Blockeditor zu öffnen und den gewünschten Text als Absatz anzulegen. Jeder Absatz wird automatisch als eigener Absatz‑Block gespeichert. Dort kann man wie gewohnt den Fließtext schreiben, der später neben dem Bild stehen soll.
Direkt vor diesem Absatz fügt man einen Bild‑Block ein. Das gewünschte Bild wird entweder aus der Mediathek gewählt oder neu hochgeladen. Wichtig ist, dass der Bild‑Block unmittelbar vor dem Absatz‑Block steht, dessen Text später um das Bild fließen soll.
Bild ausrichten und Text automatisch umfließen lassen
Sobald das Bild platziert ist, wird es im nächsten Schritt ausgerichtet. Ein Klick auf das Bild blendet die Werkzeugleiste direkt darüber ein. Dort stehen die Optionen für die Ausrichtung zur Verfügung – unter anderem links und rechts. Wählt man eine dieser Ausrichtungen, richtet der Blockeditor das Bild an der entsprechenden Seite aus und zieht den nachfolgenden Absatz‑Block automatisch neben das Bild.
Damit entsteht der gewünschte Effekt: Der Text beginnt rechts oder links vom Bild und fließt an der Bildkante entlang, so wie man es aus dem Classic Editor kennt. Der Absatz bleibt dabei ein eigener Block, wirkt aber im Layout wie Teil einer gemeinsamen Text‑Bild‑Einheit.
Bildgröße und Reihenfolge der Blöcke beachten
Entscheidend für ein schönes Ergebnis ist die Breite des Bildes. Wenn das Bild zu groß ist und fast die gesamte Inhaltsbreite einnimmt, kann der Text nicht sinnvoll danebenstehen und rutscht wieder unter das Bild. In diesem Fall lohnt es sich, die Bildbreite über die Block‑Einstellungen in der rechten Seitenleiste zu reduzieren oder das Bild direkt im Editor mit der Maus kleiner zu ziehen. Sobald seitlich ausreichend Platz entsteht, ordnet sich der Text wieder harmonisch neben dem Bild an.
Ebenso wichtig ist die Reihenfolge der Blöcke. Der Text, der das Bild umfließen soll, muss direkt auf den Bild‑Block folgen. Stehen andere Blöcke dazwischen – etwa Überschriften, Listen oder Trennlinien –, wird jeweils nur der erste Absatz unmittelbar neben dem Bild erscheinen, während die übrigen Inhalte darunter beginnen.
Textfragmente vermeiden
Allerdings kann es bei bestimmten Bildschirmbreiten (z. B. Smartphones) passieren, dass nur noch kurze Wörter zu sehen sind, was nicht besonders schön aussieht:
Das kann man allerdings verhindern, indem man die relativ neue Option „Ausblenden von Blöcken“ verwendet, die seit WordPress 6.9 erstmalig zur Verfügung steht. Mit WordPress 7.0 wurde diese Funktion erweitert: Es kamen gerätespezifische Sichtbarkeitsregeln hinzu, mit denen sich Blöcke pro Viewport (Desktop, Tablet, Mobil) ein- oder ausblenden lassen.
Dazu verwende ich den Bild Block mit dem gleichen Bild zwei mal: Das Bild mit einer beliebigen Ansicht verwende ich nur beim Desktop, aber evtl. nicht bei Tablets und auf jeden Fall nicht mobil. Darunter setze ich auch wieder einen Bild-Block mit dem gleichen Bild, der aber nur mobil und evtl. bei Tablets linksbündig gezeigt wird.
Weitere Option: Silbentrennung aktivieren
In einem Beitrag mit viel Text kann man zusätzlich bzw. optional noch die Silbentrennung aktivieren. Die CSS-Lösung mit hyphens: auto; ist für die meisten WordPress-Websites die beste und schlankste erste Wahl. Sie ist leichtgewichtig, wartungsarm und funktioniert gut, wenn das lang-Attribut sauber gesetzt ist und der Browser die Sprache unterstützt. Ich habe bei einigen WordPress-Instanzen auch schon mal ein entsprechendes Plugin verwendet. Das ist aber unnötig.
Hier die entsprechenden CSS-Regeln, die man unter „zusätzliches CSS“ berücksichtigen kann:
/* Silbentrennung komplett */
body {
hyphens: auto;
} /* Silbentrennung nur im Content */
.entry-content,
.wp-block-post-content {
hyphens: auto;
}
Keine Alternativen für diesen Zweck: „Medien & Text“-Block und „Classic Block“
Der Block „Medien & Text“ bietet eine feste Zwei‑Spalten‑Struktur mit einer Spalte für das Medium und einer Spalte für den Text. Er eignet sich gut für klar getrennte Text‑Bild‑Layouts, ersetzt aber den klassischen umfließenden Fließtext mit Bild nicht vollständig, weil Bild und Text hier als Spalten nebeneinander stehen und nicht Teil eines durchgehenden Absatzes sind.
Wer sich sehr nah am Verhalten des alten Editors orientieren möchte, kann außerdem den „Classic Block“ verwenden. Dieser stellt im Blockeditor einen eingebetteten Classic Editor bereit, in dem sich Text und Bild wie früher in einem einzigen Feld bearbeiten und ausrichten lassen. Diese Lösung würde ich allerdings nicht empfehlen.
Für den typischen Text‑um‑Bild‑Effekt im modernen Blockeditor ist jedoch die Kombination aus Bild‑Block, Absatz‑Block und der Ausrichtung des Bildes nach links oder rechts die empfohlene und zukunftssichere Vorgehensweise.
Fazit
Wie man an dem Beispiel sieht, kann man mit wenig Aufwand Designs erstellen, die bis dato vielleicht nur mit dem Classic Editor möglich waren. Der Blockeditor ist mittlerweile so mächtig und bietet vielfältige Lösungen für verschiedenste Szenarien an ohne dass CSS verwendet werden muss.
Links, Quellen und aktuelle Infos
- https://developer.mozilla.org/de/docs/Web/CSS/Reference/Properties/hyphens
- https://de.wordpress.org/plugins/shrinking-logo-sticky-header
- Hier eine Ansicht der Lösung auf einer Entwicklungsseite von uns:
https://space4.yd-sgs.de/text-um-bild/
Weitere Beiträge zum Thema (Block Neueste Beiträge)
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.
Du kennst unseren Newsletter noch nicht? – Hier findest du eine Übersicht über die bisher versendeten Newsletter. Wenn du keine neuen Beiträge und WordPress-News verpassen möchtest, melde dich jetzt kostenlos für unseren Newsletter an. Den Newsletter bekommst du dann einmal am Anfang des Monats.
Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
Schreibe einen Kommentar