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