PATTERN Cited by 1 source
Drag-and-drop CMS layout¶
Pattern¶
In a headless-CMS stack with modular entry-type composition, give authors a drag-and-drop UI that lets them add, remove, and reorder module references on a page — without resetting or re-uploading the modules' content.
The failure mode it's designed to eliminate¶
Legacy page-building tools often encode layout as a fixed template: once the template is chosen and content uploaded, changing the layout requires rebuilding the template, which destroys the uploaded content and forces re-upload. Zalando calls this out explicitly as a pain point of the previous editorial tooling:
"With the previous tooling, once a page was set up, the layout could not be changed without resetting it, which would cause any content uploaded to be lost, creating a lot of repeated work." (Source: sources/2022-09-28-zalando-more-editorial-content-please)
The pattern fixes this by making layout a list of references to existing module entries. Reordering the list is a pure layout operation; the module entries and their content are unaffected. Adding or removing a module is a list edit, not a content rewrite.
What the UI needs to support¶
- Module picker to add a new module of any declared type to the page.
- Reorder via drag-and-drop within the page's module list.
- Remove a module from the list without deleting the module entry (it can still be reused).
- Per-module edit — clicking a module opens its own authoring form (defined by its entry-type schema).
- Preview of the composed page.
Canonical wiki instance — Contentful at Zalando¶
Zalando's Landing Pages stack uses Contentful's reference-field support on the landing-page entry-type to hold the list of module references, and Contentful's UI provides the drag-and-drop module-list editor. Content Managers assemble pages — banners, text blocks, carousels, certificate lists — via this UI without engineering involvement.