Blocks

A block represents the content and settings of a single block in an array of section blocks. The block object is available through the component props in the section . Each block has below listed fields

block.name

Returns the name of the block

block.type

Returns the type of the block. One section can have multiple type of blocks. - types of Input.

block.props

Return the props of the block. These props are similar to those that are present under settings. More info about block props.

Block Props

Block props are used to configure the look and feel of sections blocks. Use settings.blocks[0].props to access the first block inside section template. Each prop is an object with various fields explained below:

block.props.[prop_id].value

Returns the value of the prop id.

block.props.[prop_id].default

Returns the default value of the prop.

block.props.[prop_id].type

Returns the type of the prop. This type is used in the Theme editor to show various input types. Available input types are - text, color, range, checkbox, product, brand, collection, html, image & video.

block.props.[prop_id].label

Returns the label for the prop.

block.props.[prop_id].info

Returns info of the prop. This info is used in the tooltip of the Theme editor.

Example

export const settings = {
    label: 'Swipe Gallery',
    blocks: [
        {
            label: 'Image card',
            type: 'gallery',
            props: [
                {
                    id: 'url',
                    label: 'Banner Image Link',
                    type: 'text',
                    default: '',
                    info: 'Link to the image that should be displayed in banner',
                },
                {
                    id: 'alt',
                    label: 'Alt Text',
                    type: 'text',
                    default: 'Image Alt',
                    info: 'Image Alt',
                },
                {
                    id: 'width',
                    label: 'Image Width',
                    type: 'text',
                    default: '100',
                    info: 'Width of image in %',
                },
            ],
        },
    ],
    props: [
        {
            id: 'title',
            label: 'Title',
            type: 'text',
            default: '',
            info: 'Link to the image that should be displayed in banner',
        },
    ],
};