AddOn
TW GridBuilder
Beschreibung
Content / Blockbuilder für REDAXOTW GridBuilder ist ein REDAXO-AddOn mit dem Redakteure responsive Grid-Layouts mit Tailwind CSS per Drag-&-Drop erstellen können – inklusive Zellen, Spacing und Hintergrund-Einstellungen.
Das AddOn liefert einen visuellen Grid-Editor für REDAXO, dessen Frontend-Ausgabe für die Verwendung mit Tailwind CSS optimiert ist. Redakteure erstellen Zeilen und Zellen mit responsiven Spaltenaufteilungen, Abständen und Hintergründen – jeweils separat für Smartphone, Tablet und Desktop.
Die Ausgabe erfolgt mit sprechenden, kollisionsfreien CSS-Klassen und einem eigenen, konfigurierbar einbindbaren Grid-CSS. So bleibt das Layout flexibel für Redakteure und weiterhin voll kontrollierbar für Entwickler.
github.com/FriendsOfREDAXO/tw_gridbuilder
Umsetzung
Versionen
2.20.0
Release-Info — TW GridBuilder 2.20.0
Feature: Farbkontext pro Zeile und Zelle
Im Panel-Abschnitt Hintergrund gibt es für Zeilen und Zellen ein neues Feld „Farbkontext (Schrift & Links)". Es setzt auf dem Element ein data-surface="…"-Attribut (base · alt · inverse · primary · secondary).
- Das Attribut ist ein Haken für das Projekt-CSS: dort legt man einmal fest, welche Schrift-, Link- und Hover-Farben auf welchem Untergrund gelten. Damit entfällt das leidige Pflegen fester „welche bg-*-Klasse ist dunkel"-Listen, das bei jeder neuen Palette bricht.
- „Automatisch" (Default) gibt kein Attribut aus → Ausgabe identisch zu Versionen vor 2.20.0.
- Unabhängig vom bestehenden Feld „Hintergrundfarbe": bg malt den Hintergrund, data-surface steuert die Schrift.
- Backend-Struktur-Vorschau und Canvas-Meta zeigen den gesetzten Farbkontext als Tag.
Einrichtung
docs/farbkontext.md enthält Konzept, den CSS-Vertrag (--surface-fg / --surface-link / --surface-link-hover / --surface-bg) und fertiges Copy-Paste-CSS – für Tailwind v4 (@theme + color-mix, inkl. optionalem Kompat-Shim für bestehende dunkle bg-*-Flächen) und für reines CSS ohne Tailwind. Ohne solches CSS bleibt data-surface wirkungslos (kein Fehler). Wer das getaweb-base-Addon ≥ 12.4.0 nutzt, bekommt dieses CSS bereits als theme-tokens.css mitgeliefert.
Kompatibilität
- Neues Feld surface, Default '' → bestehendes GridBuilder-JSON rendert byte-identisch.
- assets/tw-gridbuilder.js: makeRow/makeCell/migrateRow/migrateCell/serialize additiv erweitert.
- Modul-Sync nötig: module/output.php und module/input.php in die Moduldefinition „Standard (TW GridBuilder)" übernehmen (Code ersetzen, Modul nicht neu anlegen). Slice-Inhalte und REX_VALUE[1] bleiben unverändert.
- Nach dem Ergänzen der CSS-Regeln: CSS-Rebuild des Themes.
2.19.0
TW GridBuilder 2.19.0 – Responsive 6-Spalten-Zeilen
Eine Zeile mit sechs gleich breiten Spalten (je 2/12) sprang bisher unter 768 px auf eine Spalte und ab 768 px direkt auf alle sechs nebeneinander – auf Tablets und kleinen Notebooks standen dadurch sechs Kacheln stark gequetscht in einer Reihe.
Ab dieser Version staffelt sich der Umbruch:
< 640 px → 1 Spalte
640–767 px → 2 Spalten
768–1279 px → 3 Spalten
ab 1280 px → unverändert 6 Spalten
Das greift automatisch für jede gleichmäßige 6er-Zeile – kein neues Feld, keine Umstellung bestehender Inhalte. Zeilen mit „Spalten-Umbruch verzögern" behalten ihr Verhalten. Wer die Staffelung auf andere Zeilen (auch mit ungleichen Spalten) anwenden will, trägt die CSS-Klasse twgb-grid-2-3-6 in den Zeilen-Einstellungen ein.
Hinweis zur Kompatibilität: Bestehende gleichmäßige 6-Spalten-Zeilen ändern ihr Layout im Bereich 640–1279 px (2 bzw. 3 statt 6 nebeneinander). Andere Spaltenanzahlen und ungleiche Spaltenbreiten sind nicht betroffen. Es ist eine reine CSS-Änderung – ein CSS-Rebuild des Themes ist nötig, ein Modul-Sync nicht.
2.18.3
Fix:
Wurde in einer Spalte ein Modul über die Pfeil-Buttons (▲/▼) umsortiert, während ein anderes Modul-Formular geöffnet war, konnte der Inhalt eines Moduls beim nächsten Klick oder bei „Übernehmen" gelöscht werden.
Ursache: moveSlot() tauschte die Reihenfolge, ohne vorher die offenen Formularwerte zu sichern, und der aktive Editor zeigte danach auf einen anderen Slot als das noch im DOM stehende Formular. Der folgende collectFromDom()-Aufruf fand keine passenden Felder mehr und überschrieb die Modulwerte mit einem leeren Objekt.
moveSlot() sichert jetzt zuerst die Formularwerte und lässt den Editor dem verschobenen Slot-Objekt folgen statt der Array-Position.
Kompatibilität
Vollständig abwärtskompatibel – reine Backend-JS-Änderung. Keine Änderung am gespeicherten GridBuilder-JSON, an module/input.php, module/output.php oder am CSS. Kein Modul-Sync und kein CSS-Rebuild erforderlich.
2.18.2
Version 2.18.2 verbessert die Fehlerdiagnose bei eingebetteten Modulen. Tritt während der Ausgabe innerhalb einer GridBuilder-Zelle eine Exception auf, wird sie nun im REDAXO-Systemlog erfasst; technische Fehlerdetails bleiben im Frontend weiterhin verborgen.
2.18.1
Behebt einen Overflow-Bug bei Zeilen mit größerem Spalten-Abstand auf schmalen Viewports und ergänzt eine neue Zeilen-Einstellung, um den Wechsel von gestapeltem zu spaltigem Layout gezielt zu verzögern.
Fix: Zeilen mit gap-8/gap-12 etc. ragten auf schmalen Bildschirmen über den Rand hinaus, weil die Mobile-Regel nur die Zellen, nicht aber das grid-template-columns der Zeile selbst zurücksetzte (Phantom-Gaps zwischen 12 leeren Spalten).
Feature: Neuer Abschnitt „Grid-Einstellungen" im Zeilen-Panel — bündelt „Spaltenreihenfolge auf dem Smartphone umkehren" und „Trennlinie zwischen den Spalten", plus zwei neue Schalter unter „Spalten-Umbruch verzögern": Spalten erscheinen wahlweise erst ab 1024px statt 768px, oder erst ab 1280px statt 768px — mit fester Obergrenze bei 1280px, damit nie ein dauerhaft einspaltiges Layout entsteht.
Vollständig abwärtskompatibel, keine Datenmigration nötig.
2.15.0
Bei den Einstellungen zu den Zeilen gibt es jetzt unter „Ecken & Effekte" den Punkt „Trennlinie zwischen den Spalten" aktivieren
2.14.0
TW GridBuilder 2.14.0
Diese Version führt den dokumentierten $twgbContext für eingebettete Module ein.
Damit können Modul-Ausgaben zuverlässig auf den aktuellen GridBuilder-Kontext zugreifen, ohne von $this oder einer nicht vorhandenen eigenen REX_SLICE_ID abhängig zu sein.
Neuer $twgbContext
In eingebetteten Modulausgaben stehen jetzt folgende Informationen zur Verfügung:
parent_slice_idarticle_idclang_idctype_idrow_idcell_idslot_idmodule_id
Der Kontext ist im Frontend, in der Backend-Ausgabe sowie in den serverseitigen und per AJAX geladenen Vorschauen verfügbar.
2.13.5
- MForm-Repeater vor der GridBuilder-Serialisierung synchronisiert
- Link- und Media-Werte in Repeatern zuverlässig übernommen
- Abgesicherte Repeater-Serialisierung ergänzt
- Aktualisierte Backend-Assets werden sicher geladen
2.13.4
2.13.3-2.13.4
Dieses Release schärft die Release-Dokumentation, konsolidiert die Konfigurationsführung des Standardmoduls und verbessert die Kompatibilität mit dem aktuellen Base-Workflow.
2.13.3
Dieses Release schärft die Release-Dokumentation, konsolidiert die Konfigurationsführung des Standardmoduls und verbessert die Kompatibilität mit dem aktuellen Base-Workflow.
2.13.1
2.12.2
2.12.2
2.11.1
2.11.1
2.8.1
2.8.1
2.3.4
2.3.4
2.1.6
Github Workflow Test
2.1.5
Bugfixes