Column Layout Input

Define a responsive grid layout and set the width of columns.

{
  input: {
    type: 'columnlayout', 
    viewports: [
      { id: 'small', label: 'Mobile' },
      { id: 'medium', label: 'Table' },
      { id: 'large', label: 'Desktop' }
    ]
  }
}

Input Options

Option	Values	Default	Description
viewports	Viewport[]	-	Viewports to handle
columns	number	12	The maximum number of columns
allowReverse	boolean	true	Whether to allow reversing the order of columns
columnSizeSource	'value' | 'children'	'children'	Whether the column sizes are determined by the input's value or by the child elements

with

interface Viewport {
  // Unique identifier of the viewport
  id: string

  // Human readable label of the viewport
  label: string

  // Number of columns which an item spans by default in the viewport
  // Defaults to the maximum number of columns
  defaultSize?: number
}

Retrieving Values

The input's value is an object with an order property whose value is "default" or "reversed".

if ($node->properties->columnLayoutProperty->order === 'reversed') {
   // ...
};

By default, the actual column widths are stored as a { [id: string]: number } object in the _columns property of each of the layout's child elements:

foreach ($node->children as $child) {
   echo $child->properties->_columns->sm; // e.g. 6
};

If columnSizeSource is set to 'value', the column sizes are stored as an array in the columns property of the input's value:

$node->properties->columnLayoutProperty->columns->sm; // e.g. [4, 4, 4]

Using Isolated Layouts v3.29

Historically (and therefore by default), this input type stores its value on the node's children. However, if columnSizeSource is set to 'value', column sizes are isolated to the input's value (as it is with most other input types).

Since child nodes are not considered in isolated mode, the number of columns must be defined on the property itself via the defaultValue option:

{
  input: {
    type: 'columnlayout',
    viewports: [
      { id: 'small', label: 'Mobile' },
      { id: 'medium', label: 'Table' },
      { id: 'large', label: 'Desktop' }
    ]
  },

  // Option 1: Use an array, applied to all viewports
  defaultValue: [4, 4, 4],

  // Option 2: Use an object to define columns per viewport
  // Intermediate viewports may be omitted and are automatically filled
  defaultValue: {
    small: [12, 12, 12],
    large: [4, 4, 4],
  },
}