Block System
The Block System is the heart of Kompass. Instead of editing raw HTML or a single rich-text field, content is composed from reusable blocks — self-contained sections like a hero, a gallery, a card grid, or a call-to-action. Editors arrange them visually; developers define them with the standard Laravel and Blade patterns they already know.
The mental model
A page or post is just an ordered list of blocks. Each block is an instance of a block type, and every block type is made of two things:
- A Blade view that renders the markup.
- A set of fields that editors fill in (text, image, link, …).
Editors never see code — they drag blocks into place and fill the fields in the Block Builder. Developers add new block types without ever touching the page or post templates, because the frontend resolves each block to its component dynamically.
The pieces
The system is built from four database tables plus your Blade views:
| Part | Where | Role |
|---|---|---|
| Block Templates | blocktemplates table | Define a block type and its configuration |
| Block Fields | blockfields table | Define the editable fields belonging to a template |
| Block Views | resources/views/components/blocks/ | The Blade component that renders one block type |
| Blocks | blocks table | Actual block instances placed on a page or post |
| Datafields | datafields table | The stored field values for each block instance |
A block type is the blueprint (template + fields + view). A block is one placement of that blueprint on a specific page or post, with its own saved values.
The lifecycle
From defining a block type to seeing it on the page:
- Define a block type — register a Block Template, declare its fields, and create the matching Blade view in
components/blocks/. - Add and fill it — in the Block Builder, an editor drops the block onto a page or post and fills its fields. Drag-and-drop sets the order; each block also carries layout, CSS-class, and anchor settings.
- Store it — Kompass saves a row in
blocks(attached to the page/post via a polymorphicblockablerelationship) and the field values indatafields. - Render it — on the frontend, Kompass loads the published blocks in order and maps each block's
typeto itsblocks.<type>Blade component. See Blocks in Pages & Posts.
Key capabilities
- Visual editing — drag-and-drop ordering, inline field editing, live block settings.
- Nesting — Group blocks act as layout containers that hold other blocks in a configurable grid.
- Per-block layout — width (
fullpage/popout/content), grid columns, CSS class, and an anchor ID, all stored as block meta. - Draft & published status — unpublished blocks stay hidden on the frontend.
- Field helpers —
get_field(),get_fields(),get_meta(), andwysiwyg_blocks()give your Blade views clean access to a block's data. - Polymorphic storage — the same block engine powers both Pages and Posts (and your own models, if you want).