Seminar Wagtail: StreamField und individuelle Blocks

Das Seminar entwickelt ein wartbares Blocksystem für flexible redaktionelle Seiten und behandelt Modellierung, Darstellung, Validierung, Migration, Vorschau und Tests.

Inhaltsübersicht

1. Blockstrategie und redaktionelle Leitplanken
2. Grundlegende und strukturierte Blocks
3. Eigene Blockklassen und Validierung
4. Templates und Frontend-Komponenten
5. Bilder, Seitenreferenzen und komplexe Beziehungen
6. Migration und Evolution bestehender Streams
7. Vorschau, Tests und Dokumentation

Seminarprofil

Die Inhalte verbinden fachliche Einordnung, geführte Demonstrationen und eigenständige Übungen. Jeder Themenblock baut auf den vorherigen Arbeitsschritten auf; Konfigurationen und Implementierungen werden unmittelbar anhand definierter Qualitätskriterien überprüft. Zwei Tage sind erforderlich, weil Blockdesign, Verschachtelung, Templates, Medien, Validierung, Migration und automatisierte Tests an einer konsistenten Komponentenbibliothek umgesetzt werden.

Zielgruppe und Voraussetzungen

Zielgruppe: Wagtail-Entwickler, Frontend-Entwickler und technische Content-Architekten.

Voraussetzungen: Python-, Django- und Wagtail-Grundkenntnisse sowie Erfahrung mit Templates.

Seminarinhalte

Kapitel 1: Blockstrategie und redaktionelle Leitplanken

Das Kapitel ordnet Blockstrategie und redaktionelle Leitplanken in den Gesamtzusammenhang ein und überführt die vier Teilthemen in einen nachvollziehbaren Arbeitsablauf.

Inhaltsverzeichnis des Kapitels: 1. Inhaltsmuster, Varianten und erlaubte Kombinationen; 2. Granularität zwischen Feld, StructBlock und Seitenmodell; 3. Benennung, Hilfetexte und visuelle Orientierung; 4. Regeln für Wiederverwendung und kontrollierte Flexibilität

1. Schritt 1: Inhaltsmuster, Varianten und erlaubte Kombinationen fachlich und technisch einordnen, Abhängigkeiten erfassen und eindeutige Akzeptanzkriterien festlegen.
2. Schritt 2: Granularität zwischen Feld, StructBlock und Seitenmodell in einem nachvollziehbaren Projektaufbau implementieren und nach jedem Teilschritt funktional prüfen.
3. Schritt 3: Benennung, Hilfetexte und visuelle Orientierung in den Gesamtprozess integrieren, typische Fehlerbilder gezielt auslösen und systematisch beheben.
4. Schritt 4: Regeln für Wiederverwendung und kontrollierte Flexibilität durch automatisierte Tests, Review-Regeln und wartbare Projektdokumentation stabilisieren.

Kapitel 2: Grundlegende und strukturierte Blocks

Das Kapitel ordnet Grundlegende und strukturierte Blocks in den Gesamtzusammenhang ein und überführt die vier Teilthemen in einen nachvollziehbaren Arbeitsablauf.

Inhaltsverzeichnis des Kapitels: 1. Text-, Auswahl-, Seiten- und Medienfelder; 2. StructBlock für zusammengehörige Werte; 3. ListBlock und StreamBlock für wiederholbare Strukturen; 4. Defaults, required und verständliche Beschriftungen

1. Schritt 1: Text-, Auswahl-, Seiten- und Medienfelder fachlich und technisch einordnen, Abhängigkeiten erfassen und eindeutige Akzeptanzkriterien festlegen.
2. Schritt 2: StructBlock für zusammengehörige Werte in einem nachvollziehbaren Projektaufbau implementieren und nach jedem Teilschritt funktional prüfen.
3. Schritt 3: ListBlock und StreamBlock für wiederholbare Strukturen in den Gesamtprozess integrieren, typische Fehlerbilder gezielt auslösen und systematisch beheben.
4. Schritt 4: Defaults, required und verständliche Beschriftungen durch automatisierte Tests, Review-Regeln und wartbare Projektdokumentation stabilisieren.

Kapitel 3: Eigene Blockklassen und Validierung

Das Kapitel ordnet Eigene Blockklassen und Validierung in den Gesamtzusammenhang ein und überführt die vier Teilthemen in einen nachvollziehbaren Arbeitsablauf.

Inhaltsverzeichnis des Kapitels: 1. Abgeleitete Blocks und wiederverwendbare Basisklassen; 2. clean-Methoden und blockübergreifende Regeln; 3. Normalisierung und robuste Standardwerte; 4. Fehlermeldungen mit präzisem redaktionellem Bezug

1. Schritt 1: Abgeleitete Blocks und wiederverwendbare Basisklassen fachlich und technisch einordnen, Abhängigkeiten erfassen und eindeutige Akzeptanzkriterien festlegen.
2. Schritt 2: clean-Methoden und blockübergreifende Regeln in einem nachvollziehbaren Projektaufbau implementieren und nach jedem Teilschritt funktional prüfen.
3. Schritt 3: Normalisierung und robuste Standardwerte in den Gesamtprozess integrieren, typische Fehlerbilder gezielt auslösen und systematisch beheben.
4. Schritt 4: Fehlermeldungen mit präzisem redaktionellem Bezug durch automatisierte Tests, Review-Regeln und wartbare Projektdokumentation stabilisieren.

