FrameworkJavaScript

Column block: one column of a layout

A single column inside a column list. Not user-insertable on its own — columns are created and managed by the parent `column_list` block. Child blocks are nested inside the column via `contentIds`. The optional `widthRatio` controls the column’s width relative to its siblings (applied as flex-grow); omit it for equal width.

Import

TypeScript

import { Column } from '@bloklabs/core/tools';

Save Data

TypeScript

interface ColumnData {
  widthRatio?: number; // Width relative to siblings (flex-grow). Omitted = equal width.
}
// Child blocks are referenced via the block's contentIds, not stored here.

JSON

{
  "id": "column1",
  "type": "column",
  "data": {
    "widthRatio": 1.5
  },
  "contentIds": ["block1", "block2"]
}

Usage Example

TypeScript

// Column is not inserted directly — it is created by the ColumnList tool.
import { ColumnList, Column } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    column_list: { class: ColumnList },
    column: { class: Column },
  },
});