SVG-Wellen als flexible Übergänge in WordPress erstellen
Farbige Inhaltsbereiche lassen sich mit einer Wellenform sichtbar gliedern. Der Wellen-Grafik-Block macht diese Form im WordPress-Editor direkt anpassbar.
Farbflächen geben einer Seite Struktur. Eine Wellenform markiert die Grenze zwischen zwei Bereichen und bringt Bewegung in das Layout. Damit sie zu unterschiedlichen Seiten passt, soll sie sich an Farben, Ausrichtung und verfügbare Breite anpassen lassen.
Dafür haben wir den Gutenberg-Block «Wellen-Grafik» entwickelt. Er erzeugt eine SVG-Welle über die gesamte Breite eines Inhaltsbereichs. Die Redaktion legt Farbe, Hintergrund und Richtung der Welle direkt in der Block-Seitenleiste fest und sieht das Ergebnis unmittelbar im Editor.
Eine Welle verbindet zwei Farbflächen
Der Block arbeitet mit zwei gestalterischen Ebenen: der Wellenfläche und ihrem Hintergrund. Beide Farben lassen sich getrennt wählen. So kann die Welle beispielsweise die Farbe des folgenden Bereichs aufnehmen, während der Hintergrund den vorherigen Bereich weiterführt.
Standardmässig erscheint die Welle schwarz auf transparentem Hintergrund. Sobald die Redaktion eine Hintergrundfarbe auswählt, ergänzt die SVG ein farbiges Rechteck hinter der Wellenform. Aus diesen beiden Werten entsteht eine Wellenkante, die sich in das Farbsystem der jeweiligen Seite einfügt.
Farbe und Richtung im Editor einstellen
Die Block-Seitenleiste bündelt die Einstellungen für die Wellen-Grafik. Zwei Schaltflächen spiegeln die Wellenform horizontal oder vertikal. Die horizontale Spiegelung verlagert den Wellenverlauf auf die andere Seite, die vertikale Spiegelung wechselt zwischen oberer und unterer Farbfläche.
Beide Spiegelungen lassen sich kombinieren. Dadurch entstehen aus derselben Grundform vier Varianten, die den jeweiligen Seitenaufbau unterstützen. Die gewählte Ausrichtung wird als Blockattribut gespeichert und beim Rendern der SVG in die entsprechende CSS-Klasse übernommen.
Vorschau und veröffentlichte Seite verwenden dieselbe SVG
Die Redaktion soll im Editor sehen, wie sich eine Änderung auf die Welle auswirkt. Deshalb erzeugt ServerSideRender die SVG direkt aus den aktuellen Blockattributen. Farbe und Spiegelung erscheinen im Editor in derselben Struktur wie auf der veröffentlichten Seite.
Ein PHP-Render-Callback bereitet die gespeicherten Attribute auf, erzeugt die benötigten CSS-Klassen und setzt Farben sowie SVG-Pfad zusammen. Die zentrale Renderlogik liefert damit für Editor und Frontend dieselbe Wellen-Grafik.
Die Welle an unterschiedliche Breiten anpassen
Eine Wellen-Grafik soll auf breiten und schmalen Ansichten dieselbe Aufgabe erfüllen. Die SVG besitzt dafür eine feste viewBox und skaliert mit preserveAspectRatio="none" auf die verfügbare Breite des Containers. Der Block unterstützt die volle Ausrichtung im WordPress-Layout.
Für Teaser-Cover enthält das Stylesheet zusätzlich abgestufte Höhen für verschiedene Bildschirmbreiten. Eine kleine Überlappung an den Kanten verbindet die angrenzenden Farbflächen bündig und erhält die Wellenkante auch bei unterschiedlichen Grössen.
Dekorative SVG für assistive Technologien auszeichnen
Die Welle dient der gestalterischen Gliederung. Mit aria-hidden="true" und focusable="false" richten sich assistive Technologien und die Tastatursteuerung auf die inhaltlichen und interaktiven Elemente der Seite. Die Lesereihenfolge bleibt auf die Inhalte der angrenzenden Blöcke ausgerichtet.
Ergebnis
Farbige Bereiche mit einer SVG-Welle gliedern
Der Wellen-Grafik-Block verbindet eine gestalterische Wellenkante mit einer nachvollziehbaren Pflege im WordPress-Editor. Farbe, Ausrichtung, Skalierung und Ausgabe greifen dabei in einer gemeinsamen Blocklösung zusammen.
Farbe und Richtung
Der Block steuert Wellen- und Hintergrundfarbe sowie die horizontale und vertikale Spiegelung direkt in der Seitenleiste.
Editor und Frontend
ServerSideRender zeigt die gewählte Welle im Editor. Ein PHP-Render-Callback erzeugt dieselbe SVG für die veröffentlichte Seite.
Grafik skalieren
Die vollbreite SVG folgt der verfügbaren Breite. Responsive Höhen, eine kleine Überlappung und die dekorative Auszeichnung unterstützen Teaser-Cover.