Theme 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:

Blocks	Description
block.name	Returns the name of the block
block.type	Returns the type of the block. One section can have multiple type of blocks. Refer to Input Types
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	Description
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. It is used in the Theme editor to show various input types, such as 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',
        },
    ],
};