Kapitel 4: Templates und Frontend-Komponenten

Das Kapitel ordnet Templates und Frontend-Komponenten in den Gesamtzusammenhang ein und überführt die vier Teilthemen in einen nachvollziehbaren Arbeitsablauf.

Inhaltsverzeichnis des Kapitels: 1. Block-Templates und include_block; 2. Kontext, Varianten und CSS-Klassen; 3. Komponenten-Mapping und Design-System-Anbindung; 4. Fallback-Darstellung für unbekannte oder veraltete Varianten

1. Schritt 1: Block-Templates und include_block fachlich und technisch einordnen, Abhängigkeiten erfassen und eindeutige Akzeptanzkriterien festlegen.
2. Schritt 2: Kontext, Varianten und CSS-Klassen in einem nachvollziehbaren Projektaufbau implementieren und nach jedem Teilschritt funktional prüfen.
3. Schritt 3: Komponenten-Mapping und Design-System-Anbindung in den Gesamtprozess integrieren, typische Fehlerbilder gezielt auslösen und systematisch beheben.
4. Schritt 4: Fallback-Darstellung für unbekannte oder veraltete Varianten durch automatisierte Tests, Review-Regeln und wartbare Projektdokumentation stabilisieren.

Kapitel 5: Bilder, Seitenreferenzen und komplexe Beziehungen

Das Kapitel ordnet Bilder, Seitenreferenzen und komplexe Beziehungen in den Gesamtzusammenhang ein und überführt die vier Teilthemen in einen nachvollziehbaren Arbeitsablauf.

Inhaltsverzeichnis des Kapitels: 1. ImageChooserBlock und responsive Renditions; 2. PageChooserBlock und zulässige Seitentypen; 3. SnippetChooserBlock und strukturierte Verknüpfungen; 4. Verhalten bei Verschiebung, Löschung und Übersetzung

1. Schritt 1: ImageChooserBlock und responsive Renditions fachlich und technisch einordnen, Abhängigkeiten erfassen und eindeutige Akzeptanzkriterien festlegen.
2. Schritt 2: PageChooserBlock und zulässige Seitentypen in einem nachvollziehbaren Projektaufbau implementieren und nach jedem Teilschritt funktional prüfen.
3. Schritt 3: SnippetChooserBlock und strukturierte Verknüpfungen in den Gesamtprozess integrieren, typische Fehlerbilder gezielt auslösen und systematisch beheben.
4. Schritt 4: Verhalten bei Verschiebung, Löschung und Übersetzung durch automatisierte Tests, Review-Regeln und wartbare Projektdokumentation stabilisieren.

Kapitel 6: Migration und Evolution bestehender Streams

Das Kapitel ordnet Migration und Evolution bestehender Streams in den Gesamtzusammenhang ein und überführt die vier Teilthemen in einen nachvollziehbaren Arbeitsablauf.

Inhaltsverzeichnis des Kapitels: 1. Umbenennen und Verschieben von Blocktypen; 2. Datenmigrationen für vorhandene StreamField-Werte; 3. Kompatible Einführungs- und Deprecation-Phasen; 4. Sicherung, Stichprobe und Rückfallstrategie

1. Schritt 1: Umbenennen und Verschieben von Blocktypen fachlich und technisch einordnen, Abhängigkeiten erfassen und eindeutige Akzeptanzkriterien festlegen.
2. Schritt 2: Datenmigrationen für vorhandene StreamField-Werte in einem nachvollziehbaren Projektaufbau implementieren und nach jedem Teilschritt funktional prüfen.
3. Schritt 3: Kompatible Einführungs- und Deprecation-Phasen in den Gesamtprozess integrieren, typische Fehlerbilder gezielt auslösen und systematisch beheben.
4. Schritt 4: Sicherung, Stichprobe und Rückfallstrategie durch automatisierte Tests, Review-Regeln und wartbare Projektdokumentation stabilisieren.

Kapitel 7: Vorschau, Tests und Dokumentation

Das Kapitel ordnet Vorschau, Tests und Dokumentation in den Gesamtzusammenhang ein und überführt die vier Teilthemen in einen nachvollziehbaren Arbeitsablauf.

Inhaltsverzeichnis des Kapitels: 1. Blockvorschau und realistische Beispieldaten; 2. Unit-Tests für Validierung und Rendering; 3. Snapshot- oder Strukturtests für API-Ausgabe; 4. Blockkatalog, Nutzungsregeln und Review-Checkliste

1. Schritt 1: Blockvorschau und realistische Beispieldaten fachlich und technisch einordnen, Abhängigkeiten erfassen und eindeutige Akzeptanzkriterien festlegen.
2. Schritt 2: Unit-Tests für Validierung und Rendering in einem nachvollziehbaren Projektaufbau implementieren und nach jedem Teilschritt funktional prüfen.
3. Schritt 3: Snapshot- oder Strukturtests für API-Ausgabe in den Gesamtprozess integrieren, typische Fehlerbilder gezielt auslösen und systematisch beheben.
4. Schritt 4: Blockkatalog, Nutzungsregeln und Review-Checkliste durch automatisierte Tests, Review-Regeln und wartbare Projektdokumentation stabilisieren.