Working with Blocks Beyond the Editor
Introduction to the topic. Reusable blocks let editors build flexible pages, but Wagtail renders them as plain HTML with no link back to the StreamField structure that produced them. On a block-heavy page, editors can spot an issue in context and still have to search the admin for the right field or leave the page to discuss it. This talk examines how rendered blocks can retain enough identity to support those tasks.
Structure of the talk. First, I will demonstrate how wagtail-inspect identifies a block in the preview/live pages and jumps directly to its StreamField panel within the Editor. Next, I will show a live-page comments proof of concept that places Wagtail’s native comments on pages. I will then compare the implementations, their failure modes, and the techniques they share.
How I will approach the subject. I will follow a block UUID from Wagtail’s data model into the rendered DOM and back. For inspection, it returns to the matching editor panel. For comments, it checks against the latest usable draft, maps to a valid field content path, and stores it in Wagtail’s native Comment model. Failed approaches show where the difficulty lies: unsaved previews can have different UUIDs from stored revisions, live pages can diverge from drafts, templates can bypass normal block rendering, wrappers can break layouts, and the preview iframe and user-bar Shadow DOM require separate integrations.
What attendees will learn. Attendees will learn how to annotate rendered blocks without changing their layout, match blocks across preview, live, and draft states, and attach contextual tools to Wagtail’s existing editor and comment workflows. More broadly, developers should leave ready to observe how editors and site maintainers move between the admin and the rendered site, identify avoidable friction, and extend Wagtail to remove it while preserving its native workflows.
About Luan Fonseca
With 15+ years of experience, I specialize in building scalable web applications with Django and React.js, leading cross-functional teams, and delivering high-quality products while managing technical debt.
