Layout

Multi-column layout block (layout). Renders as a grid <div> containing column children from columns or a pattern like 50%|50%. Not directly editable; child columns hold block content.

Type: layout · Class: LayoutBlock

Access:

app.block.get()
app.blocks.findByEl(el)
app.blocks.create(type)

App code:

const block = app.block.get();

Plugin:

const block = this.app.block.get();

update#

Applies common fields, then optionally rebuilds columns or only refreshes column CSS classes.

When columns or pattern is set, existing columns are replaced (content is not preserved unless you pass it in columns[].children). When only column is set, the current columns stay and their class is updated.

Parameters:

• data (object) — object with the keys below
  • pattern (string) — pipe-separated column widths (e.g. '50%|50%', '33%|33%|33%'); each segment becomes one column with flex-basis (- skips an inline width)
  • columns (Array) — explicit column list; each item may include width, classname, and children (block JSON array)
  • column (string) — CSS class(es) applied to every column (overrides layout.column)
  • grid (string) — CSS class(es) on the layout root (overrides layout.grid); applied when rebuilding via pattern / columns
  • id, classname, styles, attrs, … — common block fields (see Common update)

Returns: void

// Two equal columns
block.update({ pattern: '50%|50%' });

// Three columns
block.update({ pattern: '33%|33%|33%' });

// Uneven split
block.update({ pattern: '70%|30%' });

// Rebuild with explicit columns and content
block.update({
    columns: [
        { width: '60%', children: [{ type: 'text', content: 'Left' }] },
        { width: '40%', children: [{ type: 'text', content: 'Right' }] }
    ]
});

// Change only column class (keep current structure)
block.update({ column: 'my-col' });

// Rebuild with custom grid + column classes
block.update({
    pattern: '50%|50%',
    grid: 'my-layout-grid',
    column: 'my-col'
});

// Common fields only
block.update({ classname: 'featured', id: 'hero-layout' });