Editor Setup

A component's settings form in the page builder is built from its $editSetup property: an array of fields, each with a control type, a label, a default value and so on. Some control types need more parameters; a select, for example, needs options.

Each saved value lands in the block's data and reaches the view as a variable of the same name.

Available Control Types

Each control type is a view in the package's resources/views/components/pagebuilder/widgets/. Textstem ships these:

Control type Use
text, textarea Plain text
richtext, richtexteditor, htmleditor, markdown Formatted text editors
html, raw_html Raw HTML
select, radiostack A choice from options (see Select)
select-template Picks one of the component's views; options are filled in for you
select-withlookup A select with search
yesno On/off
number, color, datetime Typed values
image, thumbnail One image. image takes 'aspect' => 'video', 'square' or a ratio such as '4/3'
image_collection, asset_collection, asset_collector, asset_selector Assets from the media library (see below)
collection An ordered list of posts, pages or other records (see Collection)
list A repeatable list of label/value pairs
table A repeatable list with your own columns: 'columns' => ['Image', 'Caption'] gives rows of {image, caption}
page_select, page_selector, page_collection One page or several
post_selector, post_collection, select-post One post or several
category_select, category_id_select A category
model-selector Any Eloquent model
json Raw JSON
video, videoembed A video URL or embed
divider, instructions Layout and help text in the form, no value

Asset Collection

The asset collection input is used to create a sortable collection of assets. type limits it to one kind of asset (image, video, audio or file):

[
    'name' => 'pdf_downloads',
    'controltype' => 'asset_collection',
    'value' => [],
    'type' => 'file',
    'label' => 'Downloads',
],

Asset Selector

The asset selector input is used to select a single asset:

[
    'name' => 'mydownload',
    'controltype' => 'asset_selector',
    'value' => '',
    'type' => 'file',
    'label' => 'My Download',
],

Collection

The collection control lets editors collect an ordered list of items, such as posts from a products, songs or recipes collection. Set its source; the value saved is an array of IDs:

[
    'name' => 'collection',
    'controltype' => 'collection',
    'source' => 'posts:songs',
    'value' => [],
    'label' => 'Collection',
],

The part of source before the colon names a lister class (posts → Posts), and the part after it is passed on as a type (here, the collection slug). The package ships Posts, Pages, Assets and Users listers.

For your own content types, add a lister to app/Domain/Admin/ObjectLists/. A host-app class wins over a package class of the same name. It needs two methods:

public function view($list): \Illuminate\Support\Collection

view() receives the collected IDs and returns the objects shown in the admin list. Each item should have these properties:

  • id
  • title
  • status {optional}
  • thumbnail {optional}
public function options($type = '', $search = '')

options() returns the items editors can pick from, with the same properties, optionally narrowed by the type and a search term.

Select

To create a select (or radiostack), provide options. This can be

A simple list of values; labels are made from the values:

'options' => ['publish', 'pending', 'archive'],

A list of label/value pairs:

'options' => [
    ['value' => 0, 'label' => 'Publish'],
    ['value' => 1, 'label' => 'Pending'],
    ['value' => 2, 'label' => 'Archive'],
],

An array of value => label:

'options' => ['draft' => 'Draft', 'published' => 'Published'],

To treat a simple list as labels and use each item's index as the value, add 'usekey' => 1 (lower case):

'options' => ['publish', 'pending', 'archive'],
'usekey' => 1,

For dynamic lists, give the name of a static method on the component class. It receives the field's type (or an empty string) and returns any of the forms above:

public array $editSetup = [
    [
        'name' => 'resource',
        'controltype' => 'select',
        'options' => 'getOptions',
    ],
];

public static function getOptions($type = '')
{
    return Resource::select(['id as value', 'title as label'])->orderBy('title')->get()->toArray();
}

options can also name a helper class with a collectForSelectOptions($type) method, such as Medialight\Textstem\Domain\Tags\Helpers\ListTags.

Laying out the form

size sets how many of the form's four columns a field spans (default 4). For finer layouts, grid-start / col-start / col-end / grid-end entries group the fields between them into a grid row: grid-start takes 'value' => <columns> and col-start takes 'value' => <span>.
esc