Skip to content

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:

PartWhereRole
Block Templatesblocktemplates tableDefine a block type and its configuration
Block Fieldsblockfields tableDefine the editable fields belonging to a template
Block Viewsresources/views/components/blocks/The Blade component that renders one block type
Blocksblocks tableActual block instances placed on a page or post
Datafieldsdatafields tableThe 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:

  1. Define a block type — register a Block Template, declare its fields, and create the matching Blade view in components/blocks/.
  2. 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.
  3. Store it — Kompass saves a row in blocks (attached to the page/post via a polymorphic blockable relationship) and the field values in datafields.
  4. Render it — on the frontend, Kompass loads the published blocks in order and maps each block's type to its blocks.<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 helpersget_field(), get_fields(), get_meta(), and wysiwyg_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).

Released under the MIT License.