Skip to content

Content sections ​

Pro

Content sections lets editors build a page from sections of different kinds. You define layouts such as "Hero", "Quote", "Gallery" and "Call to action", each with its own fields. Editors then add sections in any order, choosing a layout for each one.

Use it for flexible page bodies. When every row has the same fields, a Repeater is simpler.

Layouts ​

Each layout has:

  • a label, shown to editors, and a key, used to identify it in templates
  • its own fields
  • optional minimum and maximum rows, so a page can have at most one Hero, for example
  • an optional dynamic label taken from one of its fields

Layout keys must be unique within the field, and _layout and _layout_label are reserved. Field keys only need to be unique within their layout, so a "Hero" and a "Quote" can both have a heading.

The field itself also has Minimum rows, Maximum rows and an Add button label, such as "Add section".

Removing a layout ​

If you delete a layout that entries already use, those sections aren't deleted. They stay on the entry, shown as orphans, and the entry can't be saved until the editor removes them or you restore the layout. Their values stay in the database either way.

Displaying sections ​

In the block editor, a data loop over the field can show a different design for each layout, and VX can generate a starting template with one block group per layout. In Bricks, loop over the field with a query loop.

Technical details for LLMs
  • Type key: content_sections (Pro). Settings: layouts ([ { key (≤ 64, unique, not _layout/_layout_label), label (≤ 200), dynamic_label, min_rows, max_rows, fields } ]), min_rows, max_rows, button_label (≤ 100). No column setting.
  • Stored: JSON array of rows { id, layout, fields }.
  • REST read: [ { id, layout, layout_label, fields } ]; write [ { layout, fields } ] (layout_label ignored). Read layout before fields: the same key can mean different things in different layouts. An unknown layout on write is a hard error; a stored row whose layout was deleted reads with an empty layout_label and no fields.
  • A Clone inside a layout must use display: group.

Documentation for the VX Framework.