Create Block - Web Designer

<div class="example-block">
    <h2>{{title}}</h2>
    <p>{{content}}</p>
</div>

Use {{propertyName}} placeholders for dynamic content.

.example-block {
    background-color: {{backgroundColor}};
    color: {{textColor}};
    padding: 20px;
    border-radius: 5px;
}

Use {{propertyName}} placeholders for dynamic styles.

// Add your JavaScript here

{
    "properties": {
        "backgroundColor": {
            "type": "color",
            "default": "#ffffff",
            "label": "Background Color"
        },
        "textColor": {
            "type": "color",
            "default": "#000000",
            "label": "Text Color"
        },
        "title": {
            "type": "text",
            "default": "Example Title",
            "label": "Title"
        },
        "content": {
            "type": "textarea",
            "default": "This is an example content block. You can customize it to your needs.",
            "label": "Content"
        }
    }
}

Define customizable properties for this block in JSON format.

Supported types: color, text, textarea, number, select, image

Configuration

Preview configuration controls will appear here based on your configuration schema.