editable_attributes.md

Editable Attributes Reference

All blocks can have editable attributes, each of which store settings that can be changed by an app creator.

Where do I define editable attributes?

Attributes are defined in the data.attributes object found in <your block folder>/index.js:

module.exports = {
    className: 'phonecall',
    template: require('./index.html'),
    data: {
        name: 'Phone Call',
        icon: '/images/blocks_phone.png',
        attributes: {
            number: {
                label: 'Phone #',
                type: 'string',
                value: '+18005555555'
            },
            innerHTML: {
                label: 'Label',
                type: 'string',
                value: 'Send SMS'
            }
        }
    }
};

Properties of editable attributes

Each editable attribute is keyed on its id, and should include three properties:

• label: The label which appears to the app creator in the block editor
• type: The type of editor that should be generated in the block editor
• value: A default/placeholder value that will be used when the block is first added to the app

Label

Labels can be any string, but should be specific and descriptive of the function that the attribute plays in your block. You should define labels in English (US) and add a localization for it if you wish to make it available in other languages.

Type

The default type (if not defined) is string, which will generate a simple input field.

Special types

Some types have special functionality and custom editors:

• innerHTML: The innerHTML of your block container will automatically be set to the value of this attribute.
• color: The style.color of your block container will automatically be set to the value of this attribute. You will also get a special color picker for an editor.

Types which are not special types will get the string editor and have no special automatically functionality; you will have to apply them in your template/js for them to be useful.