Skip to main content

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',
        },
    ],
};